cover_image

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

快手大前端技术 快手大前端技术
2022年02月25日 06:20
图片

导读


本文介绍了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<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上，大家可以clone后按照自己的想法进行修改。


动态化引擎：

https://github.com/kwai-ec/HybridDemo


本文主要介绍了动态化引擎有哪些核心模块，并将每个模块的实现方法分步骤展开，希望大家能从手动实现的过程中，理解动态化引擎的原理，也了解前端技术栈和客户端的不同之处。


大家感兴趣的话，可以再继续完善这个动态化引擎，添加自己想要的能力，写出更多有趣的JS应用。


加入我们


快手电商无线技术团队负责公司核心业务，伴随业务高速发展, 团队快速扩张，欢迎各位高手加入我们, 一起创造世界级的电商产品！


快手电商无线技术团队正在进行春季校园招聘：

职位：客户端开发工程师 (iOS 和 Android)

地点：北京、杭州

内推链接：http://ksurl.cn/IxID2CJG


识别下方二维码，查看职位详情👇

图片



”

欢迎加入

图片

快手主站技术部客户端团队由业界资深的移动端技术专家组成，通过领先的移动技术深耕工程架构、研发工具、动态化、数据治理等多个垂直领域，积极探索创新技术，为亿万用户打造极致体验。团队自2011年成立以来全面赋能快手生态，已经建立起业内领先的大前端技术体系，支撑快手在国内外的亿万用户。


在这里你可以获得：

  • 提升架构设计能力和代码质量

  • 通过大数据解决用户痛点的能力 

  • 持续优化业务架构、挑战高效研发效能

  • 和行业大牛并肩作战


我们期待你的加入！请发简历到：

app-eng-hr@kuaishou.com


”


点击“阅读原文”，访问GitHub地址


继续滑动看下一个
快手大前端技术
向上滑动看下一个