美团：基于跨平台框架Flutter的动态化平台建设

Posted 2021-04-29 前端之巅

作者 | Yonie，王文婧

编辑 | Yonie

由 Google 推出的移动端 UI 开发框架 Flutter 在快速构建 ios 和 android 应用及开发、高性能、可移植性上表现优秀，并可以与现有代码一起工作，基于这些特点使其越来越受到开发者的推崇。Flutter 采用 Dart 语言，自带的高性能渲染引擎（Skia）自绘，内置大量精美的 Material Design 和 Cupertino 小部件，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。相关从业者称，与其他众多跨平台框架相比，Flutter 绝对是体验最好、性能与构建思路最接近原生开发的框架。

随着 Flutter Release 1.0 的发布，美团的技术团队也积极跟进了 Flutter 技术，并针对 Flutter 自身动态性不足的缺陷，提升了动态化的能力，使之形成了一个支持动态的 Flutter 开发平台。

在本周即将举行的 GMTC 全球大前端技术大会 上，我们也有幸邀请到了来自 美团的大前端技术专家刘志磊，他将在会上发表题为《基于跨平台框架 Flutter 的动态化平台建设》的演讲，就 Flutter 前世今生、跨平台与动态化以及如何进行 Flutter 平台化建设带来他的经验分享。以下是 GMTC 对刘志磊老师的会前采访：

InfoQ：您此次议题是关于跨平台 Flutter 的动态化平台建设，可以和我们谈一谈为什么采用 Flutter 这个跨平台的框架吗？ RN 、Weex 和 Hybrid 的方案有考虑过吗？

刘老师： 采用 Flutter 去做我们的跨平台框架主要是基于两点：首先， Flutter 在性能上有很大的优势，Flutter 是基于 dart 语言实现的，release 模式下采用的是 AOT 的编译模式，所以逻辑的执行上会很快；Flutter 的渲染是直接在引擎层内置了 skia 图形渲染库，使其在渲染上有媲美原生的渲染能力。其次，就是 Flutter 的跨平台的特性，可以极大程度上保证 Android 和 iOS 双端的一致性。

RN 和 Hybrid 作为成熟的跨平台方案，在美团内部其实已经有了大面积的使用，但是各有各的缺点。Hybrid 最大的问题在于其性能瓶颈，而 RN 虽然在性能上表现不错，但是由于采用的是双端 Native 渲染，在双端一致性上会有一定的差异。并且，RN 的平台组件的维护需要双端的同学。

所以，我们采用 Flutter 作为基础，建设动态化平台，希望在性能、双端一致性和后续的维护上都能有很好的表现。

InfoQ：为什么要做成动态化平台? 是有特定的项目需求，还是为了解决实际业务中的某些技术痛点呢？

刘老师： 做成动态化平台主要是基于三点：

• 第一点，“存量”的问题。Flutter 作为一个新的技术，肯定还是有一定的学习成本的。然而，公司的业务线基本以已存在的跨平台方案为主。而且，业务占比也是存量业务居多，大都是在原有业务的基础上迭代进行的。如果全部切换成 Flutter ，成本比较高，所以我们的方案基本上是上层维持原有方案，在底层切换成我们的跨平台方案。动态化能力本身就是原有跨平台方案的一部分，所以我们需要做成动态化平台。

• 第二点，业务形态的问题。电商类的应用对发布效率要求会比较高，动态化能力会极大地提升发布效率。

• 第三点，应用大小的问题。由于公司业务线众多，应用大小已经成为一个不得不考虑的问题，所以我们希望业务代码有动态能力，可以不用打到应用包里，可以动态获取。

InfoQ：请您和我们分享下，您在搭建这个平台时主要采用了哪些技术？这些技术的优缺点分别是什么?

刘老师： 首先，我们的整个平台是基于 Flutter 实现的，Flutter 本身在跨平台和性能方面都表现卓越，但是由于苹果对于动态代码执行的限制，导致 Flutter 本身无法实现动态化。于是，我们引入了 javascript 来作为我们逻辑层动态能力的补充。虽然 JS 在执行效率方面不太高，但是作为 iOS 唯一能执行动态代码的方式，JS 也就成为了逻辑层动态能力不可或缺的元素。在 UI 层，我们采用 DOM + CSS 的方式描述 UI，平台内部会将元素解析成对应的 Flutter 的 Widget ，最终渲染出来。

InfoQ：该平台的技术创新点有哪些？

刘老师： 创新方面主要是根据 Flutter 本身特点以及对动态化能力的剖析实现了一套特有的跨平台动态化方案。

InfoQ：您在开发这个平台的时候遇到了哪些技术难点？对应的解决方案是什么？

刘老师： 主要的技术难点是 Flutter 层如何和 JS 层通信的问题，因为目前 Flutter 是无法在框架层和 C++ 层通信的，需要借助 MethodChannel 先和 Native 层通信，然后 Native 层和 JSCore 进行通信。这样一来，执行效率肯定会大打折扣。我们的方案是在 Flutter 引擎直接打通 Flutter 和 JSC，对上层直接暴露 Flutter 层 API，直接调用。

InfoQ：Flutter 作为跨平台框架在今年备受开发者关注，目前只有大厂在使用，如果未来在中小型企业普及，会给他们带来什么样的变化？您可以从项目架构、性能的稳定性与优化、开发者的角度分别谈一下吗？

刘老师： 其实对于中小型企业来说，Flutter 无疑是一个很好的技术方案。首先，架构层面除了适配层少量的双端工作外，其余整个业务层架构，全部由 Flutter 来实现，这将极大地节省开发以及维护成本。在性能方面，Flutter 本身的渲染机制更为底层，所以性能方面也完全媲美 Native。在稳定性方面，根据目前大厂的使用情况来看，框架本身的崩溃率极低，而且 Flutter 团队来自于 Google 的 Chrome 团队，后续质量也肯定有保障，所以大家只要保证自身业务代码的质量就可以了。对于开发者而言，Flutter 在语言层面还是比较容易入门的，而且 Flutter 写 UI 的方式和 RN 以及苹果刚刚推出的 SwiftUI 很相似，书写方式简洁易懂。所以，还是比较推荐大家尝试一下。

 活动推荐

在以上的采访中，刘老师简单的介绍了一下 Flutter 跨平台的动态化平台建设方案，相信大家也没有听过瘾，详细的技术细节和实现方式欢迎大家来大会现场与刘老师面对面交流。更多 GMTC2019 的精彩议题欢迎点击”阅读原文“查看详情，目前大会购票倒计时 3 天，想要买票的小伙伴抓紧啦，可以直接联系我们的 票务小姐姐：18514549229。