Understanding Low‑Code Implementation: Principles, Front‑End and Back‑End Solutions

The author, a senior architect, introduces low‑code as a visual‑editing technology whose essential requirement is a declarative implementation, allowing the editor to infer source code from the rendered result.

Declarative code directly describes the final UI (e.g., HTML+CSS) while imperative code (e.g., Canvas API) describes step‑by‑step drawing; the former enables reverse engineering for visual editors, the latter does not.

For front‑end low‑code, the article showcases the AMIS project: a JSON configuration is transformed into a custom React component tree, which then renders HTML. Example JSON and the resulting React JSX are shown:

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

Converted to React:

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

The article also discusses why JSON is preferred over YAML for bidirectional editing and shows a custom JSON parser that preserves comments.

Back‑end low‑code storage is examined through five schemes: direct relational DDL, document databases (MongoDB), row‑instead‑column (meta tables), meta‑info + wide tables, and single‑file storage. Each scheme’s advantages and drawbacks are listed, with sample SQL and table definitions:

ALTER TABLE 'blog' ADD 'title' varchar(255) NULL;

Meta‑table example (WordPress‑style):

CREATE TABLE wp_postmeta (
  meta_id bigint(20) unsigned NOT NULL auto_increment,
  post_id bigint(20) unsigned NOT NULL default '0',
  meta_key varchar(255) default NULL,
  meta_value longtext,
  PRIMARY KEY (meta_id),
  KEY post_id (post_id),
  KEY meta_key (meta_key)
) DEFAULT CHARSET=utf8;

Business logic can be expressed via graphical flow, fixed actions, JavaScript snippets, or simplified DSL formulas; a JavaScript traversal function is provided as an example:

function JSONTraverse(json, mapper) {
  Object.keys(json).forEach(key => {
    const value = json[key];
    if (isPlainObject(value) || Array.isArray(value)) {
      JSONTraverse(value, mapper);
    } else {
      mapper(value, key, json);
    }
  });
}

Workflow engines are modeled as directed graphs; a minimal flow definition in JSON is shown, illustrating start, approval, and end nodes.

{
  "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": "结束"}
  ]
}

Finally, the author reflects on the future of low‑code platforms, contrasting zero‑code (high usability, low flexibility) with professional‑developer‑oriented solutions (high flexibility, higher complexity) and predicts continued growth of the former, especially in spreadsheet‑like online tools.