热门跨平台方案对比：WEEXReact NativeFlutter和PWA

Posted 2021-04-26 博文视点Broadview

本文主要对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在Android平台上的通信原理

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

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框架架构

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

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

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应用程序注入活力。

PWA需要依赖的技术组件

其中，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入门与实战类书籍，适合有一定前端开发基础或者移动端开发基础的读者阅读。因此，无论你是前端开发者，还是移动端开发者，都可以通过对本书的学习来掌握移动跨平台应用开发的技能。

在留言区告诉大家你最看好哪个框架

截止9月2日晚八点

获赞最高的三位同学各赠一本

《WEEX跨平台开发实战》

   大家都在看      

---

▼ 点击阅读原文了解本书详情！