認識 Flutter 跨平台技術、建立 Flutter 專案

Overview of Content

• 如果喜歡讀更好看一點的網頁版本，可以到我新做的網站 DevTech Ascendancy Hub

  本篇文章對應的是 探索跨平台與 Flutter 技術的未來：從認識到 Flutter 專案建置 | 3 種跨平台

• 認識 Flutter 跨平台技術、建立 Flutter 專案
  • Overview of Content
  • 認識跨平台技術
    • 手機移動端跨平台技術：H5、Reaction Native
    • 解釋語言 vs. 編譯語言
  • 認識 Flutter 技術
    • Flutter 優勢、特點
    • Flutter 概念、架構
    • 跨平台技術分析、比較
    • Flutter 安裝、建立 Flutter 專案
  • Appendix & FAQ

認識跨平台技術

跨平台開發，可以節省人力成本，不需要區分 iOS、Android、Web、桌面應用… 等等多個技術，以及多個開發團隊，對於許多公司來說都是相當重要的技術，而這個技術的選擇就是我們接下來要做的比較、認識（我們會以 Moblie 端開發來比較）

以 moblie 開發端（移動開發）來說，使用同一套代碼就可以開發出 android apk、iOS ipa 應用

手機移動端跨平台技術：H5、Reaction Native

1. 原生開發 - Native 開發：Native 開發就是指使用各自平台自身的技術來開發，有幾個平台就會有幾種開發專案（這種方式尚未跨及跨平台開發）

   • 開發成本較高：

     原生開發要維護 Android、ios 兩個開發團隊、經過版本更新後，其成本會不斷上升 (開發、測試、維護…)

   • 動態化需求：

     原生 Native 開應用大多數需要透過版本升級來更新內容，鮮少可以不更新應用就可以加載新功能、修復錯誤（除了熱修復技術）

     • Native 熱修復技術

       熱修復技術就是講求使用者不用更新新版應用也可以加載新功能、修復錯誤，但這並不是本章的重點… 先暫時知道概念即可

2. 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

3. 跨平台框架 - Reaction Native 技術

   • Reaction Native 技術（簡稱 RN）是由 facebook 在 2015 開發出來的開源框架；React Native 允許開發者使用 JavaScript 和 React 來構建 Android 和 iOS 平台的應用程式，並且能夠共享大部分的代碼，從而提高開發效率和縮短開發時間

   • 而 RN 的繪製概念是通過「橋梁」完成「原生繪製」，也就是說將渲染的工作交給 Native 而不是 JS（這樣可以達到畫面渲染更優的效能）

     並且 RN 一樣可以保持熱加載的特性

     • 複習 Android Native 繪製方式（舊版命令式 UI，並非 Compose UI）

       1. 原生庫的 xml 就是配置文件
       2. 經過 inflater 分析
       3. 反射創建 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. 開源

  1. 跨平台：移動端系統目前有 Android、IOS 兩個大平台，而 Flutter 除了支援這兩個 UI 以外還支持了 Fuchsia 系統

     • Fuchsia 是 Google 開發的新移動端系統，主要是以 C、C++ 開發，但是仍在開發階段並未完全成行，可繼續關注

     • 其 UI 特點也有三個，Hot Reload、優質介面、本地性能，Debug 使用 JIN，Release 使用 AOT

       • Hot Reload：不需要重新編譯安裝就可以直接使用、測試

       • UI：對於 UI 設計的風格統一

       • 性能：其性能接近於原生

  2. Native 互交: 可在原有的應用中嵌入 Flutter 進行開發

  3. 開源: 免費~ 不必擔心版權問題

     • 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 插件

  1. Android Studio 中點擊 File Settings，搜尋 Plugins 並點擊，在內部搜尋欄位搜尋 Flutter 並安裝 (之後會要求重啟 AS IDE)

  2. 接著搜尋 Dart，自動補齊代碼

  3. 安裝完畢後就會有新的選項，File -> New -> New Flutter Project(新)

  4. 選擇 Flutter SDK 的路徑後就可以創建 Flutter 專案

Appendix & FAQ

tags: Flutter