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/