Frontend Engineering Practices and Team Process at Cuckoo FE

Introduction

The author’s team, named “Cuckoo FE,” consists of about 20 members working on ByteDance’s commercial middle‑platform, primarily focusing on PC‑based services with some mobile projects. They face challenges such as insufficient R&D asset accumulation, inconsistent standards, missing or incorrect documentation, and operational inefficiencies.

From a Story

A new developer, Xiao Ma, repeatedly receives repositories and documents from mentors, struggles with inconsistent documentation, and experiences delays and confusion during development, testing, and deployment, highlighting the need for better engineering practices.

What Is Engineering

Frontend Engineering Definition

Frontend engineering is an evolving practice aimed at reducing cost and improving efficiency and quality through processes, tools, and standards, providing a one‑stop solution for frontend development.

Evolution of Engineering

Four stages are identified: 1.0 page dynamism, 2.0 modularization, 3.0 cross‑platform large‑frontend, and 4.0alpha intelligent stage driven by AIGC.

Engineering Practices

The team addresses three main challenges: rapid response, high business complexity, and quality as a lifeline.

Key practices include:

Standardizing processes and documentation.

Unifying technical selections (React ecosystem, monorepo, Eden).

Building component libraries (business and domain components) and material repositories.

Developing a middle‑platform rendering engine achieving >90% page configuration and ~60% development speed improvement.

Creating scaffolding templates and a ProCode system that generates DSL configurations from Swagger definitions and design assets.

Establishing a quality platform with phased governance (distributed, centralized, unified).

Implementing a workbench for asset visualization, end‑to‑end workflow integration, and automated governance.

Standardization

Standardization is driven by a “light‑touch, fast‑execution” strategy, with three principles: standardized proposal process, incremental rollout, and tool‑supported enforcement.

Infrastructure

The team migrated over 100 repositories into six monorepos, reducing maintenance overhead and improving knowledge sharing.

Material Accumulation

They have built over 30 business components, 5 domain components, a shared material library, and system‑level best‑practice guides.

Rendering Engine

The engine enables configuration‑driven pages, boosting development efficiency while acknowledging that complex logic still requires code.

interface PageDSL {
  label: string
  field: string
  widget: Component
  widgetProps: {
    watch: ['others']
    callback: (info) => {},
    ...
  },
  formItemProps: {
    span: number
    initialValue?: any
    tooltip?: React.ReactNode;
    fieldKey?: React.Key | React.Key[]
    ...
  }
  textOptions: {
    type: string
    span: number
    render?: ColumnType
['render'] | 'ellipsis' | 'date' | 'time' | 'amount',
    ...
  }
}

Scaffolding & ProCode

Templates enable rapid project creation, while ProCode generates DSL configurations by parsing Swagger, recognizing design assets, and compiling templates.

Quality Platform

Governance evolved from ad‑hoc fixes to a unified quality dashboard covering performance, monitoring, and cross‑team metrics.

Workbench

The workbench centralizes asset data, connects development tools, and provides automated governance tasks, achieving an “all‑in‑one” platform.

Innovative Applications

Users can build personalized dashboards via drag‑and‑drop and configure templates for emails, contracts, etc., reducing reliance on developers.

Team Technical Brand Building

The team maintains internal brand sites covering middle‑platform, Node, and mobile technologies.

Conclusion

The article summarizes the team’s challenges and the step‑by‑step implementation of standards, tooling, and platforms that improved efficiency, quality, and scalability, and shares lessons learned about perseverance, experimentation, and result‑oriented development.