Flutter 在阿里淘系的体系化建设和业务实践

最新推荐文章于 2024-08-06 08:22:55 发布

2401_84123357

最新推荐文章于 2024-08-06 08:22:55 发布

阅读量963

点赞数 29

分类专栏：程序员文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/2401_84123357/article/details/137389079

版权

程序员专栏收录该内容

470 篇文章 0 订阅

订阅专栏

作为一个技术框架，Flutter 该有的功能都有了，但要把它应用到业务中去，还得解决工程问题、复用已有的技术积累、融入业务的工作流等，还要针对特定的业务场景做增强和扩展。所以，我们的核心目标是把 Flutter 从一个单点的技术框架，打造成完整的企业级解决方案。

消息通知

九月淘系技术重磅推出**「淘系Flutter体系化建设原理&实战系列直播」**6场直播，为您带来一线实战经验，文末报名！

Flutter社区发展情况

在官方四月底的统计数据中，自发布以来的 16 个月内，已有 200 万开发者使用 Flutter，三月份的时候也有 10% 的增长，Google Play Store 中发布的 Flutter 应用约有 5 万个，仅在2020年4月就有近 1 万个应用上传。开发者所在的团队，初创公司最多，占了 35%，26%是企业开发者，19%是独立开发者，还有7%的设计机构。

Flutter 使用者数量排名前五的地区是印度、中国、美国、欧盟和巴西。很神奇，国内开发者对 Flutter 的热情比出生地美国还要高。从各种公开信息来看，头条、微信、QQ、美团、抖音、快手都对 Flutter 保持的密切的关注，而且已经不是小规模尝试了，有些公司已经铺开准备大规模建设了。

简单来讲，Flutter 的发展势头越来越猛，国内大公司都在建设，Flutter 更受新兴业务的青睐。

阿里淘系的业务背景

淘系业务面临较大的竞争压力，整个移动互联网的竞争也越来越激烈，为了吸引并留住用户，对产品的性能、使用体验和迭代效率都有更高的要求，像直播/短视频/沉浸式交互/AR//3D 等新交互形式可以明显的提高业务竞争力，这些技术基本上都是原生能力，所以需要一个和原生技术结合度好，而且又能避免写重复代码的技术方案。Flutter 比较符合这个定位。

除了淘宝 App 本身，还有一系列淘系应用，如闲鱼、淘宝特价版、直播App、躺平等新兴应用不断出现，整个阿里已经有 30+ App 在使用或者在尝试 Flutter 了，为了减少重复建设，需要沉淀出通用的技术能力，站在现存的技术积累之上，打造出完整的技术体系。

阿里在 Flutter 的技术积累

手淘从 Flutter 刚诞生以来就对它保持关注，2018 年开始就持续做技术探索，去年启动了 AliFlutter 的项目，希望可以拉通阿里内部 Flutter 相关的技术积累，有了一些初步的成果。

▐ 基础设施建设

首先标准化了 Flutter 的工程构建。有统一的代码仓库来管理 Flutter 的源码，有专门的升级发版节奏，确保可以跟进官方的迭代。客户端打包的环境配置比较复杂，还要和阿里自身的开发环境做融合，这些功能已经形成了平台和工具，也开放了部分功能让大家可以定制和扩展自己的引擎。

另外还提供了阿里内部的 pub 库实现包管理，类似前端的 npm，让 Flutter、Dart 的通用功能库有地方可以承接。

而且还与手淘的基础设施做了紧密结合。对接了内部的摩天轮（MTL）打包平台、性能稳定性监控的高可用平台，手淘基础的图片库、网络库、日志、埋点和一部分基础中间件。Flutter 的开发、测试、打包、集成、发布、运维监控等功能，都融入了客户端开发本身的工作流中。

完善 Flutter 的基础设施是后续所有工作的基础，让 Flutter 开发不再处于刀耕火种的工作环境。

▐ 内核增强与扩展

把 Flutter 落地到业务的过程，也不是一帆风顺的。性能倒不是瓶颈，但是包体积太大、内存占用高是经常遇到的问题，所以去年有一部分精力花在 Flutter Engine 本身的优化上，分析二进制产物的包结构，压缩 Flutter Engine 和 Dart AOT 编译产物的大小。分析 DartVM 的内存管理机制和 snapshot 功能，不断优化内存。而且有针对性的对图片库的内存、Engine 的启动流程做了优化。

在图形化方面，Flutter Engine 提供了一套兼容性和性能都比较好的图形接口，而且跨平台一致。所以基于 Flutter Engine 封装了 2D Canvas API 透出到 JS 环境，性能和稳定性相比之前的技术都有大幅提升。而且对接到了淘宝小程序的容器环境，支撑互动类的业务。

▐ 信息互通

在阿里内部建立了 AliFlutter 信息互通的虚拟组织，淘宝、闲鱼、特价版、飞猪、盒马、UC、钉钉、CBU/ICBU、优酷、本地生活、搜索、天猫精灵等 BU 都有接口人在参与，定期开会同步信息，避免出现重复建设。

另外在社区我们和 Google 官方团队也保持着联系，定期开语音会议。这个合作关系建立之后，在社区也可以混个脸熟，我们提的 issue 和 PR 说不定会被优先处理~

▐ 技术探索和实践

我们团队积累了 15+ 高质量的技术文章分享在内部的技术论坛，在原理分析、性能优化、应用和实践这三个大类里，分析 DartVM 的原理以及背后的 GC 和 Snapshot 机制，研究 Flutter 的渲染管线，思考 Web 生态和 Flutter 对接的方案，优化 Flutter Engine 的启动时间和包大小，解决实际业务中图片库接入、长列表内存占用高等问题。

细化 Flutter List 内存回收，解决大 Cell 问题

Flutter瀑布流及通用列表解决方案

目前待解决的问题

下图左侧是 Flutter 官方做过一次问卷调查，评选出了开发者实际开发过程中最关心的问题。

前六项任务摘录出来如下：

	最重要的任务	最难的任务
1	调试 Flutter 应用中的错误和崩溃	解决 Flutter 应用在特定平台上出现的问题
2	测试应用，确保其在各个平台上都能运行	诊断和修复 Flutter 应用中的内存问题
3	为 Flutter 应用选择状态管理方法	诊断和修复 Flutter 应用中的 CPU 使用问题
4	了解并解决布局问题 (如文本溢出)	将现有的针对特定平台的原生 API 添加至 Flutter 应用
5	根据 UX/UI 设计师提供的设计规范来创建 UI	诊断和修复 Flutter 应用中的 UI 卡顿
6	解决 Flutter 应用在特定平台上出现的问题	开发 Flutter 插件 (针对特定平台的实现)

这是面向所有社区开发者的问卷，我们在实际业务中遇到的问题也类似，总结下来主要是对开发效率、调试测试、解决方案、功能复用的诉求比较强烈。说明 Flutter 作为一个新兴的研发模式，在工程、工具方面做得还不够成熟，生态还不够繁荣，尤其是贴合业务场景的解决方案比较少。

这些问题是我们下一步的工作重点，从实际的业务痛点出发，不断完善 Flutter 的内核能力和平台支撑，在保障产品质量和体验的同时，提升业务的交付效率。

总结与未来****规划：Unicorn 独角兽

用「独角兽」项目孵化更多「独角兽」。快速迭代，野蛮增长！

▐ 解题思路

前面介绍了，这个项目的核心目标是：

在业务视角，完善 Flutter 的研发模式和平台支撑，在保障产品质量和体验的同时，提升业务的交付效率。
在技术视角，建设产品化的 Flutter 技术体系，将一个单点的技术框架，打造成完整的企业级解决方案。

为了实现上面的目标，我们从四个层面做建设，最下面是对 Flutter 本身内核的增强，然后再向上提供一站式的研发平台提升业务的迭代效率，同时也提供产品化的服务保障整个项目可持续迭代，最上面是业务支撑，解决在业务落地过程中实际遇到的问题。

这个项目并没有推翻任何积累，没有造新轮子，而是用更加体系化的方式，梳理在做的关于 Flutter 的事情，做一个整体规划，并且和集团内所有做 Flutter 技术的团队保持信息同步，以开放的心态做技术，技术成果互通互享。

▐ 整体规划

顺着上面的思路，把各项内容展开来看，是这个样子的：

整个项目是在之前的技术积累上进一步做建设，首要原则是降低对 Flutter 本身技术的侵入性，确保架构可持续迭代。因为 Flutter 还是一个快速迭代的技术，一旦开始分化，再跟进官方的进展就很难了，前期接入的业务就会成为历史包袱，要极力避免这种情况。

电商系的业务场景很复杂，不同场景的技术诉求也不一样，所以架构上要做到可灵活扩展，让垂直类的能力可以快速接进来，实现差异化。另外为了降低业务的使用成本，要保证功能的开箱即用，优化开发体验。

关于演进路线，Flutter 本身的技术特点也比较适合历史包袱比较少的新兴业务，所以优先考虑的是新型 App 和垂直类的业务，然后再推广到常规业务中。从技术角度是自底向上做建设，首先保障底盘的稳定性，而不是上来就搭花架子。对接好基础设施之后，下一步是为业务提效，然后再做扩展和对接，最后沉淀出靠谱的技术方案回馈社区。

▐ 基础能力增强

基础能力的建设和可以分为三层：

**应用层：**这部分主要解决在业务实践过程中遇到的问题，提供解决方案。闲鱼是 Flutter 的技术先驱，在应用层有很多积累，比如 Boost(混合栈) 和 Candy(游戏化开发)，除此之外我们还有正在做 DX Flutter 容器(模板化/动态化渲染)，卡片级嵌入(multi-window) 等技术方案。
**引擎层：**这部分逐渐走向技术的深水区，分别在启动链路、AOT 编译、DartVM、渲染管线、图形化/光栅化等领域做优化和增强，在业务无感的情况下，提升内核的性能和稳定性。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。