Frontend Engineering Practices: Meituan's App-Proto Framework

Frontend engineering refers to standardizing the development process, technologies, tools, and experience according to specific business characteristics to form a self‑contained system that improves development efficiency and reduces coordination costs.

Meituan’s Xiamen intelligent accommodation frontend team, based on the “Convention over Configuration” principle, created the app‑proto framework after exploring multiple projects.

The team mainly builds B‑end tool applications for merchants, sales, operations, product managers and developers. These single‑page tools feature complex interactions and forms, have no SEO requirements, and often run as browser‑based desktop‑like software.

Challenges include unstable hardware‑dependent backends, frequent demand changes, short iteration cycles, and the need to work with multiple backend teams, which can leave frontend engineers waiting for APIs.

From practice they distilled several experiences: frontend should be a self‑contained system (build, deploy, ops) decoupled from backend projects; avoid heavyweight “one‑size‑fits‑all” frameworks; adopt new technologies incrementally without large‑scale rewrites; and design layered, replaceable engineering modules to cope with changing needs.

The app‑proto architecture splits work into three modules: a Node service handling data proxy, URL routing and server‑side rendering; a pure Web application focused on interaction experience; and frontend operations covering building, testing, deployment and monitoring.

In the Node layer, data proxy uses http‑proxy for mature backends and a custom datasources module that maps APIs to local files, enabling mock‑first development, request merging, caching and auth handling without changing frontend code. Routing follows the same directory‑based convention, and server‑side rendering outputs a minimal HTML shell with JSON data for client‑side hydration.

On the Web side, the team encourages Ajax calls to go through the Node proxy, treats JavaScript, CSS and HTML as low‑level “assembly”, emphasizes state management (Redux, Vuex, MobX) and component‑based UI development.

Engineering support includes a Yeoman‑based project generator, ESLint‑driven code quality, mandatory tests for shared components, CI via Castle, and Docker‑powered test environments (Cargo) that automate provisioning from a simple cargo.yml file.