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” ကြီး ဖြစ်သွားတတ်ပါတယ်။
- ❌ ပြင်ရခက်မယ်: တစ်နေရာက ကုဒ်ကို ပြင်လိုက်ရင်၊ မဆိုင်တဲ့ တခြားနေရာတွေမှာပါ Error တွေ လိုက်တက်ကုန်မယ်။
- ❌ နှေးကွေးမယ်: 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 အသေးလေးတွေ ထပ်ခွဲထုတ်ပြီး တည်ဆောက်တဲ့ ပုံစံ