Popular Mobile Hybrid Apps

Hybrid application ဆိုတာ ဘာလဲ

Hybrid applications တွေအကြောင်းမပြောခင် လက်ရှိလူသိများတဲ့ Front-end application (mobile) အကြောင်းနည်းနည်း ပြောချင်ပါတယ်။ လက်ရှိ application development​ တွေထဲမှာ ရှိတာတွေကတော့ Native app, Web app, Hybrid app ဆိုပြီးတော့ရှိကြပါတယ်။

Native app ဆိုတာက Platform-specific ဖြစ်တဲ့ Programming language မျိုးနဲ့ ရေးရတာကိုပြောတာပါ။ ဥပမာ - Android apps တွေကို Java language (အခု Kotlin ပေါ့) နဲ့ ရေးရပြီး iOS app တွေကိုတော့ Apple ရဲ့ official language တခုဖြစ်တဲ့ Swift language နဲ့ ရေးရတာမျိုးကို ပြောတာပါ။ Native app တွေကတော့ Hybrid app ထက် user experience နဲ့ performance ပိုကောင်းတာအမှန်ပါ။ ဒါပေမယ့် Platform တစ်ခုချင်းစီ ခွဲရေးရတဲ့အတွက်ကြောင့် အချိန်နဲ့ resource ပိုရင်းရပြီး ငွေကြေးအမြောက်အများလည်း ပိုကုန်ကျစေမှာဖြစ်ပါတယ်။

Web app ကတော့ ရှင်းပါတယ်။ ကျွန်တော်တို့ ကွန်ပျူတာတက္ကသိုလ် စတတ်ကတည်းကသင်ရတဲ့ HTML, CSS, JavaScript တို့ နဲ့ ရေးတာကို ပြောတာပါ( အဲ့တုန်းကတော့ jQuery နည်းနည်းသိတဲ့သူက ဆရာကြီးလုပ်တာပေါ့နော်🤓🤓)။ (ခုဆိုရင်တော့ Development time အရမ်းမြန်ပြီး Performance လည်း ပိုကောင်းတဲ့ Front-end frameworks တွေ ထွက်နေပါပြီ 😋)။ Web app ဆိုတော့ သိတဲ့ အတိုင်း browser ပေါ်မှာပဲ သုံးပေါ့။ Native App developer တွေလို App stores တွေပေါ်လည်းတင်ပြီးကြွားလို့မရ ၊ Desktop ပေါ်လည်း icon လေးတွေလည်းတင်ထားလို့မရနဲ့ပေါ့။

ကျွန်တော်အခုပြောမယ့် Hybrid app ကတော့ Write Once, Run Anywhere ပါ။ အလွယ်ပြောရရင်တော့ Project တစ်ခုတည်းရေးပြီး iOS, Android, Windows စတဲ့ platform အမျိုးမျိုးအတွက် application ထုတ်ပေးနိုင်ပါတယ်။

ပုံမှန်အားဖြင့် Hybrid app ကို HTML, CSS, Javascript တို့နဲ့ ရေးကြရပါတယ်။ ဒါပေမဲ့ အဲ့ ၃ ခု နဲ့ပဲဆိုရင်တော့ Native feature တွေဖြစ်တဲ့ Camera ၊ Bluetooth နဲ့ အခြား Native feature တွေကိုယူသုံးလို့မရပါဘူး 🤔🤔။

အဲ့ဒါကြောင့် Cordova လို Native (mobile) plugin တွေထုတ်ပေးတဲ့ framework မျိုးနဲ့ တွဲသုံးရမှာပါ။ ကောင်းတဲ့အချက်တစ်ခုက Embedded browser ပုံစံမျိုး run တဲ့အတွက်ကြောင့် dynamic content တွေကို online က ဆွဲယူတဲ့အခါမှာလည်း Native လောက် complex မဖြစ်စေပဲ လွယ်လွယ်ကူကူ ဆွဲယူနိုင်မှာပဲဖြစ်ပါတယ် 👌👌။

လက်ရှိအခြေအနေအရ Native app တွေထက် hybrid က ပိုများလာတာ အမှန်ပါ။ Online banking app တွေတောင် native နဲ့ မရေးပဲ Hybrid တွေသုံးပြီး ရေးလာကြပါပြီ။ တကယ့်ပြဿနာတစ်ခုရှိတယ် အဲ့ဒါက Native browser ပေါ် မှီခိုတဲ့အတွက်ကြောင့် Native app လောက် Performance speed ကတော့ မြန်မှာ မဟုတ်ပါဘူး။ မမြန်ဘူးဆိုတာကလည်း အရမ်းကြီးသိသိသာသာတော့ မဟုတ်ပါဘူး၊ ဒါပေမယ့် အခုဆိုရင် Hybrid development မှာ ပိုကောင်းတဲ့ Frameworks တွေထွက်လာပါပြီ။ Web components ချည်းပဲ သုံးရတာ မဟုတ်ပဲ Native UI components တွေနဲ့ တွဲသုံးတဲ့ Super Frameworks တွေ ထွက်လာပါပြီ၊ ဒါကြောင့်မို့ Modern Hybrid apps တွေက Native apps တွေ နဲ့ ယှဥ်နိုင်တဲ့ အထိရောက်လာကြပါပြီ။ တခုတော့ ကျွန်တော် ကြိုပြောချင်တယ်ဗျ ၊ အခုအဓိက​ပြောမှာက Hybrid app အကြောင်းပါ။ Hybrid app ကို Native app ထက်လည်း ပိုကောင်းတယ်လို့ ပြောတာမျိူးလည်းမဟုတ်ပါ၊

Organization နဲ့ Market အပေါ်မူတည်ပြီး သူ့နေရာနဲ့ သူ အသုံးများကြပါတယ်။

အဲ့တော့ Hybrid app ရဲ့ ကောင်းကြောင်းလေးတွေ ပြောကြတာပေါ့

Native app နဲ့ Hybrid app ဘာကွာလဲဆိုတော့

Cost

ပထမဆုံး အနေနဲ့က cost ပါ။ Hybrid app တွေက Platform မျိုးစုံအတွက် Single code base ပဲ အသုံးပြုရမှာပါ။ Single Code Base ဆိုတာက အလွယ်ပြောရရင် Project တစ်ခုတည်းရေးပြီး Android နဲ့ iOS apps တွေထုတ်ပေးတာမျိုးကိုပြောတာပါ။ Platform တစ်ခုချင်းစီအတွက် Codes တွေလိုက်ရေးနေစရာမလိုပါဘူး။ Codebase တစ်ခုတည်းရှိတဲ့အတွက် Maintain လုပ်ရတာသက်သာမယ်၊ Updates ပြဿနာတွေအတွက်စိတ်မပူရဘူး၊ အချိန်နဲ့ ကုန်ကျစရိတ်ကိုလဲ လျော့ချနိုင်ပြီး ဈေးကွက်ထဲ စောစောရောက်နိင်မှာပဲဖြစ်တယ်။

Time

ဒုတိယကတော့ Time ပါ။ Web technologies ဖြစ်တဲ့ HTML, JavaScript, CSS ကိုသုံးပြီး ရေးတဲ့အတွက်ကြောင့် Specific-programming language တွေထက် App တစ်ခုကို တည်ဆောက်ရမှာ သိသိသာသာပဲ Development time ကိုပိုမြန်စေမှာပဲ ဖြစ်ပါတယ်။ Commericial အနေနဲ့ ဆိုရင်လည်း App တစ်ခုကို အချိန်မြန်မြန် ထွက်နိုင်တဲ့အတွက်ကြောင့် စျေးကွက်ထဲကိုလည်း အရှိန်အဟုန်မြင့်မြင့် ဝင်ရောက်နိုင်မှာပဲ ဖြစ်ပါတယ်။

Maintenance

Single code base ဖြစ်တဲ့အတွက်ကြောင့် Maintenance မှာလည်း တစ်ခါပဲ maintain လုပ်ဖို့လိုပါတယ်။ Platform တိုင်းအတွက် အချိန်၊ ငွေ နဲ့ လူ ပါ double effort မလိုပါဘူး။

အခုအောက်မှာပြထားတာတွေကတော့ လက်ရှိ နာမည်ကြီး Hybrid app development framework တွေပါ။

Apache Cordova Based App

HTML5, CSS3 တို့ကိုသုံးပြီး Native ကို access လုပ်ဖို့အတွက် Native Api တွေအစား JS interface ကိုသာသုံးတယ်။

UI အတွက် Web View ကိုအများဆုံးသုံးတယ်။ PhoneGap, Framework7, Ionic စတဲ့ Mobile app frameworks တွေက Cordova နဲ့ လင်နဲ့မယားသဖွယ် တွဲသုံးကြရပါတယ် 💑။ Cordova ကိုယ်တိုင်ကလည်း framework တစ်ခုသာဖြစ်ပါတယ်။

---

React Native Facebook က 2015 မှာစထုတ်တဲ့ Open-source mobile application framework တစ်ခုပါ။(အပေါ်က ကောင်ထက်တော့ သာပါတယ်)

JSX ကိုသုံးပြီး ရေးရပါတယ်(အလွယ်ပြော JS နဲ့ HTML ရောရေးတဲ့ syntax ပါ ) JavaScript Framework ဖြစ်ပေမယ့် UI element တွေက Web View(HTML) တွေမဟုတ်ပဲ Native UI Views တွေဖြစ်တယ်။

Native View ဖြစ်တဲ့အတွက်ကြေင့် Native Application နဲ့လည်းတူအောင်ရေးနိုင်တယ်။ React Native မှာ Thread လေးခုရှိတယ်။ အဲ့ဒါတွေက

• UI Thread: Main thread လို့လည်းခေါ်တယ်။ UI rendering အတွက်အသုံးပြုတယ်။

• JS Thread: Business Logic တွေအတွက်လုပ်ဆောင်တယ်။ JS updates တွေက Native side ဘက်ကိုပို့ဆောင်ပေးပြီး Native updates တွေအတွက် UI thread ဆီပြန်ပို့ပေးပါတယ်။

• Native Module Thread: Platform api တွေ access ရအောင်လုပ်ပေးတယ်။

• Render Thread: Android version 5.0 နဲ့ အထက်မှာသာအသုံးပြုတဲ့ thread မျိုးပါ။ UI တွေပေါ်ဖို့အတွက် OpenGL commands တွေကိုထုတ်ပေးရပါတယ်။ React Native ကိုသုံးပြီးရေးထားတဲ့ နာမည်ကြီး App တွေကတော့

---

Ionic Hybrid app တည်ဆောက်ဖို့အတွက် 2013 မှာ စတင်ထုတ်လိုက်တဲ့ Open-source SDK တစ်ခုပဲဖြစ်တယ်။

စစထုတ်ချင်းမှာတော့ Google ထုတ် AngularJS နဲ့ ရေးရတာပါ (Cordova နဲ့ တွဲပြီးတော့ပေါ့) Angular based ဖြစ်တဲ့အတွက်ကြောင့် ( Google ရဲ့ အသစ်တွေ့ အဟောင်းကိုထားခဲ့သလို) Angular version 2 ထွက်လာတဲ့အခါမှာတော့ Typescript ကိုပြောင်းသုံးကြရပါတယ်။ ဒါပေမယ့် အခု 2019 January ကစပြီး Ionic 4 ကို Angular တစ်ခုတည်းမဟုတ်ပဲ React js , Vue js တို့နဲ့ပါ စရေးလို့ရပါပြီ။

အခုလို Modern web technologies တွေ သုံးထားတဲ့အတွက်ကြောင့် Hybrid mobile, Desktop နဲ့ Progressive web apps တည်ဆောက်ရာမှာ နှစ်ခါပြန်မေးစရာမလို တစ်ခါတည်းအကုန်အပြီးပါ တဲ့ tools နဲ့ services တွေလည်း ထောက်ပံ့ပေးထားပါတယ်။

Developers တွေ အကြိုက် code deploy နဲ့ automated builds features တွေလည်း ပါမှပါ။Ionic UI တွေက Native view အစစ်တွေတော့မဟုတ်ပေမယ့် Native-styled အတိုင်း အတိကျတူတဲ့ standard web view ကိုသာသုံးပါတယ် (interaction ကတော့ နည်းနည်းနှေးသလိုလေးတော့ ရှိတာပေါ့)။ ဒါပေမယ့် ပုံမှန် Web View သုံးတဲ့ Hybrid app တွေထက်တော့ မြန်ပါတယ် (ပုံမှန် in-app browser support ကိုယူသုံးတဲ့ Hybrid တွေလိုမဟုတ်ပဲ low-level browser shell ကနေ run တဲ့အတွက်ကြောင့်ပါ) Animation usage အတွက် browser ရဲ့ native hardware acceleration ကို သုံးပြီးတော့ Web based ဆိုပေမယ့်လည်း Rendering လုပ်တဲ့အခါမှာ DOM manipulation ကို expensive မဖြစ်အောင်တော့ optimize လုပ်ထားပါတယ် 👌👌။ State Management အတွက်ကတော့ ng-rx( RxJS) ကို သုံးပါတယ်။

(ပြောဖို့တစ်ခုကျန်သွားတယ်ဗျ) Ionic framework က Open-source free ဆိုပေမယ့် သူ့ရဲ့ official IDE Ionic studio (integrated visual tool) ကတော့ paid version ပဲရှိမှာဖြစ်ပါတယ် 😥😥။

Ionic ရဲ့ popular apps တွေကတော့

---

NativeScript

Ionic ရဲ့ နောက်မှပေါ်လာတဲ့ Open-source framework တစ်ခုပါ။ သူလည်းပဲ iOS နဲ့ Android development အတွက် အဓိကရည်ရွယ်ထုတ်ထားခြင်းဖြစ်တယ်။

Angular, Vue.js, TypeScript, Pure JavaScript တို့နဲ့ ရေးနိုင်တယ်။ သူ့ရဲ့ အလုပ်လုပ်ပုံက နာမည်နဲ့လိုက်အောင် Nativescript ဆိုတဲ့အတိုင်း ရေးရတဲ့ code က Web scripts ၊ ထွက်လာတာက Native widgets တွေဆိုတော့ Web Developers တွေ အတွက် Super Weapon လို့တောင်ပြောလို့ရတယ်။

Browser မှာ သုံးလို့ရတဲ့ Scripts မှန်သမျှ ကို သုံးပြီးရေးလို့ရတယ်။ Native app အတွက် platform-specific ဖြစ်တဲ့ language ကို လေ့လာစရာမလိုပဲ အချိန်မြန်မြန် နဲ့ လွယ်လွယ်ကူကူ Native app တစ်ခုထွက်လာစေမှာပဲ ဖြစ်ပါတယ်။ Development လွယ်သလောက်ကို နောက်ကွယ်က Runtime process ကလည်းစိတ်ဝင်စားစရာ ကောင်းပါတယ်။ သုံးထားတဲ့ Technology က node.js runtime နဲ့ tooling ကို အသုံးပြုထားတယ်။

ကျွန်တော်တို့ ရေးထားတဲ့ JS (သို့) Ts scripts တွေကို compile လုပ်ပြီး run တဲ့ပုံစံမဟုတ်ပဲ native device ပေါ်မှာပဲတိုက်ရိုက် run တဲ့ process ဖြစ်ပြီး DOM manipulation လည်းမရှိပါဘူး။ JS နဲ့ ရေးရေး Angular (Typescript) နဲ့ပဲရေးရေး Native code နဲ့ တိုက်ရိုက်ချိတ်ဆက်နိုင်ပြီး Objective-C, Swift, Java, Kotlin စတဲ့ Native Layers ထဲထိ ဝင်ရေးနေစရာလည်းမလိုပါဘူး။ Android platform မှာဆိုရင် Java API တွေ အားလုံးကို build time မှာ reflection သုံးပြီး JS ထဲကို inject လုပ်တယ်။ JS engine က Android ဆို V8, iOS ဆို JavaScript Core ကိုသုံးတယ်။ ကျန်တဲ့အပိုင်းတွေကတော့ React Native နဲ့ ခပ်ဆင်ဆင်တူတယ်။ Native API တွေကို JS Object တွေအနေနဲ့သုံးလို့ရအောင် Build time မှာ V8 ဒါမှမဟုတ် Javascript Core ထဲကို C++ method တွေကနေတဆင့်ထည့်တယ်။ အဲ့ကနေတဆင့် platform runtime ကို သွားခေါ်တယ်။ ဒါကတော့ NativeScript ရဲ့ အတ္ငင်းပိုင်းအလုပ်လုပ်ပုံပါ။

ဪ ဒါနဲ့ အားနည်းချက်လေးနည်းနည်းတော့ ရှိတယ်ဗျ။ Native code ကို ဝင်ရေးစရာမလိုတာက Natvie မရေးတဲ့ Developers တွေအတွက် အားသာချက်ဆိုပေမယ့် တချို့ specific ဖြစ်တဲ့ Native support (eg., NFC) feature(အတွေ့အကြုံအရ) မျိုးလိုအပ်လာတဲ့အခါ Plugin ရှာပြီးသုံးရမှာပါ လုပ်ထားတာမရှိဘူးဆိုရင်တော့ ကိုယ့်ဘာသာ Native plugin ပြန်ရေးရမှာပါ 😓😓(အဲ့အချိန်ကျရင် Native ကိုသိဖို့လိုပါတယ်)။

ထွက်တာမကြာသေးတော့ Popular app တွေရယ်လို့သိပ်မရှိသေးပဲ Featured Showcases တွေတော့ တော်တော်များများ ရှိနေပါပြီ။

---

Flutter(Sdk) Google ကနေ 2017 May မှာစတင်ထုတ်လိုက်တဲ့ Open-source mobile framework တစ်ခုပါ။ Stable release ကတော့ 2019 July မှထွက်ရှိတာပါ။ Google ရဲ့ Official language (လူသုံးနည်းတဲ့ အယ့် ... တခါမှမကြားဖူးတဲ့) တစ်ခုဖြစ်တဲ့ Dart programming language နဲ့ develop လုပ်ရတာပါ။

အဲ့ဒီမှာ တစ်ခုသေချာ ကွဲပြားစေချင်တာ Flutter ဆိုတာ Mobile development အတွက် SDK ဖြစ်ပြီး Dart ဆိုတာက အသုံးပြုရတဲ့ Programming Language ပါ။

Flutter engine ကိုတော့ C++ နဲ့ အများဆုံးရေးထားတာဖြစ်ပြီး Low-level UI rendering အတွက် Google ရဲ့ Skia graphic library ကိုအသုံးပြုထားပါတယ်။ Mobile framework သာပြောတာပါ တကယ်တော့ Windows, MacOS, Android, iOS, (Future မှာ Popular ဖြစ်လာမယ့် Google ရဲ့ Fuchsia OS), Web နဲ့ Desktop platform အားလုံးအတွက် Target ထားတာပါ(IOT devices တွေအတွက်တောင်ပါ ပါသေးတယ်)။

Development time ကို ပိုမိုမြန်ဆန် smart ကျစေတဲ့ ‘Hot reload’ feature လည်းပါရှိပါတယ်။ လက်ရှိမှာ iOS + Android Platforms နှစ်ခုလုံးအတွက်ရတယ်။ Development mode မှာဆိုရင် JIT (just in time) compiler ကိုအသုံးပြုပြီး Release mode မှာဆိုရင် AOT (ahead of time) အလုပ်ကိုလုပ်တယ်။ Development ကာလမှာ JIT ကို သုံးတဲ့အတွက်ကြောင့် code upates ရဲ့ result ကို မြင်ရဖို့ Program တစ်ခုလုံးကို Build လုပ်ရမယ့်အချိန်ထိထိ စောင့်စရာမလိုတော့ပါဘူး။

Flutter စ ရေးမယ့်သူ တစ်ယောက်အနေနဲ့ ကြိုတင်သိထားသင့်တာက Flutter မှာ ရှိတဲ့ Graphic elements တွေဖြစ်တဲ့ text, shapes နဲ့ animations တွေအားလုံးဟာ Widgets တွေပဲ ဖြစ်ပါတယ်။ (ကျွန်တော့် အတွေ့အကြုံအရ ဆိုရင် Flutter ရဲ့ Widget code တွေရေးတဲ့ Style ကို သိပ်တော့ အကြိုက်မတွေ့သေးဘူး 🤨🤨)

လက်ရှိ Flutter မှာ Design language ၂ မျိုးရှိပါတယ်။ Andorid platform အတွက် Google ရဲ့ Material design နဲ့ iOS platform အတွက် Apple ရဲ့ Cupertino design ဆိုပြီး widget set ၂ ခုရှိပါတယ်။ Flutter သုံးပြီး ရေးထားတဲ့ popular app တွေကတော့

---

Xamarin Xamarin လည်း Open-source mobile platform တစ်ခုဖြစ်ပါတယ်။ 2011 ခုနှစ်မှာ Microsoft ရဲ့ လက်ခွဲ Company တစ်ခုကစတင်ခဲ့တာဖြစ်ပြီး 2016 February မှာတော့ Microsoft က တရားဝင်လွှဲပြောင်း ယူလိုက်တာပဲဖြစ်ပါတယ်။ Xamarin ရဲ့ Target platforms တွေကတော့ Android, iOS, macOS, watchOS, tvOS, Windows Phone တွေထိ ပါပါတယ်။

Development အတွက် programming က C# ဖြစ်တဲ့ အတွက်ကြောင့် .NET Developer တွေအတွက် အထူးသင့်တော်ပါတယ်။ IDE အနေနဲ့ကတော့ Visual Studio ကိုသုံးပြီးတော့ Native Android, iOS နဲ့ Windows apps တွေထိ ရေးလို့ရနိုင်တယ်။

Setup အနေနဲ့ Visual Studio မှာ Xamarin for Visual Studio extensions သွင်းပြီး စလုပ်လို့ရပါပြီ(သူ့ထဲဲမှာ app building, deploying နဲ့ debugging စနစ်တွေပါဝင်ပြီးသားပါ)။ Code completion အနေနဲ့ Android UI Design ကို XML မသုံးစေပဲ Android UI builder နဲ့ ဖြစ်ပြီး iOS design အတွက်ဆိုရင်တော့ Xcode interface builder နဲ့ integrate လုပ်ပြီး သုံးရပါတယ်( Developer တွေအနေနဲ့ cross-platform mobile app တစ်ခုအတွက် code ရဲ့ 90% ကို share သုံးလို့ရပါတယ်)။ အတွင်းပိုင်း အလုပ်လုပ်ပုံကတော့ .Net layer မှာ ရှိတဲ့ Native libraries ကိုယူသုံးတဲ့ပုံစံဖြစ်တယ်။

UI အတ္ငက် platform-specific ဖြစ်တဲ့ UI code layer ကိုသုံးတဲ့အတွက်ကြောင့် Native devices တွေပေါ်မှာ 100% Native နဲ့ တူနေမှာပဲဖြစ်ပါတယ်။ အဲ့အတွက်ကြောင့် Native apps တွေနဲ့ ယှဥ်ရင် Performance နဲ့ User Experience က နင်လားငါလား ပြောလို့ရတယ်။

Latest native api ဖြစ်တဲ့ iOS မှာ ရှိတဲ့ ARKit နဲ့ Android ရဲ့ Multi-Window တွေကိုတောင် ယူသုံးလို့ရနိုင်ပါတယ်။ Compilation မှာဆိုရင်လည်း iOS မှာ source code ကို Native ARM assembly code ကို AOT compile ပုံစံနဲ့သွားတယ်။ Android မှာဆိုရင်တော့ကြားခံ Language တစ်ခုအဖြစ်အရင်ပြောင်းတယ် အဲ့ကမှတဆင့် Native assembly code ကို JIT compile လုပ်ပြီး သွားတယ်(memory allocation နဲ့ garbage collection အတွက်ပါ default ထည့်ပေးပြီးသားဖြစ်ပါတယ်) Drawback တွေလည်းရှိပါတယ် Platform updates အသစ်တွေထွက်လာတဲ့အခါ support ရဖို့ ကြာတတ်ပါတယ်။ ပြီးတော့

open-source platform ဆိုတာ individual developer အတွက်ပဲ ဖြစ်ပါတယ်၊ enterprise အတွက်ဆိုရင်တော့ framework အတွက် cost နဲ့ IDE license အတွက် ငွေအမြောက်အမြားကုန်မှာဖြစ်ပါတယ်။

Community ဘက်ကကြည့်ရင်လည်း Native app community ထက် သိသိသာသာနည်းသလို တခြား Hybrid app (React native, Ionic ) တွေလောက် community strong မဖြစ်သေးပါဘူး။ Xamarin သုံးပြီးရေးထားတဲ့ top apps တွေကတော့

Thanks for reading🍕 Be happy with Hybrid developing😉🙂