Design and Architecture of JD's Lego Low‑Code Visual Building Platform

Low‑code visual page construction is not a new concept; many H5 pages for marketing, product introduction, and other C‑end scenarios suffer from low ROI when requiring developer involvement. JD proposes a Lego visual platform that abstracts pages into vertically stacked floor templates, enabling rapid, low‑cost page creation.

The business background includes the JD Finance app’s native navigation requirements, strong operational needs for resource slot management, and a lack of a centralized repository for reusable business floors. Existing visual builders make extending new floor templates cumbersome, prompting the need for a more extensible solution.

The platform architecture separates three main zones: a template area, a canvas area, and a template‑configuration area. It adopts the Vue stack (consistent with JD’s front‑end ecosystem) while other industry solutions use React. Platform users are divided into Lego visual developers, business developers, and business operators, each with distinct responsibilities.

Platform‑centric thinking places visual editing and template management at the core. Templates are independent of the platform, allowing developers to focus on template logic while the platform handles rendering, configuration, and deployment.

Core technologies include a canvas rendering engine (see code snippet below) that renders H5 pages during editing, a debug tool that links local template code with the visual canvas (started via npm run debug ), and a publish‑subscribe mechanism for inter‑template data communication (code snippet provided). The platform also provides unified build and release services, supporting multi‑path URLs and on‑demand template bundling.

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

Debugging uses a bridge (lgBridge) to push and register messages between templates:

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

The visual form platform drives configuration UI from JSON schemas, allowing custom widgets (CMS, tracking, colors) and JavaScript linkage. Example form component integration:

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

Template creation follows four steps: (1) apply for a template via the Lego operations backend and download an initial code package; (2) develop the template in VSCode using the provided directory structure; (3) debug the template with the built‑in tool to see real‑time updates on the canvas; (4) submit and publish the template through the template management platform, after which the platform monitors usage and errors.

Future directions include visualizing floor templates, finer‑grained component dragging, advanced widget libraries, and AI‑assisted code generation. The project invites contributors, providing a contact email for interested developers.