Improving Large‑Scale Frontend Development Efficiency and Practice

This article, compiled from Meituan Tech Salon Session 76, shares the evolution of the large‑frontend (大前端) development stack and the practices that boost research‑development (产研) collaboration, standardization, online‑ization, automation, and digitalization.

Background: Different stages of product‑research collaboration face distinct challenges. Meituan’s front‑end teams have progressed from native/Web isolated stacks to a unified multi‑terminal approach, encountering issues such as high operation, learning, and maintenance costs.

Standardization: The team introduced a four‑step standardization process—standardization, online‑ization, automation, and digitalization. This involved defining production standards, establishing infrastructure support, and embedding development norms across infrastructure, tooling, and business layers.

Production‑Research Collaboration: Collaboration costs rose with dynamic delivery and multi‑terminal scenarios. Solutions included low‑cost QR‑code‑driven workflows, tool‑based process management, and unified configuration to reduce manual hand‑offs.

Continuous Delivery System: The delivery platform evolved from early online release pipelines to dynamic, multi‑bundle delivery. Key capabilities include customizable pipelines, automated checks (lint, unit tests, dependency collection), and integrated monitoring. The platform supports three team maturity levels—exploratory, growth, and mature—offering out‑of‑the‑box best practices, extensible controls, and fine‑grained API composition.

Dynamic DevOps: To handle increased complexity from dynamic bundles, a dynamic DevOps solution was built, encapsulating the full workflow (branch creation, build, test, deployment, acceptance) within a configurable work‑flow engine, thereby reducing manual effort and ensuring compliance.

Large‑Frontend DevOps Platform: The platform provides a unified work‑flow engine, standardized infrastructure, and plug‑in nodes for team‑specific customizations. It enables end‑to‑end traceability, metric collection, and automated QR‑code generation for configuration sharing.

Future Outlook: The roadmap includes AI‑assisted process guidance, intelligent compliance checks, and further automation to achieve fully digital, data‑driven front‑end development.

Q&A Highlights: Best practices for multi‑branch management and code review were discussed, emphasizing automated branch creation, enforced standards, and intelligent recommendations.