一文看完阿里巴巴 AliFlutter 客户端研发体系

简介： Flutter 是开源的 UI 工具包，其可以帮助开发者经过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 组件采用现代响应式框架构建，中心思想是用组件 (widget) 构建 UI。淘宝终端技术部无线技术专家王康从 Flutter 的原理出发，介绍了 Flutter 的原理、业内现状，以及阿里巴巴在 Flutter 上所作的深度实践和探索。

一 Flutter 原理

Flutter 主要有四个特色：美观、高效、高性能、开放。

• 美观：Flutter 提供了丰富的 Widget，好比动画、手势等。Flutter 采用了组合式 API 模式，所以为 UI 建立带来了更强的灵活性。此外，Flutter 使用了游戏引擎的方式来写 APP，使得用户能够具备很强的灵活性，可以在像素级别进行控制。
• 高效：Flutter 相似于安卓小系统，使得其可以使用一套代码运行在各类各样的平台之上。此外，在 Debug 模式下还支持热重载，使其可以达到高效的研发效率。
• 高性能：在 Release 模式下，Flutter 是预先编译成机器码，执行期具备高性能。
• 开放：Flutter 是一个开源的项目，基本全部工做均可以在 GitHub 上看到。

以上四个特色的背后就是 Flutter 的原理。首先，Flutter 架构在 OS 之上，最底下是与平台相关的 Embedder 层，其主要负责的工做是 Surface、Thread 以及 Event Loop。在 Embedder 层之上是 Engine，主要包括三部分，Dart Runtime；负责将 UI 绘制到 Surface 上的 Skia，负责文本绘制的 Text。在 Engine 之上就是你们所熟知的 Dart 的 Framework。基于上述这些，开发者便可开发应用。

阿里巴巴为何选择 Flutter

在阿里巴巴的电商场景下，每每会有一些很是重要的考量，好比用户体验的要求，对于研发效率的要求，以及如何消除多端之间的差别。在阿里经济体里面，应用所须要部署的目标设备是很是多元的，不只有常见的 iOS 和 Android，还有钉钉等桌面场景、天猫精灵等 IoT 场景以及各类线下大屏的场景。当前，流量增加红利不断减小，须要更多创新玩法为消费者提供更好的用户体验，这就产生了富交互游戏化的需求。Flutter 具备的高性能，高研发效率、跨端一致性，多端多平台支持，以及丰富的表达力使其能够解决这些痛点。

二 Flutter 业内现状

在阿里巴巴内部，目前有十几个 BU 的几十个产品正在使用 Flutter，典型的包括淘宝、闲鱼、UC 以及优酷等。在业内，腾讯的微信、Now 直播、翻译君等，字节跳动的西瓜视频、皮皮虾，快手的快影，美团的美团骑手、美团外卖商家版、美团众包以及百度的贴吧等也都应用了 Flutter。

Flutter 在业内的实践现状主要围绕着体系化、深度、框架以及更多探索这些维度展开。在体系化方面，须要作一些基础设施的建设，这是由于 Flutter 以及 Dart 的不少东西还不成熟。使用 Flutter 解决业务上线问题，须要考虑研发体系的构建。应用上线以后，须要监控各类指标。在深度方面，每每会关注引擎大小、包大小、内存优化以及启动时间等。除了上述两部分以外，业内也有不少框架相关的工做，好比混合栈框架、状态管理、动态化 UI、AOP 框架以及生态插件等。此外还有原生 Flutter 之外的一些探索，好比小程序渲染和先后端一体化等实践。

三 AliFlutter 建设与深度实践

AliFlutter 业务实践

下图选取了阿里经济体中一些应用了 Flutter 的典型场景。好比宝贝详情是一个业务逻辑很是复杂的页面，属于图文混排的页面，而且具备大量图片，有时还包括一个视频播放器，在这个场景下就所有应用了 Flutter。有团队使用 Flutter 框架用于游戏业务的开发，好比下图所示的是盒马使用 Flutter 构建的一个游戏页面。此外，在 Alibaba 这一应用中，也大量使用 Flutter 用于构建主链路以及订单页面等。

之因此选择 Flutter，有几个典型缘由。首先，HotReoload 和跨端一致性使得研发很是高效；其次，可用于游戏化的丰富 UI 表达力、动画、图文混排性能等诉求都能被 Flutter 很好地知足。

AliFlutter 业务研发模型

在业务场景的背后是 AliFlutter 的业务研发模型。其实，Flutter 自己主要解决两个问题，逻辑和 UI。其自己没有各类 Native 能力，须要为其补齐如网络、推送以及接入网关等，使其更加接近于业务开发容器，而不只仅是 UI 开发框架。再上面就是应用开发框架，好比状态管理框架、游戏化框架、动态化 UI 以及组件库，在此之上就能够构建一些业务了。除此以外还会涉及到一些研发协同方面的工做，好比打包构建、Linter、Pub 库等。

AliFlutter 引擎研发模型

在 AliFlutter 之下，存在不少引擎修改的场景。举例而言，在 iOS 13 如下可能存在一些后台 GPU 渲染 Crash 的问题，在 Android 上存在特别机型 Flutter 启动闪退的问题。此外，还须要考虑如何让 Flutter 和目前已有生态进行融合，好比图片库、网络库等在阿里内部都有比较好的实践。不管是 Bug 修复仍是 Native 能力提高，其实都是对于 Flutter 引擎所作的定制化工做。

上图展现的就是在阿里内部对于 Flutter 引擎进行定制所作工做的逻辑，首先经过 Flutter 框架获取对应的引擎代码，拉取依赖，进行开发，到 Gitlab 作 CI，代码审核完成以后将产物构建出来上升到服务上面，最终经过简单的方式来提供服务。

AliFlutter 基础设施建设

自定义引擎服务

前面所提到的是自定义 Flutter 引擎的开发流程，而想要将开发完成的东西提供给其余人使用，就须要以下图所示的自定义引擎服务了。对于 Flutter 开发者而言，只需设置一个环境变量去服务上查询是否有对应的产物便可，若是有的话，就作一些定制并返回给开发者；若是没有则去官方上游拉取。固然了，对于 Flutter 的基础设施而言，须要有一些多团队的支持，好比 Namespace 等机制。最先的时候，阿里巴巴经过 Git 方式管理自定义引擎，可是 Git 对于二进制很不友好，因此就使用了高效自定义引擎服务来解决问题。

私有 Pub 服务

除此以外，AliFlutter 还实现了私有 Pub 服务。最初的想法是将不一样人开发的库等工做归类组织起来，建设更好的内部生态，实现更好的复用。Pub 自己就是 Flutter 所提供的开源框架，可是其深度绑定了谷歌云服务，因此在作这部分的时候须要将对于谷歌云的依赖变成对于阿里内部的依赖。主要工做分为两部分，一部分是对于包的简单管理和存储，这部分能够经过阿里云存储 OSS 实现；还有一部分是监控包的下载量以及健康程度等，这部分还部署了 Meta 数据库服务，在将包上传的时候将数据同步过去，以及面向使用者的前端服务。

持续构建

这部分的主要工做就是如何将所写的 Flutter 代码提供给没有 Flutter 环境专门用于打包平台。Flutter 工程能够经过一些脚本构建出一个 Pod 或者 Gradle，进而集成起来变成一个 APP。

AliFlutter 深度实践

图片库优化

在阿里巴巴内部，除了对于 Flutter 作的一些体系化实践，还有很多深度化实践。好比对于图片库的优化，对于 Flutter 而言，自己的图片库存在一些问题，好比内存占用高，不释放问题、CPU 占用问题。为了尽量遵循 Flutter 原生的图片库逻辑，作了图片库的优化。主要工做包括对于 Flutter 框架的总体修改，可以较好地实现一致性，与官方体系无缝融合，对接内部图片库，其在性能以及易用性上面也具备较好的表现。

引擎大小优化

咱们在 Flutter 引擎大小优化方面也作了很多工做，简单介绍对于库的裁剪。以下所示的两张火焰图，其较好地表达了 Flutter 引擎所依赖的各个库裁剪先后的比例对比。裁剪后的内容既保证了功能的完备性，也显著下降了引擎大小。

大图片内存 GC 优化

除了前面所提到的相似于音频图片释放等内容以外，阿里在实践的过程当中发现 Flutter 在大图片内存 GC 方面存在一些问题，好比在用户退出的时候内存没法获得很好释放。对于社区中使用 Flutter 的同窗而言，面对这样的问题建议你们在 Profile 模型下看下点击了 GC 按钮是否可以将内存下降下来。基于此逻辑咱们提供了一套供上层业务使用的 GC API。从 FlutterEngine 开始依次调用 Shell、Engine、RuntimeController 以及 Dart 的 NotifyGC。

Flutter Canvas 实践

Flutter 包含了 Skia，可提供 Canvas 能力。以前的逻辑是经过 Dart 调用 Engine，再调到 Skia，而咱们经过实践中对其部分 API 的暴露，将 Skia 的 Canvas 能力加以透出。在 JS 部分有一些 2D 和 3D 的 API，能够将这些暴露成为 Canvas API，总体而言，相比于 Web 的 Pipeline 表现很是不错，这一功能目前已经在部分业务开始灰度测试，数据表现也很是不错。

AOP 框架（AspectD）

Flutter 的 AOP 框架的核心基于 dill 变换，dill 自己是从 Dart 代码到最终代码之间的中间语言表达。其原理简要来讲是当咱们写了一个 hello_fultter 的时候，再写一个 AOP 包，AOP 的包会包裹 hello_fultter 包，使得在 AOP 包的产物 (dill) 里面 hello_flutter 和 AOP 的逻辑都存在，即其包括两部份内容，hello_flutter 自己代码的 dill 表达，以及 AOP 框架中写的注解的 dill 表达，将这二者都包含在 app.dill 里面，基于此咱们能够经过 dill transform 方式来作变换。这里比较复杂，须要考虑 AST 抽象语法树的各类逻辑。须要将注解提取出来并基于这些注解进行操做，并最终写入到 dill 里面去，这些操做处理完成以后，就变成了 aop_aspectd.dill，替换掉以前的 app.dill 便可。

四 AliFlutter 研发模式探索

AliFlutter 研发模式

下图中最重要的就是研发模式和跨平台运行时，目标是提供一种多端多平台的能力。在平台底层是基础库、网络库的基础能力，此外还须要在垂直能力上的扩展，支持各类垂直的基础能力。基础设施之上是 Flutter 的跨平台运行时，运行时基于 Flutter Engine，提供了具备丰富表达力的图形接口、跨平台、能力拓展、性能以及稳定性等。在此之上，Flutter Framework 提供了能够复用的基础能力，好比核心布局渲染、弹性扩展能力、组件能力以及定制性等。除此以外，也有一些研发支撑上面的工做，好比编译打包、调试、灰度发布、线上监控、运维能力以及数据化等。

AliFlutter 研发模式展望

在 Flutter 的将来发展方向，阿里巴巴主要的工做将集中于如下四点：

• 跨端能力：咱们考虑对于上层的各类平台提供标准基础能力并 API 化，从而更好在多端多平台进行部署。此外，还但愿经过 Flutter 的容器化，使得研发和业务方可以更多地专一在自身业务上面去。
• 交互能力：咱们考虑利用 Flutter 丰富的表达能力在游戏化方向进行更好的扩展，以游戏引擎的方式来开发 APP。基于泛化的交互能力以及更多的可玩性和创新性可以为业务带来更多可能。
• 研发效率：咱们考虑实现工程解耦和云端一体化，目标是业务方只需关注所写的包，经过很简洁的方式集成进来并看到效果，从而提供相似于前端的开发体验。此外经过云端一体从面向端侧负责转变到面向业务总体负责。
• 交付效率：这部分主要包含两部分，一部分是动态化 UI，另一部分是 Web On Flutter，指望经过提供更加灵活的动态性，以及前端技术栈下的动态化能力。

总结

在本文中，首先，为你们分享了 Flutter 的原理，介绍了 Flutter 美观、高效、高性能、开放的特色，以及阿里巴巴为何选择 Flutter。其次，为你们分享了 Flutter 的业内现状，有大量投入的主流厂商，以及体系化、深度、框架和更多的探索。再次，为你们介绍了 AliFlutter 的建设与实践，包括了业务、研发模型、引擎研发等方面的实践。最后，展望了对于 AliFlutter 研发模式的考量和将来发展方向。