Modern ခေတ် Declarative UI တွေရဲ့ အစ

document.createElement("h1");

Developer တိုင်း ဒီ code တကြောင်းတော့ career တကွေ့မှာ ရေးဖူးခဲ့ကြမှာပါ။ မရေးဖူးဘူးဆိုရင်လည်း ကံကောင်းတယ်ပြောရမလား ကံဆိုးတယ်ပဲ ပြောရမလား မသိပါဘူး။ အပေါ်က code က Browser တွေမှာ DOM manipulation လုပ်ဖို့ သုံးကြတဲ့ DOM API အုပ်စုထဲက function တခုပါ။ Browser ရဲ့ အခြေခံ feature ၃ ခုအကြောင်း ပြောတုန်းက HTML နဲ့ CSS file တွေကိုဖတ်ပြီး User Interface ဆောက်ပေးနိုင်တာကို feature တခုအဖြစ် ထည့်ပြောခဲ့သေးတယ်။ မှတ်မိမယ်လို့ ထင်ပါတယ်။

အကြမ်းဖျင်းပြောရရင် Browser က HTML document ထဲပါတဲ့ HTML element တွေကို DOM ပြောင်းပြီး UI ဆောက်ပါတယ်။ DOM API တွေက ရှုပ်ထွေးတဲ့ Web Application တွေ ခေတ်စားမလာခင် ဟိုးကာလတွေကတည်းက သတ်မှတ်ခဲ့ကြတာမို့ ဒီနေ့လို dynamic web content တွေရဲ့ era မှာ DOM API တွေကိုသုံးပြီး web page တွေရဲ့ ဆောက်ရတာက အတော့်ကို လက်ဝင်လာပါတယ်။

ဒီပြဿနာကို ဖြေရှင်းဖို့ library တွေ ထွက်လာကြတယ်။ အဲထဲမှာ အကောင်းဆုံးလို့ ကျွန်တော် bias ပေးချင်တဲ့ library ကတော့ React ပါပဲ။ frontend framework တွေမှာ React ရဲ့ minimalistic mindset ကို အတော်သဘောကျမိတယ်။ React ရဲ့ ပထမဆုံး ခြေလှမ်းက Developer တွေကို DOM API တွေနဲ့ signature သိပ်မကွဲတဲ့ React API တွေနဲ့ စမိတ်ဆက်ပေးဖို့ပါပဲ။

React.createElement("h2", null, "Hello");

ဒီ API က ရိုးရှင်းသလောက် structure ကိုပါ သတ်မှတ်ပေးခဲ့တယ်။ function ရဲ့ ပထမ param က element ရဲ့ type နဲ့ ဒုတိယ param က element ရဲ့ attribute တွေကို သတ်မှတ်ပြီး အဲဒီရဲ့နောက်ထပ် param တွေက element ရဲ့ childern တွေကို ညွှန်းတယ်။ ဒါပေမယ့် react က DOM API ရဲ့ တိုက်ရိုက် အစားထိုးစရာတော့ မဟုတ်ပါဘူး။ React.createElement က လက်တွေ့မှာလည်း DOM element ဆောက်ဖို့ လိုအပ်တဲ့ info တွေပါတဲ့ JavaScript Object တခုကိုပဲ ပြန်ပေးပါတယ်။ အဲဒီ JS Object ကို consume လုပ်ပြီး DOM API ကို ကိုယ်တိုင်ပြန်ခေါ်သုံးဖို့ လိုပါတယ်။

အဲဒီအတွက်ကို react နဲ့အတူ မိတ်ဆက်လာခဲ့တာက react-dom library ပါ။ ဒီနေ့ခေတ် iOS, tvOS, watchOS တို့ရဲ့ SwiftUI, Android ရဲ့ Jetpack Compose တွေကို လမ်းခင်းပေးခဲ့တဲ့ philosophy လို့လည်း ဆိုနိုင်တယ်။ react-dom library က အပေါ်မှာပြောခဲ့တဲ့ react element တွေကို consume လုပ်ပြီး DOM API ကို efficient အဖြစ်ဆုံးနည်းနဲ့ ကိုယ်စားခေါ်ပေးဖို့ တာဝန်ယူတယ်။

ဒါက modern ခေတ် Declarative UI တွေရဲ့ အစပါပဲ။ ဒါကိုတော့ ရှေ့မှာရေးခဲ့ပြီးတာတွေမို့ အသေးစိတ် မပြောတော့ပါဘူး။

react-dom က render လုပ်မယ့် element တွေကို အရင်ဆုံး memory ပေါ် Virtual DOM ဆောက်ပါတယ်။ အဲဒီ Virtual DOM နဲ့ လက်ရှိ DOM tree ကြားက ကွာခြားချက်ကိုရှာပြီး efficient အဖြစ်နိုင်ဆုံး algorithmic rendering ကိုလုပ်ပေးတယ်။ ဆယ်စုနှစ်တခုကျော်ကာလမှာ React က component တွေကို အလွယ်တကူ တည်ဆောက်နိုင်ဖို့ high-level construct တွေ ထပ်ဖြည့်ထည့်လာခဲ့တယ်။ Component နဲ့ Function component တွေက component ရေးရတာ ပိုလွယ်လာစေတယ်။ React Team က ထုတ်ခဲ့တဲ့ အကောင်းဆုံးတွေထဲကတခုကတော့ JSX ပါပဲ။

JSX ဆိုတာ XML ကိုအခြေခံတဲ့ JavaScript extension တမျိုးပါ။ HTML နဲ့လည်း အတော်လေး ဆင်တူတဲ့ စတိုင်ဖြစ်လို့ Developer တွေအတွက် UI code တွေရေးရတာ အများကြီး အဆင်ပြေစေတယ်။ ဒါပေမယ့် Browser တွေကို JSX တိုက်ရိုက် နားလည်အောင် support မလုပ်ထားတဲ့အတွက် ကြားမှာ compilation တဆင့်တော့ လိုအပ်လိမ့်မယ်။

အဲဒီအတွက်ကိုလည်း Vite, Webpack စတာတွေကိုသုံးပြီး transpiling (Browser တွေက အပြည့်အဝနားလည်တဲ့ JS syntax ကိုချိန်းတာ), bundling လုပ်တာ၊ optimization နဲ့တခြား feature တွေ အများကြီးကို လုပ်သွားလို့ရတယ်။

React က Web Application တခုကို ဘယ်လိုရေးရမယ်လို့ အတင်းအကြပ် မပြောသလို အတိအကျ လိုက်နာဖို့လိုတဲ့ စည်းမျဥ်းနဲ့ pattern တွေကိုလည်း မချမှတ်ပါဘူး။ frontend ရဲ့ အခြေခံအကျဆုံး ပြဿနာကိုပဲ အကောင်းဆုံး ဖြေရှင်းပေးနိုင်ဖို့ ကြိုးစားခဲ့ပြီး ဒီအချက်ကပဲ React ကို Pinterest, Instagram, Netflix, Facebook, Dropbox နဲ့တခြားကုမ္ပဏီကြီးတွေရဲ့ Web Application တွေကို မောင်းနှင်နေတဲ့ ecosystem ဖြစ်လာစေခဲ့ပါတယ်။