时隔一年，我升级了前端学习路线图，这次还有...?

大家好我是小麦，今年一月份我发了一期关于前端学习路线的视频，说实话没想到这么多朋友关注。

那么快一年过去了，路线图有什么变化？现在 AI 这么 6 还能入行吗？相信大家看到最后会有答案。

那么废话不多说，一键三连走起，咱们直接看新版。

入门阶段的经典三件套无需多言。相比上一个版本，我将 TypeScript 的优先级提升并升级成了必学。

上个月 Github 发布的年度报告显示，TypeScript 已经超过 Python 成为应用最广的语言。

一方面原因是人工智能推动了 TypeScript 的崛起，另一方面主流前端框架和工具也开始优先选择 TypeScript 作为默认编程语言。

那么作为未来的专业前端工程师，会写会读 TypeScript 代码一定是必备技能。

在上一个版本中我并未提到 “DOM 编程”，因为它归属于 Web API。

DOM 编程即通过浏览器提供的 DOM API 来管理页面元素。

像是 querySelector、getAttribute、event.preventDefault、button.onclick 这些都属于 DOM 编程。

DOM 编程算是比较经典的内容，我还是应该单独把它拿出来，但设计为可选。

可选是因为目前普遍会使用 UI 框架和组件库去写页面，它们已经帮我们屏蔽了 DOM 编程的大量细节。

但事件处理，特殊交互还是要用到它的。

接下来是 Web API，这里面内容看着很多，但常用的也数得过来。

得益于 WHATWG 标准的普及，有很多 Web API 已经被用于服务器环境，

像 Fetch API、URL、FormData、Blob、ArrayBuffer、Stream API 这些已经在 Node.js 中原生内置，未来想搞全栈的同学一定不能错过。

接下来是模块化，这个没什么好说，把 ESM 规范和机制搞明白就完成了大半。

接着 NPM 包管理，这里需要重点掌握的是 package.json、包的安装、升级以及版本范围的意义和特别约定。

搞定它我们就正式进入了前端工程化的世界。

在上一个版本中，我将 CSS 框架安排在了 UI 框架之后，但我后来想这两个其实可以并行，使用 CSS 框架去写样式不一定要依赖 UI 框架。

目前很流行的原子化框架 TailwindCSS、UnoCSS 其实很难在国内存量业务上使用，大部分还都是 CSS 单独放一个文件，然后 import 进来用的，所以这里我依然把它标记为可选项，感兴趣就学吧。

UI 框架在入门阶段一定是最重要的，从 React 和 Vue 中任选一个即可，或者在有时间的情况下把它们都学会。

UI 框架基本上要搭配一款组件库，React 就用 React 生态的，Vue 就用 Vue 的。

另外还有流行的 Headless 组件库，现在很多独立开发者或者创业团队会去用，优势是 AI 友好，能比较快地把项目界面搭出来。

入门阶段完成后，可以支撑你找到一份普通的工作。如果不要普通，那么接下来看看进阶。

进阶阶段的目标是掌握开发生产级应用的能力，核心围绕怎么把工程效率做高，把项目质量做好。

我将上一版中的版本控制系统从入门移动到了进阶，它既管代码，也管协作，应归属于工程实践。

接着 Node.js 可以说是前端工程化的基石，尽管前端工具链（编译时）正在快速锈化，应用框架也开始支持其他运行时，不过目前 Node.js 依旧是主流选择。

相比上一个版本，我把工具链做了细化并列了一些具体例子。

俗话说前端的轮子是最多的，工具链就是“重灾区”，你可以看到具备相同或相似功能的工具就有很多。

其实并不需要把这些工具都学懂，知道它们的定位和差异会更重要。

在实践中观察它们之间如何配合，甚至自己造轮子来满足当前业务的需要。

应用框架这块我也做了细化，主要是让大家明白应用框架和 UI 框架的差异。

UI 框架像是 React、Vue、Svelte 这类专门用于构建用户界面，注重渲染和交互，更像是一个 Library。

而应用框架是集 UI 框架、工具链和最佳实践方案为一体的大成者，是开发生产级应用的必选项。

我在这一期视频中也详细介绍过应用框架，感兴趣可以看看。

通用工程实践这块和上一个版本区别不大，主要给了一些例子让大家更有体感。

它聚焦软件的整个生命周期，从代码研发到测试再到上线运行过程中的技术方案。

是当今软件工程依旧必做的事情，我在这个系列的第 12 期到第 15 期系统性地介绍过它们。

如果以上你都玩过，那可以说自己已经具备相当的经验，大厂会很喜欢。

然而，以上内容只是化身专业前端工程师的基础，并不是前端的全部，更带 dei 劲儿的还在专业阶段。

前端的专业方向很多，每个方向都有不同的纵深，需要在工作岗位上进行长期累积和实践才有可能精通。

这里我列出几大方向供你参考。

全栈开发，狭义上是指使用前端技术栈进行前后端开发，这里的后端主要是面向 Web 的后端，相比传统的 Java 后端更靠前。

主要是为 Web 应用开发定制接口，处理服务端渲染这些事情。

中后台开发，即主要面向 PC 端的 CRUD 界面开发，往后会接触到微前端、低代码、编辑器、CMS 这些服务于后台业务的技术。

在新版中，我将 Native 开发从移动开发中独立了出来。

移动应用通常出现在某个 App 壳子里，比如手机里的 H5 页面、小程序，跨 App 端的应用开发，采用纯前端技术栈。

而 Native 开发是指原生 App 开发，比如 iOS、安卓和鸿蒙应用，会用到非典型前端技术，像 RN 和 Flutter 框架。

桌面应用开发大家应该很熟悉，基本上会用 Electron、Tauri 这些跨平台框架去做。

前端基建或多或少你可能会碰到，比如公司内部的组件库，工具链，脚手架这些，更偏基础技术建设。

数据可视化和图形互动其实有一些交集，不过技术上还是各有所长。

数据可视化擅长大屏、报表、GIS 这些数据处理和展示性的工作。

而图形与互动更偏 2D/3D、动效、引擎、渲染方面的工作。

最后是前端智能化方向，这个领域和人工智能的相关性很大，相对传统的是 D2C 和端智能。

更现代的会与大模型结合，比如自然语言界面和生成式 UI。

看到这里，我相信你已经对专业前端所涉及到的技术领域建立了基本认知。

现在假设你已经是一名专业前端工程师，在这个前提下，我想再和你分享我是如何看待前端和 AI 的。

如果把时间拉长看，前端，或者说 Web 技术大致经历了两个关键时代。

刀耕火种时代在立标准，工程化时代即今天我的路线图重点覆盖的内容。

GPT 的出现标志着我们正式迈入第三个时代，即 AI 时代。

“前端（Front End ）” 这个名词并不是一开始就有，而是随着“客户端-服务器”分离架构在软件工程里普及后才逐渐分化出来。

这个时间点在 2010 年左右。在这之前，前端其实叫“网页制作”。

时代跨越实际上取代了 “岗位名称”，未来 “前端工程师” 这个称谓很可能不再存在。

但 Web 技术、工程实践和人机交互这些实打实的底层概念依旧会继续存在。

在 AI 时代，“前端”的新使命就是站在 Web 技术和工程实践的肩膀上，去定义下一代人机交互范式。

而现在我们借助 AI 的能力，有很多新机会去把这件事情做成。

无论是生成式 UI、还是规范驱动开发、还是可验证性工程，都已经超越上个时代前端的能力边界。

因此，其实完全不必将自己局限于前端这个范畴。

在可预见的未来，全栈工程师、产品工程师甚至是超级个体会接替传统前端。

而作为最靠近用户、最懂 UI 交互、又懂系统工程的前端开发者，这反而是最能展现自己专业能力的时代。

对了，这次我给路线图搭配了免费资料，点这个链接即可在线访问。

另外，我还做了一套 AI 伴学系统，大家可以用 AI 辅助自己看资料、解答解惑、做笔记、进行高效学习。

希望大家可以在这里学到真正有价值的东西。

我是小麦，时间有限，我们下期再见。