文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
为什么是 Flutter?
那么,是什么原因让集团内越来越多的开发者选择拥抱Flutter技术栈?Flutter的哪些优势吸引了集团Native开发者们通过Flutter开发并交付业务?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
从技术上看,个人认为Flutter最核心的3个特点最为吸引开发者:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
- 极高的开发与交付效率,良好的开发体验
- 优秀的跨多端多平台能力
- 极强的 UI 表现力
如今 Flutter 很好的解决了跨端一致性问题,一套代码无差异的同时跑在 iOS 与 Android 两端;开发体验基本接近前端,支持 on device 的 Hot Reload ,去年年底 Flutter 又推出了在 Android Studio 中通过插件实现实时预览并支持交互的 Hot UI 能力,以及 Layout Explorer 可视化布局,让Flutter的开发效率和前端效率基本持平。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
电商业务发展到当前阶段,已经不再仅仅局限于移动端场景,越来越多的业务需求对跨端跨平台性提出了更高的要求。钉钉/千牛桌面端应用场景,甚至天猫精灵、线下门店等业务场景,从长远看都需要一个比 Web 性能一致性更好适配成本更低的多端方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
目前跨多端技术方案主要依赖于浏览器和前端体系,但浏览器本身的沙盒属性、与系统较低的结合度、以及在低端设备上较差的性能都降低了研发效率和用户体验,提高了业务的交付门槛。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
可以说目前集团内的跨多端多平台方案是实质缺失的。Flutter 从设计上就天然支持多平台开发,它的底层基于 Skia 跨平台图形引擎,向上构建出了一整套平台无关的渲染体系和事件处理体系,并紧贴 Native 研发模式自定义了基于 widgets 的声明+响应式编程范式,对系统能力依赖度低,并具备出色的跨平台还原度;支持多平台也是 Flutter 的战略目标之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
.Flutter很好的解决了这个问题,从补间(Tween)动画、基于物理属性的动画,到相对复杂的页面间Hero动画、parallax交错动画等特效,Flutter都可以跨平台低成本的高效实现。
这里贴一个去年年底Flutter Interact大会上GSkinner公布的基于Flutter实现的交互Demo让大家直观感受一下:点击此处文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
可以看到 Flutter 的强大 UI 表现力,可以帮助开发者快速高效低成本的开发出极为炫酷的 UI ,非常适合电商领域重 UI 视觉交互的各类场景,帮助业务构建出富有表现力的页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
Flutter体系化建设现状
另一方面从行业趋势上看,Flutter 技术已经成为越来越多行业伙伴重点投入的技术建设方向。字节跳动、美团等公司均建设了自己的 Flutter 工程化体系,并服务了各自的业务场景;腾讯也基于 Flutter 在多个 App 上进行了应用尝试,并在 Flutter 渲染能力服务小程序的场景下做了有益探索。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 手淘的尝试和思考
手淘从18年10月开始探索 Flutter 渲染引擎应用在小程序场景;19年下半年开始建设 Flutter 基础能力,并服务了淘宝特价版业务,在引擎、图片库、内存优化和加载性能等关键技术上做了沉淀;同时通过对 Flutter 的引擎改造,封装出 Flutter 2D Canvas 能力,向上支持小程序 Canvas 组件及小游戏引擎,服务 2D/2.5D 游戏化业务,并在业务场景中落地。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
从业务应用上看:Flutter 目前带来的最大价值是研发效率的提升。在基建和 native 扩展能力完备的前提下,开发基于 Flutter 的纯 Dart 业务的人效比之前各端分别开发的效率提高了接近 2 倍,单位时间内的需求响应能力也相应提高了接近2倍,目前已在闲鱼和特价版业务开发中得到了很好的工程化验证。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
Flutter 目前的限制在于,动态性能力及前期的投入成本。前期投入成本主要指技术学习与团队研发模式升级的成本,涉及到技术路线选择,是我们和每个业务团队需要一起思考和判断的,这里不展开谈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
未来在动态化方向的探索也将是个长期的博弈过程。如果后面我们可以解决好 Flutter 动态化的问题,那么 Flutter 完全有机会成为集团业务的核心研发模式之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
AliFlutter - 经济体移动小组Flutter共建项目
- 从经济体层面拉通 Flutter 体系建设,打造 Flutter 的公共技术基础设施,制定 Flutter 容器、中间件与 API 标准,建设 Flutter 研发支撑与数据运维能力,复用关键技术;
- 联合各 BU 构建经济体Flutter技术社区,沉淀共享集团 Flutter 技术及业务组件、能力与解决方案,服务集团 Flutter 业务,共建集团 Flutter 技术生态;
- 在经济体层面构建 Flutter 的对外影响力,联合各 BU 一致对外,打造阿里在行业内的 Flutter 技术制高点。
未来 AliFlutter 的整体架构如下所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
AliFlutter 建设的第一步,就是要构建集团的 Flutter 基础设施、提供公共容器与组件、研发支撑服务与标准化研发流程,为集团的 Flutter 业务提供一个基础的Flutter公共研发服务能力,搭建好技术共建共享的基础和平台;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
基础设施建设
▐ Artifacts仓库
▐ pub仓库
类似于 Node.js 世界的 npm,Flutter 使用 pub 来管理三方组件与依赖。考虑到易用性、安全性等需求,为了管理集团内的公共二方组件,我们也搭建了内网环境的 Flutter pub 库。该库的目标是成为集团的 pub 发布平台,管理集团内所有二、三方 pub package。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 容器、中间件与API
对于业务的接入而言,现阶段核心要解决的问题就是提供一个统一的 Flutter 运行时容器,以及一系列集团标准化移动中间件的 Flutter 封装与 API 能力,并提供集团标准的插件扩展方式供业务方独立开发业务功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
鉴于集团应用基本上均以混合栈为主,我们将 FlutterBoost 作为 Flutter 容器混合栈的基础,并配合集团标准路由与导航中间件提供了统一的混合栈路由导航能力,业务通过标准路由注册即可快速实现 Flutter 页面和 Native 页面的混合导航能力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
容器通过对接高可用平台,提供了初始化性能埋点与 Crash 数据上报等标准监控能力,为 Flutter 业务的技术性能分析和问题排查提供了基础。集团移动端积累了一整套的标准中间件体系,包括网络库、图片库、push 消息、配置下发、数据采集与监控等一系列基础能力,在 Flutter 体系内无缝使用移动中间件能力对于业务是刚需。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
同时,小程序体系建设过程中形成的一系列标准 API,也很大程度上实现了一个完整的小程序运行环境的底层能力抽象,对于 Flutter 体系标准化的访问系统能力,实现平台无关的跨端能力是个非常好的补充。我们联合淘宝中间件团队与小程序团队,对基础中间件和小程序 API 实现做了 Flutter 侧的封装与标准化,未来也将对 Flutter 中间件和 API 能力进行系统支持。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 标准化Flutter构建
业务应用
▐ 淘系与集团业务支撑
目前淘宝特价版已完成详情业务的 Flutter 改造并上线,采用 Flutter 使业务在需求节奏不变的情况下人力投入减少一半,对缓解业务研发压力起到了明显的作用;同时应用的整体性能和稳定性与 Native 基本持平。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
后续特价版将基于 Flutter 继续拓展业务改造范围,并沉淀基于 Flutter 的业务域解决方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
目前盒马、ICBU 、优酷也基于 AliFlutter 进行了容器接入升级与业务适配,盒马依托闲鱼的 Flutter 游戏引擎实现了盒马小镇业务,ICBU 在主链路相关页面使用了 Flutter,优酷则基于 Flutter 实现了会员订单页等场景。同时我们也在和钉钉及 Google 一起探索 Flutter 桌面端的解决方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ Flutter Canvas
在电商活动营销中互动场景日益增多,对性能要求持续提升的前提下,如何提供一个高性能且稳定的Canvas基础能力服务好富交互的互动场景就成为了一个重点的课题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
在小程序场景中 Canvas 作为承载互动游戏的主要能力发挥了重要作用。然而受限于小程序架构下 app context 和 page context 的隔离设计,存在从 app worker 到 page renderer 的通信瓶颈,无法充分发挥出 web canvas 的性能,如果有一个 native 版的 canvas 实现将可直接在 native 层对接 app worker ,降低通信成本,充分发挥 Canvas 的性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
Flutter 底层基于 Skia,其性能和移动端复杂异构机型的适配性均得到过长期的检验,且 Flutter 基于浏览器的设计实现了一条平台无关的渲染管线,并对浏览器实现做了极大的简化,提供了很好的可靠性和性能。那么如果能够将这条渲染管线直接用于向业务容器提供 Canvas 能力,通过 binding 方式直接向小程序和小游戏容器提供与 Web Canvas 一致的标准 API,一方面可以复用 Flutter 的底层能力,为非 Dart 环境提供渲染支持,另一方面可以借助 Flutter 简化高效的渲染管线实现提供更好的渲染性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
目前 Flutter Canvas 已落地手机淘宝,并在小程序运动银行业务进行了灰度试点,初步具备了承载小程序 Canvas 业务的能力;其性能在 Android 低端机上的表现有优势,可以作为 Web Canvas 方案的有益补充。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
未来 Flutter Canvas 一方面将借助 Flutter 渲染管线的跨平台与高性能特点,以及 Flutter 对 Vulkan 和 Metal 的适配支持,在移动端获得更好的适配性以及性能;同时将继续实现 3D API ,支撑未来互动类的业务应用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
未来建设
- 从跨端能力看:Flutter虽然已具备了很好的跨多端能力与高还原度,但涉及到平台能力时,仍然需要通过各端扩展实现,还未形成小程序体系这样的标准化的容器和API封装能力。那么如何更好的解决Flutter的容器化问题,让业务不感知平台差异性?
- 从交互能力看:Flutter如何利用好自身交互能力的优势,在提供媲美前端的富交互体验的同时,降低Native富交互特性开发的门槛,真正吸引Native开发者使用Flutter技术开发业务?
- 从业务研发效率看:虽然 Flutter 的 Hot Reload/Hot UI 机制已经让开发 Native 页面的效率追上了前端,但在工程解耦方面仍然有很大提升空间,目前还无法高效的支持多业务团队并行开发;另一方面如何与现今流行的 Serverless 能力结合,实现端云一体研发模式,使业务实现研发闭环,也需要实践的检验。
- 从业务交付效率看:目前 Flutter 仍属于 Native 方案,依赖端侧发版,交付效率低,无法很好的承载电商系灵活性和实效性的需求;那么如何解决Flutter的动态化,帮助业务实现快速迭代?
▐ 提升跨端能力:Flutter 容器化
小程序 API 就做了一个非常好的示范,目前阿里小程序体系提供的API达到了200+,很好的对移动端的UI、多媒体、文件缓存、网络、设备能力、数据安全以及业务相关能力进行了封装,让业务开发者在小程序侧针对API进行系统能力调用,无需关心平台实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
如果能够在 API 的 native 实现上做到接口统一,再通过各个容器分别提供接口供业务使用,可以更好的做到实现收口,并在统一实现层跨容器实现对系统资源的统一调度、管控和度量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 提升交互能力:UI + 游戏引擎
个人认为,这个落脚点应该在通过游戏交互能力的泛化,打破 UI 与游戏引擎的边界,用游戏化的方式创造更有表现力的交互体验,创造新的业务玩法和价值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
如果在游戏应用中有 UI 的需求,解决方案一般是自建一套简单的 UI 体系与事件体系,通过自绘的方式在游戏中叠加 UI ,独立游戏引擎亦是如此。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
我们相信,这个方向的探索将会进一步释放 Flutter 的技术潜力,带来更多的业务可玩性与创造性,解放产品和设计的想象力,为业务创造更多价值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 提升研发效率:工程解耦与端云一体化
Flutter 工程解耦
从工程解耦角度看,目前 AliFlutter 容器通过混合栈与标准路由能力基本实现了页面研发的解耦,未来的容器化建设通过提供小程序对等的 API 能力封装,业务对平台无感知,能够让我们有机会解耦业务研发,实现与小程序开发接近的研发体验和效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
端云一体化
结合轻量级容器环境、多语言支持能力与统一的 API 服务端编程,端侧同学可以很容易的使用客户端语言如 Java、JS、Swift 甚至 Dart 来开发服务端业务能力,实现服务编排、服务端 FaaS 业务逻辑与 API 自动生成,达到前后端工程体系归一,业务研发闭环的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
通过将原有的端侧请求接口、组装数据并转换为 ViewModel 的逻辑都后移到了服务端,经过字段映射与页面编排,移动端可直接获取 ViewModel 并刷新页面,通过 BinderAction 双向交互状态数据,有效屏蔽了通信细节,提高了开发效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
Flutter 良好的跨端特性,能够屏蔽掉端差异化,配合 Flutter 容器化改造,更近一步的简化了业务的全链路研发模式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
未来如何在 FaaS 模式下,沉淀出一套可以服务集团业务研发的通用端侧和服务端通信调度框架,让集团 Flutter 开发者和业务都能共享到 Serverless 技术和云端一体化提效的红利,是需要我们共同去探索和定义的新问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
▐ 提升交付效率:Flutter 动态化
在我看来,动态化技术需要解决的核心问题,是在保证业务发布确定性的前提下,寻求技术性能、业务迭代效率与灵活性三者之间合理的平衡点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
动态模板化方案是集团内较为成熟的一套基于Native技术的模板化方案,专注于 UI 模板渲染,没有执行逻辑和运行时环境,目前被广泛应用于电商系的一些核心业务场景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
在 Flutter 体系下,目前闲鱼团队依据标准模板协议在 Flutter 侧实现了一套 Dart 版 SDK ,通过模板下发实现了Flutter端的轻量级动态化组件编排能力;并通过一年多的迭代逐步解决了渲染性能与渲染一致性问题,较好的赋能了Flutter业务的组件动态化能力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
Web on Flutter
目前基于 Web 渲染的小程序方案存在启动耗时高,渲染性能距原生 UI 有较大差距等性能问题,这些问题很大程度上都源自于浏览器引擎的设计历史包袱(渲染管线复杂、CSS multi-pass layout及legacy实现等),以及JS到Native通信效率低(bridge)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
同时,Flutter 的 widgets 设计巧妙,结构布局属性等基础元素均使用 widgets 表达,且可通过基础 widgets 的组合来构成复杂组件,这种细粒度+组合能力设计让 Flutter 有极强的表现力,并具备向上对接各种研发模式的可能性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
但从 Flutter 原生开发的角度看,只要 Flutter 现有的原生能力能够满足业务需求,那么受限的 CSS 实现也一样可以提供和 Flutter 对等的能力解决业务问题。同时,通过受限的 CSS 可以换来与 Flutter 相当的高性能,与基于 Web 的实现相比,在性能上带来了质变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
我们在18年底通过一个内部项目实现了这个思路的原型,通过使用 C++ 重写 Flutter 的 widgets、rendering、painting 及事件管理等 Dart framework 中的中低层能力,并在 widget 上用 C++ 实现了 CSSOM + DSL -> Widgets 的响应式框架,直接从 C++ 层提供 render 实现,将传统由 JS 承担的模板展开、tree-diff计算与渲染工作交给C++层,通过Flutter提供的Widgets tree到RenderObjects tree的diff能力实现,显著提高了性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
从实现的简单的demo看,相对小程序的web渲染性能有了大幅的提升。这种方案的问题在于和Google代码库分裂后的长期维护性。“Flutter和Web生态如何对接”这篇文章对集团内在这个方向上尝试的几种思路做了较为全面的对比,未来我们也将继续在这个方向上做深入和持续的探索。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
总结与展望
在移动技术小组启动 AliFlutter 项目之前,闲鱼技术部已经在 Flutter 技术建设上做了大量探索和投入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
另一方面沉淀Flutter的技术与业务解决方案,并通过开源反哺社区,在海内外Flutter技术社区中建立了显著的技术影响力与领导力,也涌现出一众Flutter技术专家。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
接下来AliFlutter的重点任务,就是要和闲鱼、财富等先驱应用者以及盒马、钉钉、飞猪、优酷、饿了么、CBU等Flutter的实践者一起,在集团层面把Flutter的场子建起来,把集团Flutter生态拉起来,让技术和经验能够共同沉淀和分享,一起来把Flutter技术体系在阿里的应用生态内做大做强,真正成为集团业务的核心研发模式,并让每个参与者都能从中受益。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html
作者:阿里巴巴淘系技术
链接:https://juejin.im/post/5e85ae636fb9a03c741366f3
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/18103.html