背景
什么是动态化
近年来,越来越多基于前端技术栈的动态化方案被引入到客户端开发中,大家有没有想过平时开发写代码时,使用的客户端技术栈和前端技术栈有什么不同呢?
简单来说,无论是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引擎有V8和JavaScriptCore。
V8引擎是C++实现的,由于我们在Android中开发,所以需要使用J2V8。J2V8是V8引擎的Java封装,提供了各种易用的接口。
依赖
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<String> 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<String> getFunctionNames() {
List<String> 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<JsModule> 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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:text="Hello Hybrid World!"
android:textSize="24sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="24dp"
android:src="@drawable/ic_launcher_background" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="32dp"
android:text="BUTTON" />
</LinearLayout>
复制代码
Question: 大家可以思考下XML为什么能转换成屏幕上的UI组件?
简单来说:Android UI框架会读取并解析XML文件,然后将其构建成一个一个View和ViewGroup,形成一棵页面的View树,最后交由系统自顶向下进行渲染,显示到屏幕上。所以XML是Android UI框架的一种DSL,View系统是Android UI框架的一种渲染引擎。
我们了解了UI框架核心的两点:1. 面向开发者的DSL;2. 面向操作系统的渲染引擎。
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<String> getFunctionNames() {
List<String> 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<V extends View, D extends DomElement> {
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<TextView, DomText> {
@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.com/kwai-ec/Hyb…
笔者已将实现好的动态化引擎放到github上了,大家可以clone后按照自己的想法进行修改。
本文主要介绍了动态化引擎有哪些核心模块,并将每个模块的实现方法分步骤展开,希望大家能从手动实现的过程中,理解动态化引擎的原理,也了解前端技术栈和客户端的不同之处。
大家感兴趣的话,可以再继续完善这个动态化引擎,添加自己想要的能力,写出更多有趣的JS应用~
hi, 我是快手电商的谢同学
快手电商无线技术团队正在招贤纳士🎉🎉🎉! 我们是公司的核心业务线, 这里云集了各路高手, 也充满了机会与挑战. 伴随着业务的高速发展, 团队也在快速扩张. 欢迎各位高手加入我们, 一起创造世界级的电商产品~
热招岗位: Android/iOS 高级开发, Android/iOS 专家, Java 架构师, 产品经理(电商背景), 测试开发... 大量 HC 等你来呦~
内部推荐请发简历至 >>>我们的邮箱: hr.ec@kuaishou.com <<<, 备注我的花名成功率更高哦~ 😘