Luban: A Visual Front‑End Page Building System for Rapid Development

Background

As the company’s business expands, the volume of marketing activities, advertisements, and page revisions has surged, making manual coding unable to keep pace; efficiency becomes critical, prompting the creation of a visual building system called Luban.

What is Luban?

Luban is a visual construction system that rapidly generates pages based on business components.

Business Pain Points

Massive duplicate module development.

Complex and scattered configuration, leading to fragmented work and high maintenance cost.

Long scheduling cycles and high communication overhead for even minor changes.

Lengthy Jenkins build and deployment times.

Advantages of Luban

Improved user experience through static page rendering for faster access.

Higher stability via Nginx direct forwarding, robust routing, and easy rollback.

Rapid response to business needs through component reuse, boosting developer productivity.

Better business empowerment, allowing product and operation teams to participate in page construction.

Enhanced system‑level capabilities, facilitating integration with performance, stability, deployment, and monitoring systems.

Reasons for Creation

The team previously used an outdated system called “lunatone” that relied on a rarely‑maintained template language, cumbersome grid layouts, long compilation times (≈20 minutes), and lacked release control, leading to frequent production incidents.

Luban Team Members

Material Library (foundation)

Self‑developed tracking

Performance monitoring

Advertising system

Application management

Key Contributors

The entire stack—from front‑end architecture to back‑end services, database design, deployment, and disaster‑recovery—was designed and coded by front‑end engineers.

System Overview

Images illustrate the overall architecture and usage flow; the core process involves selecting components, configuring data, and publishing pages across environments.

Luban Usage Process

The workflow shows how users build a page from the front‑end management console, configure components, preview in real time, and finally publish.

Management System

Site Management

Handles domain sites for different environments (e.g., test, staging) with simple add/edit operations.

Page Management

Add new page

Edit (jump to visual builder)

Configure data

Copy

Open in specific environment

Performance testing

Publish to environments

View release logs

Rollback

Enable/disable access

Component Management

Components (materials) are synced from a Git repository to the database and server; operations include pulling new components/versions, updating metadata, and previewing.

Template Management

Templates initialize pages for a given business type, simplifying management and future deep‑dive features.

Schema Validation Tool

Provides a side‑by‑side editor where valid JSON Schema on the left instantly validates and displays configuration items on the right.

Visual Building Platform

The left panel lists all available components, the central canvas shows real‑time page rendering and data configuration, and the right panel displays components used on the page, allowing version upgrades, deletion, and ordering.

Component Data Configuration

Supports data types such as String, Number, Boolean, Array, Object, Color, Select, Upload, and two‑dimensional arrays, with visual examples.

Routing Module

Standard Vue‑Router routing is used; dynamic routing first passes through Nginx, then Luban looks up site, region, URL, and page status in its database, falling back to OSS or returning a 404 if not found.

Technology Stack

Frontend: Vue (the company’s front‑end pages are built with Vue, and Luban follows the same stack).

Backend: Node.js with Egg.js.

Database: MySQL (MongoDB is mentioned humorously).

Core Code

The core implementation leverages Vue’s is attribute; the official Vue documentation is referenced: https://cn.vuejs.org/v2/api/#is

Value

Since its launch in June, Luban has been widely adopted across key business lines, significantly improving development efficiency and receiving strong internal recognition.

Recruitment

The front‑end team is hiring; interested engineers can contact [email protected] for more information.