前端架构师知识库

Appearance

前端架构师学习路线 ​

本文件提供四条差异化的学习路线，帮助不同职业方向的学习者聚焦重点、少走弯路。

🎯 个性化学习推荐

基于你的能力自评（0/43 领域）和测评历史，以下领域建议优先补强：

JavaScript路径缺口TypeScript路径缺口Browser路径缺口Design System路径缺口React路径缺口Node.js/BFF路径缺口
去自评去测评数据中心

业务型架构师

深入理解业务，设计可扩展的业务架构，适合中台、低代码、复杂业务系统方向。

基础层
JavaScript TypeScript Browser
工程化层
Design System React Node.js/BFF Monorepo AI Engineering
架构与领导力层
System Architecture Data & State Micro Frontend Data Engineering Visualization & Graphics Business Strategy

路线选择指南 ​

路线适合人群核心目标
业务型前端架构师喜欢理解业务、做中台/低代码/复杂业务系统用技术赋能业务，设计可扩展的业务架构
工程型前端架构师喜欢工程化、性能、质量、工具链打造高效、稳定、可观测的前端工程体系
平台型前端架构师喜欢跨端、可视化、基础设施、组件生态建设可复用的前端平台能力
管理型前端技术负责人喜欢带团队、做规划、推动组织变革制定技术战略，建设团队和组织能力

路线一：业务型前端架构师 ​

核心能力 ​

  • 深入理解业务领域（电商、金融、SaaS 等）。
  • 设计可扩展的业务架构（DDD、BFF、中台）。
  • 能主导复杂业务系统的技术方案。

学习重点 ​

基础层：

  • F01 JavaScript（L4）
  • F02 TypeScript（L4）
  • F03 Browser（L3）
  • F04 Network（L3）
  • F05 Security（L3）
  • F06 HTML/CSS（L4）
  • F07 a11y（L3）
  • F08 Data Structures & Algorithms（L3）
  • F09 Design Patterns（L3）

工程化层：

  • E05 Design System（L4）
  • E06 React 或 E07 Vue（L4）
  • E10 Node.js/BFF（L4）
  • E02 Monorepo（L3）
  • E09 AI Engineering（L3）
  • E13 Frontend SRE（L3）
  • E14 Package & Supply Chain（L3）

架构层：

  • A01 System Architecture（L5）
  • A05 Data & State（L4）
  • A02 Micro Frontend（L3）
  • A04 Quality（L3）
  • A09 Internationalization（L3）
  • A10 Visualization & Graphics（L3）
  • A12 Data Engineering（L4）

领导力层：

  • L01 Business（L5）
  • L03 Strategy（L4）
  • L02 Team（L3）
  • L04 Communication（L4）
  • L05 Project Management（L3）
  • L06 Hiring（L3）
  • L07 Tech Brand & Community（L3）
  • L08 Tech Governance（L3）

通关项目 ​

  1. 搭建一个可复用的业务组件库。
  2. 设计并实现一个复杂表单的低代码配置方案。
  3. 主导一个 BFF 架构升级项目。
  4. 输出一份业务领域模型设计文档。

路线二：工程型前端架构师 ​

核心能力 ​

  • 精通构建、测试、CI/CD、性能优化。
  • 建立可观测性和质量保障体系。
  • 能显著提升研发效率和系统稳定性。

学习重点 ​

基础层：

  • F01 JavaScript（L4）
  • F02 TypeScript（L4）
  • F03 Browser（L4）
  • F04 Network（L3）
  • F05 Security（L3）
  • F06 HTML/CSS（L4）
  • F07 a11y（L3）
  • F08 Data Structures & Algorithms（L3）
  • F09 Design Patterns（L3）

工程化层：

  • E01 Build Tools（L5）
  • E02 Monorepo（L4）
  • E03 CI/CD（L4）
  • E04 Code Quality（L4）
  • E11 Git Workflow（L3）
  • E12 DX（L3）
  • E06 React 或 E07 Vue（L3）
  • E10 Node.js/BFF（L3）
  • E13 Frontend SRE（L4）
  • E14 Package & Supply Chain（L3）

架构层：

  • A03 Performance（L5）
  • A04 Quality（L5）
  • A06 Observability（L5）
  • A01 System Architecture（L4）
  • A07 Security Architecture（L4）
  • A05 Data & State（L3）
  • A11 Serverless/Edge（L3）

领导力层：

  • L02 Team（L4）
  • L03 Strategy（L4）
  • L01 Business（L3）
  • L04 Communication（L3）
  • L05 Project Management（L4）
  • L06 Hiring（L3）
  • L07 Tech Brand & Community（L3）
  • L08 Tech Governance（L4）

通关项目 ​

  1. 搭建一套完整的 Monorepo + CI/CD 工程体系。
  2. 把项目 Lighthouse 分数从 60 提升到 90+。
  3. 建立前端错误监控和性能监控体系。
  4. 设计并落地 Code Review 和测试规范。

路线三：平台型前端架构师 ​

核心能力 ​

  • 建设跨端能力、组件生态、可视化能力。
  • 设计可复用的前端平台。
  • 支持多业务线高效开发。

学习重点 ​

基础层：

  • F01 JavaScript（L4）
  • F02 TypeScript（L4）
  • F03 Browser（L3）
  • F04 Network（L3）
  • F05 Security（L2）
  • F06 HTML/CSS（L4）
  • F07 a11y（L3）
  • F08 Data Structures & Algorithms（L3）
  • F09 Design Patterns（L3）

工程化层：

  • E05 Design System（L5）
  • E08 Cross Platform（L5）
  • E02 Monorepo（L4）
  • E06 React / E07 Vue（L3）
  • E09 AI Engineering（L3）
  • E01 Build Tools（L3）
  • E13 Frontend SRE（L3）
  • E14 Package & Supply Chain（L3）

架构层：

  • A02 Micro Frontend（L5）
  • A01 System Architecture（L4）
  • A05 Data & State（L3）
  • A03 Performance（L3）
  • A08 Real-time（L3）
  • A09 Internationalization（L4）
  • A10 Visualization & Graphics（L4）
  • A11 Serverless/Edge（L3）

领导力层：

  • L03 Strategy（L4）
  • L02 Team（L4）
  • L01 Business（L3）
  • L04 Communication（L4）
  • L06 Hiring（L3）
  • L07 Tech Brand & Community（L3）
  • L08 Tech Governance（L3）

通关项目 ​

  1. 搭建一套跨 React/Vue 的通用组件库。
  2. 设计并实现一个微前端基座。
  3. 建设一个跨端（H5 + 小程序）的统一开发框架。
  4. 搭建一个可视化页面搭建平台。

路线四：管理型前端技术负责人 ​

核心能力 ​

  • 制定技术战略和演进路线图。
  • 建设团队、文化和梯队。
  • 具备跨职能影响力和业务洞察力。

学习重点 ​

基础层：

  • F01 JavaScript（L3）
  • F02 TypeScript（L3）
  • F03 Browser（L3）
  • F04 Network（L3）
  • F05 Security（L3）
  • F06 HTML/CSS（L3）
  • F07 a11y（L3）
  • F08 Data Structures & Algorithms（L3）
  • F09 Design Patterns（L3）

工程化层：

  • E01-E05 全面了解（L3-L4）
  • E06 React / E07 Vue（L3）
  • E10 Node.js/BFF（L3）
  • E11 Git Workflow（L4）
  • E12 DX（L4）
  • E13 Frontend SRE（L4）
  • E14 Package & Supply Chain（L4）

架构层：

  • A01 System Architecture（L5）
  • A03 Performance（L4）
  • A04 Quality（L4）
  • A06 Observability（L4）
  • A07 Security Architecture（L4）
  • A05 Data & State（L3）
  • A02 Micro Frontend（L3）
  • A12 Data Engineering（L4）

领导力层：

  • L03 Strategy（L6）
  • L02 Team（L6）
  • L01 Business（L5）
  • L04 Communication（L5）
  • L05 Project Management（L5）
  • L06 Hiring（L5）
  • L07 Tech Brand & Community（L5）
  • L08 Tech Governance（L5）

通关项目 ​

  1. 制定团队 1-3 年技术演进路线图。
  2. 主导一次重大技术选型，输出 ADR 并推动落地。
  3. 建立团队技术分享、Code Review、导师制度。
  4. 与业务方共同制定技术赋能业务的目标。

通用学习节奏建议 ​

时间行动
每周精读一个领域的学习文档
每月完成对应练习册 + 面试题
每季度做一次自评，调整学习重点
每半年完成一个通关项目
每年参与或主导一个中大型项目

学习路线与能力金字塔的关系 ​

无论选择哪条路线，都必须先夯实基础层，再逐步向上攀登。不同路线在工程化层、架构层、领导力层的侧重点不同，但都需要有一定广度。

        ┌─────────────────────────────┐
        │     领导力层（路线差异化）      │
        ├─────────────────────────────┤
        │     架构层（路线差异化）        │
        ├─────────────────────────────┤
        │   工程化层（路线差异化）        │
        ├─────────────────────────────┤
        │   基础层（所有路线共用）        │
        └─────────────────────────────┘

最后更新：2026-06-25

基于 MIT 协议发布

Copyright © 2026 前端架构师知识库