超犯規的跨平台UI框架 - Flutter 3

概論

要談跨平台的UI框架，要先從原生(Native)開發談起。原生應用程式是指某一個行動平台（比如iOS或Android）所特有的應用，使用相應平台支援的開發工具和語言，並直接使用系統所提供的SDK API。原生開發的優缺點如下：

• 主要優點：
  • 可使用硬體全部功能(GPS、照相機等)
  • 速度快、性能高、可以實現複雜動畫及繪製，整體用戶體驗好
• 主要缺點：
  • 不跨平台，不同平台必須維護不同程式碼，人力成本隨之變大
  • 大多數情況下，有新功能更新時只能重新發佈

在不同平台App如果希望設計一致，開發方式也一樣，人力成本也要降低，跨平台的UI框架需求便越來越高。這裡說的跨平台UI框架，指的是可以產生跨Android和iOS平台的應用程式。根據其原理，主要分為三類：

• HTML5 + 原生
• JavaScript 開發+ 原生呈現(React Native)
• 自繪UI + 原生(Flutter)

HTML5 + 原生

HTML5部分功能越多，開發成本就越小。我們稱這種HTML5 + 原生的開發模式為混合開發(Hybrid App)，如果一個應用的大多數功能都是HTML5實現的話，我們稱其為Web App。

目前混合開發框架的典型代表有：Cordova、Ionic。大多數App中都會有一些功能是HTML開發的，Flutter出現之前，Hybrid App仍然是最通用且最成熟的跨平台解決方案。

JavaScript開發+ 原生呈現(React Native)

React Native是Facebook於2015年4月開源的跨平台行動應用開發框架，是Facebook早先開放原始碼的Web框架React在原生行動應用平台的衍生產物，目前支持iOS和Android兩個平台。

React Native使用JSX語言(擴展後的JavaScript，主要是可以在JavaScript中寫HTML標籤)和CSS來開發行動應用。因此，熟悉Web前端開發的技術人員只需很少的學習就可以進入行動應用開發領域。

自繪UI + 原生(Flutter)

Flutter是Google的開放原始碼跨平台UI框架，Flutter 3於2022年5月釋出，這個版本支援除了Android、iOS之外，還支援Web、Desktop與嵌入式系統應用程式開發，支援平台的多樣化，讓其他跨平台的UI框架連車尾燈也看不到。

Flutter採用自繪UI + 原生的架構，由於元件庫是同一套程式碼、同一個呈現引擎，所以在不同平台，元件顯示外觀可以做到高一致性。由於不依賴原生UI元件，也就不會受原生佈局系統的限制，這樣佈局系統會非常有彈性且一致。

Flutter是使用Dart程式語言開發，底層UI的元件庫是使用C++實作一套自繪引擎，並擁有一套自己的UI佈局系統，且同時在開發與執行效率上有了很大突破。

Flutter的優勢

• 史上最強大UI技術，支援Web、Android、iOS、Desktop、Embedded應用程式
• Flutter核心引擎只要使用C++開發，用於管控 Flutter應用程式的可移植的執行環境。它實現了Flutter的核心程式庫，包括動畫和圖形、檔案和網路I/O、可存取性支援、外掛程式架構以及Dart執行環境和編譯工具。
• 開發工具：支援使用和Android Studio、IntelliJ IDEA和VS Code，只需要安裝 Flutter外掛程式和Dart外掛程式。
• 社群支援：Flutter有關的開源社群(pub.dev)非常多元化，給予開發者很多的幫助。
• 市佔率日益提高：日前39%的人使用Flutter建立跨平台的移動應用程式。現在僅Play商店就有超過400,000個Flutter應用。每年市佔率都在持續增加中。
• 成功案例眾多：有多個世界前500大跨國品牌企業之成功案例。

如果您正在尋找一個超強跨平台UI框架，要為企業規畫一套可以整體式應用程式開發的技術，不用增加人力成本，開發與執行卻更有效率，Flutter是您的最佳選擇(沒有之一)。如果您還認為跨平台UI框架只能製作簡單的App，去看看官網上https://flutter.dev/showcase 的成功案例，您會看到Flutter的無限可能。