React Native Architecture အကြောင်း

React Native ကို၂၀၁၅ တုန်းက အောက်ပါ architecture idea နဲ့ အစပြုခဲ့ပါတယ်။

• React ဆိုတာက UI တည်ဆောက်ဖို့အတွက် library ဖြစ်ပါတယ်။ 
• Metro ဆိုတာက JavaScript နဲ့ရေးထားတဲ့ ဖိုင်တွေ (JavaScript modules) မှန်သမျှကို စုပေါင်းပြီး ဖိုင် တစ်ခုဖြစ်အောင် စုပေါင်းပေးတဲ့ bundler ဖြစ်ပါတယ်။ သူကနေ JS Bundle တစ်ခု ထွက်လာပါတယ်။ 
• JS Thread မှာတော့ React Native ရဲ့ JavaScript Engine ဖြစ်တဲ့ JavaScriptCore က JS Bundle ကို run လိုက်ပါတယ်။ Run လိုက်တဲ့အခါမှာ JSON message တွေ ပို့ပေးပါတယ်။
• Bridge ဆိုတာက C++ နဲ့ ရေးထားတဲ့ module တစ်ခုဖြစ်ပါတယ်။ async quene ကို အခြေခံပြီး တည်ဆောက်ထားတာဖြစ်ပါတယ်။ သူ့က JS Thread ကလာတဲ့ JSON message တွေကို နားထောင်တာ၊ ပြန်ပို့တာရယ်၊ UI Thread (a.k.a. Main Thread) ကလာတဲ့ JSON message တွေကို နားထောင်တာ၊ ပြန်ပို့တာတွေလုပ်ပေးပါတယ်။ Two way communication ဖြစ်ပါတယ်။ 
• Native UI မှာ native platform က UI widget တွေ ပါပါတယ်။ Native Modules မှာတော့ native platform က API တွေ ပါပါတယ်။​ Bridge ကလာတဲ့ JSON message တွေအခြေခံပြီး C++ နဲ့ ရေးထားတဲ့ Yoga Layout Engine က Screen ပေါ်မှာ ပုံဖော်ပေးပါတယ်။

Thread (၃)ခု ရှိနေတာကို တွေ့ရပါလိမ့်မယ်။ အကယ်၍ UI Thread ကသာ နဲ့ JS Thread ကို မခွဲခြားထားဘူးဆိုရင်တော့ UI မှာ freeze နိုင်တဲ့ အခြေအနေရှိပါတယ်။ Yoga Layout Engine အတွက် Shadow Thread လုပ်ထားရတဲ့ အကြောင်းရင်းက React ရဲ့ Reconliation (diffing) algorithm သည် နောက်ခံက Virtual DOM ကို Real DOM ပြောင်းဖို့အတွက် သီးသန့် Thread လေး ထပ်ထားရပါတယ်။ မဟုတ်ရင် Logic Operation တွေလုပ်နေတဲ့ JS Thread မှာ freeze သွားနိုင်ပါတယ်။​

ဒီ architecture ရဲ့ အားနည်းချက်မှာတော့ bridge ကအဓိက တရားခံဖြစ်ပါတယ်။ image base64 ဖြင့် encode လုပ်ထားတဲ့ data chunk လိုမျိုးနေရာမှာကျတော့ thread တစ်ခုနဲ့ တစ်ခုမှာ နှေးတဲ့ ပြဿနာရှိပါတယ်။ Bridge ရဲ့ two way communication မှာလည်း လမ်းကြောင်းတစ်ခုနဲ့ တစ်ခု အချိတ်အဆက်မရှိနေပါဘူး။ အဲတာကြောင့် Native နဲ့ JS ကြားမှာ Congestion တွေ ဖြစ်လာပါတယ်။ ListView လို UI ကို အလျင်အမြန်ဆုံး scrolling speed အမြန်ဆုံး လုပ်ကြည့်မယ်ဆိုရင် UI Thread က မြန်နေပြီး JS Thread မှာတော့ အတော်လေး နှေးနေတာကို တွေ့ရပါတယ်။

အဲတာကြောင့် architecture အသစ်မှာ Bridge ကို အစားထိုးဖို့ ကြိုးစားထားပါတယ်။

Bridge နေရာမှာ JavaScript Interface (JSI) ကို အစားထိုးလိုက်ပါတယ်။ 

Architecture အသစ်မှာတော့ 

• ကိုယ်ရေးလိုက်တဲ့ JavaScript code တွေကို Metro က JS Bundle ဖိုင် တစ်ခု ထုတ်ပေးလိုက်တယ်။ အဲတာအပြင် Codegen က ကိုယ်ရေးလိုက်တဲ့ JavaScript code ကို Typed System ပြောင်းပြီးတော့ JSI ရဲ့ C++ Hosted Object မှာ Reference လုပ်ထားနိုင်ပါတယ်။ တံတား (၃) ခု ဖြစ်သွားပါတယ်။
• JSI ဆိုတာက JavaScript ရယ် C++ ရယ် နှစ်ခုကို စကားပြောလို့ရအောင် အဓိပ္ပာယ်ပြန်ပေးနိုင်တဲ့ RPC တစ်မျိုးဖြစ်ပါတယ်။ Typed JavaScript သည် C++ Host Object မှာ reference အဖြစ် နေရာယူထားနိုင်ပါတယ်။ Native Modules က API တွေကို JSI ကနေ တစ်ဆင့် တိုက်ရိုက် JavaScript နဲ့ ခေါ်ယူ အသုံးပြုလိုရသွားပါတယ်။ Android ရဲ့ တကယ့် native code တွေကို C/C++ နဲ့ ရေးသားထားဖြစ်ပြီး အဲဒီ native code ကနေ Kotlin / Java အဖြစ် Java Native Interface နဲ့ ပြန်လည် ချိတ်ဆက်ထားတာဖြစ်ပါတယ်။​ Android လို platform အတွက်ဆိုရင် ကျွန်တော်တို့ JSI ကနေတစ်ဆင့် တိုက်ရိုက် android native code ကို ခေါ်ယူလို့ရမှာ ဖြစ်ပါတယ်။ iOS မှာတော့ by default C++ ကို ထောက်ပံပေးပြီးသား ဖြစ်တဲ့အတွက် JSI ကနေ တစ်ဆင့် တိုက်ရိုက် ခေါ်ယူနိုင်မှာ ဖြစ်ပါတယ်။ 
• JSI ကြောင့် UI Thread နဲ့ JS Thread မှာ ဖြစ်နေတဲ့ communication congestion ပြဿနာလည်း ကင်းသွားပါတယ်။ JSI အတွက် သီးသန့် communication လိုင်းကြောင်း တစ်ခုပိုလာတာကို ပုံမှာ တွေ့ရမှာ ဖြစ်ပါတယ်။ 

JSI မှာ Fabric နဲ့ TurboModules တွေ ပါဝင်ပါတယ်။ Fabric က UI Manager ဖြစ်ပြီး TurboModules ကတော့ native ဘက်နဲ့ typed JavaScript နဲ့ ဆက်သွယ်ပေးတဲ့သူ ဖြစ်ပါတယ်။

ဒီ Architecture အသစ်ကိုတော့ 2025 မှာ ပြီးသတ်နိုင်မယ်လို ခန့်မှန်းထားပါတယ်။

အသေးစိတ်ဖတ်ရန်

• https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c
• https://formidable.com/blog/2019/fabric-turbomodules-part-1/
• https://www.youtube.com/watch?v=7gm0owyO8HU

(အမှားပါသော် ပြင်ပြုအကြံပေးလိုပါသည်)