Low-Code Platform Development: Concepts, Market Landscape, Architecture, and Implementation

On May 22, 2021, the Hello Tech Salon on "Big Frontend Exploration and Practice" was successfully held in Hangzhou. The following content is based on the talk shared by @Du Shichen (Miao Ye).

What is low-code? It provides a visual application development environment that reduces or eliminates the need for native code, enabling rapid construction of applications.

Traditional development involves a lengthy process: product requirements (PRD) → UI design → front‑end development → back‑end development → integration and testing, often requiring complex environments and many participants, which extends the development cycle.

Low-code platforms simplify this by offering a configuration platform where developers of any skill level (fresh graduates, front‑end novices, or even back‑end engineers) can quickly generate web pages through visual configuration.

The market for low-code has grown significantly. Historical milestones include 4th‑generation programming languages in the 1980s, visual programming languages (VPL) in 2000, and the formal introduction of low‑code/zero‑code concepts by consulting firms in 2014. By last year the global market reached US$8.4 billion, projected to exceed US$10 billion this year and surpass US$20 billion by 2023.

Low-code solutions are generally divided into two categories: marketing‑oriented no‑code tools and general-purpose low‑code/pro‑code platforms. The latter can be used by front‑end or back‑end developers to build middle‑office pages while avoiding heavy engineering setups.

The target audience varies: marketing no‑code serves non‑technical users, while low‑code/pro‑code targets developers who need faster page creation with lower barriers.

Middle‑office pain points include inconsistent interactions across similar pages, maintenance difficulties due to varied coding styles, and staff shortages (e.g., a 1:7 front‑end to back‑end ratio in some domains).

To address these, three goals were set: (1) improve efficiency and reduce cost, (2) enable back‑end engineers to output front‑end pages, and (3) abstract core middle‑office components for reuse.

Poseidon Builder Platform was created to meet these goals. It combines visual operations with optional coding to generate middle‑office systems, turning front‑end development into component development, reducing or eliminating code for simple business needs.

After launch, the platform runs 117 pages, has been released 870 times, supports six teams, and shows significant productivity gains: a page that previously required 3 person‑days can now be built in 1 person‑day, and iterative modifications take only 0.5 day.

The platform workflow: a creator builds a page on Poseidon, which generates a JSON schema stored in SQL. Users access the page via a business site that loads the schema through an SDK, rendering components and fetching business data.

Architecture : the stack is built on Vue (but can be replaced by React + Antd), with schema‑driven components, a rendering layer for developers, and a platform UI that provides documentation, videos, and example configurations.

Integration methods include: (1) SDK import for flexible upgrades and secondary development, (2) iframe embedding for simple inclusion, and (3) one‑click site creation where the entire site (menus, domains, permissions) is managed within Poseidon, using a proxy to a base micro‑frontend.

The page layout consists of a component panel (basic components, future business/custom components), a layout design area (e.g., list pages with filter, function, and list sections), and a configuration panel for binding fields, text, and additional properties such as remote data for select options.

Model Design (JSON Schema) : JSON Schema defines the structure and validation of page data, ensuring consistency. Both list and form pages share the same protocol, with component interactions (e.g., a select triggering events on another component) defined via refs and input/output parameters.

Operation events allow developers to set component refs and specify input/output parameters for interaction handling.

The data center stores interface configurations, enabling components like selects to fetch remote enumerations for reuse.

Custom slots (Vue slots) provide a way to extend the platform with unsupported components or interactions by inserting a slot component that accesses configuration refs and scopes.

Stability is ensured through a review process similar to traditional development, with schema diff and version comparison tools that require selecting a version before publishing, reducing risk.

Future plans include "Auto‑Code": leveraging machine learning to recognize design drafts and automatically generate websites, aiming to evolve low‑code into a no‑code/auto‑code solution that eliminates most manual configuration.

The End