Understanding Low‑Code Implementation Principles: Frontend and Backend Solutions

Low‑code platforms have been explored since 2015, starting with front‑end rendering (amis) and later adding back‑end data models; the key distinction among products lies in their implementation principles.

What is low‑code? It is essentially visual programming, where visual editing is a necessary condition. Visual editors require declarative code rather than imperative code.

Declarative examples include HTML + CSS:

<div style="background:red; height:50px"></div>

Imperative examples use the Canvas API:

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
const rectangle = new Path2D();
rectangle.rect(0, 0, 100, 100);
ctx.fill(rectangle);

The fundamental differences are:

Declarative code directly describes the final result without caring about the implementation steps.

Imperative code focuses on how to achieve the result step by step.

From a visual editor’s perspective, declarative code allows reverse‑engineering from the rendered UI back to the source, while imperative code does not.

Because low‑code must support visual editing, all low‑code platforms ultimately rely on declarative DSLs such as HTML + CSS, SQL, or K8s YAML. These languages share advantages (easy to learn, support visual editing, easier performance optimization, good portability) and disadvantages (domain‑specific, less flexible, harder to debug, strong runtime dependence, potential vendor lock‑in).

Front‑end implementation – Using the open‑source amis framework, JSON configurations are transformed into a custom React component tree, which then renders HTML. Example JSON:

{
  "type": "page",
  "title": "页面标题",
  "subTitle": "副标题",
  "body": {
    "type": "form",
    "title": "用户登录",
    "body": [
      {"type": "input-text", "name": "username", "label": "用户名"}
    ]
  }
}

Corresponding React component representation:

<Page title="页面标题" subTitle="副标题">
  <Form title="用户登录">
    <InputText name="username" label="用户名" />
  </Form>
</Page>

JSON is preferred because it is easy to manipulate in JavaScript and supports bidirectional editing, unlike YAML which loses reference information when converted.

Back‑end low‑code storage solutions include five major approaches:

Direct use of relational databases (DDL generation). Example:

Document databases (e.g., MongoDB) with automatic collection creation and field‑ID mapping.

Row‑instead‑of‑column (meta‑key/value) pattern as used by WordPress.

Meta‑information + wide table (pre‑allocated columns) similar to Salesforce’s architecture.

Single‑file storage (Excel‑like) where all data resides in a JSON file.

Each method has distinct trade‑offs in performance, flexibility, external integration, and implementation complexity.

Back‑end business logic can be realized via:

Graphical programming (limited for complex logic).

Fixed actions (CRUD, predefined behaviors).

Custom JavaScript execution (e.g., ServiceNow uses Rhino).

Simplified DSL for expression evaluation (similar to spreadsheet formulas).

Execution trees that model code flow, supporting parallel nodes, loops, and sub‑trees.

Workflow (process) implementation typically follows BPMN‑style directed graphs; a simple example JSON representation is shown below:

{
  "lines": [
    {"id":"d4ffdd0f6829","to":"4a055392d2e1","from":"e19408ecf7e3"},
    {"id":"79ccff84860d","to":"724cd2475bfe","from":"4a055392d2e1"}
  ],
  "nodes": [
    {"id":"e19408ecf7e3","type":"start","label":"开始"},
    {"id":"4a055392d2e1","type":"examine-and-approve-task","label":"审批节点"},
    {"id":"724cd2475bfe","type":"end","label":"结束"}
  ]
}

The engine determines the next node based on the current state and executes the associated action, handling approval rules, roll‑backs, and edge cases.

Future outlook – Low‑code will diverge into two streams: zero‑code solutions (high usability, low flexibility, suitable for many small customers) and professional‑development‑oriented solutions (lower usability, higher flexibility, targeting larger enterprises). The author’s platform, 爱速搭, follows the professional path, leveraging amis for front‑end and offering rich back‑end capabilities.

In summary, low‑code is fundamentally declarative programming; its strengths and weaknesses stem from the nature of declarative languages, making it ideal for UI construction and domain‑specific tasks while requiring integration with traditional code for complex logic.