Boosting Frontend Efficiency: Insights from Meituan, Baidu, and ByteDance

Preface

2021 GMTC featured 16 sessions covering the entire front‑end landscape. Four sessions were selected for detailed review:

MBC Business Standardized Container at Meituan

SmartFeed Multi‑end Template Rendering Architecture

Shell's Middle‑platform Front‑end System Exploration

ByteDance's Modern Web Development Practice

MBC Business Standardized Container at Meituan

Meituan's Business Container (MBC) aims to improve development efficiency through business modeling, standardization, dynamicization, and configuration.

Traditional Pain Points

Business Pain

High traffic and display‑heavy pages require native plus dynamic layout, leading to low release efficiency and high development cost.

Process Pain

Complex roles (PM, UED, client RD, server RD, QA) cause cumbersome communication and unclear responsibilities.

Ideal Process

Parallel workflows with clear role separation enable specialists to focus on their tasks.

Key goals include standardization (data, tracking, interaction, design language), dynamicization (dynamic page and container loading), configuration (page, template, tracking), and intelligence (personalization).

MBC Architecture

The container consists of:

Protocol layer providing standardized interaction APIs.

Configuration platform offering UI‑to‑code, tracking, and template tools.

Server container that transforms non‑standard APIs into client‑standard APIs.

Client container rendering components and tracking based on data.

Standardization

Business Modeling

Defines page layout structures, module order, card styles, element fields, and color schemes in collaboration with PM and UI/UE teams.

Data Standardization

Standard schemas describe page structure, interaction logic, and core display cards, supporting various layout types (grid, horizontal scroll, flow, 1‑to‑N, etc.).

Tracking Standardization

Metrics: FPC, startup time, jank rate.

Strategies: click, exposure, dwell, duplicate filtering.

Types: click, exposure, statistical, performance.

Supports tracking reporting and distribution.

Dynamicization

BFF

Backend‑for‑Frontend solves front‑back integration and multi‑endpoint coupling, though it introduces stack heterogeneity.

Container Solution

Encapsulates common services; clients write minimal business logic while containers handle orchestration, hot deployment, and API conversion.

Service orchestration + hot deployment reduces release cost.

Containers manage operations; clients focus on business logic.

Java modules offer low development cost and high performance.

Practical Use Case

DSL is written to fetch data sources and transform business models into standardized protocol data.

Client Template Container

Based on flexbox, binds view to business data for dynamic configuration.

Configuration

Combines standardization and dynamic capabilities to close the development loop.

Template Configuration

Reduces technical barriers; PM selects templates, RD implements business logic; supports rich template composition and WYSIWYG preview.

UI2Code

Automates conversion from design drafts to code via neural networks or Sketch‑derived DSL, though challenges remain in accuracy and readability. MBC's solution adds component recognition, slicing algorithms, visual intervention, inference with business binding, and deep integration into the development workflow, achieving UI → DSL → Code → business binding.

Tracking Configuration

Provides a visual platform to insert tracking points into a component tree, facilitating data platform configuration.

SmartFeed Multi‑end Template Rendering Architecture

Speaker: Wang Yongqing (Baidu, front‑end architecture, engineering, Node.js).

Requirements and Background

Hand‑Baidu homepage needs to display many cards across native and H5, with frequent layout changes requested by PM and UI, causing low collaboration efficiency.

Architecture and Implementation

Design‑Driven Component System

Adopts atomic design: atom → molecule → organism → template → page.

Atomic Library

@baidu/wuji-uikit offers nine categories and 36 mixins for colors, fonts, spacing, lines, supporting day, night, and dark modes.

Component, Block, Card

Blocks (cards) consist of header, body, auxiliary, and extension areas, ensuring consistent style and enabling PM‑driven composition.

Cross‑end Template Description

DSL

Standardized UI description language with children (structure) and props (properties).

DSL Generation

Generated from template configuration platform or Sketch parsing.

DSL Application

Transforms DSL into H5 and native templates.

Data Mapping

Maps UI schema to data schema, producing UI props.

Interaction Implementation

Converged interactive behavior.

Built‑in component interactions.

Event delegation + XPath.

Panorama

Each block is decoupled, allowing independent reuse across teams.

Implementation and Outlook

Deployed across Hand‑Baidu and large‑search departments, producing pandemic cards, exam cards, and special H5 pages.

Future Direction

Goal: unified front‑end design system based on atomic structures (WuJi) and SAN, with a universal DSL for multi‑end code generation.

Shell's Middle‑platform Front‑end System Exploration

Speaker: Dong Yajie, Shell Technology Director (11 years, B2C B‑end front‑end).

Background

Shell transitioned from a single business to a middle‑platform covering real‑estate domains, leading to many backend services, event centers, permission centers, and HR systems.

Challenges

Repeated development across multiple backends, inconsistent implementations, varied tech stacks, and poor communication cause efficiency loss.

Middle‑platform Evolution

Unified Component Library

Issues: fragmented tech stacks, private component libraries, low contribution willingness.

Capability Closed Loop

Capability: online component services independent of tech stack.

Standard: consolidate business scenarios (e.g., list interactions).

Data: collect component usage for evaluation.

Open: flexible integration, smooth dev‑test‑release flow.

Data Flow Model

Client: unified specs and publishing.

Server: storage, analysis, consumption APIs.

Frontend: documentation, usage data, operational capabilities.

Usage

Components are delivered via JSON, NPM, or copy‑paste, enabling language‑agnostic consumption.

Server Implementation

Data Collection

Component usage is logged via API calls; logs are aggregated for analysis.

Technical Operations

Metrics: 60% project coverage, 80% team coverage, 40% development efficiency boost, 50% standard scenario coverage, fostering collaborative culture.

Future Planning

Focus on scenario constraints, server performance/stability, and ecosystem stability.

ByteDance's Modern Web Development Practice

Speaker: Yang Yang (ByteDance Education Front‑end).

MWA Definition

Modern Web Application (MWA) transforms modern web development into a concrete tech stack and toolchain, widely adopted within ByteDance.

Problems with Traditional Development

Scaffolding

Scaffolds copy template code; over time, divergent projects become hard to update uniformly.

Webpack Packaging

Limited abstraction, configuration sprawl, and emerging alternatives (e.g., Vite) challenge its relevance.

Front‑end Engineering

Current engineering addresses only code‑level concerns; modern web requires platform‑level capabilities as well.

Framework Choices

React is preferred for ecosystem, scale, design evolution, and trends, though it remains a view‑layer framework.

Node.js Frameworks

Solutions like Next.js offer out‑of‑box app architecture but introduce new complexities.

IaaS and Backend PaaS

Front‑end deployment on PaaS adds complexity; lacks support for routing, BFF, micro‑frontend injection, etc.

Paradigm Shift

Traditional Web Paradigm

Ruby on Rails (server‑centric MVC)

12‑Factor App (service‑side standards)

MEAN/MERN stacks

Modern Web Paradigm

JAMstack (JS CSR, APIs BFF/Content Mesh, Markup SSR/SSG, serverless)

SHAMstack (Static hosting, APIs+JS, Markup)

STAR App (Design System, TypeScript, Apollo, React)

Meta‑Framework (JAMstack + STAR App)

MWA Engine Upgrade

Entry

Supports seamless transition from single‑entry SPA to multi‑entry MPA with automatic server‑side routing.

Deployment

Includes a production‑grade web server with routing, polyfills, and SSR fallback; integrates with serverless BFF.

Compile‑Render

Prioritizes code execution at compile time, then SSR, then client runtime.

MWA Outcomes

After six months of internal testing, MWA delivers integrated engineering, simplifying project creation and deployment.

Overall Summary

All four talks identified pain points in large‑scale front‑end development and presented solutions—Meituan's MBC, Baidu's SmartFeed, Shell's middle‑platform, and ByteDance's MWA—demonstrating how standardization, DSL‑driven UI, componentization, and modern toolchains can dramatically improve development efficiency and product quality.