打通前后端逻辑，客户端Flutter代码一天上线

背景

随着闲鱼的业务快速增长，运营类的需求也越来越多，其中不乏有很多界面修改或运营坑位的需求。闲鱼的版本现在是每2周一个版本，如何快速迭代产品，跳过窗口期来满足这些需求？另外，闲鱼客户端的包体也变的很大，Android的包体大小，相比2016年，已经增长了近1倍，怎么能将包体大小降下来？首先想到的是动态化的解决此类问题。

对于原生的能力的动态化，Android平台各公司都有很完善的动态化方案，甚至Google还提供了Android App Bundles让开发者们更好地支持动态化。由于Apple官方担忧动态化的风险，因此并不太支持动态化。因此动态化能力就会考虑跟Web结合，从一开始基于 WebView 的 Hybrid 方案，到现在与原生相结合的 React Native 、Weex。

与此同时，随着闲鱼Flutter技术的推广，已经有10多个页面用Flutter实现，上面提到的几种方式都不适合Flutter场景，如何解决这个问题Flutter的动态化的问题？

动态方案

我们最初调研了Google的动态化方案CodePush。

01

Code Push

CodePush是谷歌官方的动态化方案，Dart VM在执行的时候，加载 isolate_snapshot_data 和 isolate_snapshot_instr 2个文件，通过动态更改这些文件，就达到动态更新的目的。官方的Flutter源码当中，已经有相关的提交来做动态更新的内容，具体可以参考 ResourceExtractor.java。目前，此功能还在开发中，期待ing。

02

动态模版

动态模板，就是通过定义一套DSL，在端侧解析动态的创建View来实现动态化，比如LuaViewSDK、Tangram-iOS和Tangram-Android。这些方案都是创建的Native的View，如果想在Flutter里面实现，需要创建Texture来桥接；Native端渲染完成之后，再将纹理贴在Flutter的容器里面，实现成本很高，性能也有待商榷，不适合闲鱼的场景。

所以我们提出了闲鱼自己的Flutter动态化方案，前面已经有同事介绍过方案的原理：《做了2个多月的设计和编码，我梳理了Flutter动态化的方案对比及最佳实现》，下面看下具体的实现细节。

模版编译

自定义一套DSL，维护成本较高，怎么能不自定义DSL来实现模板下发？闲鱼的方案就是直接将Dart文件转化成模板，这样模板文件也可以快速沉淀到端侧。

01

模版规范

先来看下一个完整的模板文件，以新版我的页面为例，这个是一个列表结构，每个区块都是一个独立的Widget，现在我们期望将“卖在闲鱼”这个区块动态渲染，对这个区块拆分之后，需要3个子控件：头部、菜单栏、提示栏；因为这3部分界面有些逻辑处理，所以先把他们的逻辑内置。

内置的子控件分别是 MenuTitleWidget、 MenuItemWidget和 HintItemWidget，编写的模板如下：

@override	
Widget build(BuildContext context) {	
    return new Container(	
        child: new Column(	
            children: <Widget>[	
                new MenuTitleWidget(data),    // 头部	
                new Column(    // 菜单栏	
                    children: <Widget>[	
                        new Row(	
                            children: <Widget>[	
                                new MenuItemWidget(data.menus[0]),	
                                new MenuItemWidget(data.menus[1]),	
                                new MenuItemWidget(data.menus[2]),	
                            ],	
                        )	
                    ],	
                ),	
                new Container(    // 提示栏	
                    child: new HintItemWidget(data.hints[0])),	
            ],	
        ),	
    );	
}

中间省略了样式描述，可以看到写模板文件就跟普通的widget写法一样，但是有几点要注意：

1. 每个Widget都需要用 new或