Micro-Frontend Architecture

ရည်ရွယ်ချက်

Application အကြီးကြီးတွေကို Team အများကြီးနဲ့ ဝိုင်းရေးတဲ့အခါ၊ တစ်ယောက်ရေးတာ တစ်ယောက်စောင့်နေရတာမျိုး မဖြစ်ရအောင် Micro-Frontend Architecture ကို အသုံးပြုကြပါတယ်။

Micro-Frontend ဆိုတာ ဘာလဲ?

Micro-Frontend ဆိုတာ “Shopping Mall (ကုန်တိုက်ကြီး)” တစ်ခုနဲ့ တူပါတယ်။ ကုန်တိုက်ကြီး (Shell App) တစ်ခုထဲမှာ -

• 🍔 Food Court (ဆိုင်တစ်ဆိုင်)
• 🎬 Cinema (ဆိုင်တစ်ဆိုင်)
• 👗 Clothing Store (ဆိုင်တစ်ဆိုင်)

ဒီဆိုင်တွေ အားလုံးဟာ ကုန်တိုက်ကြီး တစ်ခုတည်း အောက်မှာ ရှိနေပေမယ့်၊ ဆိုင်တစ်ဆိုင်ချင်းစီမှာ ကိုယ်ပိုင် မန်နေဂျာ၊ ကိုယ်ပိုင် ဝန်ထမ်း၊ ကိုယ်ပိုင် စည်းမျဉ်းတွေ ရှိကြပါတယ်။ Food Court ပိတ်ထားလို့ Cinema ပါ လိုက်ပိတ်စရာ မလိုပါဘူး။

Software မှာလည်း ဒီလိုပါပဲ။

• Team A က Checkout အပိုင်းကို React နဲ့ ရေးမယ်။
• Team B က User Profile အပိုင်းကို Vue နဲ့ ရေးမယ်။
• Team C က Product List အပိုင်းကို Angular နဲ့ ရေးမယ်။

နောက်ဆုံးကျမှ ဒီ (၃) ခုလုံးကို Web Page တစ်ခုတည်းမှာ ပေါင်းစည်းပြီး ပြလိုက်တာပါ။ User အနေနဲ့ကတော့ App တစ်ခုတည်းလို့ပဲ မြင်ရမှာပါ။

ဘယ်လို အလုပ်လုပ်သလဲ?

1. The Shell (Container): ဒါက ကုန်တိုက်ရဲ့ အဆောက်အဦးပါ။ Header, Footer နဲ့ Navigation ကို ကိုင်တွယ်ပါတယ်။
2. The Micro-Frontends: ဒါက ဆိုင်ခန်းတွေပါ။ (Checkout, Profile, Product List)
3. Integration: Shell ကနေ လိုအပ်တဲ့ Micro-Frontend ကို လှမ်းခေါ်ပြီး ပြပေးတာပါ။

ဘယ်အချိန်မှာ သုံးသင့်လဲ?

• 🏢 Enterprise Level: ကုမ္ပဏီ အရမ်းကြီးပြီး Developer ရာချီ ရှိတဲ့အခါ။
• 🚀 Independent Deployment: Team တစ်ခုက တခြား Team ကို စောင့်စရာ မလိုဘဲ ကိုယ့်အပိုင်း ကိုယ် Deploy လုပ်ချင်တဲ့အခါ။
• 🛠 Legacy Migration: Code အဟောင်းကြီးကို တဖြည်းဖြည်းချင်း အသစ်ပြောင်းချင်တဲ့အခါ (ဥပမာ - jQuery ကနေ React ကို တစ်စစီ ပြောင်းတာမျိုး)။

သတိပြုရန်: Project သေးရင် Micro-Frontend မသုံးပါနဲ့။ “ယင်ကောင်ကို တူနဲ့ ထု” သလို ဖြစ်နေပါလိမ့်မယ်။ Complexity အရမ်းများပါတယ်။