一个称职的前端开发者需要具备什么知识？

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

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

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

　　问题

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

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

　　你不需要学习一切技术

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

　　你需要学会一个?“完整”?的技术栈。一个完整的技术栈?指的是?一组技术，通过这些技术，你能创建几乎所有你想要去创建的项目。

　　你需要了解前端生态中大部分(而不是全部)的流行工具。请注意，这并不意味着你需要知道如何去使用它们。但是你应该知道它们存在。

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

　　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?的基本模块。毫无疑问，这是你作为前端开发者首先需要学习的东西。

　　非常重要的点：

　　确保学习现代?HTML5?语法

　　学习?HTML?的语义标签，而不是将所有内容扔到?p?里

　　学习现代?CSS?布局?(flexbox，grid)

　　学习?CSS?语法，并清楚的理解?选择器、媒体查询、属性、属性值?等等，这些是基础知识

　　不要纠结于?过时的语法?(center标签、marquee，等等)

　　不要花很多时间学习过时的?CSS?布局实践(浮动相关的)

　　不要尝试每一个前沿的?CSS3/4?特性。浏览器目前支持得还不是很多。请将精力投入广泛支持的?CSS3?特性。

　　JavaScript

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

　　非常重要的点：

　　确保学习?ES6+?语法。不要使用var，即使很多教程会使用。

　　JavaScript?有些行为会让你感觉防不胜防。比如，为什么?0.1?+?0.2?不等于?0.3，或者?为什么null?==?undefined在?JS?中是正确的。记住，这些行为都是有某些原因的，你可以?Google?一下去理解这些行为。

　　从?JavaScript?本质上来说，是一种?异步非阻塞?I/O?语言，这意味着你需要理解异步中的一些核心概念，例如?Promise?在?JS?中如何工作。

　　学习?DOM?API?并?理解?这是浏览器提供给你?JS?代码?的?API，这些?API?用于和?HTML/CSS?交互。

　　开发者工具

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

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

　　非常重要的点：

　　我坚持建议你使用?Chrome?devtools?，因为它真的太强大了。

　　学习?操作?DOM，调试网络网络请求，设置事件断点，跳转到源码，在网站资源中搜索代码，限制网速?等等。

　　这是一个持续性的学习过程，就像其他技术一样。你不应该立刻把学习的重点转移到学习?devtools，请简单的学习一些简单好用的东西，然后继续前进。当你处理项目时，你会学到更多。

　　Git

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

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

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

　　非常重要的点：

　　Git?会很快变得复杂。不要对大量的?git?命令感到困惑。作为一个独立开发者，除了?5?～?7?个常用命令之外，你几乎不需要其他的。

　　虽然第?1?点是正确的，但你仍然应该了解?git?的工作原理，什么是分支，远程仓库的含义，等等。这就像上文中提到的网络知识，git?的知识也应该成为你坚实的基础。

　　NPM/Yarn

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

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

　　非常重要的点：

　　NPM?和?yarn?从概念上来讲，是很相近的。当你学习?npm?时，你会了解到package.json、lockfiles，以及为什么我们需要它们等等。所有这些概念也适用于?yarn?v1。

　　因此，不要把精力花在选择哪个包管理器学习。学习其中一种(比如?yarn)就好，之后如果项目需要你可以再切换到另一种。

　　React

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

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

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

　　非常重要的点：

　　React?看上去很简单，但你需要一个心智模型才能完成大规模的工作。这不仅与一些?重要的概念?或者?hooks?有关，这还关乎?如何构建APP、维护APP、选择生态系统中适合的库?等等。

　　对于诸如?网络请求?或?UI?这类通用的业务，React?不会强制实行什么标准实践。但是我推荐你遵循这些配置?—?用react-query?做?网络请求，用?tailwind?CSS?或?material?UI?做?UI库。

　　不要深入学习?基于?class?的组件，除非你必须维护一些需要这部分知识的?老代码库。基于?class?的组件不是?React?的未来。远离那些教你?基于?class?组件?的教程。作为代替，你应该学习?函数式组件?和?hooks。

　　模块打包器

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

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

　　代码测试

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

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

　　练习!练习!练习!

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