10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享

12月4日，google flutter团队宣布第一个flutter正式版本发布。第二天，Flutter Live Beijing 会议上，google flutter团队邀请了在这一技术方案中重要的合做伙伴闲鱼团队分享这半年以来的经过flutter产出的业务结果以及对应的技术挑战。

本文根据Flutter Live Beijing嘉宾闲鱼客户端团队负责人于佳（宗心）的演讲内容进行整理，从flutter的优点和挑战引出闲鱼这半年来针对flutter基础设施进行从新的构建，定义，以及优化的过程，最后是这半年来对社区的一些贡献和将来的规划。

Flutter的优点与挑战

众所周知，Flutter提供了一套解决方案，既能用原生ARM代码直接调用的方式来加速图形渲染和UI绘制，又能同时运行在两大主流移动操做系统上，其像素级别的还原，保证了不一样平台的UI强一致性。同时其提供了一整套机制（hot reload/attach Debug）保证开发的高效，基于此闲鱼团队在众多跨平台方案中选择了Flutter做为其将来主要的开发方案。

从4月份开始尝试在业务侧接入flutter到如今，闲鱼在线上已经有10+的页面使用了flutter进行开发，其中覆盖了核心主链路发布和详情。

闲鱼目前是市场上最大的闲置交易社区，做为一款有巨大用户体量的C端创新类产品，咱们对体验以及研发迭代效率都有比较高的要求。在享受flutter带来的收益的过程当中，一样会面临技术转型过程当中的一些挑战。主要的挑战来源于如下的三个方面

• 工程体系

在现有工程体系下如何将flutter体系融入，并保持团队不一样技术栈（Android/iOS/Flutter）的同窗能各自独立高效进行开发。

• 业务架构

如何提供一套flutter之上的业务架构，保证上层代码的统一标准，同时尽量的使得代码的复用度及隔离性更好。

• 基础中间件

如何保证不一样技术栈背后使用的基础能力是一致的（底层统一使用具备相同优化策略的图片库/音视频库），且在这个过程当中如何解决flutter融入后产生的问题。

面对这些挑战，闲鱼团队在下半年开始了针对基础设施的改造与重建。

基础设施重建之路

工程体系

工程体系部分，首当其冲须要考虑的是不一样技术栈同窗的协同问题，举例说明，咱们的详情和发布页面是flutter的，而首页以及搜索部分目前暂时采用native进行开发。这就须要考虑到flutter的环境要对开发native的同窗透明，甚至在native同窗没有安装flutter环境的状况下，依然能够保持原来的方式进行开发native页面。

如图中所示，以iOS为例，咱们针对flutter的框架flutter.framewrok和业务代码App.framework经过持续集成服务进行打包并自动上传至云端的pod repo上，native同窗只需在Podfile内指定对应的两个库的版本便可，同理，针对flutter的plugin代码，一样打包上传至pod repo便可。

这套体系总体不复杂，须要说明的是，因为多人开发flutter工程，所以打包是一件很是频繁的事情，所以咱们这半年构建了持续集成体系来帮助你们将打包上传等整个体系作成一键式服务，另外，因为原有iOS平台的flutter产物是须要依赖咱们的native主工程的代码的，这种默认的打包方式，代码量巨大，形成持续集成时间在10-20分钟不等，所以在这个过程当中，闲鱼团队经过直接基于xcode_backend.sh + insert_dylib的自定义脚本完成了不依赖native主工程源码的打包，将持续集成时间降至2分半。同理在android上面，也进行了一些基础的改造，感兴趣的同窗能够给咱们留言，咱们会根据你们的需求程度在后续安排贡献给flutter社区。

另一部分比较重要的内容是混合栈相关的，因为flutter没有提供flutter到混合工程的最佳实践，因此咱们在上半年自建了一整套混合栈的体系，这里主要是分享一些混合栈的关键思考，在混合栈的实现过程当中，需重点测试验证dart这一侧widget的生命周期，并简化堆栈的管理（目前闲鱼的作法是将堆栈管理统一交由native进行控制，简化Dart层API），并须要考虑如何兼容Dart上层的好比Navigtor API的调用。总体这部分闲鱼团队还在验证当中，总之，这部分看似简单，但实际是比较深的坑，须要重点优化。另外，截至发文时间前，咱们跟google flutter团队就混合栈交换了一些见解，flutter团队后续若是能够提供多flutterview，单flutter engine的基础能力，就可使得闲鱼现有的混合栈实现成本总体大幅度下降，后续你们有什么特别好的建议，也欢迎跟咱们进行交流。

业务架构

今年下半年因为有更多的业务迁移至flutter，这意味着更多的团队成员开始了Dart侧的研发。很快咱们发现团队的代码风格，层次结构都比较混乱，bug也层出不穷，所以咱们须要找到一种能够保证你们研发规范，同时确保多人协同过程当中，代码既能更好的复用，又能够在适当的场景下作到相互隔离的这么一种方案。

在通过社区的多个框架库的实践和比较之后，不论是flex仍是redux都不能彻底解决咱们的问题。最后咱们选择了本身进行设计和实现，咱们对框架进行基础分层之后，将重点最终落在了基于单一数据源的组件化框架上面，所以咱们产生了本身的框架fishRedux，咱们严格参考标准js的redux规范和源码（redux的设计三原则）进行了完整的dart侧的实现，并在此基础上提供扩展能力用于咱们的组件化开发。

如图所示，component将redux中的view，reducer，middleware以及咱们的扩展能力effect进行组装，从而能够在不一样的页面进行组件的复用，固然，全局依然遵循redux的单一数据源的原则，但咱们将逻辑自己经过更细粒度的拆解，保证了这些逻辑在不一样的component组装下均可以尽量的进行复用。
基于这种结构，咱们能够将任意的component进行挂载和拼装，经过更多小粒度的组件，产生不一样场景下的复杂页面。

另外，针对于component的多层组装，你们能够细看下dependents这个字段，经过基于这个字段的组装，在咱们提供的这段代码里面，其实是提供了一个详情页面的插槽的功能，详情页面目前在闲鱼有近10种不一样的组合，在这个场景下，能够在保证组件能够服用的同时，作到不一样流程下的代码隔离。咱们只要针对dependents的components里面进行替换，就能够很容易的达到在详情页面插入不一样widget以及逻辑的效果。

fishRedux框架目前已经接近修改的尾声，目前还有部分微调和文档的补充，明年4月份前，咱们有计划进行该框架的开源，为后续业务架构提供一个新的标准，你们敬请期待。

基础中间件

在阿里集团内部，已经产出了较多的基础中间件，所以如何复用这个中间件到flutter侧是一个新的挑战，针对于传统的好比网络库，crash收集等中间件，因为不涉及到UI的复用，相对容易，但针对音视频，图片库等这类的中间件，虽然flutter提供了flutterTexture的方案，但依然不是特别完美。

咱们在作音视频及图片库的复用过程当中，主要的问题在于flutter原生提供的机制，针对图片的渲染存在GPU到CPU，而后CPU再到GPU的这样一个过程，如图所示。根本缘由在于不一样的glContext没法共享texture。所以，咱们目前采起的方案是修改flutter引擎，并暴露出glContext的shareGroup（以iOS为例）。目前整个方案已经上线。

因为该改动目前在闲鱼本身fork的engine里面，所以目前将咱们以前踩到的一些坑同步给你们，若是你们有在flutter和native侧同时使用音视频的状况，建议特别注意ppt中的前两点，不然会形成flutter侧或者native侧音视频的错乱。固然若是按照闲鱼团队的提供的修改方案进行engine改造后，也能够经过第三点，对native设置跟flutter相同的sharegroup来解决这个问题。在flutter live Beijing结束以后，我也将该方案正式介绍给google flutter团队，但愿后续能将相似的功能融入flutter的官方实现。

闲鱼与flutter社区

闲鱼这半年，对于flutter社区，也有一些小小的贡献。咱们针对flutter的方案进行整理并在各个技术社区进行传播。另外咱们将已有的一些问题和解决方案提供给google flutter官方团队，直接或者间接的推进了flutter的总体进度，并改变了这个技术将来的部分走向。我为本身的团队感到由衷的骄傲，但同时我意识到，要想让flutter成为终端将来的主流技术，依然任重道远，所以咱们后续也会将目前的一些相对稳定的框架和解决方案，逐步开源到社区，咱们的要求是，至少闲鱼团队须要在线上有应用和验证。目前咱们已经有一些初步的demo和小工具放在上面，你们感兴趣的能够往咱们的github上提issue，咱们后续会逐步开放更多的代码。最近会公布的比较重要的框架会是fishRedux，所以请你们持续关注咱们。

总结与展望

咱们首先带你们回顾了flutter带来的优点以及在闲鱼的实际例子，并引出在复杂工程下的一些挑战。咱们针对这些挑战，在下半年进行了整个体系的从新建设，初步完成了

• 隔离的混合工程体系
• 统一标准的业务架构
• 高效复用基础中间件设施

本次的分享，其实只是咱们目前团队的一部份内容，咱们基于flutter和dart还有更多的技术方案目前在预研和研发中，因此没有在此次live中进行宣讲。在后续跟google flutter团队的沟通中也了解到，他们对咱们的多个方案都有较大的兴趣。对于将来来讲，一方面，除了本文分享的内容之外，咱们本身在代码自动生成/Dart Server/线上问题自动回放/国际化/动态模版等/持续集成等多个方面都在持续关注和调研。另外一方面，在flutter 1.0公布后，相似hummingbrid这一类全新的方案也有机会让flutter具备全终端制霸的可能性，咱们也会持续跟进和进行尝试。Anyway，依然但愿有更多的同窗能够加入咱们一块儿完善flutter的生态，同时经过新的技术手段，让天下没有闲置。来闲鱼一块儿改变世界吧，少年！

PPT下载：https://yq.aliyun.com/download/3130

---

本文做者：闲鱼技术-宗心.

阅读原文

本文为云栖社区原创内容，未经容许不得转载。