My Frontend Engineering Practices and System

Preface

After a long silence, the author answers many requests about engineering practices by outlining a personal, flexible approach to frontend engineering, emphasizing that there is no single standard and each team builds its own system.

My Engineering System

What Engineering Means to Me

Engineering is about empowering the team and future projects through accumulated experience, documentation, and systematic processes.

Review

Requirement review and functional or initial development review involve product, UI, development, and testing stakeholders, assessing difficulty, feasibility, and effort before task distribution on platforms like ZenTao.

Standards

Project standardization includes format, commit, naming, and comment conventions. Tools such as ESLint , stylelint , prettier handle formatting; husky and commitlint enforce commit rules; naming rules (e.g., verb‑based, camelCase) are documented internally; comment policies vary by company.

Tools / Self‑Developed Libraries / CLI / SDK

To avoid repetitive configuration, the author packages common setups into an npm library, optionally hosted on a private registry. The workflow relies on pnpm + monorepo (replacing lerna ) to manage multiple packages, including utilities, tests, and CLI scaffolding built with commander , inquirer , fs-extra , and kolorist . Templates for vue , js , ts , md can generate routes, tests, and other files automatically.

Testing

Testing includes unit tests ( vitest or Jest ), component tests, and end‑to‑end tests. While many companies rely on QA engineers for functional testing, frontend teams often write unit tests for reusable logic, especially when developing tools or SDKs.

Code Review (CR)

Code review is essential for quality, covering code style, function complexity, hook usage, and design patterns. Review frequency varies; the author’s team conducts monthly reviews aligned with business cycles.

Bundling

Common bundlers are webpack , vite (which is a wrapper around rollup ), and rollup . The author notes misconceptions that equate vite directly with webpack . For tool and SDK development, rollup is often preferred, with focus on source maps.

Monitoring

Frontend monitoring covers error, behavior, and performance tracking using platforms like Sentry , Prometheus + Grafana , or custom solutions. Key metrics include FCP, LCP, FID, INP, CLS, TTFB, UV, PV, and session duration, typically collected via web‑vitals and the Performance API.

Optimization

Performance optimization follows a systematic process: define metrics, set standards, evaluate benefits, choose optimization techniques, and implement with verification, quantification, and assessment. Tools such as webpack‑bundle‑analyzer or rollup‑plugin‑visualizer help visualize bundle size, while CDN usage and canvas/WebGL tuning address runtime performance.

Knowledge Consolidation

Team knowledge is captured in internal wikis (e.g., wolai ), regular tech talks, and shared libraries, turning personal learning into collective assets and performance incentives.

Conclusion

Frontend engineering is a flexible, evolving discipline; any practice that brings long‑term benefit to a project or team qualifies as engineering. While the author does not cover CI/CD, the shared insights aim to help readers build robust, scalable frontend workflows.