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

发表于 2年以前  | 总阅读数:4116 次

一 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 研发模式的考量和未来发展方向。


本文由哈喽比特于2年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/cAkG8iI8QGPTthHBadhXGA

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:6月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:6月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:6月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:6月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:6月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:6月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:6月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:6月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:6月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:6月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:6月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:6月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:6月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:6月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:6月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:6月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:6月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:6月以前  |  398次阅读  |  详细内容 »
 相关文章
如何有效定位Flutter内存问题? 3年以前  |  14692次阅读
Flutter的手势GestureDetector分析详解 4年以前  |  10800次阅读
Flutter插件详解及其发布插件 4年以前  |  10578次阅读
在Flutter中添加资源和图片 5年以前  |  7838次阅读
 目录