Cross-Platform App ဆိုတာ သဘောတရားအရ

နားလည်ထားရမယ့် အချက်

Cross-platform app ဆိုသည်မှာ Android နှင့် iOS နှစ်ခုစလုံးကို primary codebase တစ်ခုတည်းမှ target ပြုရန် ဒီဇိုင်းထုတ်ထားသော framework တစ်ခုတည်းဖြင့် တည်ဆောက်ထားသော app ဖြစ်သည်။ Flutter နှင့် React Native တို့သည် ဤဆိုက်တွင် အနက်ရှိုင်းစွာ သင်ကြားပေးသော ဥပမာနှစ်ခု ဖြစ်ကြသည်။

hands-on အတွက် ဆက်လက်လေ့လာပါ

hands-on widget နှင့် component syntax အတွက် ဤဆိုက်ရှိ Flutter (သို့) React Native သင်တန်းများကို ဆက်လက်လေ့လာပါ။

ဒီနေရာက mental model သည် course တစ်ခုစီ၏ အသေးစိတ်ထက် ပိုရိုးရှင်းသည်- Shared Application Code သည် အလယ်ဗဟိုတွင် ရှိပြီး၊ platform တစ်ခုစီအတွက် build အဆင့်က ထို shared code ကို Android app နှင့် iOS app အဖြစ် ပြောင်းလဲပေးသည်။

စတင်သူများ အလွဲယူဆမိဆုံးအချက်မှာ 'cross-platform' ဆိုသည်မှာ target နှစ်ခုစလုံးအတွက် ရာနှုန်းပြည့် code တူညီသည်ဟု ယူဆမိခြင်း ဖြစ်သည်။ တကယ်တော့ ရှားပါးသည်။

cross-platform project အစစ်တိုင်းနီးပါးသည် shared core နှင့်အတူ ပိုသေးငယ်သော platform-specific code layer တစ်ခုကို ဆက်လက် ထားရှိလေ့ရှိသည် -- platform-only API ကို ရောက်ရန်, permission flow တစ်ခုကို ကိုက်ညီအောင်လုပ်ရန်, (သို့) OS တစ်ခုတည်းမှာသာ ပေါ်လာသော bug ကို ကျော်ဖြတ်ရန် အတွက် ဖြစ်သည်။ Flutter က ဒီပုံစံကို platform channels ဟု ခေါ်ပြီး React Native က native modules ဟု ခေါ်သည်။

မည်သို့ပင်ဆိုစေ shared portion သည် ပုံမှန်အားဖြင့် ကြီးမား၍ codebase ၏ ၈၀ မှ ၉၅ ရာခိုင်နှုန်းအထိ ရှိတတ်သော်လည်း ၎င်းသည် အများစုသာ ဖြစ်ပြီး လုံးဝ (absolute) မဟုတ်ပါ။ Cross-platform သည် native ၏ performance ceiling အချို့ကို development speed ၏ အနိုင်ကြီးကြီးနှင့် လဲလှယ်ပေးသည်- team တစ်ခု, codebase တစ်ခုနီးပါး, ထိုမှတစ်ဆင့် app နှစ်ခု ထုတ်ဝေခြင်း။

Cross-Platform App: Flutter (သို့) React Native ကဲ့သို့ framework တစ်ခုကို အသုံးပြုပြီး primary shared codebase တစ်ခုတည်းမှ တည်ဆောက်ထားကာ Android နှင့် iOS နှစ်ခုစလုံးပေါ်တွင် compile (သို့) run နိုင်သော app တစ်ခုကို ဆိုလိုပြီး၊ ပုံမှန်အားဖြင့် shared core နှင့်အတူ ပိုသေးငယ်သော platform-specific code layer တစ်ခုပါ ပါဝင်တတ်သည်။

text

CROSS-PLATFORM: SHARED CODE, TWO OUTPUTS
----------------------------------------
SHARED APPLICATION CODE (most of the app)
  |
  |-- branches to --> ANDROID BUILD
  |                     (+ small Android-specific code)
  |
  `-- branches to --> IOS BUILD
                        (+ small iOS-specific code)

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

cross-platform project တစ်ခုကို အကဲဖြတ် (သို့) စီစဉ်ချိန်တွင် 'ဘယ်နှစ်ရာခိုင်နှုန်း share ဖြစ်သလဲ' ဟုသာ မမေးပါနှင့်။ platform-specific slice က တကယ်ဘယ်နေရာမှာ ရှိသလဲ မေးပါ၊ အဲဒါက နောက်ပိုင်း team ကနေ ဘယ်လိုအလုပ်မျိုး တောင်းဆိုလာမလဲဆိုတာ ပြောပြသည်။

push-notification registration (သို့) payment SDK ကို ကိုင်တွယ်သည့် platform-specific slice သေးသေးလေးသည် ပုံမှန်နှင့် မျှော်လင့်ထားသင့်သည့်အရာဖြစ်သည်။ framework feature ချို့ယွင်းချက်များကို ကျော်ဖြတ်ရန် ဆက်တိုက်ကြီးထွားနေသော platform-specific slice ကတော့ framework က ဒီ app အတွက် ကောင်းစွာ မကိုက်ညီဘူးဆိုတာကို သတိပေးနေသော လက္ခဏာ ဖြစ်သည်။

ဂဏန်းတစ်ခုတည်းမက လမ်းကြောင်းကိုပါ ကြည့်ပါ

shared-versus-platform-specific split ကို kickoff တွင်သာမက လစဉ်အတန်ငယ် ခြားပြီး ခြေရာခံပါ။ platform-specific layer သည် release တိုင်း ဆက်တိုက် ကြီးထွားနေပါက codebase သည် native app နှစ်ခုသီးခြားစီဆီသို့ တိတ်တဆိတ် ပြန်ရွေ့နေခြင်း ဖြစ်ပြီး ထိုအခြေအနေတွင် native development သည် ပို၍ ရိုးသားသော ရွေးချယ်မှု ဖြစ်လာနိုင်သည်။

Cross-platform app သည် Android နှင့် iOS ကို codebase တစ်ခုတည်းဖြင့် share လုပ်သော်လည်း ရာနှုန်းပြည့် မဟုတ်လေ့ရှိပါ။
Platform-specific code (Flutter ၏ platform channels, React Native ၏ native modules) သည် ပုံမှန်ဖြစ်ပြီး failure မဟုတ်ပါ။
hands-on cross-platform development အတွက် Flutter (သို့) React Native သင်တန်းကို ဆက်လက်လေ့လာပါ။

အတူတူ စမ်းရေးကြည့်မယ်

javascript

function evaluateCodeSharing(codebase) {
  const { platformSpecificPercent, targetSharedPercent = 80 } = codebase;
  const sharedPercent = 100 - platformSpecificPercent;
  const meetsGoal = sharedPercent >= targetSharedPercent;

  let tier = "mostly platform-specific";
  if (sharedPercent >= 95) {
    tier = "nearly fully shared";
  } else if (sharedPercent >= 80) {
    tier = "highly shared";
  } else if (sharedPercent >= 60) {
    tier = "moderately shared";
  }

  return {
    sharedPercent,
    tier,
    meetsGoal,
    note: meetsGoal
      ? `At ${sharedPercent}% shared, this codebase meets its ${targetSharedPercent}% sharing goal.`
      : `At ${sharedPercent}% shared, this codebase falls short of its ${targetSharedPercent}% sharing goal -- worth investigating why the platform-specific layer is that large.`,
  };
}

const typicalFlutterApp = evaluateCodeSharing({
  platformSpecificPercent: 10,
  targetSharedPercent: 80,
});

const strugglingProject = evaluateCodeSharing({
  platformSpecificPercent: 35,
  targetSharedPercent: 80,
});

const strictGoalProject = evaluateCodeSharing({
  platformSpecificPercent: 12,
  targetSharedPercent: 90,
});

console.log(`Typical Flutter-style app: ${typicalFlutterApp.sharedPercent}% shared (${typicalFlutterApp.tier}), meetsGoal=${typicalFlutterApp.meetsGoal}`);
console.log(`Struggling project: ${strugglingProject.sharedPercent}% shared (${strugglingProject.tier}), meetsGoal=${strugglingProject.meetsGoal}`);
console.log(`Project with a stricter 90% goal: ${strictGoalProject.sharedPercent}% shared (${strictGoalProject.tier}), meetsGoal=${strictGoalProject.meetsGoal}`);

You should see

Typical Flutter-style app: 90% shared (highly shared), meetsGoal=true
Struggling project: 65% shared (moderately shared), meetsGoal=false
Project with a stricter 90% goal: 88% shared (highly shared), meetsGoal=false

၅ မိနစ် စမ်းကြည့်

evaluateCodeSharing ကို သင့် project ရဲ့ တကယ့် platform-specific ရာခိုင်နှုန်းဖြင့် run ကြည့်ပါ။ ထို့နောက် targetSharedPercent ကို ၉၅ အထိ မြှင့်ကြည့်ပြီး သင့် project သည် ထိုပိုတင်းကျပ်သော standard ကို ဆက်လက် ဖြည့်ဆည်းနိုင်မလား စစ်ဆေးကြည့်ပါ။

သတိလေးတစ်ချက်

'cross-platform' ဆိုသည်မှာ platform-specific code လုံးဝမရှိကြောင်း အာမခံသည်ဟု ယူဆမိခြင်း -- project အစစ်အများစုသည် သိသာသော platform-specific layer တစ်ခုကို ဆက်လက် ထားရှိကြသည်။

ကြီးထွားနေသော platform-specific layer ကို စုံစမ်းစစ်ဆေးထိုက်သော လက္ခဏာအစား ပုံမှန် ရွေ့လျားမှုအဖြစ်သာ သဘောထားခြင်း။

Wikipedia: Cross-platform software — How Mobile Apps Work