Frontend Building System: Architecture, Deployment, and JSON Schema Practices

Self Introduction

Hello, I am Luo Chen from the Zhengcai Cloud frontend team. I graduated in 2014, have experience with .NET, Java, databases, and have witnessed the evolution of frontend from jQuery to Angular to React/Vue, joining the frontend field in 2015 and now working on the "Luban" building system.

Introduction to the Building System

Beyond the routine of requirement review, development, testing, and release, we need an elegant way to solve business problems, which leads to the discussion of a building system that streamlines page construction and reuse.

Business Scenarios

The system serves high‑volume, highly similar portal sites where visual standards are consistent, allowing extensive reuse of components, modules, and templates, and addresses the pain of frequent small‑scale requests from operations that cannot be promptly satisfied.

Business Examples

Examples include portal navigation, banners, product categories, and quick‑entry sections that are visually identical across pages, making component reuse feasible; another example shows large portions of pages that operations need to configure manually, highlighting the need for a configurable system.

What the Building System Looks Like

The system consists of three main functional modules plus a data module and a permission module: Site Management, Page Management (core), Component Management, Data Dashboard, and Permission Control (menu/operation and data visibility).

Architecture Diagram

Deployment

The building system is deployed once in a dedicated production server, then its pages are published to test, staging, and production environments, ensuring a single source of truth while supporting three environments simultaneously.

How to Configure Data

JSON Schema

JSON Schema is a constraint language that standardises JSON data structures, serving as the basis for defining form elements and their properties.

Simple Example

A typical form includes fields such as label, placeholder, type (input, switch), data (options), key, and value, all described by a JSON Schema fragment.

Extended Types

Beyond basic String and Boolean, custom types like Select can be defined to suit specific UI components, with examples of common extended types shown.

Summary of Types

Complex types (Object, Array) are built from basic types (String, Number) and can be extended as needed.

Business Scenario Revisited

Returning to the portal example, operators need a way to configure data manually; JSON Schema provides the structure to map those configurations.

Transform Business to Data

Business elements (e.g., quick‑entry links) are represented as data records with fields like addressName, icon, link, and description.

Transform Data to Definition

Each field is defined with label, key, type, and optional data sources, forming a JSON Schema segment for that module.

Standardise Definition Structure

By aggregating individual JSON Schema fragments for objects, arrays, or multi‑dimensional arrays, a complete schema for a page is constructed, combining definitions with initial data.

Visualization

A custom formatter can render the JSON Schema into forms, tables, or other UI representations; an example visualisation of an operational data‑configuration page is provided.

Overall Summary

The building system is a key part of frontend engineering, supporting various scales (component, template, application) across devices (PC, H5, native, mini‑program) and integrating with performance testing, BFF layers, and data sharing.

System and Extensions

To ensure stability, the system includes disaster recovery, release rollback, scaffolding, component lifecycle governance, and performance detection (via the "Baice" system), forming a comprehensive frontend engineering ecosystem.

Recruitment

The team is hiring; interested candidates should scan the QR code or email their résumé to [email protected].