Front‑end Technical Infrastructure (Base Construction) – Insights from the 2020 Front‑end Early Talk Conference

Introduction

The piece is a written version of the second session of the 2020 Front‑end Early Talk conference, where the speaker, Ma Chong (also known as "堂主"), shares how his team built front‑end technical infrastructure from scratch to support business growth.

What Is Technical Base Construction?

Technical base construction refers to the development of a team's technical infrastructure—a subset of overall R&D foundations that includes standards, processes, culture, training, and especially the tooling and platforms that enable efficient front‑end work.

Why Build It?

It solves real business problems, provides a training ground for engineers, strengthens team hierarchy, and enhances influence by delivering measurable business value.

What to Build

Development Standards : unified coding conventions and guidelines.

R&D Process : a standardized workflow from requirement intake to deployment.

Core Assets : toolchains, DSLs, and material libraries (components, blocks, templates).

Engineering Management : end‑to‑end lifecycle control.

Performance & Experience : automated detection and optimization.

Security : dependency safety, code compliance, risk detection.

Monitoring & Analytics : data collection, analysis, and alerting.

Quality Assurance : self‑testing checklists, unit tests, UI automation, and end‑to‑end testing.

How to Build It

1. Standards & Documentation

Establish team‑wide consensus on coding standards and maintain clear, user‑friendly documentation.

2. Local Engineering Environment (CLI)

The team created a CLI that automates project scaffolding, dependency installation and environment setup. For example, running zoo init performs all steps, eliminating the need to manually execute npm install or dev .

3. Visual Engineering System (GUI)

A desktop client named “敦煌” aggregates all engineering tasks—component creation, template usage, building, and deployment—into a visual workflow, reducing reliance on command‑line operations.

4. Component Development & Management

Standardized component naming, versioning, and usage metrics are enforced through the CLI and GUI, ensuring consistency across projects.

5. Template Development & Management

Reusable templates for common back‑office pages (forms, lists, etc.) accelerate development by allowing one‑click installation and automatic routing configuration.

6. Project Creation & Management

The goal is a “single‑person end‑to‑end” workflow where developers can create, configure, build, and deploy projects without external assistance.

7. CI/CD Automation

The team built a custom CI/CD platform that performs linting, compatibility checks, HTTPS verification, package black‑listing, legality checks, 404 detection, UI validation, and more, blocking releases when issues are found.

8. Data Tracking & Analysis

Front‑end‑driven data‑collection SDKs capture user behavior, page views, conversion funnels, and heatmaps, feeding a BI‑like system for product and operation insights.

9. Automated Performance Analysis

Using Node‑based tools and Puppeteer crawlers, the team automatically detects image bloat, resource loading issues, and overall page performance, providing regular reports and a “red‑black” leaderboard.

Beyond Infrastructure

Effective base construction requires data‑driven measurement, scenario‑first solution design, and a mindset that pushes front‑end influence beyond the UI layer into backend and business domains.

Conclusion

The speaker encourages engineers to take ownership of infrastructure, view problems as opportunities, and continuously expand technical boundaries, noting that personal growth ultimately depends on solving real business challenges.