最火移动端跨平台方案盘点:React Native、weex、Flutter

最火移动端跨平台方案盘点:React Native、weex、Flutter

如上图,Flutter 主要分为 Framework 和 Engine,我们基于Framework 开发App,运行在 Engine 上。Engine 是 Flutter 的独立虚拟机,由它适配和提供跨平台支持,目前猜测 Flutter 应用程序在 Android 上,是直接运行 Engine 上 所以在是不需要Dalvik虚拟机(这是比kotlin更彻底,抛弃JVM的纠缠?)

如下图,得益于 Engine 层,Flutter 甚至不使用移动平台的原生控件, 而是使用自己 Engine 来绘制 Widget (Flutter的显示单元),而 Dart 代码都是通过 AOT 编译为平台的原生代码,所以 Flutter 可以 直接与平台通信,不需要JS引擎的桥接。同时 Flutter 唯一要求系统提供的是 canvas,以实现UI的绘制。咦?这么想来,支持web端也没问题吧!

最火移动端跨平台方案盘点:React Native、weex、Flutter

在Flutter中,大多数东西都是widget,而widget是不可变的,仅支持一帧,并且在每一帧上不会直接更新,要更新而必须使用Widget的状态。无状态和有状态 widget 的核心特性是相同的,每一帧它们都会重新构建,有一个State对象,它可以跨帧存储状态数据并恢复它。

Flutter 上 Android 自带了 Skia,Skia是一个 2D的绘图引擎库,跨平台,所以可以被嵌入到 Flutter的 iOS SDK中,也使得 Flutter Android SDK要比 iOS SDK小很多。

热门话题: 为什么Flutter会选择 Dart作为开发语言?

八卦消息认为: “是因为 Drat 项目组就在 Flutter 隔壁而被选上”。

实际上真实的原因是: 早期的Flutter团队评估了十多种语言,并选择了Dart,因为它符合他们构建用户界面的方式。

Dart之所以成为Flutter不可或缺的一部分,根本原因还是因为其具有以下特性:

1) Dart是AOT(Ahead Of Time)编译的,编译成快速、可预测的本地代码,使Flutter几乎都可以使用Dart编写。这不仅使Flutter变得更快,而且几乎所有的东西(包括所有的小部件)都可以定制;

2) Dart也可以JIT(Just In Time)编译,开发周期异常快,工作流颠覆常规(包括Flutter流行的亚秒级有状态热重载);

3) Dart可以更轻松地创建以60fps运行的流畅动画和转场。Dart可以在没有锁的情况下进行对象分配和垃圾回收。就像JavaScript一样,Dart避免了抢占式调度和共享内存(因而也不需要锁)。由于Flutter应用程序被编译为本地代码,因此它们不需要在领域之间建立缓慢的桥梁(例如,JavaScript到本地代码)。它的启动速度也快得多;

4) Dart使Flutter不需要单独的声明式布局语言,如JSX或XML,或单独的可视化界面构建器,因为Dart的声明式编程布局易于阅读和可视化。所有的布局使用一种语言,聚集在一处,Flutter很容易提供高级工具,使布局更简单;

5) 开发人员发现Dart特别容易学习,因为它具有静态和动态语言用户都熟悉的特性。

并非所有这些功能都是Dart独有的,但它们的组合却恰到好处,使Dart在实现Flutter方面独一无二。因此,没有Dart,很难想象Flutter像现在这样强大。

有关此话题的详细文章请见《 为什么Flutter会选择 Dart ? 》。

5、React Native、weex、Flutter 3种方案横向对比

这算是互相伤害的环节了吧。(///▽///)

最火移动端跨平台方案盘点:React Native、weex、Flutter

5.1 最终程序大小

以Android平台为例,上面Apk大小是通过 react-native init、weex create 和 flutter 创建出的工程后,直接不添加任何代码,打包出来的 release 签名 apk 大小。从下图可以看出,其中大比例都是在so库。

最火移动端跨平台方案盘点:React Native、weex、Flutter

5.2 社群支持

react native 作为 Facebook 主力开源项目之一,至今已有各类丰富的第三方库,甚至如 realm、lottie 等开源项目也有 react native 相关的版本,社群实际无需质疑。当然,因为并完全正统开发平台,第三库的健壮性和兼容性有时候总是良莠不齐。

weex 其实有种生错在国内的感觉。其实 weex 的设计和理念都很优秀,性能也不错,但是对比 react native 的第三方支持,就显得有点后妈养的。2016年开源至今,社区和各类文档都显得有点疲弱,作为跨平台开发人员,大多时候肯定不会希望,需要频繁的自己增加原生功能支持,因为这样的工作一多,反而会与跨平台开发的理念背道而驰,带来开发成本被维护难度增加。

Flutter 目前还处理beta阶段,但是谷歌的号召力一直很可观,这一点无需质疑。

5.3 性能区别

理论上 flutter 的性能应该是最好的,但是目前实际体验中,却并没有感受出来太大的差距,和 react native(0.5.0之后)、weex 在性能上个人体验差异不是很大。当然,这里并没有实测渲染的毫秒时间和帧率数据。

5.4 其他区别

Weex的多页面实现问题:

weex 在 native 端是不支持 的,这一点和 react-native 不同在与,如果在 native 需要实现页面跳转,使用 vue-router 将会惨不忍睹:返回后页面不做特别处理时,是会空白一片。参考官方Demo playground,native 端 的采用 weex.requireModule('navigator') 跳转 Activity 是才正确实现。

同时,weex中 navigator 跳转的设计,也导致了多页面的页面间通讯的差异。weex在多页面下的数据通讯,是通过url实现的,比如file://assets/dist/SecondPage.js?params=0,而vuex和vue-router在跨页面是无法共用的;而 react native 在跨 Actvity 使用时,因为是同一个bundle文件,只要 manager 相同,那么 router 和 store 时可以照样使用的,数据通信方式也和当个 Actvity 没区别。

项目模板:

weex 和 react native 模板代码模式也不同。weex 的模板是从 cordova 模式修改过来的,根据platform需求,用命令添加固定模块,而在 .gitignore 对 platforms 文件夹是忽略跟踪。 react native 在项目创建时模版就存在了,特别是添加第三方插件原生端支持时,会直接修改模板代码,git代码中也会添加跟踪修改。

6、未来趋势展望

我们选择框架的时候,很多时候会关注框架的成熟度和生命力不是么(◐‿◑)。

6.1 React Native

“Airbnb 宣布放弃使用 React Native,回归使用原生技术” : Airbnb 作为 react native 平台上最大的支持者之一,其开源的lottie 同样是支持原生和 react native。

Airbnb 在宣布放弃的文中,也对 react native 的表示了很大量的肯定,而使得他们放弃的理由,其实主要还是集中于项目庞大之后的维护困难,第三方库的良莠不齐,兼容上需要耗费更多的精力导致放弃。

ps: Lottie库Airbnb出的是一个能够帮助解析AE导出的包含动画信息的json文件。这很好的解决了一个矛盾,设计师可以更专注的设计出各种炫酷的动画效果,而开发只需要将其加入支持即可。

Facebook 正在重构 React Native,将重写大量底层。在经历了开源协议风波后,可以看出 Facebook 对于 react native 还是很看重的。

这些底层重构优化的地方,主要集中于:

1)首先: 改变线程模型。UI 更新不再需要在三个不同的线程上执行,而是可以在任意线程上同步调用 JavaScript 进行优先更新,同时将低优先级工作推出主线程,以便保持对 UI 的响应;

2)其次: 将异步渲染功能引入 React Native 中,允许执行多个渲染并简化异步数据处理;

3)最后: 简化桥接,让它更快、更轻量。原生和 JavaScript 之间的直接调用效率更高,并且可以更轻松地构建调试工具,如跨语言堆栈跟踪。

其他React Native相关文章:

从Android到React Native开发(一、入门)

从Android到React Native开发(二、通信与模块实现)

从Android到React Native开发(三、自定义原生控件支持)

从Android到React Native开发(四、打包流程和发布为Maven库)

6.2 Weex

没有死!阿里公开Weex技术架构,还开源了一大波组件。 2018年初的新闻可以看出,weex 的遭遇有点类似曾经的 Duddo(Dubbo因为内部竞争被阿里一度放弃维护),这波诈尸后 weex 被托管到了Apache,而github的 weexteam 如今也还保持着更新,希望后续能有多好的发展,拭目以待吧。

6.3 Flutter

Flutter 是 Google 跨平台移动UI框架,Dart作为谷歌的亲儿子在 Flutter 中使用,并且谷歌新操作系统 Fuchsia 支持 Dart,使用 Flutter 作为操作UI框架。这些集合到一起难免让你怀疑 Android 是否要被谷歌抛弃的想法。

或者如今先 Android 等平台上推广 Flutter 与 Dart,就是为了以后跟好的过渡到新系统上,毕竟开发者是操作系统的生命源泉之一。而 Java 与 JVM 或者可以被谷歌完全抛开。当然,目前看起来 Flutter 貌似还缺少一些语法糖,嵌套下来的代码有点不忍直视,或者到正式版之后,我们更能感受出它的美丽吧。

(原文链接: https://www.jianshu.com/p/7e0bd4708ba7 ,内容有改动)


分享到:


相關文章: