Flutter是一个开源的UI工具包，可以帮助开发者通过一套代码库高效构建多平台的漂亮应用，支持移动端、Web端、桌面端和嵌入式平台。Flutter组件采用现代响应式框架构建，其中心思想是使用组件（小部件）构建UI。淘宝终端技术部无线技术专家王康从Flutter的原理出发，介绍了Flutter的原理、行业现状以及阿里巴巴对Flutter的深入实践和探索。Flutter的一个原则Flutter有四个主要特点：美观、高效、高性能、开放。美观：Flutter提供了丰富的Widget，比如动画和手势。Flutter采用了组合API模式，为UI的创建带来了更多的灵活性。此外，Flutter使用游戏引擎来编写应用程序，让用户在像素级别拥有极大的灵活性和控制力。高效：Flutter类似于安卓小程序，一套代码就可以运行在多种平台上。此外，它还支持Debug模式下的热重载，使其能够实现高效的研发效率。高性能：在Release模式下，Flutter被预编译成机器码，在执行过程中具有高性能。开放性：Flutter是一个开源项目，基本上所有的工作都可以在GitHub上看到。以上四个特性的背后是Flutter的原理。首先，Flutter架构在OS之上，底层是平台相关的Embedder层，主要负责Surface、Thread和EventLoop。Embedder层之上是Engine，主要包括三部分，DartRuntime；Skia负责在Surface上绘制UI，Text负责绘制文字。Engine之上是著名的DartFramework。基于以上，开发者就可以开发应用了。为什么阿里巴巴选择Flutter在阿里巴巴的电商场景中，往往有一些非常重要的考虑因素，比如用户体验需求，研发效率需求，如何消除多端差异等。在阿里经济体中，应用需要部署的目标设备非常多样，不仅有常见的iOS和Android，还有钉钉等桌面场景，天猫精灵等IoT场景，以及各种线下大屏场景。当前，流量增长的红利不断减少，需要更多的创新玩法为消费者提供更好的用户体验，这就催生了丰富互动的游戏化需求。Flutter的高性能、高研发效率、跨终端一致性、多终端多平台支持、丰富的表现力使其能够解决这些痛点。2Flutter行业现状在阿里巴巴内部，目前有十几个BU的几十个产品在使用Flutter，典型的有淘宝、闲鱼、UC、优酷。业内，腾讯的微信、现在直播、一衣君等，字节跳动的西瓜视频、皮皮虾、快手的快影、美团的美团骑手、美团外卖商版、美团众包、百度的贴吧也都在用Flutter。目前业界对Flutter的实践主要围绕系统化、深度化、框架化、更多探索等维度展开。在系统化方面，需要做一些基础设施建设，因为Flutter和Dart里面很多东西还不成熟。使用Flutter解决业务上线问题需要考虑研发体系的建设。应用上线后，需要监控各项指标。在深度方面，重点通常是引擎大小、包大小、内存优化和启动时间。除了以上两部分，业界还有很多框架相关的工作，比如混合栈框架、状态管理、动态UI、AOP框架、生态插件等。此外，还有一些原生Flutter之外的探索，比如小程序渲染、前后端一体化的实践。三、AliFlutter搭建与深入实践AliFlutter商业实践下图选取了Flutter在阿里经济体应用的一些典型场景。比如宝贝详情，就是一个业务逻辑非常复杂的页面。它是一个图文混杂的页面，有很多图片，有时还包括一个视频播放器。在这个场景中，Flutter全部被应用。部分团队使用Flutter框架进行游戏业务开发。比如下图是盒马用Flutter搭建的一个游戏页面。此外，在阿里巴巴的应用中，Flutter也被广泛用于构建主链接和订单页面。选择Flutter有几个典型的原因。首先，HotReoload和跨终端一致性让研发非常高效；其次，丰富的UI表现力、动画、图文混排等可用于游戏化的性能，Flutter都能很好地满足。AliFlutter的业务研发模型业务场景的背后是AliFlutter的业务研发模型。其实Flutter本身主要解决两个问题，逻辑和UI。它不具备各种原生能力，需要辅以网络、推送、接入网关，使其更接近业务开发容器，而不仅仅是一个UI开发框架。再往上就是应用开发框架，比如状态管理框架、游戏化框架、动态UI、组件库等，一些业务可以在上面搭建。此外，还会涉及到一些研发协作工作，比如打包构建、Linter、Pub库等。AliFlutter引擎开发模型在AliFlutter下，有很多引擎修改场景。比如在iOS13以下，可能会出现一些后台GPU渲染Crash的问题，而在Android上，可能会出现Flutter特殊机型开始崩溃的问题。此外，还需要考虑如何将Flutter与现有生态进行整合，比如图片库、网络库等，这些在阿里内部都有比较好的实践。无论是Bug修复还是Native能力增强，都是针对Flutter引擎的定制。上图展示了阿里内部定制Flutter引擎的逻辑。首先通过Flutter框架获取相应引擎代码，拉取依赖，开发，去Gitlab做CI，代码审查完成后构建产品。去服务，最后用简单的方式提供服务。AliFlutter基础设施搭建自定义引擎服务前面说的是一个自定义Flutter引擎的开发过程，但是如果你想把开发出来的东西提供给他人，你需要如下图的自定义引擎服务。对于Flutter开发者来说，只需要设置一个环境变量来检查服务上是否有对应的产品。如果是，则进行一些定制并返回给开发人员；不行就去官方upstream拉一下。当然，对于Flutter的基础设施，它需要一些多团队的支持，比如Namespace等机制。最早的时候，阿里巴巴使用Git来管理自定义引擎，但是Git对二进制不友好，所以使用高效的自定义引擎服务来解决这个问题。除了私有pub服务，AliFlutter还实现了私有pub服务。最初的想法是将不同人开发的库的工作进行分类整理，构建更好的内部生态，实现更好的复用。Pub本身是Flutter提供的一个开源框架，但是和谷歌云服务深度绑定，所以在做这部分的时候，需要把对谷歌云的依赖，变成内部对阿里的依赖。主要工作分为两部分，一是包的简单管理和存储，可以通过阿里云存储OSS实现；另一部分是监控包的下载量和健康状况等，这部分也部署了Meta数据库服务。上传包时同步数据，面向用户的前端服务。这部分持续构建的主要工作是如何将写好的Flutter代码提供给没有专门打包Flutter环境的平台。一个Flutter项目可以通过一些脚本构建一个Pod或者Gradle，然后集成到一个APP中。AliFlutter深入实践图片库优化在阿里巴巴内部，除了针对Flutter的一些系统实践，还有很多深度实践。比如图片库的优化，对于Flutter来说，图片库本身就存在内存占用高、不发布问题、CPU占用问题等问题。为了尽可能遵循Flutter原生的图片库逻辑，对图片库进行了优化。主要工作包括对Flutter框架的整体修改，可以更好的做到一致性，与官方系统无缝集成，对接内部图片库。它在性能和易用性方面也有不错的表现。EngineSizeOptimization我们在Flutterenginesize优化方面也做了很多工作，简单介绍一下库的剪枝。下面两张火焰图更好的表达了Flutter引擎所依赖的各个库裁剪前后的比例。裁剪后的内容既保证了功能的完整性，又显着减小了引擎的体积。大图内存GC优化除了上述类似音频图片发布的内容外，阿里在实践过程中发现Flutter在大图内存GC方面存在一些问题。例如，当用户退出时内存无法正常回收。释放。在社区使用Flutter的同学，遇到这样的问题，建议大家点击Profile模型下的GC按钮，看看能不能减少内存。基于这个逻辑，我们提供了一套GCAPI，供上层业务使用。从FlutterEngine开始依次调用Shell、Engine、RuntimeController、Dart的NotifyGC。FlutterCanvas实践Flutter包含Skia，可以提供Canvas能力。之前的逻辑是通过Dart调用Engine，然后转给Skia，而我们在实践中通过Skia的一些API的暴露来暴露Skia的Canvas能力。JS部分有一些2D和3D的API，可以暴露为CanvasAPI。总的来说，与WebPipeline相比，它表现得非常好。该功能已经在部分业务开始灰度测试，数据表现也非常不错。好的。AOP框架（AspectD）Flutter的AOP框架核心是基于dill转换，dill本身是Dart代码和最终代码之间的一种中间语言表达。原理简单来说就是我们在写一个hello_fultter的时候，写一个AOP包，AOP包会把hello_fultter包包装起来，这样hello_flutter和AOP逻辑都存在于AOP包的product(dill)中，也就是它includes两部分，hello_flutter自身代码的dill表达式，和AOP框架中写的注解的dill表达式，这两个部分都包含在app.dill中，我们可以基于它使用dilltr??ansform方法进行转换。这里比较复杂，需要考虑AST抽象语法树的各种逻辑。需要根据这些注解提取注解并进行操作，最后写入dill。这些操作处理完后，就变成了aop_aspectd.dill，只是替换了之前的app.dill。4AliFlutter研发模型探索AliFlutter研发模型下图中最重要的是研发模型和跨平台运行时，目标是提供多端多平台的能力。平台底层是基础库和网络库的基础能力。此外，还需要扩展垂直能力，以支持各种垂直基础能力。基础设施之上是Flutter的跨平台运行时，它基于FlutterEngine，提供了具有丰富表现力、跨平台、能力扩展、性能和稳定性的图形界面。在此之上，FlutterFramework提供了可复用的基础能力，例如核心布局渲染、弹性扩展、组件能力和定制化。此外，还有一些研发支持上述工作，如编译打包、调试、灰度发布、在线监控、运维能力、数据化等。AliFlutter研发模式展望Flutter未来的发展方向，阿里巴巴的主要工作将集中在以下四点：-终端和多平台部署。另外，也希望通过Flutter的容器化，让研发和业务方能够更加专注于自己的业务。交互能力：我们考虑利用Flutter丰富的表达能力，更好的向游戏化方向拓展，以游戏引擎的形式开发APP。基于泛化的交互能力和更多的可玩性和创新性可以为商业带来更多的可能性。研发效率：我们考虑工程解耦和云端集成的实现。目标是业务方只需要关注写好的包，通过非常简单的方式集成就可以看到效果，从而提供类似前端的开发体验。此外，通过与云的融合，由负责终端侧转变为负责整体业务。交付效率：这部分主要包括两部分，一部分是动态UI，另一部分是WebOnFlutter，期望在前端技术栈下提供更灵活的动态和动态能力。综上所述，本文首先分享了Flutter的原理，介绍了Flutter美观、高效、高性能、开放的特点，以及阿里巴巴选择Flutter的原因。其次，跟大家分享了Flutter在业界的现状，主流厂商的大量投入，以及系统的、深入的、框架的、更多的探索。再次介绍了AliFlutter的搭建与实践，包括业务实践、研发模型、引擎研发。最后对AliFlutter研发模式的思考和未来发展方向进行了展望。
