Rome: Enhancing Front‑end Development Collaboration and Efficiency at Meituan

Background

Meituan’s “to‑store” business merged several divisions, creating high cross‑team collaboration needs and a large proportion of new hires who require rapid onboarding and basic development tasks. The business iterates frequently, demanding fast delivery and high quality while many legacy systems need migration and frequent hand‑offs.

Technical background: the initial infrastructure was based on an internal S3 storage service with static‑dynamic separation. Upper‑level framework and component libraries were numerous and inconsistent, causing high learning and maintenance costs and low development efficiency. A pure static S3 architecture was chosen early because the Node.js monolith suffered from low SEO demand, immature ecosystem, high operational risk, and high machine costs.

Engineering Ecosystem, Evolution Path, Large‑Scale Upgrade

Engineering Ecosystem

Reducing Learning Cost

Inconsistent project directory structures across Vue and React increase cognitive load.

Fragmented engineering capabilities across large teams make reuse of SSR, build optimization, etc., difficult.

Verbose business engineering configurations slow upgrades and increase risk.

Non‑standard infrastructure versions across teams raise integration cost.

Reducing Construction Cost

Instead of many short‑lived “small mushroom” capabilities, Rome adopts a “big tree” approach: cross‑team co‑building, review committees, and staged delivery of core capabilities such as Serverless SSR.

Typical Co‑building Example : Serverless SSR handles millions of requests for the “Secret Room” channel and tens of millions for the “Group Leader” order management, achieving ~90% page‑load speed.

Migration tools for non‑Rome projects achieve 40% accuracy with static Babel parsing, 60% with build‑tool dependency analysis, and higher accuracy with dynamic AST analysis combined with recast.

Improving Development Efficiency

Webpack Optimizations : shared cross‑stack Webpack configs, specialized Vue and React configs, and build‑time improvements using Webpack 5, SWC, and esbuild, combined with CI/CD caching, yield up to 10× faster builds.

Vite for Development : Vite is used for local development, while Webpack remains for production builds. A one‑click command launches the appropriate dev server, and plugins ensure consistent behavior across Vue 2, Vue 3, and React.

Dependency Speedup : Pre‑building Node.js dependencies reduces recursive install time, and switching to pnpm (chosen after evaluating Yarn Berry and PNP) further cuts install duration.

Evolution Path

Bottom layer: plugin loading and scheduling.

Middle layer: bundlers (Webpack, esbuild, Rspack) supporting many projects.

Upper layer: Plugin/Preset extensions for scenario‑specific capabilities.

Top layer: brand command (bin) for internal cooperation.

This design allows new frameworks to be built by only providing language‑specific plugins.

Large‑Scale Upgrade

Framework value is defined as coverage × function value. Over 100 projects (average cost ~5 person‑days per project) would require hundreds of days of upgrade effort. Rome provides two upgrade strategies:

Migration tools with three stages (Babel static parsing, build‑tool dependency graph, dynamic AST + recast) achieving up to 60% migration accuracy.

Automated large‑version upgrade checks (ghost dependency detection, source comparison, entry count, ES5→ES6 compatibility, online verification).

Framework Development Assistance

IDE‑Based Tools

Two common forms exist: web‑based UIs (e.g., Vue UI, Umi UI) and VSCode extensions (e.g., Ice Works). IDE integration leverages VSCode’s language‑server API, enables dynamic rule distribution, and allows seamless version rollout without forcing developers to switch contexts.

Efficiency Gains

A “one‑minute deployment” reduces the 369 s per release process (≈100 k releases/year) by automating CSR/SSR publishing, DevOps node synchronization, and asynchronous quality checks.

Quality Improvements

IDE detects historical online faults in real time, pushes dynamic rule updates, and links to detailed fault analysis, surpassing static ESLint capabilities.

Platform Flow

Design assets flow into DevOps, which can open the relevant local VS Code workspace preserving repository and branch context.

Documentation Hints

When code is linked to the internal knowledge base, the IDE offers contextual documentation suggestions and jump‑links.

Cloud IDE Integration

Because IDE standards are highly unified, a single Cloud IDE implementation can automatically install the same assistance capabilities both locally and in the cloud.

Framework Metrics and Business Practice

Core Metric Issues

Rome now serves B‑ and C‑end业务, covering 4 business groups and 15 divisions, with project count up 11× since 2020 (over 1,000 projects). Key questions include identifying benchmark businesses, measuring capability coverage, usage frequency, and quantifying product value (person‑hour savings, quality, delivery time).

Panorama of Metric Construction

Metrics are collected from three layers:

Data source layer: R&D process data, ecosystem telemetry, Talos/Fedo databases.

Data aggregation layer: multi‑platform database, monthly snapshots for dashboards.

Dashboard layer: Rome KPI service (input/output queries), FEDO engineering KPI service (framework adoption, average build efficiency), and operational services for coverage and team benefit statistics.

Business Practice

By the end of 2022, Rome powered more than 1,400 engineering projects and over 100 asset libraries; most Meituan “to‑store” H5 pages, B‑end systems, and internal React Native apps are built with Rome.

Summary and Future Outlook

Frameworks must support the entire delivery chain (app creation, authentication, config, dependency install, coding, mock, debugging, lint, Git, build, upload, gray‑release, publish).

High‑frequency, high‑value stages to focus on next:

Dependency installation (currently ~100 s of a 300 s release).

Development compilation (≈50 s improvement per developer, magnified at scale).

Release chain (asynchronous triggers, cache reuse can cut minutes per release).

Link flow (seamless hand‑off between design, DevOps, and IDE).

Future directions include deep dev‑chain integration similar to Vercel, continued Rust‑based infrastructure, migration to Rspack/Vite, and AI‑assisted coding (Copilot‑style) leveraging Rome’s strict asset production standards and knowledge‑base‑driven QA to reduce support costs.