在 2021 成为前端开发者 的 完全指南

本文为翻译

原文标题：The complete guide to becoming a frontend web developer in 2021

原文作者：codedamncom

原文地址：codedamn.com/news/become…

Web 开发是目前行业中特别需要的掌握的一项技能。如果查看一下流行的软件包的下载量，诸如 express 、 react 或 jquery ，你会发现在过去 5 年中，它们每一年都在迅速增长。

事实上，在 2020 的 stackoverflow 调查中，在开发领域，“全栈” 和 “前端” 的热度排行前三。

因此，Web 开发 是一项很棒的技术，值得我们去掌握。在这篇文章中，让我来谈谈，需要做哪些事情才能成为一个 在 2021 及未来 称职的 前端开发者。

问题

当前 Web 开发领域的一大问题是 — “信息过载” 和 “噪音”。jQuery，Angular，Ember，Vue，React，Next.js，Nuxt.js，TypeScript，Sass，Webpack，NPM，Yarn，ESbuild，snowpack，…！有太多的东西，太多的工具 等着你学习 — 在刚入门时，这很容易令人沮丧。

今天我想谈的重点就是 “在当今哪些技术是有重大作用的”，“从现在开始3年后的哪些些技术有重大作用”，等等。让我在此澄清一些事情：

你不需要学习一切技术

一个常见的误解是，你需要学习一切技术才能成为出色的开发者。这就大错特错了。

1. 你需要学会一个 “完整” 的技术栈。一个完整的技术栈 指的是 一组技术，通过这些技术，你能创建几乎所有你想要去创建的项目。
2. 你需要了解前端生态中大部分（而不是全部）的流行工具。请注意，这并不意味着你需要知道如何去使用它们。但是你应该知道它们 存在。

你需要在一个技术栈上下注

Angular vs React vs Vue vs Svelte vs 什么别的框架，这种类型的争论永远不会停止。事实上，每个流行的 库/框架 之所以流行，是因为它们在适合的场景下，表现得很好，人们愿意使用它。

你当然可以花点时间尝试不同的技术。但是我个人建议，你最好不要一两个月就切换一次 库/框架。

对，你可以看上 4 小时的课程，然后从 React 切换到 Angular。但是请记住，当你使用一种技术的时候，你需要建立某种 心智模型。这意味着你可能数周甚至数月才能适应一种新技术。

你不需要切换到市场上最热门的技术，请坚持使用你在使用的技术栈。

2021前端开发学习 的 架构

好，现在有一个难题。从 噪音 中，你实际上能学到什么。让我们将问题分成两部分 — （学什么 和 怎么学）Web 前端开发技术。两者都是同样重要的问题，因为你基于这两个问题的答案，你会节省 或者 花费 大量的时间。让我们开始吧。

网络基础知识

这可能会让很多人感到惊讶。大多数网站会建议你从 HTML/CSS 开始，但是我认为在这之前，你应当理解 较高层级的 网络工作模式。什么是 HTML 文档，它们是如何被后端服务器发送的，什么是 DNS ，你在浏览器中键入 google.com 的时候实际发生了什么，等等。

当然，对于网络知识，你不需要深入太多，但当你突然想使用 开发服务器 进行开发，稍微关注一下后端 或者 在你今后的职业生涯中尝试调试一个网络请求的 Bug 时，你会发现 网络知识 为你提供了坚实的基础。

HTML5/CSS3

HTML 和 CSS 是构建 Web 的基本模块。毫无疑问，这是你作为前端开发者首先需要学习的东西。

非常重要的点：

1. 确保学习现代 HTML5 语法
2. 学习 HTML 的语义标签，而不是将所有内容扔到 div 里
3. 学习现代 CSS 布局 （flexbox，grid）
4. 学习 CSS 语法，并清楚的理解 选择器、媒体查询、属性、属性值 等等，这些是基础知识
5. 不要纠结于 过时的语法 （ center 标签、 marquee ，等等）
6. 不要花很多时间学习过时的 CSS 布局实践（浮动相关的）
7. 不要尝试每一个前沿的 CSS3/4 特性。浏览器目前支持得还不是很多。请将精力投入广泛支持的 CSS3 特性。

JavaScript

假如你对网页的交互有要求，或者做的不是简单的静态页面，那 JavaScript 一定是超级重要的。在前端之外的领域，JavaScript 也有广泛的应用 （在 Node.js/Deno/TypeScript 中），因此学习正确的 JavaScript 知识是必须的。

非常重要的点：

1. 确保学习 ES6+ 语法。不要使用 var ，即使很多教程会使用。
2. JavaScript 有些行为会让你感觉防不胜防。比如，为什么 0.1 + 0.2 不等于 0.3，或者 为什么 null == undefined 在 JS 中是正确的。记住，这些行为都是有某些原因的，你可以 Google 一下去理解这些行为。
3. 从 JavaScript 本质上来说，是一种 异步非阻塞 I/O 语言，这意味着你需要理解异步中的一些核心概念，例如 Promise 在 JS 中如何工作。
4. 学习 DOM API 并 理解 这是浏览器提供给你 JS 代码 的 API，这些 API 用于和 HTML/CSS 交互。

开发者工具

到这里，你就应该开始探索如何使用浏览器的开发者工具了。我偏爱 Chrome devtools，因为它非常适合调试 JavaScript 和 DOM。我喜欢用 devtools 来调试任何遇到的问题，而不是盯着代码持续几个小时。

Chrome devtools 像现实生活中的工具一样，需要你点训练，你必须花些时间才能最高效的使用它。但是，随着你的开发生涯不断继续，你会发现你学习的 devtools 会成倍的回报你。

非常重要的点：

1. 我坚持建议你使用 Chrome devtools ，因为它真的太强大了。
2. 学习 操作 DOM，调试网络网络请求，设置事件断点，跳转到源码，在网站资源中搜索代码，限制网速 等等。
3. 这是一个持续性的学习过程，就像其他技术一样。你不应该立刻把学习的重点转移到学习 devtools，请简单的学习一些简单好用的东西，然后继续前进。当你处理项目时，你会学到更多。

Git

你需要学习一个 版本管理系统（Version Control System 简称 VCS），我认为应该学习 Git。Git 是一种广泛使用的 VCS，各种团队和公司使用 Git 来跨人员管理代码库。Git 学起来有些复杂，但是你学习 Git 可以先从 把代码部署在 Github 或类似网站 上开始。

你在学 Git 时，一定要学着部署到 Github。当你能把代码 push 到 GitHub，你就能和诸如 GitHub pages、Vercel、Netlify 这样的服务进行集成，之后你就能创建你自己项目的实时预览。你可以把这个实时预览分享给你的朋友、家人甚至加入你的简历。

当你受到雇佣，或者和 2 个以上的开发者进行协作时，你无论如何都需要 git 的知识。但即使你是一个独立的开发者，它还是特别特别重要的，因为他能让你轻而易举的部署网站。

非常重要的点：

1. Git 会很快变得复杂。不要对大量的 git 命令感到困惑。作为一个独立开发者，除了 5 ～ 7 个常用命令之外，你几乎不需要其他的。
2. 虽然第 1 点是正确的，但你仍然应该了解 git 的工作原理，什么是分支，远程仓库的含义，等等。这就像上文中提到的网络知识，git 的知识也应该成为你坚实的基础。

NPM/Yarn

NPM 和 Yarn 是两种最流行的 JavaScript 包管理器。它们的存在都出于相同的目的 — 管理代码库中的依赖。依赖 是一些 包/软件， 通常 并非由自己开发，但你仍然可以在自己的项目中引入它们。例如，像 bootstrap 或者 tailwind CSS 这样的设计系统，就是依赖。

如果依赖有 任何更新、bug 修复 或者 安全补丁，包的维护者就会在 NPM 存储库中更新，你就可以通过包管理器更新这个 包。除此之外，学习 NPM 和 yarn 还能帮你解决很多问题，你到时候会注意到的。

非常重要的点：

1. NPM 和 yarn 从概念上来讲，是很相近的。当你学习 npm 时，你会了解到 package.json 、lockfiles，以及为什么我们需要它们等等。所有这些概念也适用于 yarn v1。
2. 因此，不要把精力花在选择哪个包管理器学习。学习其中一种（比如 yarn）就好，之后如果项目需要你可以再切换到另一种。

React

在 codedamn，我们狠狠地押注在 React。不是因为我们认为它比别的技术优越，而是因为我们遵循了本文最初提出的建议 — 坚持一个技术栈。

我过去使用 Angular.js （2015 年），切到 Angular 2 — 不是很喜欢，然后切到 React。从那时起，我几乎在所有的中等复杂度的前端项目中使用 React。

React 是一个了不起的库，并拥有充分的社区支持。你在 React 项目中遇到的任何 问题/bug 可能有人已经遇到过了，并且他们很可能在大量的网站上提问了。因此，如果你是一个优秀的 Google 搜索引擎使用者（译者注：原文为 googler），你应该不会在使用 React 中遇到什么难题。

非常重要的点：

1. React 看上去很简单，但你需要一个心智模型才能完成大规模的工作。这不仅与一些 重要的概念 或者 hooks 有关，这还关乎 如何构建APP、维护APP、选择生态系统中适合的库 等等。
2. 对于诸如 网络请求 或 UI 这类通用的业务，React 不会强制实行什么标准实践。但是我推荐你遵循这些配置 — 用 react-query  做 网络请求，用 tailwind CSS 或 material UI 做 UI库。
3. 不要深入学习 基于 class 的组件，除非你必须维护一些需要这部分知识的 老代码库。基于 class 的组件不是 React 的未来。远离那些教你 基于 class 组件 的教程。作为代替，你应该学习 函数式组件 和 hooks。

模块打包器

webpack 是 React 现在开箱即用的最流行的模块打包器之一。和之前一样，你不需要深入学习 webpack，但应该知道什么是webpack.config.js 文件、其中最有用的 10 个配置是什么，以及它们可以做什么。

ESBuild 是另一个模块打包器，相比于 webpack，它的速度非常非常快，但它对插件支持还不是很好。作为初学者，你还不需要为 ESBuild 烦恼。

代码测试

最后但同样重要的是，你还应该关注代码测试。我觉得应该从端到端测试开始学习，因为相比于 快照测试 或 单元测试，端到端测试 似乎更容易，也更直观。

我在这里推荐的工具是 Cypress - 它具有友好的语法来 端到端测试 你的应用程序，即你的代码会像真的有用户使用你的应用程序一样，它几乎可以执行用户可以执行的任何操作，但会以自动化的方式节省你的时间和精力。

练习！练习！练习！

事实上，上文没有明确提到的一点是，你需要保持一直进行大量练习。练习是将概念融入大脑的一种方式。如果你只看视频，那就无法称之为学习。

如何学习Web前端开发

上文的列表并不是非常详尽，但是作为一个指南，绝对是一个坚实的起点。现在的问题是如何学习 Web 前端开发？这里我给你两个选择：

你需要 一种 结构化学习 的方式，并且附加练习模块

（译者注：这里原文开始给自家的代码学习平台打广告了，这块就不翻译了）

你需要免费的学习途径

如果你用钱买不起 codedamn 的上述学习路径，你可以把时间花在免费资源上。尽管如此，也建议使用这些资源与 codedamn 的学习路径。（译者注：又在打广告。。。）

1. 大量使用 google，用于学习和澄清疑问。
2. 看 YouTube 视频，但要确保它们是比较新的，尤其是像 JavaScript 和 React 这样的主题。
3. 自己练习，建立项目并将其部署到网上供人查看。
4. 在 codedamn 上学习免费课程（我们也有很多100%免费的课程）。

总结

时间就是金钱，事实上，有时比金钱更重要。你想花（或能花）多少，由你决定。但我建议，即使不是 codedamn，花在你的教育上，来获得加速实现的你想要达到的目标，绝对是值得的。

译者的看法

看到这里，大家可能已经发现了，原作者写的是一篇软文。我在准备翻译的时候其实也没有注意到，到最后这两段，才发现。但刨去文中最后这两段打广告的部分，本文给的建议十分中肯，特别是为文中的 学习架构，我认为非常有价值，希望朋友们能从文中各取所需，把关注点放在这些技术架构和建议上。

至于知识付费，我肯定它的价值。从 早期的慕课网 到 后来的极客时间 或者 掘金出的小册系列，市场确实在这一块反响强烈。但是我要说明的一点是，请不要冲动消费，你买了这些课程并不代表你就已经学会了，学习没有捷径，你要去跟着课程认真练习思考才能有结果。

总而言之，请不要被华丽的宣传词藻蛊惑，认清自己是否真的需要知识付费，目前互联网上的资源异常丰富，自学并不会阻碍成为你成为一个优秀的前端开发者。