2021 前端学习路径

现如今的前端已经不再局限于一个写网页的，移动端、小程序、桌面应用，甚至是各类智能设备，处处都有前端的身影，有用户界面的地方，即是前端所在。

工程化概念的深入人心，ESM 的全面支持，从面向对象编程到函数式编程的思维转变，IE 的正式死亡，无不在改变着前端开发的生态。

数据与界面解耦，业务逻辑与布局组件解耦。从数据在界面中实时响应开始，直到突破 IO 性能瓶颈。前端框架也在不断革新。

如果你只是想尝试些新东西

• Tailwind CSS 既然 JS 模块化了，CSS 也终有一日会模块化，Tailwind 带给你不同于 bootstrap 的全新体验。
• deno 我们无需在此争论 node 与 deno 的优劣，至少它为你提供了另一种选择，以及更多未来 JS runtime 的可能性。
• Vite 尤老板出品，必属精品，基于 ESM 的全新构建工具，带给你飞一般的感觉。
• TypeScript 不会吧不会吧不会吧，不会有人到了 2021 年都没开始学 ts 吧。
• Vue 3.0 新的生命周期，新的 Composition API，用起来就像一个新的 Vue
• react hooks & CM React 18 马上也要发布了，别再用 class 定义组件了。
• Svelte 这个世界上不是只有两种 JS 框架，如果是中小型应用，Svelte 可以让你快破天际。

除此之外，还有 serverless wasm PWA 等早就出现，却未大火的议题，感兴趣的朋友也可以做适当了解。

如果你想系统学习前端知识

计算机网络

• 网络分层
• TCP/IP
• DNS
• HTTP
• HTTPS
• HTTP2.0

阅读 当你在浏览器中输入 google.com 并且按下回车之后发生了什么？ 你可以对相关的概念有一个整体性的了解。

编辑器

• VS Code

版本管理

• Git

• Github

HTML

现如今已经没有人会徒手干撸 HTML 了，大部分的用户界面都是由 JS 框架动态渲染的。但你仍然需要充分掌握这一构成 Web 界面骨架的标记语言。

CSS

市面上充斥着大量的高级JS工程师，然而却鲜能见到高级CSS工程师，毕竟 JS 只是一个语言，而 CSS 却是一个世界。

• MDN
• Google Web developer

JavaScript

基础

在学习任何编程语言之前，你首先应该对计算机程序的相关概念有一个基本的了解：CS50

• 算法
• 数据结构
• 设计模式
• 面向对象编程
• 函数式编程

你可以在 freeCodeCamp 找到相关的练习JavaScript Algorithms and Data Structures

同样你也可以在 leetcode 精进你的算法知识。

进阶

语法

• TypeScript

框架

• React
• Vue
• Angular

数据

• GraphQL
• Redux
• Vuex

后端

• Node.js
• Express

测试

• Jest
• Cypress

构建工具

• Webpack
• Vite

跨平台

• React Native
• Electron

持续集成/部署

• Github Action

书籍推荐

• JavaScript 权威指南
• JavaScript 高级程序设计
• You dont know JS

学习 Tips

• 3 个月学成 XX 工程师是完全不现实的事情
• 在你想成为任何发展方向的程序员之前，你都需要了解掌握基础的计算机科学知识
• 在你使用任何框架前先掌握好基础知识
• 能看得进去书的情况下别看视频
• 删掉你手机里的抖音和王者荣耀

网站推荐

• freeCodeCamp
• roadmap.sh

Do Not Remain Silent