几种跨平台方案的比对及Flutter优势概括

背景

目前，移动开发演化出了两种主流开发方式：原生开发和各种跨平台开发方式。原生的优势显而易见：生态好（坑少），性能强劲稳定，体验流畅，直接调用系统的原生能力，能满足各种各样的业务需求。然而也有一些劣势：开发成本高，Android和iOS开发语言不同，每一端都需配备一个开发人员，用户体验，版本控制也很难做到统一，其次业务发展过于迅速的时候，原生开发往往难以跟上，主要体现在：1.版本更新必须通过提示用户升级的方式，繁琐且体验不是很好。2.每次更新上架应用市场的时候都需要审核，耗时较长。难以满足业务发展的需要。
因此，各种各样的跨平台方案就应用而生。

跨平台方案

当前的跨平台方案从原理上分大致可以分为三类，以下分别介绍下这三类方案的基本原理及优缺点。

webview方案

一种是H5+webview，就是利用原生的webview控件提供一个浏览器功能，所有UI控件都是h5写成的前端控件，应用直接像访问网页一样从服务端加载控件的样式和数据，然后通过浏览器引擎加载到屏幕上。由于webview不能直接调用原生功能，因此需要使用原生语言和javaScript定义一套互相调用的协议，来调用系统能力。其主要代表就是Hybrid和微信小程序。

image.png

这种方案由于直接使用前端技术，原生能力只需要封装一套就足够了，因此大大节省了开发成本，开发便捷，小的版本更新也直接在服务端更改代码即可，还可以兼顾两端的用户体验。然而最大的缺点就是性能低下，涉及到数据交互量大的应用场景或动画或者游戏应用就完全行不通，页面卡顿厉害，而且会频繁的从服务端请求数据，耗费流量。

Js+原生渲染

第二种是Js+原生渲染，就是通过js描绘出各种UI控件，然后利用中间层将UI控件转化成原生控件，通过原生的方式将页面渲染出来，网络通信和原生能力也通过中间层来调用原生能力。主要代表就是reactNative和weex。

image.png

reactNative

reactNative是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook开源的JS框架React在原生移动应用平台的衍生物。React Native使用了react的设计模式，但是其UI渲染、动画效果、网络请求等均是由原生来实现的。开发者编写JS代码，通过React Native的中间层转化为原生控件，并进行操作。也就是说通过JS代码来调用原生的组件，从而实现相应的功能。 React Native实现跨平台的功能，主要由Java、C++和Javascript三层所构成的。其中，C++实现的动态链接库（.so），作为中间适配层桥接，实现了JS端与原生端的双向通信交互。React Native会把应用的JS代码编译成一个JS文件，React Native整体框架目标就是为了解释并运行这个JS脚本文件，如果是JS扩展的API，则直接通过bridge调用native；如果是UI界面，则映射到virtual DOM这个虚拟的JS数据结构中，通过bridge传递到native，然后根据数据设置各个对应的真实native的View。

image.png

weex

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架，思想及原理和React Native类似，最大的不同是语法层面，Weex支持Vue语法和Rax语法，Rax 的 DSL 语法是基于 React JSX 语法而创造。与 React 不同，在 Rax 中 JSX 是必选的，它不支持通过其它方式创建组件，所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。

image.png

在最上面的DSL，阿里一般称之为Weex文件（.we），通过Transform转换为js-bundle，再部署到服务器，这样服务端就完成了。在客户端，第一层是JS-Framework，最后是RenderRengine。
Weex的输入是Virtual DOM，输出是native或H5 view，还原为内存中的树型数据结构，再创建view，作为一套前端跨平台技术框架，WEEX建立了一套源码转换以及原生平台与JavaScript通信的机制。WEEX表面上是一个客户端框架，但实际上它串联起了从本地开发、云端部署到分发的整个链路。
这两种方法都有各自的生态，相比weiview方式性能体验要大大提升，然而在高度要求动画效率及游戏方面的应用还是显得有点不够用。

自绘UI+原生

目前采用这种方式的就是Flutter了。和上两种不同的是，这种方式采用了自己的渲染引擎，所有UI都由自己绘制并渲染，少了中间层的转化，性能的高效就显而易见了。

image.png

Flutter

Flutter是Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过Dart语言进行APP开发，只需要一套代码就可以同时构建Android和iOS应用，并且可以达到与原生应用一样的性能。Flutter还提供了丰富的组件、接口，开发者可以高效地为 Flutter添加native扩展。此外，Flutter还使用Skia作为2D引擎渲染，Skia是Google的一个2D图形处理函数库，在字型、坐标转换以及点阵图等方面都有高效而且简洁的表现。Skia是跨平台的，并提供了非常友好的API。由于Android系统已经内置了Skia，所以Flutter在打包APK时，不需要再将Skia打包到APK中，但是iOS系统并未内置Skia，所以在构建API时，必须将Skia一起打包。

image.png

Flutter的高性能保障

目前，Flutter程序主要有两种运行方式：静态编译与动态解释。静态编译的程序在执行前，会被全部翻译为机器码，通常将这种类型称为AOT，即 “提前编译”。解释执行则是一句句地边翻译边运行，通常将这种类型称为JIT，即“即时编译”。 AOT程序的典型代表是用C/C++开发的应用，它们必须在执行前编译成机器码。而JIT的代表则非常多，如JavaScript、python等。事实上，所有脚本语言都支持JIT模式。但需要注意的是，JIT和AOT指的是程序运行方式，和编程语言并非是强关联的，有些语言既可以以JIT方式运行，也可以以AOT方式运行，如Java、Python，它们可以在第一次执行时编译成中间字节码，然后在之后的执行中，直接执行字节码。
Flutter的高性能主要靠两点来保证，首先，Flutter APP采用Dart语言进行开发。当Dart在 JIT模式下时，其运行速度与 JavaScript基本持平。此外Dart支持 还AOT，当Dart在 AOT模式下事，其运行速度远超JavaScript。速度的提升对高帧率下的视图数据计算很有帮助。 其次，Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在JavaScript和Native之间通信，在一些滑动和拖动的场景下具有明显优势。由于滑动和拖动往往会引起布局的变化，所以JavaScript需要不停地与Native之间同步布局信息，这和在浏览器中要JavaScript频繁操作DOM所带来的问题是相同的，都会带来比较可观的性能开销。因此，Flutter能保证每端运行的UI都维持高度一致。