Overview of Content
在數位化時代，跨平台開發技術已成為手機應用開發的關鍵，本文將帶你深入了解從 H5 到 React Native 的移動端跨平台技術，並探討解釋語言與編譯語言的不同
此外，你將學到 Flutter 技術的優勢、特點及其概念與架構，並通過詳細的分析比較，全面掌握不同跨平台技術的優劣
最後，這裡會示範如何使用 Android Studio 建立自己的 Flutter專案
通過本文，讀者不僅能夠獲得全面的技術知識，還能夠在實際應用中靈活運用跨平台開發技能，為自己的開發之路開創更多可能性
寫文章分享不易，如有引用參考請詳註出處，如有指導、意見歡迎留言（如果覺得寫得好也請給我一些支持），感謝 😀
個人程式分享時比較注重「縮排」，所以可能不適合手機的排版閱讀，建議切換至「電腦版」、「平板版」視窗看
認識跨平台技術
跨平台開發，可以節省人力成本，不需要區分 iOS、Android、Web、桌面應用… 等等多個技術，以及多個開發團隊，對於許多公司來說都是相當重要的技術，而這個技術的選擇就是我們接下來要做的比較、認識（我們會以 Moblie 端開發來比較）
以 moblie 開發端（移動開發）來說，使用同一套代碼就可以開發出
androidapk、iOSipa 應用
手機移動端跨平台技術：H5、Reaction Native
A. 原生開發 - Native 開發：Native 開發就是指使用各自平台自身的技術來開發，有幾個平台就會有幾種開發專案（這種方式尚未跨及跨平台開發）
● 開發成本較高：
原生開發要維護 Android、ios 兩個開發團隊、經過版本更新後，其成本會不斷上升 (開發、測試、維護...)
● 動態化需求：
原生 Native 開應用大多數需要透過版本升級來更新內容，鮮少可以不更新應用就可以加載新功能、修復錯誤（除了熱修復技術）
● Native 熱修復技術
熱修復技術就是講求使用者不用更新新版應用也可以加載新功能、修復錯誤，但這並不是本章的重點… 先暫時知道概念即可
B. H5 - PhoneGap、Cordova、WebView 技術：
● 最早在 2008 年有出現 PhoneGap 的框架 (支持 Android 平台)，之後貢獻給 Apache 的開源項目轉為 Cordova (其核心同樣是 PhoneGap)
● 採用 HTML、CSS、JS 來完成跨平台技術，其工作原理類似於 WebView，利用 JavaInterface 來完成與 Native 的互交
● 好處就是，H5 支援熱重載技術，因為 Web 技術本就是在運行期間（Runtime）加載的技術
雖然補齊了 Native 應用熱加載的不足，但相對來說 H5 開發的手機應用性能就比純 Native 應用還差，而且 H5 的 UI 設計就與原生應用有很大的不同
● WebView 擔任 JavaScript 語言與 Native 語言之間的通信橋梁，但 WebView 性能堪憂而且有「原生內存洩漏問題」
用於 JS 與 Native 通訊的工具稱為 WebView JsBridge
C. 跨平台框架 - Reaction Native 技術
● Reaction Native 技術（簡稱 RN）是由 facebook 在 2015 開發出來的開源框架；React Native 允許開發者使用 JavaScript 和 React 來構建 Android 和 iOS 平台的應用程式，並且能夠共享大部分的代碼，從而提高開發效率和縮短開發時間
● 而 RN 的繪製概念是通過「橋梁」完成「原生繪製」，也就是說將渲染的工作交給 Native 而不是 JS（這樣可以達到畫面渲染更優的效能）
並且 RN 一樣可以保持熱加載的特性
● 複習 Android Native 繪製方式（舊版命令式 UI，並非 Compose UI）
A. 原生庫的 xml 就是配置文件
B. 經過 inflater 分析
C. 反射創建 view
● 使用 RN 的話，要使用 JS 寫好移動端的 UI，通過 Bridge 將 Virtual Dom (VD) 讀取並創建，當 UI 更新仍要透過 Bridge 傳遞並再次創建，導致 Bridge 維護成本較高
解釋語言 vs. 編譯語言
● 對於上述的跨平台開發來講，都屬於使用解釋型語言（也就是 JS），而下表會簡單說明解釋語言、編譯語言兩種的特性
| 類型 | 語言 | 特色 |
|---|---|---|
| 解釋型 | JS | 效率較低、通用度高 |
| 編譯型 | C、C++ | 效率高、速度快 |
| 混和型 | Java | Java 源於解釋型語言，但又多了 MetaData 運行時解釋，造就了它是混合型語言的特性 |
● JS 就是解釋型語言，看到哪解釋到哪，並非一次性解析，而 C/C++ 則是編譯型語言，一次性編譯成為了專屬機台的機械碼
● Java 則是混和型語言，早期透過 JVM 解釋字節碼(.class 文件)，到後期開發出 JIN、AOT 就轉型成為了編譯型語言
認識 Flutter 技術
經由 2015 年的 Sky 前身，在 2018 年 Google 發表的 Flutter 移動 UI 框架技術 (免費、開源)，可以快速在 iOS、android 上架構高質量的 原生用戶介面 並且可以與原有的程式共同運行
●
Flutter&React Native差異RN 其主要是透過 Bridge 的構通，分析過後產生相對的本地 View，這最終會導致 Bridge 的負載較大
Flutter 則是透過另外一個平台，經過編譯過後產生符合另一個平台的原生代碼，類似於所謂的 交叉編譯，來達到比起 RN 更高的效能（但又符合編寫一次代碼就可運行在多個平台）
Flutter 優勢、特點
● 其主要有幾個優勢，1. 跨平台 UI 框架、編譯語言 2. 與原生 Native 互交、3. 開源
A. 跨平台：移動端系統目前有 Android、IOS 兩個大平台，而 Flutter 除了支援這兩個 UI 以外還支持了 Fuchsia 系統
● Fuchsia 是 Google 開發的新移動端系統，主要是以 C、C++ 開發，但是仍在開發階段並未完全成行，可繼續關注
● 其 UI 特點也有三個，Hot Reload、優質介面、本地性能，Debug 使用 JIN，Release 使用 AOT
● Hot Reload：不需要重新編譯安裝就可以直接使用、測試
● UI：對於 UI 設計的風格統一
● 性能：其性能接近於原生
B. Native 互交: 可在原有的應用中嵌入 Flutter 進行開發
C. 開源: 免費~ 不必擔心版權問題
● React Native 被棄用的原因在之後 修改的協議，若是使用可能會影響到使用者的版權，而 Flutter 則沒有這方面的問題
Flutter 概念、架構
● 以下是 Flutter 的概念圖，經由「交叉編譯」根據不同平台編譯出對應的機械碼，因此省去了 Bridge 的開銷，而 這個編譯系統則是 Dart VM，Flutter 可以透過 Dart VM 程式會編譯成對應的 ARM 機械碼
● 架構圖如下 (來源網路)，Skia 渲染引擎、Dart VM
跨平台技術分析、比較
| 跨平台技術 | 優點 | 缺點 |
|---|---|---|
| webView | android 原生支持 webView，JS & Java 互交 | android WebView 原生問題 (內存洩漏，最終導致 OOM)、Js 加載速度慢 |
| React Native(RN) | RN 渲染機制 (本地繪製) | Bridge 附載過重、維護成本高 |
| Flutter | 編譯成本地代碼，效率較高，HotReload、App 風格統一(fps120)、接近本地速度 | Native 還是較快一些、並且會增加 APK 的大小 |
Flutter 安裝、建立 Flutter 專案
● 到 Flutter 網站下載 Flutter SDK 包，下載後解壓縮，並將該 bin 目錄加入到環境變數
● 安裝之後可以到指令目錄下，
flutter doctor指令，它會檢查當前設備的環境是否還有缺使 flutter 插件
A. Android Studio 中點擊 File Settings，搜尋 Plugins 並點擊，在內部搜尋欄位搜尋 Flutter 並安裝 (之後會要求重啟 AS IDE)
B. 接著搜尋 Dart，自動補齊代碼
C. 安裝完畢後就會有新的選項，File -> New -> New Flutter Project(新)
D. 選擇 Flutter SDK 的路徑後就可以創建 Flutter 專案
更多的 Flutter/Dart 語言相關文章
了解 Flutter 如何在跨平台開發中佔據重要地位，掌握快速上手的技巧與項目建置流程，開啟你的跨平台開發之旅！
探索跨平台與 Flutter 技術的未來：從認識到 Flutter 專案建置 | 3 種跨平台
Dart 語言基礎
● 探討 Dart 語言：宣告、數據類型、操作符 | 從基礎到應用指南
快速掌握 Dart 語言的核心概念，包括變數宣告、數據類型及操作符，為 Flutter 開發奠定扎實基礎。
● Dart 函數與方法、異常處理、引用庫 | Java 比較
深入了解 Dart 的函數與異常處理特性，並與 Java 的處理方式進行比較，幫助你跨語言切換更加順暢。
● 深入解析 Dart 語言：命名慣例、類特性、建構函數與抽象特性
學習 Dart 類的設計邏輯及命名慣例，深入探索抽象類與 Mixin 的強大應用場景。
● 深入探索 Dart 的併發與異步處理：從 Isolate 到 Event Loop 的全面指南 | Future、Stream
徹底搞懂 Dart 的併發與異步處理，掌握 Isolate 與 Event Loop 的運行機制，助你提升應用效能！
深入 Flutter 框架
● 深入解析 Flutter Navigator：常見錯誤、解決方法與路由跳轉技巧、動畫
從常見問題到自定義解決方案，學會如何利用 Navigator 實現路由跳轉與流暢動畫效果。
● 深入理解 Flutter 中的數據共享：從普遍方案到 InheritedWidget | 3 種方案
探討數據共享的最佳實踐，了解 InheritedWidget 等三種主要方案，幫助你優化應用結構。
● 深入解析 Flutter 三顆樹：Widget、Element 與 RenderObject 完整指南
拆解 Flutter 的內部結構，全面了解 Widget、Element 和 RenderObject 之間的關係，提升你的 Flutter 開發技能！
