Day 23 - 前端開發工具 - HBuilder X

完成了後端開發，接下來就要將透過前端跨平台開發框架來存取後端的資源，底下介紹幾種常見的跨平台應用開發框架。

• Flutter
• Ionic
• React native
• Apache Cordova
• Xamarin

所謂的跨平台應用開發框架就是，開發人員可以使用一套相同的代碼，一次性地編碼即可在多個平台上面運行起來，如 iOS， Android，Windows， macOS 以及 Linux。它減少了開發人員開發應用的時間，並且能夠快速地交付。作為用戶來說，當然希望使用 App 的時候能夠順暢流利，不可否認的是，使用 swift 或 android studio 開發出來的 iOS 和 Android 應用非常流暢而且高效，但是缺點就是需要耗費較長的時間來開發，比如同一個 App，需要在 swift 或 android studio 兩端各自開發一遍，比較耗費人力和財力。

跨平台應用程序開發框架的好處：

• 一個代碼適用於多個設備；
• 一個代碼適用於多個平台；
• 一個代碼可以在多個應用商店中發佈成多個 app；
• 只需編寫一次代碼；
• 代碼可以跨平台復用；
• 市場分析與測試；
• 快速成型；
• 快速開發；

然而在挑選跨平台應用程序開發框架時，需要注意的是：

• 是否開源。
• 框架的三方套件是否足夠。
• 框架的執行性能。
• 是否有大廠維護，因為這關係到後期是否可以持續維護。
• 使用者的人數。

Flutter

Flutter 由 Google 開發的開源平台，可用於跨平台應用程序開發。它具有吸引力的原因是：快速的開發，富有表現力的精美使用者介面 (UI) 和類似本機的性能。使用Flutter的一些公司是 Google， eBay，BMW 等。

圖 1、Flutter 官方網頁

選擇 Flutter 框架進行跨平台應用程序開發的主要原因：

• 高度穩定
• DART，AOT 編譯語言
• 平穩的開發週期
• 強大的熱加載功能
• 滿足各種需求的UI套件
• 完美匹配的 Flutter 現在擁有 200 萬用戶(統計至 2021 年)，並且還在不斷增加。

Ionic

Ionic 是用於跨平台應用程序開發的增長最快且領先的開源框架。針對移動設備進行了優化的UI組件庫和工具有助於快速構建交互式應用程序。使用 Ionic 的企業包括 GE，空中客車，Panera 等。

圖 2、Ionic 官方網頁

選擇 Ionic 進行跨平台應用程序開發的主要原因：

• 開發人員友好
• 龐大的社區
• 角度優勢
• 一個代碼即可
• Cordova edge
• 高標準的UI
• 簡化測試

React native

由 Facebook 在 2015 年開發的 React Native 可幫助企業使用 Swift，Objective C 和 Java 等語言構建類似於本機的應用程序。使用 React Native 框架的一些企業是 Facebook， Skype， Tesla 等。

圖 3、React 官方網頁

選擇 React 本機框架進行跨平台應用程序開發的主要原因：

• 現成的組件
• 社區驅動
• 熱加載
• 開源
• React Native for Web 功能
• 高度可靠
• 本地功能易於訪問
• 本機UI組件的實現

Apache Cordova

Apache Cordova 是一個著名的跨平台應用程序開發框架，該框架使用 Web 技術，包括 HTML，CSS 和 JavaScript。使用 Apache Cordova 的一些企業是 Walmart，Adobe，QrStore 等。

圖 4、Cordova 官方網頁

選擇Cordova框架進行跨平台應用程序開發的主要原因：

• 可重用代碼
• 熟悉的技術
• 強大的社區支持
• 廣泛的插件
• 免費和開源
• 離線開發
• 調試
• 實時重載

Xamarin

Xamarin是微軟的 .NET 平台的擴展，是開發人員和企業最受信任和喜愛的框架之一。Xamarin 使用 C＃ 開發所有內容。使用Xamarin跨平台框架的一些企業是阿拉斯加航空，美國癌症協會，JustGiving等。

圖 5、Xamarin 官方網頁

選擇Xamarin框架進行跨平台應用程序開發的主要原因：

• 開源和免費
• 本機性能
• 用於訪問本機功能
• XAML的基本框架，用於使用C＃構建動態移動應用程序
• 用於通用模式的庫，例如Model * View ViewModel（MVVM）
• 具有語法突出顯示，代碼完成，設計器以及其他專門用於開發移動頁面的功能

因為筆者現在在大陸高教任教，發現中國開發者習慣使用的跨平台框架並非上述的這些，而是由 DCloud 即数字天堂（北京）网络技术有限公司所開發的 HbuilderX 這個 IDE 介面，在這個介面下可以開發網頁前端程式，下圖是 DCloud 官網的首頁，標榜著 12 億用戶使用著由 DCloud 的開發工具所開發出來的 app，有 900 萬的開發者使用著他們所提供的開發工具。

圖 6、DCloud 官方網頁

在此說明一下主要會使用到的開發工具 HbuilderX 以及跨平台框架 5+App。

HBuilderX

HBuilder 中 H 指的是 HTML 的首字母，Builder 是建設者構造者，X 是 HBuilder 的下一代版本，也簡稱HX。它是為前端開發者服務的通用 IDE，或者稱為編輯器，與 VS Code, sublime, WebStorm 的功能類似。

可以用來開發普通 web 項目，也可以開發 DCloud 出品的 uni-app 項目、5+App 項目、wap2app 項目。目前有 900萬開發者在使用HBuilder。舊版的 HBuilder 是紅色 logo，已於 2018 年停止更新，綠色 logo 的 HBuilderX 是新版替代品。
HX 的特點如下：

• 輕巧：僅 10M 左右的綠色發行包(不含插件)。
• 極速：不管是啓動速度、大文檔打開速度、編碼提示，都極速響應 C++ 的架構。
• Vue 開發強化：HX 對 vue 做了大量優化投入，開發體驗遠超其他開發工具。
• 小程序支持：國外開發工具沒有對中國的小程序開發優化，HX 可新建 uni-app 小程序等項目。
• Markdown 利器：HX 是默認新建文件類型為 markdown 的編輯器。
• 強大的語法提示：HX 是中國唯一一家擁有自主 IDE 語法分析引擎的公司，對前端語言提供準確的代碼提示和轉到定義(Alt+鼠標左鍵)。
• 更強的 JOSN 支持：現代 js 開發中大量 JOSN 結構的寫法，HX 提供高效的操作。

HX 的擴展性，支持 php、java、nodejs 等後端語言插件，並兼容了很多 vscode 的插件及代碼塊。還可以通過外部命令，方便的調用各種命令行功能，並設置快捷鍵。如果開發者習慣了其他工具(如vscode或sublime)的快捷鍵，在菜單工具-快捷鍵方案中可以切換。

5+App

5+ 是 html5plus 的縮寫，即基於 html5 的增強擴展，它是一個跨 iOS、Android 的混合開發 App 解決方案，與 Cordova 類似，它基於 webview 渲染，封裝了 Native.js 提供了大量原生能力給外部的 JS 呼叫。5+App 不要求使用 vue，使用普通HTML即可開發。

Native.js 技術，簡稱 NJS，是一種將手機作業系統的原生物件映射為 JS 物件，在 JS 里編寫原生代碼的技術。如果說 Node.js 把 JS 擴展到伺服器世界，那麼 NJS 則把 JS 擴展到手機 App 的原生世界。
NJS 大幅提升了 HTML5 的能力，NJS 突破了瀏覽器的功能限制，也不再需要像 Hybrid 那樣由原生語言開發插件才能補足瀏覽器欠缺的功能。
NJS 編寫的代碼，最終需要在 HBuilder 里打包發行為 App 安裝包，或者在支持 NJS 技術的瀏覽器里運行。NJS 不再需要配置原生開發和編譯環境，調試、打包均在 HBuilderX 里進行，沒有 mac 和 xcode/swift 一樣可以開發 iOS 應用。NJS 的運行環境是集成在 5+runtime 里的，使用 HBuilder 打包的 app 都可以直接使用 NJS。

參考資料

• Flutter，https://flutter.dev/
• Ionic，https://ionicframework.com/
• React native，https://reactnative.dev/
• Apache Cordova，https://cordova.apache.org/
• Xamarin]，https://dotnet.microsoft.com/apps/xamarin
• 2021 最新 15 个App跨平台开发框架，https://zhuanlan.zhihu.com/p/334804313
• DCloud产品综述， https://ask.dcloud.net.cn/docs/
• HBuilderX 簡介，https://hx.dcloud.net.cn/README
• 2020 年值得关注的十个跨平台开发框架，https://cloud.tencent.com/developer/news/578219
• HBuilderX文檔系統，https://hx.dcloud.net.cn/