Frontend Architecture Patterns မိတ်ဆက်
Frontend Architecture ဆိုတာ ဘာလဲ?
Section titled “Frontend Architecture ဆိုတာ ဘာလဲ?”အိမ်တစ်လုံး ဆောက်တော့မယ် ဆိုပါစို့။ အုတ်တွေ၊ သဲတွေ၊ ဘိလပ်မြေတွေ ရှိရုံနဲ့ မရပါဘူး။ “အိမ်ပုံစံ (Blueprint)” လိုပါတယ်။
- ဘယ်နားမှာ အိပ်ခန်းထားမလဲ?
- မီးကြိုးတွေ ဘယ်လို သွယ်မလဲ?
- ရေပိုက်တွေ ဘယ်လို ဆက်မလဲ?
ဒါတွေ ကြိုမစဉ်းစားဘဲ ဆောက်လိုက်ရင် နေလို့ရတဲ့ အိမ်တစ်လုံး ဖြစ်လာနိုင်ပေမယ့်၊ ရေရှည်မှာ ပြင်ရခက်၊ တိုးချဲ့ရခက်တဲ့ အိမ်ဖြစ်သွားပါလိမ့်မယ်။
Frontend Architecture ဆိုတာလည်း ဒီသဘောတရားပါပဲ။ Project တစ်ခု မစခင်မှာ Folder တွေ ဘယ်လို ဖွဲ့စည်းမလဲ၊ Data တွေ ဘယ်လို စီးဆင်းမလဲ၊ Component တွေ ဘယ်လို ချိတ်ဆက်မလဲ ဆိုတာကို ကြိုတင် စီမံထားခြင်း ဖြစ်ပါတယ်။
Architecture မကောင်းရင် ဘာဖြစ်မလဲ? (The Spaghetti Code)
Section titled “Architecture မကောင်းရင် ဘာဖြစ်မလဲ? (The Spaghetti Code)”Architecture မရှိဘဲ ရေးထားတဲ့ Project ဟာ “Spaghetti Code” နဲ့ တူပါတယ်။
- ❌ ပြင်ရခက်မယ်: တစ်နေရာ ပြင်လိုက်ရင် တခြားနေရာတွေပါ လိုက်ပျက်ကုန်မယ်။
- ❌ နှေးကွေးမယ်: Feature အသစ် ထည့်ချင်ရင် အချိန်အကြာကြီး ပေးရမယ်။
- ❌ ပူးပေါင်းရခက်မယ်: Team နဲ့ လုပ်တဲ့အခါ သူရေးတာ ကိုယ်နားမလည်၊ ကိုယ်ရေးတာ သူနားမလည် ဖြစ်မယ်။
Architecture ကောင်းရင် ဘာဖြစ်မလဲ?
Section titled “Architecture ကောင်းရင် ဘာဖြစ်မလဲ?”- ✅ စနစ်ကျမယ်: ဘယ်ဖိုင်က ဘယ်မှာရှိလဲ မျက်စိမှိတ် ရှာလို့ရမယ်။
- ✅ မြန်ဆန်မယ်: Feature အသစ်တွေ ဒိုင်းဒိုင်း ထည့်နိုင်မယ်။
- ✅ Scalable ဖြစ်မယ်: User တွေ များလာလည်း၊ Feature တွေ များလာလည်း Project က ရှုပ်မသွားဘူး။
ဒီ Course မှာ ဘာတွေ လေ့လာရမလဲ?
Section titled “ဒီ Course မှာ ဘာတွေ လေ့လာရမလဲ?”ကျွန်တော်တို့ အဓိက Architecture Pattern ကြီး (၄) ခုကို လေ့လာသွားပါမယ်။
- Monolithic Architecture: အရာအားလုံး တစ်စုတစ်စည်းတည်း ရှိနေတဲ့ ပုံစံ (အခြေခံ အကျဆုံး)
- Component-Based Architecture: LEGO တုံးလေးတွေလို ဆက်ပြီး တည်ဆောက်တဲ့ ပုံစံ (React, Vue တို့ရဲ့ အခြေခံ)
- Modular Architecture: Feature အလိုက် အခန်းကန့်ပြီး ဖွဲ့စည်းတဲ့ ပုံစံ
- Micro-Frontends: Application အကြီးကြီးကို App အသေးလေးတွေ ခွဲထုတ်ပြီး တည်ဆောက်တဲ့ ပုံစံ