导读
本文介绍了Android端动态化引擎的实现原理,并分步骤地实现了动态化引擎的各个模块,带领大家更直观、更深入地了解移动端动态化方案。
文 / 谢同学
编辑 / 乔
本文共6820字,预计阅读时间20分钟。
背景
什么是动态化
近年来,越来越多基于前端技术栈的动态化方案被引入到客户端开发中,那么,在开发写代码时,使用的客户端技术栈和前端技术栈有什么不同呢?
简单来说,无论是Android还是iOS应用,在发布前都要经历源码编写、打包编译、发布应用商店、用户升级安装等过程。首先,编译速度会随着应用规模成正比增长,对于规模较大的应用,有时仅是修改一个控件的颜色,就需要等待几分钟来验证结果,开发效率较低;其次,发布应用商店、用户升级安装,会极大地拉长应用发布周期,延迟产品效果的验证;最后,开发一个相同功能,至少需要双端各一个工程师,写两份代码,人力成本增加。
前端开发流程中,由于是使用JavaScript脚本语言开发,并不需要提前编译,在浏览器中可以直接预览效果;新版本发布后,也可以直接触达到浏览器,用户无需额外操作;最重要的是,对于一个相同功能,只需要开发一次,即可在几乎所有操作系统的浏览器上运行。
了解了两种开发模式后,我们会想到,为什么不将前端技术栈的开发流程引入到客户端中,让客户端应用也拥有前端的动态性和跨端性呢?
其实业界早已有各种各样的解决方案,例如React Native、Weex、微信小程序等。甚至某些特定场景下,客户端功能已经完全使用前端技术进行开发了,比如需要动态下发的运营活动、需要快速试错的产品功能、小程序类的应用内生态建设等。
动态化引擎是动态化方案中最核心的模块,有了动态化引擎,才能使开发者编写的JS应用运行在客户端中,实现UI和逻辑的动态化。
Hello Hybrid World
动态化没有想象中的困难,只要了解其中原理,每个同学都能从0到1打造一个动态化引擎。更进一步,我们甚至可以用自己实现的动态化引擎,为它编写一个如下的JS应用:
从应用开发者的角度来看,要实现这样一个界面,需要在JS代码中创建纵向布局、文本组件、图片组件以及按钮组件,且按钮可以设置点击事件。
这些就是动态化引擎需要支持的一部分能力,还有更多底层的能力开发者无法直观感受到,下一节会详细介绍。
Step by Step打造专属动态化引擎
笔者是Android工程师,所以会使用Android及Java技术栈实现,iOS或其他端原理是类似的。
Step 1:目标拆解
Question:要实现一个基于前端技术栈的动态化引擎,需要哪些模块?
下图展示了一个基础的动态化引擎所需的模块和组件:
从上到下依次是:
模块 | 应用 |
Business Code | JS应用的界面和逻辑代码 |
JS Framework | 业务代码之下的一层JS运行时封装,提供了诸如生命周期回调、应用入口函数、VDom、Diff算法等基础能力,直接与Native侧进行通信 |
JS Engine | JS虚拟机,运行JS代码的核心模块,如V8、JavaScriptCore等 |
JS Bridge | JS和Native之间双向通信的通道 |
ModuleManager | 通常是所有Native桥的集合,并提供桥的注册、获取等方法 |
RenderManager | 管理应用的渲染流程,例如解析JS Framework发来的VDom数据、渲染指令、构建Native侧的Dom树、View树等 |
Debugging | 调试能力支持,主要是和CDP协议(Chrome DevTools Protocol)对接,可在Chrome DevTools上进行调试操作 |
Native Modules | Native侧实现的桥,基本上是对Native API的二次封装,供JS侧调用 |
Native Components | Native侧实现的控件,基本上是对Native View的二次封装,供JS侧调用 |
熟悉动态化引擎的重要模块之后,下一步我们就开始逐步实现。
Step 2:JS引擎
JS引擎是处理JavaScript脚本的虚拟机,是动态化的前提和基础,开发者可通过JS引擎在客户端应用中运行JS代码。
目前常见的JS引擎有V8和JavaScriptCore。
V8引擎是C++实现的。由于我们在Android中开发,所以需要使用J2V8。J2V8是V8引擎的Java封装,提供了各种易用的接口。
J2V8:
https://github.com/eclipsesource/J2V8
依赖
dependencies {
implementation 'com.eclipsesource.j2v8:j2v8:6.2.1@aar'
}
创建V8引擎
V8 runtime = V8.createV8Runtime();
Native执行JS脚本
执行一段JS逻辑:
V8 runtime = V8.createV8Runtime();
int result = runtime.executeIntegerScript("var i = 0; i++; i");
System.out.println("result: " + result);
// result: 1
Native执行JS方法
定义一个JS方法并执行:
V8 runtime = V8.createV8Runtime();
runtime.executeVoidScript("function add(a, b) { return a + b }");
V8Array args = new V8Array(runtime).push(1).push(2);
int result = runtime.executeIntegerFunction("add", args);
System.out.println("result: " + result);
// result: 3
封装JS引擎
我们可以将引擎部分抽象成两个模块——JsBundle和JsContext。
JsBundle
JsBundle是JS应用的打包文件,包含了应用的所有源码和资源,如本地图片资源和应用信息清单。不过,我们只是实现一个简单的动态化框架,暂时只包含JS源码文件就OK,或直接把一个.js文件当作bundle也可以。
public class JsBundle {
private String mAppJavaScript;
public String getAppJavaScript() {
return mAppJavaScript;
}
public void setAppJavaScript(String appJavaScript) {
this.mAppJavaScript = appJavaScript;
}
}
mAppJavaScript就是应用的JS代码。
JsContext
JsContext是对V8引擎的二次封装,用来描述一个JS引擎如何初始化和执行应用JS代码:
public class JsContext {
private V8 mEngine;
public JsContext() {
init();
}
private void init() {
mEngine = V8.createV8Runtime();
}
public V8 getEngine() {
return mEngine;
}
public void runApplication(JsBundle jsBundle) {
mEngine.executeStringScript(jsBundle.getAppJavaScript());
}
}
理论上,当我运行下面代码时,一个JS引擎就启动起来了,并可以执行任意和Native无关的JS代码:
JsBundle jsBundle = new JsBundle();
jsBundle.setAppJavaScript("var a = 1");
JsContext jsContext = new JsContext();
jsContext.runApplication(jsBundle);
Tips:如果想使用Native的能力,还需要在引擎初始化之前,注入所谓的桥,用来完成JS到Native的通信
Step 3:双向通信——JS Bridge
上节中,我们介绍了如何创建一个V8引擎并执行JS脚本了。但是,想做到JS调用原生系统的能力、原生系统通知JS有事件发生,则需要一种通信机制,也就是桥——JS Brdige。
作为一种双向通信机制,JS Bridge保证了JS代码可以使用原生系统能力(如拍照、访问网络、获取设备信息等);同时当原生系统有消息或事件发生时,也可以通知到JS侧(如陀螺仪监听、推送消息触达、用户点击事件等)。
JS执行Native方法
V8引擎提供了向JS注入Native方法的能力,比如前端中最常见的console.info函数,我们可以这样实现:
V8 runtime = V8.createV8Runtime();
V8Object console = new V8Object(runtime);
console.registerJavaMethod((v8Object, params) -> {
String msg = params.getString(0);
Log.i(TAG, msg);
return null;
}, "info");
runtime.add("console", console);
console.info("print some messages!")
在adb logcat中,我们就会看到这样一条日志打出来。
Native执行JS函数
直接执行executeScript,调用一个已经定义好的JS函数:
function sayHello() {
return "Hello Hybrid World!"
}
V8 runtime = V8.createV8Runtime();
String result = runtime.executeStringScript("sayHello()");
// Hello Hybrid World!
JS可以传递一个V8Function到Native,比如实现一个监听经纬度变化的回调:
V8 runtime = V8.createV8Runtime();
V8Object device = new V8Object(runtime);
console.registerJavaMethod((v8Object, params) -> {
V8Function listener = (V8Function) params.getObject(0);
V8Array locations = new V8Array(runtime).push(116.1234567).push(46.1234567);
listener.call(v8Object, locations);
return null;
}, "onLocationChanged");
runtime.add("$device", device);
$device.onLocationChanged(listener: function (x, y) {
console.info(x);
})
// 116.1234567
构建JS Bridge
了解了如何利用V8引擎的能力实现JS-Native双向通信后,现在我们将这些行为和信息进行抽象,从而更方便地对桥进行管理和注册。
可以用JsModule代表一个Native桥的能力:
public abstract class JsModule {
public abstract String getName();
public abstract List getFunctionNames();
public abstract Object execute(String functionName, V8Array params);
}
// console.info方法的抽象
public class ConsoleModule extends JsModule {
@Override
public String getName() {
return "console";
}
@Override
public List getFunctionNames() {
List functions = new ArrayList<>();
functions.add("info");
return functions;
}
@Override
public Object execute(String functionName, V8Array params) {
switch (functionName) {
case "info":
Log.i("Javascript Console", params.getString(0));
break;
}
return null;
}
}
使用ModuleManager来管理和注册所有的JsModule:
public class ModuleManager {
private ModuleManager() {
}
private static class Holder {
private static final ModuleManager INSTANCE = new ModuleManager();
}
public static ModuleManager getInstance() {
return Holder.INSTANCE;
}
private final List mModuleList = new ArrayList<>();
private JsContext mJsContext;
public void init(JsContext jsContext) {
mJsContext = jsContext;
mModuleList.add(new UiModule());
mModuleList.add(new ConsoleModule());
registerModules();
}
private void registerModules() {
for (JsModule module : mModuleList) {
V8Object moduleObj = new V8Object(mJsContext.getEngine());
for (String functionName : module.getFunctionNames()) {
moduleObj.registerJavaMethod((v8Object, params) -> {
return module.execute(functionName, params);
}, functionName);
}
mJsContext.getEngine().add(module.getName(), moduleObj);
}
}
}
至此,动态化框架已经支持了JS调用Native能力,大家可以继承JsModule,编写任意所需要的桥,实现各种各样的能力。
相比于上一节,现在JS应用的代码可以包含Native相关的方法了,不再局限于最原始的JS环境。
Step 4:渲染引擎
到这一步,我们已经可以实现逻辑动态化了,理论上,所有不需要用户交互的逻辑行为都可以放到JS中执行。
但一个现代化的应用,除了有后台逻辑,更重要的一部分是直接面向用户的UI界面,这意味着用户对应用的第一印象,所以这一节我们来看看如何实现UI动态化。
UI Framework
Android开发者都很熟悉XML,我们会在其中定义静态页面结构,例如:
<?xml version="1.0" encoding="utf-8"?>
Question:XML为什么能转换成屏幕上的UI组件?
简单来说,Android UI框架会读取并解析XML文件,然后将其构建成一个一个View和ViewGroup,形成一棵页面的View树,最后交由系统自顶向下进行渲染,显示到屏幕上。所以,XML是Android UI框架的一种DSL,View系统是Android UI框架的一种渲染引擎。
我们了解了UI框架核心的两点:
React Native、Weex等原生渲染的动态化框架,其实改变的是DSL这一层,只是开发者书写UI的方式变了,但界面依然是构建成View树进行渲染。然而,像Flutter、Jetpack Compose等UI框架不仅改变了DSL,也使用了完全不同的渲染引擎(基于skia),实现了在Android设备上的UI绘制。
UI动态化
要实现UI动态化,核心原理是通过构建页面的DSL支持动态下发,渲染引擎支持动态解析和创建视图组件即可。
最简单的DSL,可以用JSON结构表示界面元素及布局。例如,在本文开篇中,我们期望实现的界面可以这样描述:
const hello = "Hello ";
const title = hello + "Hybrid World!"
$view.render({
rootView: {
type: "verticalLayout",
children: [
{
"type": "text",
"text": title,
"textSize": 24,
"marginTop": 16
},
{
"type": "image",
"width": 72,
"height": 72,
"marginTop": 80,
"url": ""
},
{
"type": "button",
"text": "点击打印日志",
"marginTop": 80,
"marginLeft": 40,
"marginRight": 40,
"onClick": function () {
console.info("success!")
}
}
]
}
})
我们定义了一个$view.render方法,作为界面绘制的入口函数,当JS执行到这个方法时,就会开始渲染;在这之前,大家可以写任意界面无关的逻辑。
Tips:React和Vue都是前端的UI框架,它们拥有直观的的DSL语法、强大的VDom机制以及各种语法糖,可以让开发者很轻松的编写UI界面,这也是UI DSL的目标之一。笔者使用JSON作为UI DSL,因为其数据结构最常见也易于理解,不需要额外的语法解析器就能实现,真正业界的UI DSL要比这个复杂得多。
既然$view.render是一个Native桥,那么就用上一节定义的JsModule来实现:
public class UiModule extends JsModule {
@Override
public String getName() {
return "$view";
}
@Override
public List getFunctionNames() {
List functionNames = new ArrayList<>();
functionNames.add("render");
return functionNames;
}
@Override
public Object execute(String functionName, V8Array params) {
switch (functionName) {
case "render":
V8Object param1 = params.getObject(0);
V8Object rootViewObj = param1.getObject("rootView");
RenderManager.getInstance().render(rootViewObj);
break;
}
return null;
}
}
$view.render方法传进来的是一个对象,其中rootView字段表明这个界面的根布局;一般来说,一个界面只能有一个根节点,根节点下面会有很多子节点,最终形成一个树状结构。
rootView节点下有type字段,表示它是一个verticalLayout类型,即纵向布局;以及children字段,表明其子节点都有哪些。
children数组中的第一个子节点是type为text的文本组件,它有很多属性,如文字大小、间距等;类似地,剩下的子节点分别是image图片组件和button按钮组件,也同样有各自的属性。
DomElement
JS传递过来的对象,会以V8Object的形式承载,不方便直接进行操作。我们可以将JS传递过来的V8Object抽象成DomElement,表示一个节点元素的属性信息,也方便之后Native View使用这些属性。
DomElement是数据类,直接对应JS侧传递过来的视图节点信息。
// 视图元素可以有公用的属性
public class DomElement {
public String type;
public int marginTop;
public int marginBottom;
public int marginLeft;
public int marginRight;
public V8Function onClick;
public void parse(V8Object v8Object) {
for (String key : v8Object.getKeys()) {
switch (key) {
case "type":
this.type = v8Object.getString("type");
break;
case "marginTop":
this.marginTop = v8Object.getInteger("marginTop");
break;
case "marginBottom":
this.marginBottom = v8Object.getInteger("marginBottom");
break;
case "marginLeft":
this.marginLeft = v8Object.getInteger("marginLeft");
break;
case "marginRight":
this.marginRight = v8Object.getInteger("marginRight");
break;
case "onClick":
this.onClick = (V8Function) v8Object.get("onClick");
break;
default:
break;
}
}
}
}
// 每个具体的视图元素也可以有自己独有的属性
public class DomText extends DomElement {
public String text;
public int textSize;
public String textColor;
@Override
public void parse(V8Object v8Object) {
super.parse(v8Object);
for (String key : v8Object.getKeys()) {
switch (key) {
case "text":
this.text = v8Object.getString("text");
break;
case "textSize":
int textSize = v8Object.getInteger("textSize");
if (textSize == 0) {
textSize = 16;
}
this.textSize = textSize;
break;
case "textColor":
String textColor = v8Object.getString("textColor");
if (TextUtils.isEmpty(textColor)) {
textColor = "#000000";
}
this.textColor = textColor;
break;
}
}
}
}
Question:可以尝试编写剩下所需要的DomElement。如:DomButton、DomVerticalLayout等。
我们还需要一个DomFactory,使用工厂模式来创建不同类型的DomElement:
public class DomFactory {
public static DomElement create(V8Object rootV8Obj) {
String type = rootV8Obj.getString("type");
switch (type) {
case "text":
DomText domText = new DomText();
domText.parse(rootV8Obj);
return domText;
case "image":
DomImage domImage = new DomImage();
domImage.parse(rootV8Obj);
return domImage;
case "button":
DomButton domButton = new DomButton();
domButton.parse(rootV8Obj);
return domButton;
case "verticalLayout":
DomVerticalLayout domVerticalLayout = new DomVerticalLayout();
domVerticalLayout.parse(rootV8Obj);
return domVerticalLayout;
}
return null;
}
}
Tips:工厂模式只是其中一种实现方式,可以有更多灵活的创建方法,如利用注解记录类型信息,反射生成对应的DomElement对象,优点是创建对象完全自动化了,当以后有几十个UI控件时,不需要手动实例化。
然后就可以创建一颗JS侧根布局的DomElement树:
V8Object rootViewObj = ...;
DomElement rootViewElement = DomFactory.create(rootViewObj);
JsView
我们已经可以在Native中随意访问节点元素数据了,目的是为了给即将被渲染出来的Native View使用。因为Native View需要知道自己应该如何展示、展示什么文案、响应什么点击事件等。
不过,直接在$view.render方法执行后实例化Native View、设置DomElement中的属性、构建Native View树,会使UiModule类过于臃肿,所以我们还需要一个中间层抽象出Native View所对应的虚拟视图——JsView。
JsView的作用是使元素节点更加内聚,只需要关注如何创建自己,JsView也和DomElement一样会构建出一颗树,用来表示界面结构;每个JsView都有createView方法,用来返回其真正对应的Native View实例:
public abstract class JsView {
protected D mDomElement;
protected V mNativeView;
public void setDomElement(DomElement domElement) {
mDomElement = (D) domElement;
}
public abstract String getType();
public abstract V createViewInternal(Context context);
public V createView(Context context) {
V view = createViewInternal(context);
mNativeView = view;
return view;
}
}
比如,文本组件需要继承自JsView:
public class TextJsView extends JsView {
@Override
public String getType() {
return "text";
}
@Override
public TextView createViewInternal(Context context) {
TextView textView = new TextView(context);
textView.setGravity(Gravity.CENTER);
textView.setText(mDomElement.text);
textView.setTextSize(mDomElement.textSize);
textView.setTextColor(Color.parseColor(mDomElement.textColor));
return textView;
}
}
Question:可以尝试编写剩下的JsView。如:ButtonJsView、VerticalLayoutJsView等。
同样地,我们仍然需要一个JsViewFactory来创建不同类型的JsView实例,如同DomElement一样,这里就不赘述了。
最后,我们可以使用RenderManager来管理DSL的解析、DomElement树的创建、JsView树的创建和Native View的渲染。同时,RenderManager也需要一个Native View容器,来承载JS渲染出来的根布局:
public class RenderManager {
private RenderManager() {
}
private static class Holder {
private static final RenderManager INSTANCE = new RenderManager();
}
public static RenderManager getInstance() {
return Holder.INSTANCE;
}
private Context mContext;
private ViewGroup mContainerView;
public void init(Context context, ViewGroup containerView) {
mContext = context;
mContainerView = containerView;
}
public void render(V8Object rootViewObj) {
DomElement rootDomElement = DomFactory.create(rootViewObj);
JsView rootJsView = JsViewFactory.create(rootDomElement);
if (rootJsView != null) {
View rootView = rootJsView.createView(mContext);
mContainerView.addView(rootView);
}
}
}
Step 5:整合动态化引擎
目前为止,我们几乎完成了动态化引擎所需要的所有模块,现在只剩下把它组装起来了。
我们期望Native在创建动态化引擎时,可以很方便地使用,所以可以将整个动态化容器对外抽象成一个JsApplication:
public class JsApplication {
private JsContext mJsContext;
public static JsApplication init(Context context, ViewGroup containerView) {
JsApplication jsApplication = new JsApplication();
JsContext jsContext = new JsContext();
jsApplication.mJsContext = jsContext;
RenderManager.getInstance().init(context, containerView);
ModuleManager.getInstance().init(jsContext);
return jsApplication;
}
public void run(JsBundle jsBundle) {
mJsContext.runApplication(jsBundle);
}
}
在MainActivity中,只需要初始化JsApplication,并执行JsBundle即可:
FrameLayout containerView = findViewById(R.id.js_container_view);
JsBundle jsBundle = new JsBundle();
jsBundle.setAppJavaScript(JS_CODE);
JsApplication jsApplication = JsApplication.init(this, containerView);
jsApplication.run(jsBundle);
一个基础的动态化引擎已经完成了,只要我们理解了动态化引擎核心的原理和必要的模块,最终的实现方法就多种多样了,大家可以用自己熟悉、擅长的方式,改造这个引擎的各个模块。
比如:将工厂模式创建JsView改造成注解自动实例化;或者将JSON DSL改造成类Vue的声明式语法;再或者直接使用Lua替换JavaScript,替换应用开发语言。
下图是使用VS Code编写的JS应用,及实际运行在手机上的效果:
总结
笔者已将实现好的动态化引擎放到GitHub上,大家可以clone后按照自己的想法进行修改。
动态化引擎:
https://github.com/kwai-ec/HybridDemo
本文主要介绍了动态化引擎有哪些核心模块,并将每个模块的实现方法分步骤展开,希望大家能从手动实现的过程中,理解动态化引擎的原理,也了解前端技术栈和客户端的不同之处。
大家感兴趣的话,可以再继续完善这个动态化引擎,添加自己想要的能力,写出更多有趣的JS应用。
作者:谢同学
来源:微信公众号:快手大前端技术
出处:https://mp.weixin.qq.com/s/mwMQgX_C2RwHbIWeXXUpWA
页面更新:2024-05-01
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号