动态化引擎原理解析与开发实践

导读

本文介绍了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：要实现一个基于前端技术栈的动态化引擎，需要哪些模块？

下图展示了一个基础的动态化引擎所需的模块和组件：

从上到下依次是：

熟悉动态化引擎的重要模块之后，下一步我们就开始逐步实现。

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框架核心的两点：

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 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