作者:Karl_wei
链接:Flutter实现动态化更新-技术预研 - 掘金
前言:有做过完整项目的小伙伴应该都知道,随着业务的发展,app的运营需求会越来越多(比如:根据运营活动动态更换页面的UI)。这就要求我们的app要尽可能的满足市场的运营的动态化需求,通过这篇文章你将了解到:
1. Flutter动态化的方案使用和效果对比;
2. 针对中小型团队,该如何最小成本、最高效的实现app的动态化需求。
动态化的常用方式和实现原理
首先什么是动态化?即不依赖程序安装包,就能进行动态实时更新页面的技术。
接下来列举常用的方式和原理:
- 一般大家都会想到
webview
,这确实是最常用的方式,但也是动态化中最不稳定的方式;webview的体验比较差,同时需要做大量设备的兼容。 -
基于 GPL 的 Native 增强
。 GPL即通用编程语言,比如我们常见的Dart、JavaScript等,通过这些通用语言来为Native功能增强动态化能力。通俗的举个例子解释:运营者动态更改线上的js文件,Flutter应用通过网络拉取更新后动态渲染,这就是基于GPL的Native增强。 -
基于 DSL 的 Native 增强
。 DSL即专用领域语言,为了解决某些特定场景下的任务而专门设计的语言,比如xml、json、css、html。通过生成简单的DSL语言文件,通过解析协议对页面进行动态配置。
我们整体来看Flutter的动态化生态,目前市面上并没有一个成熟的开源框架,只有国内各大互联网公司陆续开源,但也都处在急需维护的状态。当前主流框架有:
- 腾讯开源的 MXFlutter
- 58同城开源的 Flutter Fair
- 阿里巴巴开源的 北海Kraken
同时我还会介绍另外两种比较通用的方式:
-
webview增强
【植入腾讯 X5内核,模型升级改造】 - UI库模板化
各大厂动态化架构对比
Flutter Fair
Fair是“58同城”为Flutter设计的动态化框架,通过Fair Compiler工具实现JSON配置和原生Dart源文件的自动转化,从而动态更新Widget Tree和State。
使用介绍
官方并没有维护pub上的Fair插件,我们需要去GitHub fork源码下来编写demo。58Fair
准备一份配置好的JSON文件,然后直接调用FairWidget传入文件路径即可显示,非常简单。动态化需求无非就是把JSON配置文件放到线上,然后FairWidget每次都会重新拉取下来展示,从而实现动态化。
/// 基本使用
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
constraints: BoxConstraints(minHeight: 80),
child: FairWidget(
name: item.id,
path: 'assets/bundle/sample.json',
data: {"fairProps": json.encode({'detail': details})},
),
);
继续跟进源码,可以看到当我们传入的文件路径是以http开头的时候,会通过网络进行拉取
void _reload() {
var name = state2key;
var path = widget.path ?? _fairApp.pathOfBundle(widget.name);
bundleType = widget.path != null && widget.path.startsWith('http')
? 'Http'
: 'Asset';
parse(context, page: name, url: path, data: widget.data).then((value) {
if (mounted && value != null) {
setState(() => _child = value);
}
});
}
/// 再通过parse()方法逐层进入decoder → bundle_provider,查看onLoad方法
@override
Future<Map> onl oad(String path, FairDecoder decoder,
{bool cache = true, Map<String, String> h}) {
bool isFlexBuffer;
if (path.endsWith(FLEX)) {
isFlexBuffer = true;
} else if (path.endsWith(JSON)) {
isFlexBuffer = false;
} else {
throw ArgumentError(
'unknown format, please use either $JSON or $FLEX;\n $path');
}
if (path.startsWith('http')) {
return _http(path, isFlexBuffer, headers: h, decode: decoder);
}
return _asset(path, isFlexBuffer, cache: cache, decode: decoder);
}
/// 重点查看以http开头的解析方法,用的是http库拉取
Future<Map> _http(String url, bool isFlexBuffer,
{Map<String, String> headers, FairDecoder decode}) async {
var start = DateTime.now().millisecondsSinceEpoch;
var response = await client.get(url, headers: headers);
var end = DateTime.now().millisecondsSinceEpoch;
if (response.statusCode != 200) {
throw FlutterError('code=${response.statusCode}, unable to load : $url');
}
var data = response.bodyBytes;
if (data == null) {
throw FlutterError('bodyBytes=null, unable to load : $url');
}
Map map;
map = await decode.decode(data, isFlexBuffer);
var end2 = DateTime.now().millisecondsSinceEpoch;
log('[Fair] load $url, time: ${end - start} ms, json parsing time: ${end2 - end} ms');
return map;
}
看下依赖,其实都是非常旧的了,很明显维护力度不够;同时对Flutter版本也有限制,Flutter每出一个版本,58Fair官方就很可能需要做一次适配。
fair_annotation:
path: ../annotation
fair_version:
path: ../flutter_version/flutter_2_5_0
flat_buffers: ^1.12.0
url_launcher: ^5.7.2
http: ^0.12.2
最后怎么写JSON配置文件,肯定自带一套协议,跟着官方文档Api写就可以了。熟悉Flutter的同学看下面的示例代码应该能秒懂。
{
"className": "Center",
"na": {
"child": {
"className": "Container",
"na": {
"child": {
"className": "Text",
"pa": [
"嵌套动态组件"
],
"na": {
"style": {
"className": "TextStyle",
"na": {
"fontSize": 30,
"color": "#(Colors.yellow)"
}
}
}
},
"alignment": "#(Alignment.center)",
"margin": {
"className": "EdgeInsets.only",
"na": {
"top": 30,
"bottom": 30
}
},
"color": "#(Colors.redAccent)",
"width": 300,
"height": 300
}
}
}
}
利弊分析
- Fair的好处:用起来很简单,性能稳定;
- 缺点很明显:
- 用JSON来配置UI,就注定了它是不支持逻辑的;
- Flutter的widget太多,Fair目前也只能匹配有限的静态UI;
- 脱离Dart生态,UI都用JSON写了......;
- 团队维护力度非常有限,很多插件都没有更新,pub也没有更新。【但其实这是所有Flutter动态化开源框架的通病