How to do activity visualization? Look at JD Lego Architecture Design

Author: Wang Guanghui, Du Qichao
Department: Jingdong Technology Business Middle-Taiwan Team

I. Introduction

Low-code, visual construction is not a new proposition. There are also many practices and attempts in the industry. Especially in scenarios where there are many C-end businesses, there are many single-page H5 pages such as demand notification, product introduction, and marketing activities. R&D and testing students are required to intervene and go online, and the input-output ratio is very low. The business and operation departments need a visual construction system suitable for their C-end business development to solve the rapid development and launch of daily H5 needs. Through the deconstruction of various H5 requirements, it is not difficult to conclude that many H5 pages can be abstracted into pages that are arranged vertically by different floor templates and finally delivered. The diversity of floor templates determines how many different types of pages a visual construction system can achieve, and how much value this construction system can ultimately create.

The core of the visual construction system is the floor template, which revolves around the creation, development, debugging, release, management, update, configuration and use of the floor template. These categories of issues are the most important part of building a system ecology.

2. Business Background

1. The main H5 entrance of the company is JD Finance APP. Financial APP has some special native communication logic and methods. Such as immersive navigation, jumping to native modules, etc.
2. After the company's operating activities are launched, there will be strong operational demands for floor resource management, changes, and crowd-targeted delivery.
3. The company's reusable business floor lacks a centralized precipitation method and precipitation location.
4. Many visual construction systems, extending a new floor template, the development complexity is very large. I also hope to have a platform with a good development and expansion experience to accumulate some reusable business functions that I often use every day.

To sum up, the LEGO visual building system we are developing and maintaining continuously focuses on providing front-end developers in the company with an easy-to-use, highly scalable floor template development experience and related capabilities. Provide more diverse floor formwork capabilities for operations.

3. Lego visual architecture design thinking

In order to better understand the design ideas, it is necessary to understand the interface style of the LEGO visualization platform, as shown in Figure 3-1. The figure is divided into template area, canvas area, and template configuration area. The Lego visual platform template requires front-end technicians to conduct research and development. The survey found that most of JD Technology's middle-end and front-end businesses use the Vue technology stack. The industry (Babel, Linglong, imgcook, etc.) uses React for development. Combined with the company's current situation, I chose to use Vue as the technology stack for design.

1. Platform use group thinking

The business requirement is how to quickly build an H5 activity page, as shown in the following figure (3-1-1). How can such a page be configured within 1 hour without R&D participation.

In order to better understand the design ideas, the terms "template" and "widget" will be mentioned. Let me first explain what a "template" is. The left side of the picture below (3-1-1) is a page for launching (online) 18 member days. Such a page can be disassembled, and the effect after disassembly is shown on the right side of the lower right figure (3-1-1).

The red area on the right side of Figure (3-1-1) is called a template, and a red area represents a template. There may be multiple identical templates in a page, which we call template instantiation (new Object). The red template is built from top to bottom one by one like building blocks. The blue area is also called the template, and this part is out of the page flow from the perspective of visual effect.

Facing the pain points of business needs, we split it up through the platform user groups: LEGO visual R&D, business R&D, and business operations. As shown in Figure (3-1-2), the red area is the platform user group.

• LEGO Visual R&D: Responsible for R&D and maintenance of the LEGO Visualization Platform, providing platform-level capability support, including R&D and maintenance of basic templates.
• Business research and development: develop business templates, such as 18 member day R&D and development of templates related to 18 member day, without worrying about the stability of the LEGO visualization platform.
• Business operation: Responsible for page construction and template attribute configuration.
• Lego Visual R&D is also the user of the Lego Visual Production Platform.

2. Platform thinking

By comparing with other platforms, we put visualization (platformization) and templating at the core.

• Visualization: Visualization can edit, publish pages, and access various templates.
• Templating: The development process has nothing to do with the platform, and more R&D autonomy.

Visualization (Lego visualization platform) and templating (template management platform) can give the initial appearance of the platform framework, as shown in Figure (3-2-1).

Template management platform: Lego visual H5 pages are assembled (built) from many templates. These templates need to be managed uniformly, so a template management platform needs to be provided. Provide template resources for the LEGO visualization platform, including the template version number, permissions, type, and whether the template can be instantiated multiple times or once (we use S to indicate that it can only be instantiated once, and M to indicate that it can be instantiated multiple times. times, referred to as S/M) and other management.

Lego visualization platform: According to the area, it can be subdivided into template area, canvas area, template configuration area, and pre-release release area. The template area loads relevant templates from the template management platform according to user permissions; the canvas area drags and drops templates to build pages according to business operations; the template configuration area is mainly responsible for the configuration of templates, such as buried points, online and offline time, crowds, etc. The pre-release delivery area is mainly responsible for submitting the current page data to the server, performing unified construction and packaging, and generating external urls.

3. Other thoughts

1. The template has nothing to do with the platform. Template development is similar to developing a small project. A small project needs basic necessary dependencies such as network, buried points, unified jump, data communication between templates, etc. This requires a scaffolding for developing templates, a packaged dependency library, and a template bridge protocol (hereinafter referred to as Lego Bridge).

2. During the template development process, it is necessary to debug and configure on the LEGO visualization platform in real time. The template has nothing to do with the platform, so it is necessary to provide a development template debugging tool, which can be directly debugged during template development.

3. In the template configuration area, the configuration of each template has the same parts, such as crowds, buried points, background colors, etc. It also has its own unique configuration capabilities. It is necessary to provide a visualization platform for the template configuration area, and realize the visualization of the template configuration area by dragging and dropping, saving template development time and making R&D more concentrated.

4. In the template configuration area, there are widgets such as CMS, embedding point, and color, as shown in the figure (3-3-1). These also require unified management. For example, CMS involves testing, pre-release, and online environments. We can also regard widgets as bPaaS components. Derived from the atom-ui library. Specially provide material support for the template configuration area.

Unified construction and deployment, unified construction of the built H5 pages, and generation of external delivery URLs.

4. LEGO visual architecture design

The architecture design frame diagram of the product side is shown in Figure (4-1). Lego Visual Template Management Platform is responsible for managing all templates of Lego Visual, including version management, name, permissions, etc. The form visualization platform is responsible for the construction of template visualization and the configuration of template attributes. atom-ui is responsible for providing material support for the form visualization platform, such as CMS, buried points, etc.

Through the above analysis, visualization and template are independent. Considering the user group, low code & 0 code. Design the overall technical architecture in Figure (4-2). Visualization (LEGO Visualization Platform) and templating came to the fore.

• Visualization: (1) Visual editing (2) Publishing (3) Access to various templates.
• Template: (1) The development process has nothing to do with the system (2) More R&D autonomy.

Template developers only need to pay attention to the red area. The LEGO visualization platform has nothing to do with template development.

The above is the architectural design of Lego visualization on the technical side.

5. LEGO visualization core technology

As shown in the figure (5-1), the LEGO visual construction platform can be divided into 5 areas.

1. Canvas rendering engine canvas.js

As shown in Figure (5-1), the rendering of H5 is processed through the render function during the editing period of "2 Launch H5 project". The overall data structure of the page is consistent with the data structure of the render function.

<script>
      return h(
        components[tag + (pubVersion || '')], {
     
     
          attrs: {
     
     
            'data-lg-path': path,
            'data-lg-key': id,
            'data-lg-tag': '',
            'lg-actived': vm.currentId === id,
            draggable: vm.isLayout,
          },
          props: {
     
     
            ...data,
          },
          style,
        },
        children ? vnodeListFactory(children, path) : null
      )
</script>

2. Lego floor template development debug

The debug tool can establish a link between the visual canvas and the template development server, so that the template development effect can be previewed in real time in the visual canvas, which greatly improves the template development experience and development efficiency. Start the command $ npm run debug.

After entering the Lego page ID and selecting the debugging environment as shown in the figure (5-2-1) , the debug tool enters the code packaging process. After the packaging is completed, the debug tool automatically opens the browser and opens the visualization canvas at the same time. At this time, "My debug template" will appear in the template list, drag "My debug template" to the canvas to see the real display effect of the template. The debug tool will also monitor code changes in real time and trigger the refresh of the canvas page, thereby realizing the function of page debugging. The operation effect is shown in the figure (5-2-2)

The technical implementation process is shown in the figure (5-2-3)

3. Unified construction and release of H5 pages

After the visual page layout is completed, it is necessary to build and generate an external URL address in a unified manner.

(1) Common construction methods have the following pain points:

• Template JS independent loading mode
  npm dependencies cannot be unified to participate in the construction, the same function code is loaded repeatedly, the browser initiates multiple JS loading requests, and the browsing experience is poor
• url cannot support multiple paths

An address like this https://show.jd.com/?pageKey=bp5n page address can only change the input parameter of the pageKey parameter, and does not support the definition of url path. Facing the rich data statistics requirements of page operations, there will be shortcomings

(2) Advantages of unified construction of LEGO visual pages:

• Page template packaging on demand: According to the page configuration file, the floor template code is packaged on demand
• Webpack overall packaging: take advantage of webpack packaging advantages, the same JS resource dependency does not need to be packaged repeatedly
• The url supports multiple paths, which is convenient for analysts to analyze statistical browsing data

The page address is as follows:
https://show.jd.com/m/bp5n?pageKey=bp5n
https://show.jd.com/m/j4Aw/?pageKey=j4Aw

Lego Visualization provides a unified page construction service and a unified page publishing service. The following is a flow chart of the unified page construction (5-3-1)

Lego Visualization has the ability to automatically publish pages. The flow chart of publishing service is as follows (5-3-2).

4. Data communication between templates

How do templates interact with data from other templates? The change of template A data can drive the change of template B data.
Lego Visualization adopts the publish-subscribe model. The platform provides a forwarding center. Templates can be subscribers or consumers, and carry instructions or data to consumers to realize template data communication. Lego bridge lgBridge.

<script>
// 发布消息
sendMessage(message) {
     
     
      let {
     
      lgBridge } = this
      if (lgBridge && lgBridge['pushMessage']) {
     
     
        lgBridge['pushMessage'].call(null, 'msg1' + this.baseModel['id'], message)
      }
    },
// 订阅消息
const {
     
      lgBridge } = this
    if (lgBridge && lgBridge['registerMessage']) {
     
     
      lgBridge['registerMessage']('msg1'+this.messageModel['msg'], this.baseModel['id'], (data) => {
     
     
        this.currentData = data
      })
    }
</script>

The effect is shown in Figure (5-4-1)

5. Template visualization form platform (4 areas in Figure 5-1)

Each template contains public configuration information, such as: basic (template name), layout (left and right margins, height), background (background color, background image), advanced (crowd, effective time, buried point). In addition to these common parts, different template usage scenarios require other additional configurations, such as pictures (CMS), more other styles, click to jump, etc. Reduce the time for R&D and development template configuration information, and realize the template visual form platform. The project draws on the idea of ​​json-schema for research and development. Add display and hide configuration, js linkage and other designs.

js linkage includes the internal linkage of the form form, as well as the interaction with the internal data of the Lego visualization platform. If the form keyword is uijs, js logic processing will be executed.

<script>
if (key === 'uijs') {
     
     
    // 获取到js表达式
    var jsStr = schema[key];
    if (jsStr) {
     
     
      var result = jsStr.replace(/this./g, 'this.formData.')
      const reg = /(\.\[.*\])/gim
          if (reg.test(jsStr)) {
     
     
              //处理.['option']
              result = result.replace(/self./g, objStr)
          } else {
     
     
              //处理.option
              result = result.replace(/self./g, objStr + '.')
          }
          this.allNeedJSArray.push(result)
          eval(result)
        }
}
</script>

The visual form is mainly to translate json data. The rendering principle is shown in the figure (5-5-1)

Although the visual form provides enough widgets, in actual business scenarios, customized widgets are required for special situations.
Our design idea is to create a template with a form component, which is packaged and uploaded together with the template. Lego visual canvas, while loading the template, loads the form component js into the canvas, and registers the component globally. The form rendering engine loads the corresponding components into the view according to the tag name.

The specific process is shown in the figure (5-5-2)

In the project, you need to use npm or js to import @jd/jdt-lg-json-schema-form to use.

<template>
<div class="page-Config-right" v-if="showForm" ref="form">
      <LgFormEngin
        :key="currentCanvasID"
        v-if="currentJsonSchema"
        v-model="currentCanvasData.data"
        :schema="currentJsonSchema"
        @input="onChange"
      >
      </LgFormEngin>
    </div>
</template>
<script>
import LgFormEngin from '@jd/jdt-lg-json-schema-form'
</script>

6. Lego visual template creation

Create a floor template in 4 steps

1. Application template

Create a floor template in the Lego operation background and download the initialization code package, as shown in Figure 6-1

2. Development template

a. Open the downloaded code package through vscode or other development tools to start the development of the floor template function. The directory structure of the initialization code package is as follows.

|-- dist                            // 编译产出目录
|-- joyer-components                // 通用组件库，通过joyer install安装及更新，一般不要动里面代码
|  |-- .joyerrc                    // 通用组件库依赖及joyer版本等信息，自动生成，不要动
|
|-- node_modules                    // npm依赖
|-- src                              // 主要项目代码应置于此目录中
|  |-- widget                  // 研发目录
|  |  |-- dafaultData.json        // 模板初始值（为可视化右侧表单数据结构，生成好之后点击去验证）
|  |  |-- jsonSchema.json        // 模板右侧表单架子 （为可视化右侧表单数据结构，拖拽生成）
|  |  |-- lgBase.vue              // 模板基类--不要修改
|  |-- index.vue    // 研发入口vue，打包入口文件，研发模板vue 文件
|
|-- tools                            // 辅助工具，如根据 jsdoc 生成表单配置 schema
|  |-- jsdocToJsonSchema.js        // 根据 jsdoc 生成表单配置 schema
|
|-- .gitignore                      // git忽略配置
|-- joyer-config.js                  // joyer配置文件
|-- mock.js                          // 本地mock服务文件
|-- package-lock.json                // npm依赖版本锁定文件
|-- package.json                    // npm依赖配置文件
|-- README.md                        // 项目说明文档

After the development of the overall function is completed, the attributes that need to be operated and configured are extracted, and the UI configuration form for the extracted attributes can be generated through the "form visualization platform". After generation, schema.json is exported and copied to the jsonSchema.json in the floor template development project . Some default values ​​can also be generated through the form visualization platform, and the default values ​​are copied to defaultData.json . These two files are in the src/widget directory.

Note: Developers do not need to care about the rendering of the right form UI in the Lego Visual Canvas. The right form UI will be dynamically generated according to jsonSchema.json.

3. debug debugging template

debug to debug the floor template, the downloaded code package integrates the debug tool, using the debug tool can update the locally modified code in real time in the canvas, the specific debugging steps are as shown in the figure (6-2): command $ npm run debug.
Enter the debugging mode: input the page ID of the LEGO to be debugged (the LEGO page ID is the unique identification of the page applied by the LEGO product in the LEGO background), press the Enter key to complete the input; press the Up and Down keys to select the environment to be debugged, and press the Enter key to complete the selection (Test, pre-release, and production debug environments are currently provided)

After executing the command, the LEGO visualization canvas will be automatically opened in the browser, and "my debug template" will appear in the floor template list, as shown in the figure below (6-3)

Finally, modify the local code to complete the real-time preview of the page.

4. Submit/publish template

After the overall functions of the template have been developed, upload the code package through the template management platform to ensure that there is no problem and then click Publish to see the template in Lego visualization. And the template management platform will monitor the template (which pages use the template, whether an error is reported, etc.), as shown in Figure (6-4).

7. LEGO visualization prospect

1. Floor template visualization

• Image to code directly
• Drag and drop of finer-grained components
• Provide specialized controls (controls: high-level components, such as layout components)
• Intelligent code generation

2. Template

As shown in Figure (7-1), the capability has been realized so far. It is necessary to improve the template S/M (S can only be instantiated once, and M can be instantiated multiple times). Error template self-destruction, template error log monitoring.

8. Join us

The main contributors to the project are Zhang Maixing/Shen Duxian/Zheng Shichao/Xing Wenliang. Welcome other small partners to join us, contact the email [email protected].