前端跨平台技术理解（FLutter、React Native、Hybrid）

本文主要介绍集中跨平台技术解决方案、结合本人在实际开发过程中的各种体验，对这几种跨平台技术进行一个点评。

跨平台技术的由来

传统的纯原生开发已经不能满足日益增长的业务需求。

• 动态化内容需求增大。当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这个周期对高速变化的互联网时代来说是很难接受的，所以，对应用动态化 (不发版也可以更新应用内容) 的需求就变得迫在眉睫了。
• 业务需求变化快，开发成本变大。由于原生开发一般都要维护 Android、iOS 两个开发团队，版本迭代时，无论人力成本还是测试成本都会变大。

针对原生开发面临的问题，人们一直都在努力寻找好的解决方案，然而时至今日，已经存在很多跨平台框架 (注意，本书中所指的“跨平台”若无特殊说明，即特指 Android 和 iOS 两个平台)，根据其原理，主要可分为如下三类。

• H5(HTML5)+ 原生 ( Cordova、 Tonic、微信小程序)。
• Javascript 开发 + 原生渲染 ( React Native、Weex、uni-app)。
• 自绘 U+ 原生 ( QT Mobile、 Flutter)。

** 接下来，我们将逐个来了解这三类框架的原理及优缺点，主要讲解 Hybrid、React Native、Flutter **

首先查看一下Github上的活跃度start：

类型	数量
Flutter	117k
React Native	94.2k
uni-app	30.1k

其中 Hybrid 暂未统计，但是可以知道，他是目前使用最多的；

介绍一下 android 底层渲染引擎 skia

Skia 是一款用 C++ 开发的、性能彪悍的 2D 图像绘制引擎，其前身是一个向量绘图软件。2005 年被 Google 公司收购后，因为其出色的绘制表现被广泛应用在 Chrome 和 Android 等核心产品上。Skia 在图形转换、文字渲染、位图渲染方面都表现卓越，并提供了开发者友好的 API。

目前，Skia 已然是 Android 官方的图像渲染引擎了，因此 Flutter Android SDK 无需内嵌 Skia 引擎就可以获得天然的 Skia 支持；而对于 iOS 平台来说，由于 Skia 是跨平台的，因此它作为 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text，这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的原因。

跨平台技术整合 (1).jpg

所有运行在Android上的应用，最终都是通过 Skia 排版进行绘制，然后通过GPU呈现在屏幕上；
所以 Flutter 理论上和 原生 native app 性能最接近，不需要桥接通信过程，速度也最快；
缺点就是需要学习新的Dart语法，以及从命令式编程思维转换为声明式编程，需要一些学习成本；

** 分别介绍一下跨平台框架 **

H5+ 原生混合开发

这类框架的主要原理是将 APP 需要动态变动的一部分内容通过 H5 来实现，通过原生的网页加载控件 Webview( Android) 或 WK Webview(iOS) 来加载 (以后若无特殊说明，本书将用 Webview 来统一指代 Android 和 iOS 中的网页加载控件)。这样，H5 部分就可以随时改变而不用发版，动态化需求得到满足 ; 同时，由于 H5 代码只需要一次开发，就能同时在 Android 和 iOS 两个平台上正常运行，这也可以降低开发成本，也就是说，H5 部分的功能越多，开发成本就越小。我们称这种 H5+ 原生的开发模式为混合开发，对于采用混合模式开发的 APP，我们称之为混合应用或 Hybrid APP，如果一个应用的大多数功能都是采用 H5 实现的话，我们称其为 Web APP。

混合开发技术点

如之前所述，原生开发可以访间平台的所有功能，而在混合开发中，H5 代码是运行在 Web View 中的， Webview 实质上就是一个浏览器器内核、其 script 依然运行在一个权限受限的沙箱中，所以对大多数系统能力都没有访向权限、如无法访向文件系统、不能使用蓝牙等，所以，对于 H5 不能实现的功能，都需要原生来实现。

而混合框架一般都会在原生代码中预先实现一些访问系统能力的 API，然后暴露给 Webview 以供 Javascript 调用，这样一来， Webview 就成为 Javascript 与原生 AP 之间通信的桥梁，主要负责 Javascript 与原生之间调用消息的传递，而消息的传递必须遵守一个标准的协议，其规定了消息的格式与含义，我们将依赖于 Webview 的、用于在 Javascript 与原生之间通信并实现了某种消息传输协议的工具称为 Webview Javascript Bridge，简称 Jsbridge，它也是混合开发框架的核心.

它的性能是最差的，一方面运行在webview中，一方面无法直接调原生功能、通信需要桥接；

Javascript 开发 + 原生渲染

不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
效率体验接近Native App，发布和开发成本低于Native App

Flutter

Flutter 是 Google 推出并开源的移动应用开发框架，主要特点是跨平台、高保真、有些性能。开发者可以通过 Dart 语言开发 APP，一套代码可以同时运行在 iOS 和 Android 平台以上。Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。

同时 Flutter 还可以使用 Native 引擎渲染视图，这无疑能为用户提供良好的体验。

跨平台自绘引擎

Flutter 与用于构建移动应用程序的其他大多数框架不同，因为 Flutter 既不使用 Webview，也不使用操作系统的原生控件。相反， Flutter 使用自己的高性能渲染引擎来绘制 Widget。这样不仅可以保证在 Android 和 iOS 上 UI 的一致性，而且可以避免因对原生控。

件依赖而带来的限制及高昂的维护成本。

Flutter 使用 ska 作为其 2D 渲染引擎，Skia 是 Google 的一个 2D 图形处理函数库，包含字形、坐标转换，以及点阵图，且都有高效能且简洁的表现，Skia 是跨平台的，并且其还提供了非常友好的 API，目前 Google Chrome 浏览器和 Android 均采用 Skia 作为其绘图引擎。目前， Flutter 默认支持 iOS、 Android、 Fuchsia( Google 新的自研操作系统) 三个移动平台。但 Flutter 亦可支持 Web 开发 ( Flutter for Web) 和 PC 开发。

高性能

Flutter 的高性能主要靠两点来保证，首先， Flutter APP 采用 Dart 语言开发。Dart 在 JT(即时编译) 模式下，速度与 Javascript 基本持平。同时 Dart 还支持 AOT，当以 AOT 模式运行时， Javascript 便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。其次， Flutter 1 使用自己的渲染引擎来绘制 UI，布局数据等由 Dan 语言直接控制，所以在布局过程中不需要像 RN 那样要在 Javascript 和 Native 之间通信。

这一点在一些滑动和拖动的场景下具有明显的优势，因为滑动和拖动的过程往往会引起布局发生变化，所以 Javascript 需要与 Native 不停地同步布局信息，这与在浏览器中要 Javascript 频繁操作 DOM 所带来的问题是相同的，都会带来比较可观的性能开销。

重点：Flutter 自己有自己的渲染引擎，这样避免了以上几种跨平台技术的通过中间层通信带来的性能开销，但是依然避免不了写原生代码。

总结：
对于一个web前端来说，更容易接受的 React-Native ，通过jsx进行编程，效果也最接近原生，但是如果是 原生开发的同学，建议直接上手Flutter ，因为即使写Dart，也避免不了写原生语法；

加油！