How a Custom Low‑Code Platform Supercharges Front‑End Productivity

Introduction

Front‑end technology has been evolving rapidly, from jQuery‑based DOM manipulation to Angular MVC, React and Vue data‑flow management, and now Web Components. As underlying technologies mature, a new exploration emerges: low‑code.

Low‑Code

Low‑code, defined by Forrester Research in 2014, enables rapid application development with little or no code, allowing fast configuration and deployment.

Front‑end low‑code aims to develop pages using non‑programmatic, efficient methods, freeing front‑end productivity.

High development efficiency and fast delivery

Reduced maintenance cost

Avoidance of technical debt

Automation of more business processes

ShouQianBa Low‑Code Platform

Front‑end engineers face pain points such as large development demand leading to technical debt, repetitive business development, and high costs of keeping up with fast‑changing frameworks.

We built a low‑code platform called "Ghost‑Craft" within the ShouQianBa operation management system, using drag‑and‑drop visual configuration for front‑end page development. Unlike business‑driven low‑code systems, this is an engineer‑initiated exploration.

Our goals are to improve efficiency by configuring pages instead of writing code, dramatically reducing development and maintenance time, and avoiding technical debt caused by rapid iteration.

Self‑Developed System

Ghost‑Craft is a self‑developed low‑code platform integrated into our internal operation management system, targeting highly similar UI designs, micro‑frontend architecture, complex page logic, and reusable business components.

Beyond basic low‑code capabilities, we require high component coverage, support for complex interactions, backend data integration with extensible features such as authentication, and the ability to connect to external platforms.

System Architecture

Front‑end low‑code system: configuration tool, rendering engine, preview system, etc.

API layer: configuration data management, user authentication, page authorization.

APISIX gateway: low‑code pages access backend services via APISIX plugins for authentication.

JSON RPC service layer: provides business data and operations.

Data layer: data storage.

Visual Page Configuration System

The system generates front‑end page configurations via drag‑and‑drop, offering an open horizontal‑vertical flow layout with nested components.

Configuration includes:

Header: preview, save, publish, global page settings, instance view.

Component/Template column: draggable components or templates (templates are component collections with special functions).

Canvas: represents the page where components/templates are placed.

Configuration panel: detailed settings for each component (e.g., dropdown options, table headers).

Rendering Engine

The engine receives JSON data from the configuration tool and renders page structure and component styles at runtime.

JSON data consists of three blocks:

configData: component configurations at a single level.

pageConfig: page‑level settings such as caching.

renderData: tree‑structured page layout configuration.

It provides instance preview and a "latest permanent link" API that returns the newest instance for frequently updated pages.

Data Domains

Data acquisition can be configured for components (e.g., dropdown options, table data, text content). Domains include:

Global domain: data accessible by all components, sourced from URL parameters or "pass‑through" parameters for inter‑module communication.

Service domain: defined by service components that can configure multiple APIs, with higher priority over lower‑level domains.

Component domain: data scoped to the current component, configured directly within the component.

Priority order: Global < Service < Component.

Data Integration

The platform integrates with APISIX; engineers register JSON RPC interfaces in APISIX, obtain the corresponding HTTP endpoint, and configure it in the low‑code platform under the "api‑six‑api" domain.

APISIX's plugin system handles authentication and other cross‑cutting concerns.

Design Principles

Pages and Modules

Low‑code configurations can be of type "Page" (rendered normally) or "Module" (a page fragment that must be embedded in a page). Modules enable multiple pages to reuse the same business component.

Components

Components are divided into basic components and templates (which provide special functions). Notable special components include:

Grid: adjusts page structure and supports nesting for horizontal‑vertical layouts.

Service: requests backend APIs; integrates with APISIX so backend services can be used directly in Ghost‑Craft.

Module: reusable component‑level modules.

Operations

Interactive components (e.g., buttons) can be configured with operations such as:

Open link

Pass‑through parameters (store data in the global domain)

Request API (e.g., form submission)

Open dialog

Text Mapping

Text mapping serializes data for front‑end display, supporting placeholders (e.g., ${keyName}), object mapping, date formatting via moment.js, and simple arithmetic expressions.

Applications and Experience

Ghost‑Craft was launched in the second half of last year and has powered the operation management platform, customer service platform, personnel information system, and other large pages with dozens of business modules.

Challenges encountered include component communication, special styling or interaction needs, and large page resources causing slower loads. Optimizations and additional component configurations resolved most issues, though low‑code is unsuitable for extremely complex business logic, highly customized UI, or performance‑critical pages.

Conclusion

Using the low‑code platform has made collaboration with product managers easier, allowed them to visualize pages early, and dramatically reduced front‑end engineers' workload, especially in maintenance and iteration. Ongoing improvements aim to add charting, data source integration, and further automation of business processes.