ReactNative和Flutter分析对比

 

本文将从技术商业化的角度，尝试分析比较几种流行的APP跨平台开发技术，让大家多学习和选择一个参考对象。

背景。

APP跨平台开发是目前比较热门的方向。采用web框架开发，利用web开发经验快速构建应用，提高了迭代效率。同时，大多数web开发方法使用动态语言，可以绕过原生开发，限制动态加载，因此具有热加载和热更新的能力。使用跨平台技术开发的应用程序在性能和用户体验方面与本地应用程序非常接近。

Flutter是Google推出的一款全新的APP跨平台UI框架，帮助开发者开发高质量的原生应用。其目标是解决移动开发中的跨平台、高性能问题。一经推出，就受到了开发商的广泛关注。

下面将介绍几种流行的跨平台开发技术，从使用成本、开发效率、一致性、动态性、性能等方面进行更深入的分析，提供更具体的参考。

以下是本文的内容。

几个技术方案。

webview.

有了Android和iOS上的webview容器，APP可以执行html、css、js脚本，显示网页。如果需要本机功能，添加一个javascript调用的桥。它具有开发效率高、跨平台、支持动态发布的特点，是目前应用最广泛、最成熟的方案。

ReactNative/Weex.

reactNacional和Weex等方案使用javascript构建接口，这些接口被翻译成本机组件，以便在运行时显示。事实上，所有接口都使用本机组件。支持跨平台，性能和用户体验高于webview，接近原生应用，是目前流行的跨平台开发技术。

颤动.

Flutter用全新的方式重写了一个平台无关的渲染引擎，只提供canvas，所有UI组件和渲染逻辑都在这个引擎上处理。它最大程度上保证了所有平台的一致性，同时具有与原生平台不相上下的高性能体验。

注意:基于webview的框架目前已经广泛应用于APP开发，各种优缺点已经得到充分验证。该技术具有开发效率高、跨平台、动态发布等优点，但缺点也很明显，性能和用户体验都很差。接下来，我们重点分析和比较了反应性和颤振。

使用成本。

学习曲线。

ReactNative采用js语言，基于React，对前端工程师友好，启动成本低。

Flutter使用Dart作为开发语言。Dart有点像Java，简单易用。但毕竟是新语言，会有一些障碍。

访问成本。

如果是全新的项目，访问ReactNative/Flutter的成本较低，但对于混合开发，访问现有项目将是一个巨大的项目。

我们需要考虑如何将SDK集成到现有的项目中，如何在原生页面和ReactNative/Flutter页面之间跳转和传递值，如何封装原生模块以便用ReactNative/Flutter进行调用，如何封装ReactNative/Flutter和捆绑集成，如何部署和发布，如何跨端联合调试。

成熟。

reactNacional于2015年发布。经过三年多的发展，已经越来越成熟。ReactNative社区也很活跃，贡献了很多开源代码。

Flutter今年6月才发布预览版，社区刚刚开发。因此，颤振需要时间。

从Github上开通的期数来看，截至2018年10月28日，reactnative689期，Flutter4097期，也说明Flutter目前并不稳定。

行业采用。

在Android中，通过分析apk使用的库，可以统计出排名前100的应用使用了哪些跨平台开发技术，如下图所示:

不包括游戏和系统应用，使用ReactNative/weex的应用有79个，行业利用率18.9%。

开发效率。

社区。

在选择技术时，社区生态是一个重要的考虑因素。一个繁荣的社区有许多成熟的工具、库、工程系统和最佳实践可供我们使用和学习。

那么如何衡量一个开源社区的活动呢？

简单来说，我们用开发商数量和变化趋势作为指标来衡量社区生态是否繁荣。在github上统计每项技术的仓库数量(2018年10月16日)来分析其背后的开发者数量，这里增加了另外两项技术作为参考对象来更好的比较和分析社区活动，其中Weex是不活跃社区的基准，Objective-C是原生社区的基准。

注:目标-C仓库的数量为396，668，由于数量较大，下图中未显示。

下图是仓库数量变化趋势图，以半年为节点，统计最近一年半的变化趋势。

在接下来的一年里，反应社区拥有最好的生态，并且仍在稳步增长。由于释放时间短，旋舞的群落生态尚不成熟，但发展迅速，未来潜力巨大。

热负荷。

Flutter采用两种编译模式，开发阶段采用JIT编译，代码可以在运行时编译；在发布阶段，ios由AOT编译，编译器在程序运行前编译生成app.framwork，安卓由CoreJIT编译，dart转换为二进制模式，在VM启动前加载。

两者都支持热负荷。热加载，修改代码后不需要重新运行APP，保存代码后可以在手机或模拟器上立即看到效果。相对于原生开发，开发速度大大提高。

调试.

将ReactNative/Flutter连接到本机应用程序将使项目更加复杂，并增加我们开发和维护的难度。特别是在调试时，有时需要交叉使用ReactNative/Flutter和Native，并调试底层的本机代码来跟踪问题。

ReactNative/Flutter的本机部分崩溃也很难收集。通常，我们需要自己收集坠机现场的信息。

一致性。

兼容性。

ReactNative并没有真正实现跨平台。在实际开发中，我们需要适应和弥合两端的差异，这就带来了额外的开发成本。

颤振是真正的跨平台，一套代码在两端运行基本不存在兼容性问题。

动态。

热点更新。

ReactNative支持热更新。

Flutter的机制还不支持热更新，还需要发布。

性能。

为了更准确的度量数据，下面的性能测试都是使用低端设备，跨平台开发框架使用目前稳定的版本。

其中iOS设备为iphone6，开发环境，ReactNative版本:0.50.4，Flutter版本:0.9.4。测试环境，发布模式。

分别用颤振和反应实现相同的演示。Demo只有一个很长的列表页面，显示10000条随机生成的数据，每条数据都有两个本地图标。效果如下:

包装体积。

iOS.

根据测试，两个演示中颤振安装包的尺寸为11.3米..(振颤盘占31m)react原生安装包大小1.4M..(都用ADHoc导出包)iOS原生安装包28k。

安卓。

Android原生安装包大小:1。