Reflections on Frontend Engineering Practices at Meituan: Tooling, Standards, and SDK Projects

Frontend Engineering Journey at Meituan

After joining Meituan in September 2020, I spent nearly three years focusing on frontend engineering, reflecting on the concepts, evolution, and practical challenges encountered.

Understanding Frontend Engineering

Evolution of Frontend Technology

Page Development (2000‑2009) : Single‑page development, heavy compatibility concerns, libraries such as jQuery and ExtJS.

Modular Development (2009‑2015) : Module‑based architecture, performance focus, build tools and UI frameworks (Angular, React, Less, Gulp).

Application Development (2015‑2022) : Engineering problems addressed by automation tools and cross‑platform solutions (Webpack, React Native, Flutter).

Intelligent Assisted Development (2022+) : AI‑driven code generation, review, testing, and language conversion to boost productivity.

Software Engineering Three Elements

Method : Technical approaches that answer “how to do” the work.

Tool : Automated or semi‑automated environments that support the methods.

Process : A framework of tasks required to deliver high‑quality software.

Definition of Frontend Engineering

Front‑end engineering, a term popularized in China around 2018, means importing mature software‑engineering concepts, practices, and tools into frontend development to improve efficiency, reduce cost, and ensure quality.

Engineering Practices for Backend Projects

Rapid business growth and expanding team size at Meituan drove the need for systematic engineering solutions. The practice evolved through four stages: tooling, standardization, platformization, and systematization.

Tool Construction

In 2018 we built a private‑cloud platform and created scaffolding tools, unified project templates, a shared component library, and deployment utilities that moved static assets to object storage (S3‑plus) for a server‑less architecture.

Standard Formulation

We identified two major pain points—lack of unified standards and tool fragmentation—and produced a comprehensive set of guidelines covering 6 major categories and 26 sub‑categories, ranging from requirement management to operation monitoring. Mandatory and recommended levels were defined to balance flexibility and compliance.

Platform Building

To lower onboarding costs for external developers, we introduced a development workbench, VSCode extensions, and “scene templates” that encapsulate project initialization, CLI plugins, and service configurations, enabling rapid creation of new backend projects.

System Formation

In 2022 we aimed to close the loop between upstream design/requirement stages and downstream operations, exploring low‑code solutions, integrated IDEs, and tighter integration with project‑management and monitoring platforms.

SDK Project Engineering Practices

SDK projects differ from typical business projects: they prioritize stability, compatibility, performance, package size, and documentation. A comparison table highlights these differences.

Type

Product Requirements

Usage

Tech Stack

Business Project

Feature‑centric, front‑page performance for C‑end

Web links

Vue/React, HTML/CSS, Webpack, minimal testing

SDK Project

Stability, compatibility, performance, package size, docs

npm install or CDN script

Pure JS/TS, Rollup, Jest for unit tests

We extended the existing cloud‑development platform with a dedicated SDK scene template that registers an appkey, creates a repository, and links the SDK site to the static‑hosting service. The workflow uses Vite for development, Rollup for bundling, and pnpm for monorepo management.

Configuration is minimal; a pnpm-workspace.yaml file defines the workspace packages:

packages:
  - 'packages/**'
  - site

Each subdirectory under packages represents an individual npm package, while site hosts the SDK documentation site. Running npm start launches the site, allowing live debugging of both the SDK code and its documentation.

Conclusion

Three years at Meituan taught me that effective frontend engineering balances business development and framework/tool development, leverages standards and platforms to reduce friction, and must evolve with emerging technologies such as AI‑assisted coding to stay ahead.