Improving Large‑Scale Frontend Development Efficiency and Practice

1 Background

Rapid and high‑quality delivery requires improving both efficiency and quality, yet different stages (requirements, development, testing) interpret these goals differently. The team observed that optimizing a single step rarely shortens overall lead time because the end‑to‑end process involves many hand‑offs (development, integration, testing, acceptance, deployment). A holistic view of the whole workflow is therefore essential.

2 Standardization

The team first tackled the lack of unified standards across business specifications and technology choices. Three major pain points—high operation cost, high learning cost, and high maintenance cost—were identified. To address them, a comprehensive standardization process was defined, covering infrastructure, development standards, and business rules, with monitoring tools to ensure compliance.

Standardization Production Process

The process starts with defining who creates and decides standards, then rolls out layered guidelines from infrastructure to business‑level rules. After implementation, monitoring dashboards verify that standards are followed.

Infrastructure Support for Standards

Standardization was applied to three dimensions: infrastructure, development norms, and workflow. Unified infrastructure, consistent development standards, and standardized processes were introduced.

Development Norms Implementation

Business specifications and technology selections were aligned across teams, reducing divergent practices.

3 Production‑Research Collaboration

Dynamic delivery transformed independent tech‑stack operations into a single unified development and release pipeline, increasing role complexity and coordination cost. Terminal capabilities grew, leading to varied implementations across apps, iOS, and Android, and causing frequent miscommunications (e.g., environment mismatches, branch handling, gray‑release settings).

To simplify, the team introduced a QR‑code‑based “one‑click” workflow that encapsulates the entire terminal development process, eliminating manual steps and integrating with automated testing tools.

Challenges of Terminal QR‑Code Configuration

Unifying infrastructure across many internal teams required large‑scale refactoring and high cost. Maintaining a single team for all extensions would be unsustainable as terminal features evolve.

The solution combined native capabilities with dynamic modules, delivering two plugin types: framework plugins (runtime checks and mounting) and functional plugins (standard interfaces for business teams to add features with low cost).

4 Continuous Delivery System

Continuous‑delivery infrastructure serves as a hard gate: any step that violates standards is blocked. The evolution covered three phases:

Early stage – online release process: Standardized release pipelines were fragmented due to diverse project needs. An online, customizable delivery pipeline was built, integrating lint checks, unit tests, dependency collection, and standard compliance checks.

Mid stage – dynamic delivery complexity: Supporting multiple bundles across repositories increased workflow complexity. The team introduced a dynamic DevOps platform that hosts the full workflow (branch creation, build, test, deployment) and embeds production‑research norms into the pipeline.

Later stage – new problems under a large‑front‑end context: Multi‑scenario delivery (Web, H5, mini‑programs, dynamic bundles, Native) required a flexible, modular workflow. The platform provides a layered architecture: a deep integration of core infrastructure, a core‑capability layer with customizable workflow nodes, and a data‑driven measurement layer.

The platform supports three team maturity levels: exploratory teams (quick, out‑of‑the‑box best practices), growth teams (customizable checks and approvals), and mature teams (fine‑grained API composition). Over a thousand front‑end teams now use the system for standardized, automated, and digitalized delivery.

5 Q&A

Q1: How to manage multi‑person, multi‑branch code? The answer emphasizes two dimensions—quality and efficiency. Quality is ensured by automating branch creation and enforcing code‑check gates; efficiency is improved by analyzing frequent operations and providing smart Git command recommendations.

Q2: What are best practices for code review? Define team‑wide review standards (PR size, approval count, comment thresholds) and enforce them through automated checks that block merges when criteria are not met.

Overall, the large‑front‑end DevOps platform achieves full‑process online‑ization, automation, and digitalization, with future plans to integrate AI for intelligent workflow guidance and automated compliance.