1.2 移动跨平台技术横评

1.2.1 阿里巴巴Weex

Weex是由阿里巴巴技术团队研发的一套移动跨平台技术框架，初衷是解决移动开发过程中的频繁发版和多端研发难题。使用Weex提供的跨平台技术，开发者可以很方便地使用Web技术来构建高性能、可扩展的原生级别的性能体验，并支持在Android、iOS、YunOS和Web等多平台上部署。

作为一个前端跨平台技术框架，Weex建立了一套源码转换以及原生端与JavaScript通信的机制。Weex框架表面上是一个前端客户端框架，但实际上它串联起了从本地开发、云端部署到资源分发的整个链路。

具体来说，在开发阶段编写一个.we文件，然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle，并将生成的JS bundle上传部署到云端，最后通过网络请求或预下发的方式加载至用户的移动客户端应用中。同时，集成了Weex SDK的客户端接收到JS bundle文件后，调用本地的JavaScript引擎执行环境执行相应的JS bundle，并将执行过程中产生的各种命令发送到原生端进行界面渲染，整个工作流程如图1-3所示。

如图1-3所示，Weex框架中最核心的部分就是JavaScript Runtime。当需要执行渲染操作时：在iOS环境下，使用基于JavaScriptCore内核的iOS系统提供的JSContext；在Android环境下使用基于JavaScriptCore内核的JavaScript引擎。

当JS bundle从服务器下载完成之后，Weex的Android、iOS和HTML 5会运行相应的JavaScript引擎来执行JS bundle，同时向终端的渲染层发送渲染指令，并调用客户端的渲染引擎进行视图渲染、事件绑定和处理用户交互等操作。

由于Android、iOS和HTML 5等终端最终使用的是原生的渲染引擎，也就是说使用同一套代码在不同终端上展示的样式是相同的，并且Weex最终使用原生组件来渲染视图，所以在体验上要比传统的WebView方案好很多。

尽管Weex已经提供了开发者所需要的常用组件和模块，但面对丰富多样的移动应用研发需求，这些常用基础组件还是远远不能满足开发的需要，因此Weex提供了灵活自由的扩展能力，开发者可以根据自身的情况开发自定义组件和模块，从而丰富Weex生态。

1.2.2 谷歌Flutter

Flutter是谷歌技术团队开源的移动跨平台技术框架，其历史最早可以追溯到2015年的Sky项目。该项目可以同时运行在Android、iOS和fuchsia等包含Dart虚拟机的平台上，并且性能无限接近原生。React Native和Weex使用JavaScript作为编程语言，使用平台自身引擎渲染界面，而Flutter直接选择2D绘图引擎库Skia来渲染界面。

如图1-4所示，Flutter框架主要由Framework层和Engine层组成，基于Framework开发的App最终会运行在Engine层上。其中，Engine是Flutter提供的独立虚拟机，正是由于它的存在，Flutter程序才能运行在不同的平台上，实现跨平台运行。

与React Native和Weex使用原生控件渲染界面不同，Flutter使用Engine来绘制Widget（部件），即Flutter显示的单元，并且Dart代码会通过AOT编译为平台的原生代码，进而与平台直接通信，不需要JavaScript引擎的桥接，也不需要原生平台的Dalvik虚拟机，如图1-5所示。

同时，Flutter的Widget采用现代响应式框架构建，而Widget是不可变的，仅支持一帧，并且每一帧上的内容不能直接更新，需要通过Widget的状态来间接更新。在Flutter中，无状态和有状态Widget的核心特性是相同的，Flutter会重新构建视图的每一帧，通过State对象，Flutter就可以跨帧存储状态数据并恢复它。

总体来说，Flutter是目前跨平台开发中较好的方案，它利用一套代码即可生成Android和iOS两种平台的应用，很大程度上减少了App的开发和维护成本。同时，Dart语言强大的性能表现和丰富的特性，也使得跨平台开发变得更加便利。而不足之处在于，Flutter的许多功能目前还不是特别完善，全新的Dart语言也带来了学习上的成本。Flutter如果想要完全替代原生Android和iOS开发，还有比较长的路要走。

1.2.3 谷歌PWA

PWA，全称Progressive Web App，是谷歌技术团队在2015年发布的渐进式Web开发技术。PWA结合了一系列的现代Web技术，使用多种技术来增强Web App的功能，最终可以让Web应用呈现出媲美原生应用的体验。

相比于传统的Web技术，渐进式Web技术是可以横跨Web技术及原生App开发的技术解决方案，可靠、快速且可参与。

具体来说，当用户从主屏幕启动应用时，不用考虑网络的状态就可以立刻加载出PWA，并且PWA由于具有Service Worker等先进技术的加持，加载速度是非常快的。除此之外，PWA还可以添加在用户设备的主屏幕上，不用从应用商店进行下载即可通过网络应用程序Manifest file提供类似于App的使用体验。

作为一种全新Web技术方案，PWA的正常工作需要一些重要的技术组件，它们协同工作并为传统的Web应用程序注入活力，如图1-6所示。

其中，Service Worker表示离线缓存文件，其本质是Web应用程序与浏览器之间的代理服务器，可以在网络可用时作为浏览器和网络间的代理，也可以在离线或者网络极差的环境下使用离线的缓冲文件。

Manifest则是W3C的技术规范，它定义了基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。Manifest是PWA开发中的重要一环，它为开发人员控制应用程序提供了可能。

目前，渐进式Web应用还处于起步阶段，应用者也是诸如Twitter、淘宝、微博等大平台技术团队。不过，PWA作为谷歌技术团队主推的一项技术标准，Edge、Safari和FireFox等主流浏览器也都开始支持渐进式Web应用。相信PWA在未来的Web技术栈中会开辟属于自己的一片天地。

1.2.4 对比与分析

在当前诸多的跨平台方案中，React Native、Weex和Flutter无疑是优秀的。而从不同的维度来看，三大跨平台框架又有各自的优点和缺点，如表1-1所示。

如上表所示，React Native、Weex采用的技术方案大体相同，它们都使用JavaScript作为编程语言，然后通过中间层转换为原生组件，再利用原生渲染引擎执行渲染操作。Flutter直接使用Skia来渲染视图，并且Flutter Widget使用现代响应式框架来构建，和平台没有直接的关系。就目前跨平台技术来看，JavaScript在跨平台开发中的应用可谓占据了半壁江山，大有“一统天下”的趋势。

从性能方面来说，Flutter的性能理论是更好的，React Native和Weex次之，并且都好于传统的WebView方案。但从目前的实际应用来看，它们之间并没有太大的差距，性能体验上的差异并不明显。

从社群和社区来看，React Native和Flutter无疑更活跃，React Native经过多年发展已经成长为跨平台开发的实际领导者，并拥有丰富的第三方库和开发群体。Flutter作为最近才火起来的跨平台技术方案，还处在快速更新测试阶段，商用案例也很少。不过谷歌技术的号召力一直都很强，未来究竟如何发展让我们拭目以待。