跨平台的动态技术

1,629 阅读3分钟

一 Flutter主流方案

1 基于JS的高性能Flutter动态化框架MXFlutter

从main.dart的入口,导航到应用的index的js页面,然后通过channel通道,调用js接口调用build JS层封装的MXWidget的树形结构,一旦Build成功后,JS再次调用Flutter的Rebuild接口(带入JS build后的widgetData),对这个树形结构进行Build(通过widgetData的信息构建对应的FlutterWidget的树形结构),整个通道的协议采用Json。正如参考文章3所指出的,高性能值得质疑。

通信机制如下: JS <---> native <---> flutter

iOS端实现:利用JavaScriptCore机制能打通JS与native交互,另外,Flutter跟native之间有内置的bridge通知机制,从而打通了JS与Flutter的交互。 在JS上可以对native的module进行调用的同时,打通这个通道。

android端目前实现: 类名为MXJSEngine,调用了MXJSExecutor封装的V8(google公司提出的)引擎。

2 基于Dart转为Json DSL的美团MTFlutter

由于没有开源,其执行原理可以参考文章2的示意图:

仍然采用dart开发,然后利用工具dart分析器等生成DSL的Json格式,运行时,通过下载此文件格式的文件,静态映射放手执行生成为Dart的widget。

3 仅选择Flutter的Skia渲染引擎

小程序初步的框架还是基于web前段的开发技术(封装了一套JSBridge+JSEngine完成webview与JS的交互),对HTML,CSS适当做了剪裁,并使用自己的一套语法方案,即WXML 和 WXSS。

但由于webview的运行效率问题,团队也在不断探索拥有原生渲染效果的技术方案。文章4中提到了,微信使用Flutter的渲染框架作为其webview的渲染的替代方案,在文章发布之际,主要在android平台做了一些灰度实践,iOS端还没太多实践。 该方案中,为了提高通信效率,主要打通两个技术难题:

其一采用V8引擎的JS Binding为 JavaScript <---> C++,

其二改造Flutter Engine,提供 C++ <---->dart的交互

这样采用自研的LV_CPP的framework,将即WXML 和 WXSS转换为虚拟的DOM,由Dart2CPP工具,转给Flutter渲染。

可以看出,通过以上技术演进,技术栈主要是Javascript,dart,c++。 后面主要是平台开发者维护;动态化部分的JavaScrip,由js2Dart转换接口,打通跟Flutter的交互,这类高效方案值得一试。

二 ReactNative的动态方案

由于RN天生采用JS来开发,所以动态性不需要特别的构建。

1 基本原理

RN的加载机制是将一系列的资源打包生成JS Bundle文件,系统加载这些文件,解析并render。鉴于此,动态方案,就类似替换这些js Bundle文件。

2 增量更新

采用google-diff-match-patch工具来对比两个bundle文件,生成差异patch文件。当下载patch文件后,在使用此工具跟初始版本进行合并,生成新的bundle完整文件。

参考

1 juejin.cn/post/684490… 2 myslide.cn/slides/2254… 3 www.jianshu.com/p/87796d192… 4 www.jianshu.com/p/807e7d0e5…