移动跨平台方案对比：WEEX、React Native、Flutter和PWA

本文主要对WEEX、React Native、Flutter和PWA几大热门跨平台方案进行简单的介绍和对比。内容选自《WEEX跨平台开发实战》 （WEEX项目负责人力荐，从入门到实战，教你玩转移动前端跨平台开发！）

传统的原生Android、iOS开发面临着诸多难以解决的问题，例如开发周期长、迭代缓慢等，所以不少公司备受困扰。近年来，伴随着“大前端”概念的提出和兴起，涌现出一大批移动跨平台开发框架和模式，为解决传统移动开发问题找到了新的方向。

从早期的PhoneGap、Inoic等Hybrid混合技术，到如今耳熟能详的React Native、WEEX和Flutter等跨平台技术，借助这些优秀的跨平台开发框架，在不牺牲性能和体验的前提下，开发进度和多端研发的问题获得有效解决。

WEEX是由阿里巴巴研发的一套移动跨平台技术框架，最初是为了解决移动开发过程当中频繁发版和多端研发的问题而开发的。使用WEEX提供的跨平台技术，开发者能够很方便地使用Web技术来构建具备可扩展的原生性能体验的应用，并支持在Android、iOS、YunOS和Web等多平台上部署。具体来讲，当在项目中集成WeexSDK以后，就可使用JavaScript（JS）和主流的前端框架来开发移动应用了。

同时，WEEX框架的结构是解耦的，渲染引擎与语法层分离，也不依赖任何特定的前端框架，目前，开发者可使用Vue.js和Rax两个前端框架来进行WEEX页面开发。同时，WEEX的另外一个主要目标是跟进流行的Web开发技术并将其与原生开发技术相结合，实现开发效率和运行性能的高度统一。

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

WEEX的整个工做流程图如上，WEEX框架中最核心的部分是JavaScript Runtime。具体来讲就是，当须要执行渲染操做时，在iOS环境下选择基于JavaScriptCore的iOS系统提供的JSContext，在Android环境下使用基于JavaScriptCore的JavaScript引擎。

当JSBundle从服务器端下载完成以后，WEEX在Android、iOS和Web端会运行一个JavaScript引擎来执行JSBundle，同时向各终端的渲染层发送渲染指令，并调度客户端的渲染引擎实现视图渲染、事件绑定和处理用户交互等操做。

因为Android、iOS和HTML5等终端最终使用的是原生的渲染引擎，也就是说使用同一套代码在不一样终端上展现的样式是相同的，而且WEEX使用原生引擎渲染的是原生的组件，因此在性能上要比传统的WebView方案好不少。

固然，尽管WEEX已经提供了开发者所须要的最经常使用的组件和模块，但面对丰富多样的移动应用研发需求，这些经常使用基础组件仍是远远不能知足开发的须要，所以WEEX提供了灵活自由的扩展能力，开发者能够根据自身的状况定作属于本身客户端的组件和模块，从而丰富WEEX生态。

React Native是Facebook公司于2015年4月开源的跨平台移动应用开发框架，它是Facebook早先开源的React框架在原生移动应用平台上的衍生产物，目前主要支持iOS和Android两大平台。

React Native使用JavaScript语言来开发移动应用，但UI渲染、网络请求等功能均由原平生台实现。具体来讲就是，开发者编写的JavaScript代码会经过中间层转化为原生组件后再执行，所以熟悉Web前端开发的技术人员只须要很短的学习过程，就能够进-入移动应用开发领域，并在不牺牲用户体验的前提下提升开发效率。

做为一个跨平台技术框架，React Native从上到下能够分为JavaScript层、C++层和原生层。其中，C++层主要用于实现动态连接库（.so文件），以做为中间适配层进行桥接，并实现JavaScript端与原平生台的双向通讯。

在React Native的三层架构中，最核心的就是中间的C++层，C++层最核心的功能就是封装JavaScriptCore，用于执行对JavaScript的解析。同时，原平生台提供的各类原生模块（如网络请求模块、ViewGroup组件模块）和JavaScript端提供的各类模块（如JS EventEmiter模块）都会在C++层实现的.so文件中被保存起来，最终经过C++层中保存的映射实现两端的交互。React Native框架的工做原理以下图。

在React Native的开发过程当中，大多数状况下开发人员并不须要了解React Native框架的具体细节，只须要专一JavaScript端的代码逻辑实现便可。但须要注意的是，因为JavaScript代码运行在独立的JavaScript线程中，因此在JavaScript中不能处理耗时的操做，如fetch网络请求、图片加载和数据持久化等。

最终，JavaScript代码会被打包成一个bundle文件并自动添加到应用程序的资源目录下，而应用程序最终加载的也是打包后的bundle文件。React Native的打包脚本位于/node_modules/react-native/local-cli目录下，打包后经过metro模块压缩成bundle文件。一般bundle文件只包含打包的JavaScript代码，并不包含图片、多媒体等静态资源，而打包后的静态资源会被复制到对应的平台资源文件夹中。

整体来讲，React Native使用JavaScript来编写应用程序，而后调用原生组件执行页面渲染操做，在提升了开发效率的同时又保留了原生的用户体验。而且，伴随着Facebook重构React Native工做的完成，React Native也将变得更快、更轻量、更强大。

Flutter是谷歌公司开源的移动跨平台框架，其历史最先能够追溯到2015年的Sky项目，该项目能够同时运行在Android、iOS和Fuchsia等包含Dart虚拟机的平台上，而且性能无限接近原平生台。与React Native和WEEX使用JavaScript做为编程语言，以及使用平台自身引擎渲染界面不一样，Flutter直接选择使用2D绘图引擎库Skia来渲染界面。

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

与React Native和WEEX使用原生组件渲染界面不一样，Flutter并不须要使用原生组件来渲染界面，而是使用自带的渲染引擎（Engine层）来绘制页面组件（Flutter显示单元），而且Dart代码会经过AOT被编译为对应平台的原生代码，实现与平台的直接通讯，不须要经过JavaScript引擎进行桥接，也不须要使用原平生台的Dalvik虚拟机。Engine层的渲染架构图以下。

做为Flutter框架的重要组成部分，Widget是Flutter应用界面开发的基本内容，每一个Widget都是界面的不可变声明。在Flutter应用开发中，Widget是不能直接更新的，须要经过Widget的状态来间接更新，这是由于Flutter的Widget借鉴了现代响应式框架的构建过程，它有本身特有的状态。当Widget的状态发生变化时，Widget会从新构建用户界面，而且Flutter会对比先后的不一样，以确保底层渲染树从一个状态转换到下一个状态时所需的更改最小。

整体来讲，Flutter是目前最好的跨平台解决方案之一，它只用一套代码即可生成Android和iOS两种平台上的应用，很大程度上减小了App的开发和维护成本。同时，Dart语言强大的性能表现和丰富的特性，也使得跨平台开发变得更加便利。而不足的是，Flutter还处于初期测试阶段，许多功能还不是特别完善，而全新的Dart语言也增长了开发者的学习成本。Flutter要彻底替代Android和iOS原生开发，还有比较长的路要走。

PWA，全称为Progressive Web App，是谷歌公司在2015年提出的渐进式网页开发技术。PWA结合了一系列的现代Web技术，并使用多种技术来加强Web App的功能，最终可让网页应用得到媲美原生应用的体验。

相比于传统的网页技术，渐进式Web技术是一个横跨Web技术及原生App开发的技术解决方案，具备可靠、快速且可参与等诸多特色。

具体来讲就是，当用户从手机主屏幕启动应用时，不用考虑网络的状态就能够马上加载出网页。而且相比传统的网页加载速度，PWA的加载速度是很是快的，这是由于PWA使用了Service Worker 等先进技术。除此以外，PWA还能够被添加到用户的主屏幕上，不用从应用商店进行下载便可经过网络应用程序Manifest为用户提供媲美原生App的使用体验。

做为一种全新的Web技术方案，PWA须要依赖一些重要的技术组件，它们协同工做，为传统的Web应用程序注入活力。

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

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

目前，PWA还处于起步阶段，使用的厂商也是诸如Twitter、淘宝、微博等大平台。不过，PWA做为谷歌公司主推的一项技术标准，已经被Edge、Safari和FireFox等主流浏览器所支持。能够预见的是，PWA必将成为又一革命性技术方案。

在当前诸多的跨平台方案中，React Native、WEEX和Flutter无疑是最优秀的。而从不一样的细节来看，三大跨平台框架又有各自的优势和缺点：

如上表所示，React Native和WEEX采用的技术方案大致相同，它们都使用JavaScript来开发跨平台应用，经过将中间层转换为原生的组件后再利用原生的渲染引擎执行渲染操做。与React Native和WEEX使用原平生台渲染引擎不一样，Flutter直接使用Skia引擎来渲染视图，和平台没有直接的关系。就目前跨平台框架的实现技术来看，JavaScript在跨平台应用开发中可谓占据半壁江山，大有“一统天下”的趋势。

从性能方面来看，Flutter理论上是最好的，React Native和WEEX次之，而且都好于传统的WebView方案。但从目前的实际应用来看，它们之间却并无太大的差距，特别是和0.5.0版本以上的React Native对比，性能体验上的差别并不明显。

而从社群和社区角度来看，React Native和Flutter无疑是最活跃的，React Native通过4年多的发展已经成长为跨平台开发的实际领导者，并拥有各种丰富的第三方库和大量的开发群体。Flutter做为新晋的跨平台技术方案，目前还处测试阶段，商用的案例也不多。不过，谷歌的号召力一直很强，将来究竟如何发展让咱们拭目以待。

《WEEX跨平台开发实战》是一本系统介绍WEEX跨平台应用开发的书籍，涵盖了WEEX开发的方方面面，主要由基础知识、高级应用开发和项目实战三部分组成。第一部分重点介绍WEEX开发的基础知识，后两部分则重点介绍WEEX开发的进阶知识和项目实战。

本书也是一本WEEX入门与实战类书籍，适合有必定前端开发基础或者移动端开发基础的读者阅读。所以，不管你是前端开发者，仍是移动端开发者，均可以经过对本书的学习来掌握移动跨平台应用开发的技能。