VIPER Architecture in IOS (both UIKit and SwiftUI)

Htet Myat Tun
2 min readJun 15, 2023

--

Mobile App Development လုပ်တဲ့သူတွေကြုံရတဲ့ Architecture တွေထဲမှာ အသုံးများတဲ့ MVC, MVVM တို့အပြင် VIPER ကလည်း Project ပေါ်မူတည်ပြီး ရွေးချယ်ဖို့သင့်တော်တဲ့ Architecture တစ်ခုပဲ။

VIPER ရဲ့ အရှည်ကောက်က
V — View
I — Interactor
P — Presenter
E — Entity
R — Router တို့ဖြစ်ကြတယ်။

ကိုယ်ပိုင်အတွေ့အကြုံအရ MVC နဲ့ရေးထားတဲ့ Project ကြီးတစ်ခုလုံးကို VIPER နဲ့ပြန်ပြောင်းရေးပြီး Refactor လုပ်လိုက်တဲ့အခါမှာ project ကြီးလေ ပြသနာတက်လေဖြစ်တဲ့ MVC ရဲ့ massive view controller လို့ခေါ်တဲ့ View Controller ထဲမှာ code တွေ စုပြုံနေတဲ့ ပြသနာကို ဖြေရှင်းပြီးသားဖြစ်သွားတဲ့အပြင် ဖတ်ရတာလည်း ပိုပြီး ရှင်းရှင်းလင်းလင်းဖြစ်သွားတယ်။

VIPER ဟာ code တွေကို သူ့ရဲ့ သက်ဆိုင်ရာ တာဝန်နဲ့သူခွဲထုတ်ပေးတယ်။ View ကို ထိန်းချုပ်ဖို့ကသပ်သပ်၊ business logic တွေက သပ်သပ်၊ network calls တွေ data storage တွေက သပ်သပ် အစရှိသဖြင့်ပေါ့။

ဒါဆို VIPER ရဲ့ စာလုံးတစ်လုံးချင်းစီက ဘာတာဝန်ကိုယူထားသလဲ ကြည့်ရအောင်။

ပထမအနေနဲ့ View က UIKit နဲ့ရေးတဲ့အခါမှာ storyboard နဲ့ချိတ်ဆက်ပေးတယ်။ UI ကို control လုပ်ချင်တာတွေ၊ UI မှာပေးချင်တဲ့ actions တွေကို ဒီနေရာမှာ သတ်မှတ်တယ်။ ဒါပေမဲ့ အဲဒီထက်ကျော်သွားတဲ့ တာဝန်တွေကိုတော့မယူဘူး။ ဥပမာ button click နှိပ်လိုက်တဲ့အခါမှာ TextField ထဲက Data ကိုစစ်ချင်တယ်ဆိုရင် Button နှိပ်တာရဲ့ IBAction ထဲမှာ presenter ရဲ့ Function တစ်ခုခုကို သွားခေါ်ပေးလိမ့်မယ်။ သူကိုယ်တိုင်ကတော့ ဘယ် Button နှိပ်ရင်ဘယ် Function ခေါ်ပါဆိုတာကိုပဲ ပြောပြပေးလိမ့်မယ်။ ကျန်တဲ့ process လုပ်ဖို့လိုတာတွေကို View ထဲမှာ မလုပ်ဘူး။

Presenter မှာဆိုရင်တော့ အဓိကအလုပ်လုပ်တာ ကွန်ရက်ချိတ်ဆက်ပေးတဲ့ပုံစံမျိုးပဲ။ ပုံအရဆိုရင် Presenter တစ်ခုတည်းကသာ View, Interactor, Router သုံးခုလုံးနဲ့ အပြန်အလှန်ချိတ်ဆက်ထားတယ်။ အဲဒါကြောင့် View ကနေ Data ကိုသယ်ချင်တာ (သို့မဟုတ်) Interactor ကနေ Data ပို့ချင်တာ (သို့မဟုတ်) Route လုပ်ချင်တာ၊ အကုန်လုံးဟာ Presenter ကနေတစ်ဆင့်ဖြတ်သွားရတယ်။

Entity ကတော့ Data ကို ကိုယ်စားပြုတယ်။

Interactor က Entity ထဲက Data နဲ့ပါတ်သတ်ပြီး အလုပ်လုပ်တဲ့အခါမှာ သုံးတယ်။ ဥပမာ Network Calls ခေါ်တာမျိုးဟာ Interactor ထဲမှာ အကျုံးဝင်တယ်။ Interactor က ရလာတဲ့ Data ဟာ View မှာ လိုအပ်ခဲ့ရင် presenter ကနေတစ်ဆင့် ပို့‌ပေးလိုက်တယ်။

Router ကတော့ View တစ်ခုကနေ အခြား View တစ်ခုကို သွားလိုတဲ့အခါမှာ Module အသစ်တစ်ခုဆောက်ပြီး View Controller ပေါ်တင်ပေးတဲ့အလုပ်ကို လုပ်ပေးတယ်။ အလွယ်ပြောရရင် screen တစ်ခုကနေ တစ်ခုပြောင်းတဲ့ အခါမှာ Router ကိုသုံးတယ်ပေါ့။

Image Credit — https://lnkd.in/g343pUcp

VIPER ဟာ တခြား clean architecture တစ်မျိုးဖြစ်တဲ့ VIP လို Uni-directional မဟုတ်ဘဲ Bi-directional ဖြစ်တာကြောင့် တစ်ခုနဲ့တစ်ခုဟာ အပြန်အလှန်သွားလို့ရတယ်။ ဥပမာ View မှာပြဖို့ data တစ်ခု request လုပ်လိုက်တဲ့အခါမှာ View ကနေ Presenter ကို အရင်ဆုံးခေါ်တယ်။ Presenter ကနေမှ တစ်ဆင့် Interactor ဆီရောက်ပြီး Interactor ထဲမှာ တောင်းဆိုထားတဲ့ Data ကို ရအောင်ပြင်ဆင်ပေးတယ်။ Interactor မှာ အလုပ်လုပ်လို့ပြီး သွားတဲ့ အခါမှာ presenter ကို လှမ်းခေါ်ပြီး Data ကို တင်ပေးလိုက်တယ်။ အဲဒီ Presenter ကနေမှ တစ်ဆင့် View ကိုခေါ်ပြီး Data ကို ပြသပေးတယ်။ ပြောချင်တာက Data ဟာ View ကနေ Presenter ဆီ ပေးလိုက်လို့ရသလို၊ presenter ဆီကနေလည်း View ဆီကိုပြန်ပေးလို့ရတယ်။

VIPER နဲ့ပါတ်သတ်ပြီး အဆင်မပြေဖြစ်နိုင်တာတစ်ခုက VIPER ဟာ တခြား Architecture တွေနဲ့ယှဉ်ရင် code ရေးရတာ ပိုများတယ်။ File တွေလည်း ပိုများသွားတယ်။ ဒါပေမဲ့ Project ဟာ ရှုပ်ထွေးပြီး နားလည်ရခက်တဲ့အခါမျိုးမှာ ပိုပြီး ရှင်းလင်းစေချင်ရင်တော့ VIPER ဟာတော်တော်လေးကို အဆင်ပြေတယ်။

အခုလက်ရှိပြောနေတာတွေဟာ VIPER အကြောင်းဆိုပေမဲ့ storyboard နဲ့ရေးတဲ့အကြောင်းကိုပဲ ဦးတည်ပြောထားတာ။ SwiftUI နဲ့ရေးတဲ့အခါမှာတော့ VIPER ဟာ အသင့်တော်ဆုံးရွေးချယ်စရာတစ်ခု ဖြစ်ချင်မှဖြစ်လိမ့်မယ်။ ဒါပေမဲ့ ရေးဖို့လိုအပ်လာပြီဆိုရင်တော့ SwiftUI နဲ့ Combine ကိုသုံးပြီးရေးလို့ အဆင်ပြေတယ်။ တချို့က Reactive အတွက် RxSwift ကိုသုံးကြပေမဲ့ Apple က ထုတ်ထားတဲ့ Combine က သူ့ရဲ့ SwiftUI နဲ့ ပိုပြီး အဆင်ပြေတယ်လို့ထင်တယ်။ Combine နဲ့ရေးတဲ့အခါမှာတော့ Publisher တွေကိုသုံးပြီး အလုပ်လုပ်တာဖြစ်တဲ့အတွက်ကြောင့် Function တွေသုံးပြီး Data ကို View အထိရောက်အောင်ပြန်သယ်ပေးစရာမလိုတော့ဘူး။ Kodeco website မှာ SwiftUI/Combine ကို VIPER Architecture နဲ့ရေးထားတဲ့ ဥပမာက လတ်တလောတွေ့မိသလောက်ထဲမှာတော့ အဆင်အပြေဆုံးပဲ။

Viper ကို UIKit အတွက်ရေးပြထားတဲ့ example တွေက အများကြီးရှိတာကြောင့်မို့လို့ sample code တော့မတင်တော့ဘူး။ VIPER Architecture ဟာ ပထမဆုံးလေ့လာတဲ့အခါမှာ အနည်းငယ် ရှုပ်နေသလို ခံစားရတာကြောင့် မြန်မာလိုဖတ်ရရင် ပိုပြီးနားလည်လွယ်လိမ့်မလားဆိုပြီး တင်လိုက်တာပါ။

--

--

Htet Myat Tun
0 Followers

IOS developer/bookworm with huge reading slump/sold myself to devil, oops.. sorry I meant capitalism/ lover of cinema and dysfunctional, dramatic TV shows