ဒီမနက် အလုပ်လေးနည်းနည်းအားနေတာနဲ့ Laravel 8 ကို catchup လိုက်လုပ်ရင်း Livewire အကြောင်းဖတ်လိုက်မိပါတယ်၊ သူ့ရဲ့ လုပ်ထားတဲ့ creativity features တွေကတော့ စိတ်ဝင်စားဖို့ကောင်းပေမယ့် drawbacks တွေအရမ်းများနေတယ်လို့တော့ ထင်မိတယ်။ ဘာလို့လဲဆိုတာကို ကျနော်ဖတ်ထားသလောက် sharing ပြန်လုပ်လိုက်ပါတယ်။

မဝေဖန်ခင် Livewire အကြောင်းအရင်သိထားရပါမယ်။ ကျနော်ကတော့ အသစ်တစ်ခုကိုကြည့်ပြီဆို သူ့ရဲ့ purpose & definition ကို catchup အရင်လုပ်တယ်၊ ပြီးရင် သူ့ရဲ့ life cycle ကို ကြည့်ပါတယ်။ အဲ့အတိုင်းပဲရေးသွားပါမယ်။

Livewire ရဲ့ အဓိက ရည်ရွယ်ချက်ကတော့ frontend development အပိုင်းမှာ JavaScript ကိုလက်ရှောင်ပြီး Laravel itself ကိုပဲ Livewire နဲ့ extend လုပ်ပြီး အစားထိုးဖန်တီးချင်တာဖြစ်ပါတယ်။ Purpose မှာကိုက နည်းနည်းလေးလွဲနေသလို ခံစားရတယ်။ သူဘယ်လိုအလုပ်လုပ်လဲကြည့်ရအောင်။

Livewire နဲ့ ကျနော်တို့ view တစ်ခုရေးပြီဆိုပါတော့၊ ကျနော့်တို့ 2 ပိုင်းရလာမယ်။ PHP Component Class တစ်ခုရယ်၊ Frontend Component တစ်ခုရယ်(Blade ပေါ့လေ)။ PHP Component Class ထဲမှာ fields & methods တွေကြေညာမယ်၊ methods တွေထဲမှာ frontend view မှာရှိတဲ့ state changes တွေကအစ ရေးထားလို့ရမယ်။ view component ကနေအစောက ရေးထားတဲ့ PHP Component class ထဲက field တွေပြန် access လုပ်မယ်၊ input state changes တွေရှိတာနဲ့ component class ထဲက method တွေကို သွား hit လုပ်မယ်။

ဘယ်လို render လုပ်လဲ၊ state change တွေကို ဘယ်လို ပြန် catch လုပ်လဲဆိုတော့ AJAX နဲ့ပဲပေါ့။ ပထမဦးဆုံး view တစ်ခု load လုပ်လိုက်ပြီဆိုရင် Livewire က သူ့ရဲ့ view component ကို HTML တွေအဖြစ်ပြောင်းချပြီး render လုပ်တယ်။ အဲ့လို render လုပ်တဲ့အချိန်မှာ HTML entities တွေနဲ့အတူ JavaScript Events တွေပါ တစ်ပါတည်း ဖန်တီးသွားလိမ့်မယ်။ ဘယ်က Event တွေလဲဆိုတော့ PHP Component Class ထဲမှာရေးထားတဲ့ methods တွေပဲဖြစ်ပါတယ်။ ဒါကြောင့်မို့လို့ frontend view က တစ်ခုခု changes ဖြစ်ပြီဆိုတာနဲ့ ခုနက render လုပ်ထားတဲ့ JavaScript Events တွေမှတစ်ဆင့် PHP Component class ထဲက methods တွေကို AJAX နဲ့လာ hit လုပ်ပါတယ်။ request ရောက်ပြီဆိုတာနဲ့ PHP ဘက်က သူ့ component class ထဲမှာရှိတဲ့ ပြောင်းစရာရှိတဲ့ properties & fields တွေကို ပြောင်းချတယ်၊ ပြီးတော့ render ဆက်လုပ်ပါတယ်၊ render လုပ်လိုက်တဲ့ result က HTML codes တွေပြန်ထုတ်တယ်၊ အဲ့ဒီ HTML codes တွေကိုပဲ AJAX Response ပြန်လုပ်ပြီး view မှာ display ပြန်လုပ်လိုက်ပါတယ်။ ဒါက Livewire ဘယ်လိုအလုပ်လုပ်သွားလဲဆိုတော့ Overview ပဲဖြစ်ပါတယ်။

နည်းနည်းထပ်ပြီး စပ်စုချင်ရင် source code ထဲဝင်ပြီး သူ့ရဲ့ life cycle အလုပ်လုပ်ပုံကို ထပ်ကြည့်နိုင်ပါတယ်။ Livewire Documentation မှာလည်း သူ့ရဲ့ life cycle hooks doc ရှိတယ်။
https://laravel-livewire.com/docs/2.x/lifecycle-hooks

source code ဝင်ကြည့်လိုက်မယ်ဆို routes list စစ်လိုက်ရင် AJAX Request endpoints တွေ တွေ့ပါလိမ့်မယ်။ အဲ့ကနေတစ်ဆင့် Trace လိုက်လို့ရပါတယ်။ ပထမဦးဆုံး hit လုပ်တာက HttpConnectionHander ဆိုတဲ့ File ဖြစ်ပါတယ်၊ vendor/livewire/src ထဲက controller ထဲမှာရှိပါတယ်။

  • အဲ့ file ထဲမှာ invoke function နဲ့ ConnectionHandler ထဲက handle method ကိုသွား run ပါတယ်။
  • ConnectionHandler ထဲမှာ param အနေနဲ့ payload ဆိုတာယူထားပြီး run မယ့် life cycle methods တွေ တွေ့ပါလိမ့်မယ်။ Methods တွေကို implement လုပ်ထားတာက LifeCycleManager ဆိုတဲ့ file ဖြစ်ပါတယ်။
  • ပထမဆုံးမြင်ရမှာက request တွေကိုအရင်ယူမယ့် SubSequentRequest ဆိုတဲ့ method ကိုတွေ့ရလိမ့်မယ်။ သူက changes တွေမလုပ်ခင်မှာ ပို့လိုက်တဲ့ payload request & instance တွေကိုယူမှာဖြစ်ပါတယ်။
  • နောက်တစ်ဆင့်အနေနဲ့ request ရလာတဲ့အရာကို hydrate(changes) လုပ်ပေးမယ့် method ရှိပါမယ်။ hydrate လုပ်လိုက်ပြီးဆို state changes လုပ်ပြီးသား results တွေပြန်ရရှိမှာဖြစ်ပါတယ်။
  • နောက်တစ်ခုက renderToView ဆိုတာတွေ့ပါမယ်။ သူကတော့ရှင်းတယ် view ကိုပြန် render လုပ်ဖို့အတွက် လှမ်းယူထားတာဖြစ်ပါတယ်။
  • response ပြန်မလုပ်ခင် dehydrate ပြန်လုပ်ပါတယ်။
  • dehydrate လုပ်ပြီးတော့ response ပြန်လုပ်ပါတယ်။ response ထဲမှာ state changes အတွက် effect ဖြစ်ပြီးသွား new data တွေနဲ့ HTML codes တွေပါလာပါတယ်။
  • နောက်ဆုံးမှာ frontend component က နဂိုရှိပြီးသား DOM နဲ့ ခုနက reponse ပြန်လာတဲ့ HTML DOM ကို differentiate လုပ်တယ်၊ dom update လုပ်စရာရှိရင်လုပ်ပြီးတော့ render လုပ်ချလိုက်ပါတယ်။

Lifecycle hooks တွေကိုဒီထက် ပိုသိချင်ရင်တော့ code တွေသာ ဝင်ဖတ်ကြည့်။
https://github.com/livewire/livewire/blob/master/src/LifecycleManager.php

လေဖောတာများပြီဆိုတော့ ပြန်သုံးသပ်ရရင် JS မသုံးချင်တဲ့သူတွေအတွက် တော်တော်အဆင်ပြေမယ်။ ပုံမှန် SPA တစ်ခုကို JS မသုံးဘဲနဲ့ Laravel + Livewire နဲ့တင် အဆင်ပြေသွားနိုင်တယ်။

ကျနော့်သဘောကိုပြောရမယ်ဆို Livewire ကိုကြိုက်တာထက် drawbacks များတယ်လို့ထင်မိတယ်။ ဒါပေမယ့် small to medium size လောက်မှာပဲ သုံးမယ်ဆို အဆင်ပြေနိုင်တယ်။ Large application တွေထိသွားမယ်ဆို livewire ရဲ့ drawbacks တွေကြောင့် အခက်အခဲတော်တော်ရှိလာနိုင်ပါတယ်။

ဘယ်လို drawbacks တွေရှိတာလဲဆိုတော့

  • Code တွေက decouple တော့ဖြစ်သွားတာမှန်ပေမယ့် page တစ်ခုလုံးရဲ့ state changes event တွေစုပြုံနေတာပဲ၊ မြင်အောင် ပြောရရင် PHP Component Class တစ်ခုထဲမှာတင် Logic code အကုန်စုနေတယ်။ state control logic , data changes & presentation logic, စတာတွေရောထွေးနေပါတယ်။ business logic တွေပါ ထပ်ပါလာနိုင်ပါတယ်။ အဲ့ဒီ problem က application medium size လောက်ရောက်တာနဲ့တင် တော်တော်ဗွက်ထနေလောက်ပါပြီ။
  • အဲ့ဒါကတစ်ကြောင်း နောက်တစ်ခုက class တစ်ခုက responsibility တစ်ခုထဲတင် မဟုတ်တော့တဲ့အတွက် solid ထဲက Principle တစ်ခုက သိသိသာသာ ကျိုးနေပါတယ်။
  • အရင်တုန်းက workflow က API ကသက်သက်တစ်ယောက် Frontend ကသက်သက်တစ်ယောက်ဆို အခု တစ်ယောက်တည်း အကုန်ရေးရမလိုဖြစ်သွားပါမယ်။
  • Livewire က frontend component တစ်ခုခုလုပ်လိုက်တိုင်းမှာ တောက်လျှောက် AJAX ထိုင်လွှတ်နေမှာပါ။ Request လွှတ်တာ သက်သာအောင် စီမံလို့ရမယ့် options တွေထည့်ထားပေမယ့်လည်း များနေဦးမှာပါပဲ။ပြောချင်တာက AJAX Request များပါလိမ့်မယ်။
  • Virtual DOM မဟုတ်တာကလဲ react တို့ vue တို့ကို မယှဉ်နိုင်တဲ့ အဓိက အချက်ဖြစ်ပါတယ်၊ (ယှဉ်စရာတော့လည်း မလိုပါဘူး အသိသာကြီးဆိုတော့)။ livewire က HTML တစ်ခုလုံး response လုပ်ပြီး render ပြန်လုပ်တဲ့အတွက် performance ပိုင်းမှာ အားနည်းချက်ရှိနိုင်ပါတယ်။
  • အဓိက အနေနဲ့ Maintainability ကတော့ သိသိသာသာခက်လာပါလိမ့်မယ်၊ မယုံရင် small SPA application တစ်ခုလောက်ပဲ ရေးကြည့်ပါ၊ component class သုံးလေးခုလောက်နဲ့ state changes events တွေ handle လုပ်ကြည့်ပါ။ ဒါဆို application ဘယ်လောက် အတိုင်းအတာအထိ သွားမယ်ဆို ဘယ်လို handling operation ခက်လာမယ်ဆိုတာ ခန့်မှန်းမိလာပါလိမ့်မယ်။

ဒါ ကျနော့်ရဲ့ personal အမြင်ပါ။ ဖတ်ပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။