文/技术领导力社区

编辑/Emma

闲鱼架构团队负责人国有、技术专家宗心、灯阳，在文章及公开分享中介绍了Flutter在闲鱼的实践，内容包括：选择Flutter的背景和思考、闲鱼的Flutter新混合架构、 Flutter＆FaaS云端一体化架构、App端开发效能提升等方面内容。

01

闲鱼选择Flutter的思考

灯阳在文章中曾描述了闲鱼在选择Flutter时候的思考：

站在质量的角度，高性能是一个很重的因素，使用Flutter重写了宝贝详情页之后，对比了Flutter和Native详情页的性能表现，结论是中高端机型上Flutter和Native不相上下，在低端机型上，Flutter会比Native更加的流畅，其实闲鱼团队在使用Flutter做详情页过程中，没有更多地关注性能优化，为了更快地上线，也是优先功能的实现，不过测试结果出来之后，却出乎意料地优于原先的Native的实现。

02
跨端方案Flutter与RN的对比和选择

闲鱼选择Flutter主要是出于高性能的考虑。Flutter高性能主要来源于2个原因：

1. Dart的AOT编译能力。

2. 自建渲染引擎，不需要转换到Native控件，避免了线程跳跃等问题。

更详细的比较：

没有银弹的解决方案，Flutter与RN各有优点。如何选择因素很多，关键看如何取舍，举个例子：

• 当前团队人员以前端JS栈为主还是Native为主？

  如果团队成员以JS为主，写RN会更习惯。如果Android或iOS为主，写Flutter会更习惯，因为Flutter的研发工具和体验与Native更相似。

• 动态性和复杂交互的性能，哪个更重要？

  动态性重要的场景RN合适，性能体验重要的场景Flutter不会失望。虽然Flutter也有一些动态化解决方案，例如JS转接Flutter引擎的方案，Dart代码CodePush的方案，组件化服务端组装方案等，但这些动态方案都没有RN这样从JS层解决的这么好。

• 是否需要IoT等多端布局？

  Flutter在嵌入式设计上有布局，性能有更好的表现。

03
Flutter的优势以及挑战

闲鱼技术专家宗心提到，Flutter是Google开源的跨端便携UI工具包，除了具有非常优秀的跨端渲染一致性，还具备非常高效的研发体验，丰富的开箱即用的UI组件，以及跟Native媲美的性能体验。由于它的众多优势，也使得Flutter成为了近些年来热门的新技术。

Flutter可以极大的加速客户端的研发效率，与此同时得到优秀的性能体验。那么，哪些业务场景的团队适合用Flutter？

1. 中小型的客户端团队非常适合Flutter开发，不仅一端编写双端产出，还有效的解决了小团队需要双端人员（iOS：Android）占比接近1:1的限制，在项目快速推进过程中，能让整个团队的产能最大化。

2. App在Android市场占比远高于iOS的团队，比如出海东南亚的一些App，Android市场整体占比在90%以上，通过Flutter可以将更多的人力Focus在Android市场上，同时通过在iOS端较小的投入，在结果上达到买一送一的效果。

3. 以量产App为主要策略的团队，不论是量产ToB的企业App，还是有针对性的产出不同领域的ToC的App的公司，都可以通过一端开发多端产出的Flutter得到巨大的产能提升。

闲鱼在以上的场景中属于第一种场景，服务3亿用户的闲鱼App的背后，开发资源投入很少，与竞对相比，仅是一只再小不过的团队，在这种场景下，Flutter为闲鱼业务的稳定发展以及提供更多的创新产品给予了很大的帮助。

但与此同时，Flutter在设计上带来的优势同时又会带来新的问题。所有的新技术都是脱胎于老技术的，Flutter也不例外，其身上带有很多Chrome的影子。我们再做一层简化，如果我们认为Flutter是一个使用Dart语言的浏览器容器。

通常一个团队要引入Flutter，会遇到两种场景：

• 在一个已经存在的App中加入Flutter，如何让Native与Flutter进行无缝的衔接，同时保证相互开发之间的隔离性

• 在Flutter的容器中，使用已有的Native UI组件，在Flutter与Native渲染机制不同的情况下，怎么保证两者的无缝衔接以及高性能。

04

应用场景一：已有App+Flutter容器的架构方案

在这种情况下，闲鱼需要考虑的是首先要考虑引入Flutter容器后的内存压力，保证不要产生更多的内存溢出。与此同时我们希望能让Flutter和Native之间的页面切换是顺畅的，对不同技术栈之间的同学透明。因此我们有针对性的进行了多次迭代。

在没有任何改造的情况下以iOS为例，你可以通过创建新的FlutterViewController来创建一个新的Flutter容器，这个方案下，当创建多个FlutterViewController时会同时在内存中创建多个Flutter Engine的Runtime（虽然底层Dart VM依然只有一个），这对内存消耗是相当大的，同时多个Flutter Engine的Runtime会造成每个Runtime内的数据无法直接共享，造成数据同步困难。

这种情况下，闲鱼选择了全局共享同一个FlutterViewController的方式保证了内存占用的最小化，同时通过基础框架Flutter Boost提供了Native栈与Flutter栈的通信与管理，保证了当Native打开或关闭一个新的Flutter页面时，Dart侧的Navigator也做到自动的打开或关闭一个新的Widget。目前Google官方的提供的方案上就是参考闲鱼早先的这个版本进行的实现的。

然而在这种情况下，如果出现如闲鱼图中所示多个Tab的场景下，整个堆栈逻辑就会产生混乱，因此闲鱼在这个基础上对Flutter Boost的方案进行了升级并开源，通过在Dart侧提供一个BoostContainerManager的方式，提供了对多个Navigator的管理能力，如果打比方来看这件事，就相当于，针对Flutter的容器提供了一个类似WebView的OpenWindow的能力，每做一次OpenWindow的调用，就会产生一个新的Navigator，这样开发者就可以自由的选择是在Navigator里进行Push和Pop，还是直接通过Flutter Boost新开一个Navigator进行独立管理。

05
应用场景二：Flutter页面+Native UI的架构方案

由于闲鱼是一个闲置交易社区，因此图片和视频相对较多，对图片视频的线上性能以及内存占用有较严格的要求。目前Flutter已提供的几种方案中（Platform View以及Flutter Plugin），不论是对内存的占用还是整个的线上流畅度上还存在一定的问题，这就造成了当大部分同学跟闲鱼一样实现一个复杂的图文Feed推荐场景的时候，非常容易产生内存溢出。而实际上，闲鱼在以上的场景下有针对性的做出了较大的优化。

在整个的Native UI到Flutter渲染引擎桥接的过程中，我们选用了Flutter Plugin中提供的FlutterTextureRegistry的能力，在去年上半年我们优先针对视频的场景进行了优化，优化的思路主要是针对Flutter Engine底层的外接纹理接口进行修改，将原有接口中必须传入一个PixelBuffer的内存对象这一限制做了扩展，增加一个新的接口保证其可以传入一个GPU对象的TextureID。

06

使用Dart语言搭建基于FaaS的服务端

云端技术栈的打通，是减少协同的不错的解法。以往前端＋Node.js的一体化方案大家应该不会陌生，然而如果端侧使用了Flutter，那云侧Dart自然是第一选择。

FaaS（Function as a Service）的本质是运行在云端，那Dart适合用在云/Server上吗？

Dart语言早于Flutter，在最初的设计上，Dart就可以用于Web、Server。Dart具备一些服务端语言的特点：

• 强类型，可预测性

• GC

• 异步和并发

• 高性能的JIT

• Profiler

闲鱼首先尝试将Dart作为普通的Server，替代传统的Java　Server，然后再将Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。

闲鱼在Dart　Server方面的建设思路：

开发期：

• 受Flutter的HotReload启发，将HotReload移植到了Server侧。

• 利用Isolate，在开发环境中为每个开发人员分配一个Isolate，解决以往的环境冲突的问题。

运行期：

• Dart本身是单线程异步模型，并发能力需要用Isolate支持。

• 利用Dart的Zone的特性，可以方便的实现调用链路的跟踪，方便记录Trace日志。

• 利用Dart支持的C++ Extension能力，可以在Dart中访问支持了C++的中间件包。另外，Server Mesh也是一个重要的思路，用于解耦异构语言之间的服务调用。

07
Flutter&Dart FaaS一体化架构的工程效能提升

上述内容实现了Flutter&Dart FaaS的技术栈的统一，但仅技术栈统一还远远不够，端、云的同学仍然无法真正互补和一体化打通，原因在于还有更多深入问题需要考虑：

• 一体化的业务闭环红利如何最大化？一体化不仅是效率的提升，还使一个同学可以Cover一个云到端的业务，使业务闭环。

• 如何消除云端技术壁垒？仅技术栈打通，端人员还是不会写云，原因在于对云的思维模式的不理解，需要真正消除云端的技术壁垒。

• 如何使工作总量减少 ( 1+1<2 )？如果一体化后把工作量压到一个人身上，那意义不大，需要使一体化下的总工作量降低。

• 如何促进生产关系重塑？　生产关系需要适应新的生产力。

面向这些问题，闲鱼的解法思路：

• 业务闭环为业务开发同学带来更好的成长空间，可以完整和专注的思考业务。这是人上的核心动力。

• 业务闭环是业务流程沉淀的方向。

• 以往的架构是云、端分开架构的，一体化后有了更多的架构下沉空间，从而带来了总工作量1＋1<2的可能。

• 领域下沉和工具支撑是一体化的保证。

案例效果

案例一，一体化在资源均衡方面的体现。在近期的一个项目中，云端一体化使原本2个月的项目时间，减少了20天。

案例二，一体化在业务闭环方面的体现。负责增长的一位开发同学，专注在增长业务上，在合适的情况下为合适的人投放合适的内容，以此带来用户的增长和活跃效果。一体化的方式下，可以统一云、端的切面，业务研发不再受云、端的限制。

08

本文内容小结

• Flutter的特性适合哪些团队？

  1）非常适合中小型客户端团队

  2）Android市场占比较高的团队

  3）量产App的团队

• Flutter与RN之间，如何选择？

  1）当前团队人员以前端JS栈为主还是Native为主？以JS为主的团队，写RN会更习惯，以Android或iOS为主，写Flutter会更习惯

  2）动态性和复杂交互的性能，哪个更重要？动态性重要的场景RN合适，性能体验重要的场景用Flutter

  3）是否需要IoT等多端布局？Flutter在嵌入式设计上有布局，性能有更好的表现

• Flutter在两类场景中的解决方案：

  应用场景一：已有App+Flutter容器的架构方案

  应用场景二：Flutter页面+Native UI的架构方案

• 使用Dart语言搭建基于FaaS的服务端

  1）统一前后端技术栈

  2）让业务技术形成闭环，提升工程效能

-End-

阿里中台系列文章：

1.阿里技术总监，讲透技术中台，16页PPT

2.阿里架构总监，讲透中台架构，13页PPT

3.阿里数据科学家，讲透数据中台，15页PPT

想下载“阿里中台架构”的PPT？第一步，关注“技术领导力”公众号第二步，在对话框输入：中台

想跟文章作者、100位互联网大咖交流学习？

添加助理小姐姐Emma

注明“加群”，稍后她会拉你进社区群

往期精彩推文：

1.男,40,总监,失业,中年人,愿你终能体面的离开

2.90后美女CEO想找个CTO,我给她个技术经理

3.我用了10年,从深圳工厂妹到Google程序媛

4.来做技术总监吧.要写代码吗?不写你来干嘛