MV* Architecture Patterns (MVC, MVVM, MVP)

ရည်ရွယ်ချက်

Frontend လောကမှာ မကြာခဏ ကြားရတတ်တဲ့ MVC, MVVM, MVP ဆိုတာတွေက ဘာတွေလဲ? ဒါတွေဟာ ကိုယ့်ရဲ့ Code တွေကို ဘယ်လို စနစ်တကျ ခွဲခြားရေးသားမလဲ ဆိုတာကို လမ်းညွှန်ပေးတဲ့ ပုံစံ (Patterns) တွေ ဖြစ်ပါတယ်။

MV* ဆိုတာ ဘာလဲ? (စားသောက်ဆိုင် ဥပမာ)

ဒီ Pattern တွေကို လွယ်လွယ်ကူကူ နားလည်ဖို့ “စားသောက်ဆိုင် တစ်ဆိုင်” ကို မြင်ယောင်ကြည့်ပါ။

1. Model (မီးဖိုချောင်):

   • ဟင်းချက်တဲ့ နေရာဖြစ်ပြီး Application ရဲ့ Data နဲ့ Logic တွေ ရှိတဲ့နေရာပါ။
   • ကြက်သား ရှိသေးလား၊ ဝက်သား ကုန်သွားပြီလား ဆိုတာတွေကို စစ်ဆေးပေးပါတယ်။
   • Customer တွေ (User တွေ) နဲ့ တိုက်ရိုက် ထိတွေ့မှု လုံးဝ မရှိပါဘူး။

2. View (စားပွဲဝိုင်း):

   • Customer တွေ ထိုင်တဲ့ နေရာဖြစ်ပြီး User Interface (UI) ကို ကိုယ်စားပြုပါတယ်။
   • ဟင်းပွဲတွေ (Data တွေ) ကို လာချပြပေးတဲ့ နေရာပါ။
   • ဟင်းကို ဘယ်လိုချက်ရလဲ ဆိုတာ သူ လုံးဝ မသိပါဘူး။ ပြသဖို့ပဲ တာဝန်ယူပါတယ်။

3. Controller / Presenter / ViewModel (စားပွဲထိုး / ဝိတ်တာ):

   • Customer ဆီကနေ Order ယူပါတယ်။ (User တွေရဲ့ Input ကို လက်ခံတယ်)
   • မီးဖိုချောင်ကို သွားပြီး Order တင်ပါတယ်။ (Model ကို Update လုပ်တယ်)
   • ဟင်းရလာတဲ့အခါ Customer ဆီကို လာချပေးပါတယ်။ (View ကို Update လုပ်တယ်)

ဒီ (၃) ယောက် ပူးပေါင်းလုပ်ဆောင်မှသာ စားသောက်ဆိုင် လည်ပတ်သလို၊ Software ရေးတဲ့အခါမှာလည်း ဒီ (၃) ပိုင်း ပေါင်းစပ်မှသာ အလုပ်လုပ်တဲ့ App တစ်ခု ဖြစ်လာတာပါ။

---

၁။ MVC (Model-View-Controller)

ဒါက အရင်ခေတ်က အသုံးအများဆုံး ပုံစံပါ။

• Controller က “သူဌေး (Boss)” လိုပါပဲ။ User ဘာလုပ်လဲဆိုတာကို နားထောင်ပြီး၊ Model ကို သွားခိုင်းပါတယ်။
• View က Model ထဲက Data တွေ ပြောင်းသွားရင် သူ့ဟာသူ အလိုလို လိုက်ပြောင်းလဲဖို့ ကြိုးစားပါတယ်။

၂။ MVP (Model-View-Presenter)

MVC နဲ့ ဆင်တူပေမယ့် Presenter က ပိုပြီး အာဏာရှိပါတယ်။

• View က ဘာမှ မသိပါဘူး။ Presenter ခိုင်းတာကိုပဲ တစ်သဝေမတိမ်း လုပ်ရပါတယ်။
• ဥပမာ - “Button နှိပ်လိုက်ပြီ” လို့ View က သတင်းပို့ရင်၊ Presenter ကနေ “ဒါဆို Loading လေး ပြလိုက်” လို့ ပြန်ခိုင်းပါတယ်။
• View နဲ့ Model က လုံးဝ မတွေ့ရပါဘူး။ Presenter က အလယ်ကနေ ကြားခံ (Middleman) အနေနဲ့ အကုန်လုပ်ပေးတာပါ။

၃။ MVVM (Model-View-ViewModel)

ဒါကတော့ အခုခေတ် Modern Frontend Frameworks တွေဖြစ်တဲ့ Vue, Angular နဲ့ React (တစိတ်တပိုင်း) တွေမှာ သုံးတဲ့ ပုံစံပါ။

• ViewModel က View နဲ့ “ကော်” နဲ့ ကပ်ထားသလိုမျိုး အလိုအလျောက် ချိတ်ဆက်ထားပါတယ် (Data Binding လို့ ခေါ်တယ်)။
• Model ထဲက Data ပြောင်းတာနဲ့၊ View မှာ အလိုလို ချက်ချင်း လိုက်ပြောင်းသွားပါတယ်။
• “စားပွဲထိုး” က Order ယူပြီး မီးဖိုချောင်ကို သွားအော်ပြောနေစရာ မလိုတော့ပါဘူး။ စားပွဲပေါ်က ခလုတ်ကို နှိပ်လိုက်တာနဲ့ မီးဖိုချောင်က ချက်ချင်း သိပြီးသား ဖြစ်သွားတဲ့ သဘောပါ။