2018最新前端工程师养成指南

今年年初，我们翻译了

《Web开发者路线图（2018版）》

，几幅巨长的图片直观地展现当前Web开发（包括前端、后端和DevOps）方面可行的路线和广泛应用的技术。原作者可能觉得那张图片还是不够，还特意就这张路线图的前端部分，进行了详细的讲解。

与线路图的基本精神相同，作者的目的是让学习者了解Web开发的全貌并知道每个阶段该学习什么，而不是盲目追逐最新的技术。看完了路线图和本文，大家应该可以逐步了解如何在不同情况选择最好的工具并且牢记最新的技术并不意味着最适合的。

Let’s go！让我们跟着路线图中的每一步，重温一遍“前端工程师养成指南”。首先上长图（路线图中的前端部分）。

学习HTML基础知识

HTML是一个Web页面最基础的部分，他就像让人能够站立的骨骼。作为学习者，第一件事情一定是学习HTML语法并学习它能做的一切事情。划重点：

- 学习基础知识以及如何编写semantic HTML。

- 了解如何合理地将页面划分为多个部分以及如何恰当地构造DOM。

任务：了解HTML的基础知识后，至少制作5个HTML页面。可以选择模仿任何网站，例如任何Github用户资料页面或Twitter的登录页面。这时候制作的页面也许看起来很简陋，但现在不要担心这一点，并将主要重点放在构建适当的结构上。

学习一些CSS

在学会如何给页面搭建骨架后，是时候在给这个骨架添上一层好看的“画皮”。CSS(Cascading stylesheets)可以为HTML页面添加美感。划重点：

- 首先，需要了解语法并熟悉常见的CSS属性。

- 了解盒子模型以及如何使用Grid和Flexbox进行布局。

- 完成后，学习如何让网站响应媒体查询。

任务：掌握了CSS基础知识后，下一件应该做的事是为上一步创建的HTML页面添加样式。比如上一步中Github用户资料页面已经有了初步的HTML页面，那么应该使用CSS并使其看起来更像真正的Github用户资料页面。对上一步中编写的那几个页面都可以这么操作。

学习JavaScript的基础知识

JavaScript可以使HTML页面更具交互性。例如，网站上的滑块效果，弹出窗口和Toast通知以及当页面重新加载而某些内容不需要重新加载，这些都是使用JavaScript完成的。在这一步中，学习一些JavaScript的基础知识，可以为后续学习做好准备。

- 学习JavaScript的语法和基本结构。

- 学习如何使用JavaScript操作DOM，例如如何从页面中删除一些元素，如何添加一些元素，添加和删除类，使用JavaScript应用CSS样式等。

- 完成后，学习并理解域(scope)，闭包( closure)，变量提升(hoisting)和事件冒泡(event bubbling)等概念。

- 了解如何使用XHR或Ajax进行HTTP调用。Ajax可以使某些操作不需要重新加载页面就可以执行。

- 现在是时候了解ES6 +中的所有新功能了。ES6是JavaScript的一个版本，它引入了许多有趣的更新，例如类，声明变量的不同方式，向数组添加新方法和字符串连接等等。网上大多数涉及ES6的文章，都会提到Babel，这是一个将新JavaScript转换为旧JavaScript的转换器，因为一些旧的浏览器不支持新版本的JavaScript。但是现在不要太过关注Babel，只需有个概念就行，重点还是在支持ES6的最新版浏览器中进行练习。我们稍后将继续探讨ES6。

我应该学习jQuery吗？

曾经有一段时间每个人都热衷于学习jQuery。它是一个功能强大的库，它在JavaScript之上提供了一层包装，让任何操作都能被不同浏览器兼容。但是那些日子已经一去不复返了，jQuery并没有被大量用于新项目，尽管仍然有人在使用它。因此jQuery并不是必须学习的，而且它真的很容易，如果你学有余力，去了解一些jQuery，也未尝不可，毕竟技多不压身。

花时间练习

这一点算是老生常谈了，没有练习，什么都学不到。对于初学者来说，常会有一种顿悟的感觉，但如果不加以练习，这种感觉很快就会消失。如果选择遵循这份路线图时，务必确保尽可能多地练习。

继续制作一些响应式网页，并用JavaScript增加交互性。可以重新实现任何感兴趣的现成网页，最好能用上所有学到的内容。

在制作了一些页面后就可以开始接触真正的业务了。去github.com搜索一些项目并尝试在一些开源项目上打开一些pull request。关于pull request的一些想法如下：

- 增强UI，使演示页面能够响应或优化页面设计

- 寻找可以解决的但还未解决的问题

- 重构可以优化的代码

虽然我会推荐Github，但它需要一些Git知识。虽然使用Github不是必须的，但只要用过了就会发现它真的很有用。而且还会惊讶地发现，Github上有很多人愿意伸出援助之手。

更上一层楼

至此，前端开发的基础知识可以说已经掌握了，已经就可以去找一些自由职业或者全职工作。但是，不要就此止步，因为如果想有更好的职业发展，还有很长的路要走。

包管理器

在此之前，如果要使用一些外部库，例如插件或一些外部小部件，就必须手动下载JavaScript和CSS文件并将它们放入项目中，然后当这些库或插件发布新版本，就必须再次去下载新的文件并将它们放入项目中，这是非常麻烦而且低效。包管理器可以简化上述流程。它们可以将外部库和插件添加到项目中，这样就不必担心手动复制库或在发布新版本时经历更新它们的麻烦。主流工具有yarn和npm两款可选，这两者几乎相同，只有实现上有些不同，一旦学会了使用其中一个，另一个也就会了。

学以致用

在对包管理器有了基本的了解后，请继续为之前制作的网页安装一些外部库，例如安装一些toast插件，这样当用户点击一个按钮时，就可以向他显示toast消息或创建一个登录表单并使用表单验证库进行表单验证，可以展示不同的选项和了解如何安装不同的版本。当你读到这里，请务必阅读有关语义版本控制的内容：https://semver.org/

CSS预处理器

预处理器是用来丰富基础CSS所不能提供的效果。预处理器有Sass，Less，Stylus等不同的选择。如果要选择一个，我会选择Sass。虽然PostCSS最近获得了很多关注，它的确是一个很好的预处理器，而且可以说是CSS的“Babel”。不仅可以单独使用它，也可以在Sass上使用它。但还是建议先学习Sass，在有空的时候再回过头来学习PostCSS。

CSS框架

不需要学习CSS框架，但是如果非要选择一个框架，推荐Bootstrap，Materialise或者Bulma，如果加上当下三者在市场需求的考虑，Bootstrap在三者中拔得头筹。

CSS组织

随着应用程序的增长，CSS开始变得混乱且无法维护。有多种方法可以更好地构建CSS以实现可扩展性，例如OOCSS，SMACSS，SUITCSS，Atomic和BEM。开发者应该知道它们之间的差异，个人而言，倾向于BEM。

构建工具

这是协助构建/打包和开发JavaScript应用程序的工具，包括linter，task runner和bundler三大类。

对于task runner，曾经有不少选择，包括npm scripts,，Gulp，grunt等。但是现在，由于webpack允许处理以前用Gulp做的大部分事情，所以task runner中现在只有npm scripts能使用webpack实现的任务自动化。不需要学习Gulp，但是如果有空，可以随时回头来学习。

对于linters，曾经有许多选择，包括ESLint，JSLint，JSHint和JSCS。但目前大多数情况都是ESLint。

对于bundler，还有几个不同的选择，包括Parcel，Webpack，Rollup，Browserify等。如果必须选择一个，就挑Webpack吧。虽然Rollup也很常见，但主要用于库的打包；在应用程序方面，最好选择webpack。所以现在先学webpack，如果愿意，可以回头再学习Rollup。

花时间练习：创造一些东西

恭喜！现在已经掌握现代JavaScript开发人员75%的必备技能。现在继续用所学到的东西创造一些东西。也许开发一些使用Sass和JavaScript的库。然后使用Webpack将Sass转换为CSS并使用babel来转换ES6代码。完成后，在Github和npm上发布它们。

选择一个框架

在老版本的路线图中，这曾经是基础知识的一部分，但我将它的学习顺序改到Sass、构建工具和包管理器之后，因为学习框架一定会使用到这些工具，如果不提前了解，可能会是一头雾水。

在框架中，有几种选择。但现在常用的是React，Vue和Angular。如今对React.js的需求越来越多。但是，你可以任意选择上面列出来的框架。我个人会选择React或Angular。简短的说明下，作为初学者你可能会发现Angular比较容易一些，可能是因为它提供了大量简单易用的功能，不必操心寻找外部库，例如支持延迟加载的强大路由，支持拦截的HTTP客户端，依赖注入， CSS组件封装等。不过，React显然在社区和技术支持(Facebook团队)上具有优势。不要因为宣传说的天花乱坠就随便选择框架，全方位了解一下，对比一下到底那个更适合自己。

在已经了解TypeScript和Rx.JS的基本概念的前提下，下面的图表是React和Angular的学习曲线。两者都有自己适用的场景，因情况而异。

一旦选择了框架，还需要学习其他内容。例如，如果决定使用React ，可能需要学习Redux或Mobx来进行状态管理，具体选择哪个取决于应用程序的规模。Mobx适用于中小型应用，Redux更适合大型应用。如果应用程序允许，您可能甚至不需要其中任何一个而是使用React原生的状态管理。

如果你选择Angular，你将不得不使用TypeScript（你可以不用它开发Angular应用程序，但还是建议使用）和Rx.js，他们的使用有益于Angular应用程序的开发。Angular有非常强大的库，也适用于函数式编程。

如果选择Vue.js，可能需要学习Vuex，它类似Vue 的Redux。

值得注意的是Redux，Mobx和Rx.js不仅仅绑定到对应的框架，也可以在vanilla JavaScript应用程序中使用它们。此外，如果从列表中选择Angular，请确保它是Angular 2+而不是已经被淘汰的Angular 1+。

花时间练习

现在已经知道所有构建一个现代JavaScript应用程序所需要的内容。继续使用选择的框架开发一些应用程序。您可以在repository的ideas目录中找到一些想法：随便选一个，开始开发！

完成后，请阅读有关如何衡量和提高性能的资料。例如，查看交互时间(Interactivity Time)，Page Speed Index和Lighthouse Score等。

持续改进WebApp

完成上面列出的所有步骤后，请了解Service worker以及如何使Web应用程序得到优化。

测试应用

不同的测试目的有不同的测试工具。常用的组合是Jest，Mocha，Karma和Enzyme。但是在开始任何测试类型之前，最好首先了解不同的测试类型和目的，寻找所有可用的工具并使用最适合的一个。

有一个非常好的测试入门总结链接：https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

静态类型检查器

静态类型检查器可以向JavaScript添加类型检查。它并不是必须学习的，但它真的能起到很大的作用。它简单易学，只需要几个小时就可以了。主要有TypeScript和Flow两种，个人倾向TypeScript，但还是那句话，黑猫白猫，能抓老鼠的就是好猫。

服务器端渲染

到目前为止，所掌握的技能应足以满足任何“前端工程岗位”了。但请不要就此止步！

了解不同框架的服务器端渲染，不同的框架会有不同的选择。例如，如果决定使用React，最值得注意的选项是Next.js和After.js。对于Angular，就是Universal了。而对于Vue.js就是Nuxt.js。

路线图中可能还是缺少一些东西，但本文所说的已经是一个“前端工程师”所需要的全部内容了。记住，关键是尽可能多地练习，在开始时会觉得很累，但这是正常的，随着时间的推移，会变得越来越好。如果有疑惑，不要忘记寻求帮助。