大前端(Great Frontend / Full-frontend) 不是一个技术,而是一种工程视角:以用户体验为起点,把「浏览器、移动端、桌面端、小程序、服务端渲染、甚至 AI 应用」全部纳入前端工程师的能力边界。
过去:前端 = HTML/CSS/JS 写网页。现在:前端 = 任何用户能直接看到的界面及其背后的架构。
React / Vue / 工程化 / 性能 / 可视化(Canvas/WebGL)/ 微前端
小程序(微信/支付宝/抖音)/ React Native / Flutter / Taro / uni-app / 鸿蒙 ArkTS
Node.js / NestJS / SSR / BFF / GraphQL / Serverless / 微服务协作
构建(Vite/Webpack)/ CI/CD / 监控 / 质量(测试/Lint)/ Monorepo
数据可视化 / 埋点分析 / 性能指标(Web Vitals)/ 可访问性 a11y / 动效
LLM 接入 / 提示词工程 / RAG 应用 / Agent UI / AI 生成代码与 UI / MCP
| 架构形态 | 核心特征 | 典型问题 | 进阶方向 |
|---|---|---|---|
| MPA 多页应用 | 每个页面一次请求,服务端渲染整页 | 切换白屏、体验割裂 | → SPA |
| SPA 单页应用 | 前端路由 + 客户端渲染,首屏后无刷新 | 首屏慢、SEO 差 | → SSR / SSG |
| SSR/同构 | 同一套代码服务端渲染 + 客户端水合 | 服务器成本、复杂度上升 | → 边缘渲染(ISR) |
| 微前端 | 巨石拆分为独立部署的子应用 | 隔离、通信、运维复杂度 | → 模块联邦 |
| 云原生 | Serverless + 容器化 + 边缘计算 | 技能要求高 | → AI 原生应用 |
React 19 / Vue 3.5+ / TypeScript 5+ —— 语言与框架是底座,任何 UI 方案都围绕它们。
Next.js 15 / Nuxt 3 / Remix / Vite / Tailwind CSS —— 全栈框架与样式方案。
Node.js 22 / NestJS / Prisma / tRPC / GraphQL —— 前端工程师的后端延伸。
pnpm + Turborepo / Vitest / Playwright / ESLint + Prettier / Husky + lint-staged
OpenAI/DeepSeek/通义 API / LangChain 生态 / RAG(向量库)/ MCP / Vercel AI SDK
Taro / uni-app / React Native / Flutter / 鸿蒙 ArkTS
背景:一家 5000 人互联网公司,前端 200 人。普通人以为 200 个前端都在写页面?错。真实的组织是这样切分的:
| 小组 | 人数 | 职责 | 对应专题 |
|---|---|---|---|
| 业务前端组 | 120 | 核心业务(电商/内容)页面与组件 | 阶段 01~08 |
| 基础架构组 | 30 | 工程化平台、脚手架、CI/CD、Monorepo | 阶段 04 / 09 |
| 中后台前端组 | 20 | 内部系统 + 低代码平台,用平台替代重复开发 | 专题 05 🔥 |
| 体验与性能组 | 10 | 性能监控、设计系统、组件库 | 阶段 07 |
| 服务端渲染组 | 10 | SSR 基建、BFF 网关,前后端契约 | 专题 02 / 03 🔥 |
| 跨端组 | 10 | 小程序 / RN / 桌面端一套方案 | 跨端技术 |
| AI 应用组 | 10 | 公司内部 AI 助手、Copilot、Agent 界面 | 专题 07 🔥 |
解析:能成为"负责人"的人,不是业务组里写代码最久的,而是能搭建体系的人——把重复的工作平台化(低代码)、把复杂的问题架构化(微前端/SSR)、把未来的机会落地(AI)。这套专题就是按照这个逻辑设计的。
| 维度 | 资深工程师 | 架构师 / 负责人 |
|---|---|---|
| 关注范围 | 一个模块 / 一个项目 | 一条业务线 / 整个技术体系 |
| 解决问题 | 怎么实现 | 要不要做、用什么做、做完怎么度量 |
| 决策依据 | 技术最优 | 成本 / 风险 / 收益 / 团队能力平衡 |
| 交付物 | 代码 | 方案、规范、平台、人 |
| 沟通对象 | 同事 | 产品 / 后端 / 老板 / 跨团队 |
| 核心能力 | 编码深度 | 架构设计 + 技术判断 + 影响力 |