Zhenkunxing’s Frontend Overhaul 2020‑2021: Visual Editors, UI Libraries & Low‑Code

Preface

In 2020 Zhenkunxing actively explored and implemented front‑end technologies such as visual editing, componentization, and engineering practices, achieving both business and technical benefits.

2020 Front‑end Technology System Planning

The team delivered a visual editor, UI component library, and a unified development‑build‑deployment workflow for the official website and the BOSS one‑stop platform.

Pandora Visual Editing Service

In the first half of 2020 a page‑level visual editing service was built using a drag‑and‑drop component model. The stack combined Koa, MySQL and Vue, and produced a front‑end full‑stack template that could be invoked via internal CLI tools, providing reusable page and component generation.

Component parameter generator that creates input fields from parameter definitions.

Component grouping, merging and splitting.

Layout‑based node renderer.

Page and component reuse.

Custom script entry.

History operations.

Future work includes upgrading the service into a low‑code platform to further improve development efficiency.

UI Component Library

To address growing front‑end complexity, a component‑based approach was adopted. Based on React and Vue ecosystems, the team created the business‑oriented boss‑ui library and the foundational z‑ui library, delivering components such as Super Table and FormSchema that enable simple, configurable page construction. Over 30 business components were produced, and a customized UI library for the industrial e‑commerce domain is being expanded for 2021.

Development, Compilation & Deployment Standardization

Code management follows a customized Git‑flow, with ESLint and Commitlint enforcing style and commit standards.

Merge‑request based code review ensures quality; the BOSS system has recorded over 500 merge requests.

Deployment switched from Jenkins to Alibaba Cloud Effect, supporting rolling and blue‑green releases, especially for high‑PV C‑end projects.

Monitoring migrated from ELK to Alibaba ARMS (front‑end performance, API monitoring, JS error reporting) and SLS (Node logs), providing full‑stack traceability.

Technical Innovation Projects

Beyond core infrastructure, the team launched several innovation projects:

Front‑end technology portal website for knowledge sharing.

Online‑form system (online‑sheets) built on Handsontable, React, DVA and Ant Design, offering Excel‑like batch entry, iframe embedding, and data compression for fast upload/download.

OKR A system providing OKR management, alignment view, followers, comments, and other core features.

Front‑end Implementation Practice

In 2020 the team rebuilt major front‑end systems (MDM platform, ESP admin, bidding, quotation, etc.), improving development efficiency by 30% and delivering better user experience.

Website Refactor

The official website, the main external portal, was redesigned with a unified React + Node server stack. Server‑side rendering (SSR) via ReactDomServer.renderToString improves SEO and load speed. The new architecture supports SSR/CSR, unified routing, and JSX templates, with Webpack‑based local development for faster debugging.

import ReactDomServer from 'react-dom/server'
ReactDomServer.renderToString(element)

Key achievements include modular ES‑module code, component‑driven UI, SSR for faster page loads, lazy loading, skeleton screens, CDN, HTTP/2, and template caching, reducing white‑screen time and boosting user experience.

BOSS One‑Stop Platform

The BOSS platform now integrates order center, customer service, finance, work order, after‑sale, template, and price modules, handling over 100k daily PV. It uses a Vue 2 + Koa (Node) stack with TypeScript BFF, offering security integration, API forwarding, data processing (Excel, PDF), configuration center (ACM), and CLI tools. Front‑end packages such as @boss/excel, @boss/pdf, @boss/acm, and @boss/cli were published to improve development efficiency.

Micro‑Frontend Service

To solve the “monolith” issues of the BOSS platform (long build times, low maintainability), a micro‑frontend architecture was adopted, allowing independent development, deployment, and flexible releases of sub‑applications.

Front‑end Resource Configuration Center

A static resource configuration center was introduced to enable dynamic loading of resources without redeployment, supporting business, technical, and feature‑flag configurations.

Low‑Code Platform

The low‑code platform provides a visual tool for building applications, allowing both developers and non‑developers to participate, reducing IT development and maintenance costs. It builds on the previously created Pandora visual editor and aims to accelerate internal application construction.

Conclusion

Zhenkunxing’s continuous front‑end evolution demands higher standards for the technology stack. The company invites talent eager for challenges and growth to join the mission of building an “industrial infrastructure” together.