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 တစ်ခုတည်းကိုပဲ သုံးနေရတယ်လို့ ခံစားရမှာပါ။

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

The Shell (Container): ဒါက ကုန်တိုက်ရဲ့ အဆောက်အအုံ ကြီးပါ။ သူက Header, Footer နဲ့ Navigation (လမ်းညွှန်) တွေကို အဓိက ကိုင်တွယ်ပါတယ်။
The Micro-Frontends: ဒါကတော့ အထဲမှာ ဖွင့်ထားတဲ့ ဆိုင်ခန်းတွေပါ။ (ဥပမာ - Checkout, Profile, Product List အစရှိသဖြင့်)
Integration: User ဝင်လာတဲ့အခါ Shell ကနေ လိုအပ်တဲ့ Micro-Frontend (ဆိုင်ခန်း) ကို လှမ်းခေါ်ပြီး ပြသပေးတာ ဖြစ်ပါတယ်။

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

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

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