弃坑 RN，入坑 Flutter，同程旅行架构师给了这四点理由

作者 | 闫园园

采访嘉宾 | 同程旅行架构师李宁

随着移动互联网的普及和快速发展，Android 和 iOS 成为了移动端 coder 的舞台。而传统的纯原生开发已经不能满足日益增长的业务需求。于是，APP 跨平台开发成了现在比较热门的方向。跨平台开发成本低、周期短、易于上手、不用重新设计、省时省力，种种好处让开发者们备受青睐，也让诸多跨平台开发工具趁势崛起。

目前，Flutter 和 React Native 当属此领域的佼佼者。Facebook 在 2015 年推出了 React Native，它的目标是创建移动应用程序，而不会影响应用程序的外观和感觉。随后，谷歌在 2017 年推出了 Flutter，它的目标是解决移动开发中跨平台、高性能问题。

从这时起，新创业公司和企业就为他们选择其中哪个框架开发应用程序而陷入困境，这也推动了 Flutter vs React Native 的辩论。首先来说，笔者认为这两种框架并不存在谁要被 pk 掉的情况，毕竟这两种框架在特定的需求领域都能发挥很好的作用。换句话说，我们没必要对类似“谁是最好的语言”这种问题进行“党派之争”。

但不得不承认，这两年 Flutter 发展非常迅猛，得到了越来越多企业和 coder 的关注，为了能让对此技术感兴趣的同学们有更深入的了解，我们采访了来自 ArchSummit 全球架构师峰会的讲师——同程旅行架构师李宁，由他来结合项目中的实际情况跟大家聊聊 Flutter 究竟有哪些优势又面临哪些问题，此外他将在ArchSummit全球架构师峰会中带来主题为《同程旅行 Flutter 的应用实践》的演讲，感兴趣的同学们也可多多关注。

崛起的跨平台技术

InfoQ：首先请您介绍一下跨平台技术的由来？

互联网很多公司发展需要不断的快速试错，安卓和 iOS 市场占有率高，已经坐稳了移动开发的两大阵营。

如何保证跨平台技术可以保证跨端的一致性、减少多端开发投入、提升开发效率，是所有开发者在不断探索和共同努力的方向，很多跨平台框架如 Hybrid、React Native、Weex、Flutter 等跨平台技术也由此应运而生。

InfoQ：时至今日，已经有了很多跨平台框架，请您介绍一下目前比较流行的移动 APP 开发框架有哪些？它们又各有什么适用范围？

目前比较流行的移动 APP 开发框架有：Hybrid、React Native、Weex、Flutter。

Hybrid：可动态更新的页面，社区资源相对丰富，性能较差，对复杂用户界面支持不友好。适用范围：多应用于相对简单用户界面，可动态更新页面；

React Native：对 IOS/安卓开发有一定认知，依赖 native 相关组件实现，有大量适配工作，支持热更。体验高于 Hybrid，可热更新。适用范围：更适合对原生开发有相关经验的开发者使用来开发，可实现相对复杂的界面；

Weex：与 React Native 实现方式相似，依赖 Natvie 相关组件实现，封装 Native 组件工作量大，体验方面等同于 React Native，需要掌握 Vue 相关知识体系。适用范围：理论上等同于 React Native；

Flutter：目前为止最接近原生的跨平台框架，自绘引擎，性能强大，流畅度高，易上手。需要具备原生开发能力，对 App 包大小影响较大。无法热更新。适用范围：自绘引擎性能强大，体验接近原生，开发易上手，可支持丰富的动画。可做较复杂动画和页面的开发。

同程旅行 Flutter 实战

InfoQ：Flutter 和 QT mobile 一样，实现了一个自绘引擎。但在近几年，QT 的声音一直很弱，您认为 Flutter 会不会步入 QT mobile 后尘呢？

我认为不会的。

首先，Flutter 官方推广力度比较大，版本更新频次较高，虽然都是使用自绘引擎，但是 Flutter 对前端开发更友好，性能强大，上手简单而 QT mobile 上手难。

其次 QT mobile 社区生态推广力度小，受众也小，且 C++相对 Dart 开发效率低下，这也是造成 QT mobile 逐渐被遗忘的原因。

InfoQ：请您展开说说相比于 React Native 框架，Flutter 的优势是什么？

第一，JIT 模式下，编译速度与 JavaScript 基本持平，但是对于 AOT 模式下，Dart 效率远高于 JavaScript，JavaScript 则不具备 AOT 这个能力；

第二，Flutter 使用的是自绘引擎，对 UI 的操作，布局的修改执行效率要比 React Native 效率高很多，React Native 基于 dom 树绘制修改原生组件，性能的瓶颈也在于此；

第三，Dart 支持静态监测，可以在编译前发现很多编译问题，排除潜在问题（天生具备）而 React Native 则需要添加相关插件来做检测；

第四点，Flutter 可支持较复杂的动画，流畅度方面表现高于 React Native。

InfoQ：您和团队是基于怎样的考虑，选择 Flutter 开发成为团队的主要技术呢？

关于这一点我们是这样考虑的，第一，Flutter JIT 编译模式可以极大地提升开发效率，原生开发前所未有的体会到了开发的便捷；

第二，Flutter 可以严格保证跨端的一致性，AOT 模式下的高性能保证了体验流畅度，开发易上手、学习成本低，解决了我们提升开发效率和降低开发成本的诉求。

InfoQ：开发者经常会这样评论：Flutter 目前最大的优势在于使用 Dart，最大的劣势也在于使用 Dart，对这句话您有何见解呢？

对于优势之前问题的回答已经很全面了，这里就不在赘述，这个问题我主要来聊聊关于 Dart 的几点劣势：

第一，不支持反射，无法在运行时动态修改类的行为；

第二，线上发布代码，无法热更新；

第三，Dart 相关社区目前还不是很完善，有待大家共同完善社区；

第四，相关开发工具支持的力度还不是很成熟；

第五，刚上手的开发者需要避免地狱嵌套这种模式，需要多注意控件的状态管理。

第六，Dart 的空安全，在升级版本的时候，需要重新适配，比较头大。

以上都算是 Flutter 上面的小瑕疵，但瑕不掩瑜，我相信使用 Dart 的开发者会越来越觉得 Dart 用起来“真香”。

InfoQ：Flutter 框架有其自身的优越性，然而事物都有两面性，您能结合实践说一下目前发现的挑战有哪些吗？

第一，Flutter 上线之后，业务发现异常。对于严重影响主流程的 case，只能通过发版来修复相关场景问题，无法做到及时止损，这样业务也会受损。

对此，我们调研了一番，在一开始版本 Flutter 有支持热修复相关场景，后考虑到苹果审核或者 Google 自身官方审核不允许动态更新的机制，阉割了该功能，多么痛的领悟。

后来，我们又对比了业界目前动态化方案，都是曲线救国，并不能从根本上处理问题，先透露下我们的方向，开启 Flutter JIT 模式来实现热修复，不过 JIT 模式下性能还是有损的，鱼和熊掌不能兼得。目前处于测试阶段，方案待同步给大家；

第二，线上指标和本地调试性能的差异。目前 Flutter 提供了本地测试相关性能的工具，不过和线上指标相比还是有差异的。

上线指标是我们关注的重点，用户不同机型，跑我们页面的性能需要指标量化，这就需要我们对线上相关指标监控起来，包括异常数据 、页面流畅度、cpu 使用率、首屏时间等都是需要量化和监控起来的。

有了指标，后面就是针对性的优化了，持续优化是我们不断进步的方向；

第三，切换版本。Flutter 升级迭代，都会发现相关需要适配的 API，以及需要兼容性的事情。

之前升级 1.9.1-1.22.6（跨动比较大），除了应用层面 API 需要适配，一些底层渲染 API 也给删除了，没有相关方法，只能通过应用层面来适配，解决升级版本兼容性的问题（修改引擎层改动量大，版本升级适配工作量多）；

第四，自动化集成。目前同程旅行 App 使用的是混合开发模式，Native 开发无感知集成到 App 中，目前分为上线集成模式和开发调试模式，分别用来集成 debug 产物和 release 产物，都以 Native 组件的方式集成进来。

InfoQ：针对以上您发现的挑战，就其中一点说说您和团队的解决方案？

上个问题已经为大家解答了一下，这里我再做一些补充。

虽然 Flutter 提供了相关监测工具，但是基于 release 模式上线相关性能指标是无法真实监测到的，所以同程旅行为了及时监控到相关线上指标，自研了相关性能监控组件，量化了线上相关性能指标并进行了及时的治理工作。

监控项主要分为以下几点：页面异常信息、FPS 监控、Crash。总的来说，监控性能以及相关指标的优化任重道远。

Flutter 之前景探索

InfoQ：在 Flutter 1.0 发布会上，Flutter 产品经理介绍了如何让 Flutter 运行在 Web 之上。那么经过发展目前 Flutter for Web 的现状是什么？

关于 Flutter for Web 的现状，我认为虽然 Flutter2 已经正式支持稳定版本的 web 应用发布，但是包的大小、启动速度、FPS 等性能方面还不太令人满意，而且目前混合开发模式部署到 web 兼容适配问题还没有一个很好的适配方案。

但是在我看来随着时间推移和社区的完善，这些问题肯定可以得到很好的解决。

InfoQ：您认为 Flutter 的未来趋势如何呢？

针对这个问题，基于上面的回答我先给大家总结几点优势：

第一，Flutter 使用 Dart 语言进行开发，Dart 可快速上手，简单易学，越来越受开发者的追捧；

第二，Flutter 性能表现和流畅的体验方面的优越性已经是当下跨平台不可逾越的；

第三，随着越来越多的开发者加入到 Flutter 开发阵营和社区的生态的完善，开发者遇到的问题可得到越来越快速的解决；

第四，Google 大力推广 Flutter，从频繁的版本发布我们可以看出 Google 对待 Flutter 推广的态度，特别基于目前国内混合开发声音越来越高，Flutter 对混合开发也是越来越重视，不断的进行性能优化和底层能力升级。

因此，综合以上的几点优势我认为随着社区的完善和官方的大力推广 Flutter 在未来跨平台领域的市场占有率会越来越高，发展也会越来越好。

采访嘉宾介绍

李宁，同程旅行架构师，2016 年加入同程旅行，目前在研发中心的基础架构部门负责 iOS 端相关架构设计工作，包括持续集成工具链、组件化、跨平台等设计和开发，尤其在推动业务落地方面有丰富的实战经验，主导设计的 Flutter 混合框架已成为公司推动的主流跨平台解决方案，各项技术指标达到业内领先，已经受过相当规模的业务落地检验。在 App 架构设计方向有丰富的理论和实战经验，曾就职于金山、宜信等公司，主导了公司组件化，跨平台框架的相关设计并推演落地。

李宁老师将在 11 月 12 日-13 日的 ArchSummit 全球架构师峰会中分享议题“同程旅行 Flutter 的应用实践”，针对如何通过技术手段，快速发现线上的异常，卡顿，Crash 以及如何量化线上性能指标等问题，分享实践过程中的相关解决方案，希望能为大家提供新的思路或者启发，点击了解详情。