2018 年前端开发修炼手册

本文经授权转载自开源中国（ID:oschina2013）

在我们开始这篇文章之前，先给你一个关于我和这个路线图的想法；在过去的5年里，我一直在做全栈开发，现在在 tajawal 担任首席工程师，在那里我不得不戴上不同的帽子。这不仅是我的爱好，也是我的工作职责之一，我要密切关注趋势，并让其它开发者保持接受良好的培训。我看到初学者（和类似的经验的人）为了跟上时代有很多困惑。

在2017年，我有很多朋友来发邮件问我，如果他们想要从事这个职业，他们应该学习什么。因此为了避免麻烦和帮助其他人，我决定一次性为所有人准备这些图表，因此无论谁来问我的时候，我都会将这些图表的连接分享给他们。这就是这些图表的由来。

开发者路线图 GitHub ——2018年成为 web 开发者的路线图

• http://github.com/kamranahmedse/developer-roadmap

起初他们只是平铺对工具的推荐，但是我昨天决定给他们更加结构化一些，增加细节，而且以步骤的格式来设计他们，以便让你更好的了解选择什么以及以什么顺序来选择。

我仍然在做后端和 DevOps 部分，但是前端部分已经准备好了，你可以在下面看一下。

在我解释路线图中不同的部分之前，让我花点时间提出这个免责声明：

这个路线图的初衷是给你关于蓝图的想法，并且如果你对之后学什么有所困惑，来做出一些引导，并不是鼓励你去学什么东西时髦或者趋势。你应该 理解为什么一个工具在某些情况下比其他的更加适合，同时记住时髦和趋势从不意味着是最适合这个工作的。

让我们开始吧——你可以在下面的图片里找到详情，当然本文中，我会详细的解释图中的每个步骤。

你要做的第一件事是学习基础知识，包括学习 HTML、CSS 的基础知识以及熟悉 JavaScript 语法。

学习 HTML 基础

HTML 让你的页面变得有结构。它就像人类的骨架，让你保持站立。第一件事情就是学习它的语法及其它提供的每一样东西。那么现在，你应该把焦点集中在下面这些点上：

• 学习基础并学会如何编写语义化的 HTML

• 了解如何将页面划分为多个部分以及如何正确地构建 DOM

任务 —：一旦学会了 HTML 的基础知识，就要至少制作5个 HTML 页面。 我推荐你选择网站上的页面，例如：查看任何 github 上的个人资料页面或 twitter 的登录页面。 并专注于正确构建内容。 尽管目前看起来是丑陋的，但先不要担心这一点，把主要的精力放在页面的结构上。

学一些 CSS

现在我们已经学会了如何为页面准备骨架，是时候在上面添加一些皮肤并让它看起来更漂亮了。CSS —— 用来美化你 HTML 页面的级联样式表。

• 你首先要做的是学习语法并熟悉常见的 CSS 属性。

• 了解 box 模型以及如何使用 Grid 和 Flexbox 来准备布局。

• 一旦你完成了这个任务，再来学习如何让你的网站对媒体的查询做出回应。

任务 —：一旦你掌握了基本的东西，你接下来要做的就是在最后一步中完成你所设计的 HTML 页面。例如，如果你为 Github 的概要文件编写了 HTML 页面，那么是时候应用 CSS 并让它看起来就像实际的 Github 页面。在前面的步骤中所写的5个页面都应该这样做。

学习 JavaScript 基础

JavaScript 可以让你添加更多的交互到 HTML 页面。例如你可以在网站上看到的所有这些滑块，弹出和显示提醒，还有重新加载页面的特定部分而不用刷新整个页面，都是使用 JavaScript 完成的。这一步，你将要学习 JavaScript 为旅程做准备——

• 学习它的语法和基础框架。

• 学习如何使用 JavaScript 操作 DOM ，例如如何使用 JavaScript 将页面中的一些元素删除，如何添加元素，添加或者删除类，应用 CSS 样式等等。

• 在完成了这些之后，学习并理解像范围，闭包，提升机制，以及事件冒泡等这些概念。

• 学习如何用通过 XHR 或者 Ajax 调用 HTTP 。Ajax 可以执行特定的操作而不用刷新整个页面。

• 学习了之后，现在该学习 ES6+ 中的所有新特性。ES6 只是 JavaScript 的一个版本，它引入了大量语言方面的有趣的更新，例如类，声明变量的不同方法，向数组添加新函数，字符串连接等。由于老式浏览器不支持，你在网上可以找到的大部分文章会用 Babel 来解析 ES6 ，它是一个将新 JavaScript 转换到老式 JavaScript 的转换器。但是现在不用担心 Babel ，只要了解这个概念，在实践的时候在任何支持 ES6 的最新的浏览器使用它就可以。我们之后会重提 ES6 的。

你现在应该感觉这些东西越来越真实了。如果你紧跟步伐，你值得表扬。这些是你刚学到的最重要的东西。

我应该学习 jQuery 吗？

有一段时间每个人都热衷于 jQuery ，而且理由充分；它是一个很强大的库，为 JavaScript 的上层提供了一个封装，让你可以用浏览器兼容的方式执行任何操作。但是那段时间已经过去了，在新的项目中现在用它没有那么多了，但是还有一些人在用。你不用必须学习它，但是它真的很简单，而且如果你想去看看，它会对你有好处。

实践时间

我说了很多次，而且在这我再次提起了它，如果没有实践，你什么也学不会。短时间内你可能感觉你都明白了，但是如果你不实践，就会忘记。确定你尽可能多的实践，虽然你跟着路线图。

继续使用 JavaScript 为一些响应式网站添加交互。你可以复制当前你能在网上找到有趣的 web 网页，但是记住要把至今所有学到的东西都用上。

一旦已创建了一些网站，该进入到真实的业务中了。去 github.com 搜索一些项目，然后在一些开源项目中开启一些拉取请求。以下列出一些建议：

• 加强 UI ，编写响应式页面 demo 或者改善设计

• 查看任何你可以解决的开放话题

• 重构任何你觉得可以改进的代码

链接这个库，告诉他们你正在学习，然后从你的 PR 得到反馈，以及你可以怎样提升：

• http://github.com/kamranahmedse/developer-roadmap

虽然我会推荐这个 Github 部分，但是它需要一些 git 的知识，它也是可选的。你不用必须去做这些，但是如果你做了，你会发现真的很有好处——你会觉得惊讶，如果你提问的话有多少人愿意帮助你。你可以在 git 上找到很多免费资源，试试这个：

• https://www.codeschool.com/courses/try-git

表扬一下自己

你已经掌握了基础知识。如果你把每个东西都学好了，你可以成为自由职业者或者找个全职工作。然而，不要止步于此，如果你想有一个更好的职业，还有很长的路要走。

包管理

这之前，如果你要用一些外部库，例如插件或者外部部件，你必须手动下载 JavaScript 和 CSS 文件，并将它们放入项目，然后当那些库或者插件发布新的版本，你必须下载新的文件，再次将他们放入项目，这非常麻烦。包管理可以让你的工作流避免这个麻烦。他们帮助你将外部库和插件引入到项目，因此你不用担心手动复制库，或者当他们发布新版本的时候遇到更新的麻烦。现在可以使用 yarn 和 npm 。他们两个几乎相同，除了实现，你可以选择他们中的任何一个，一旦你学会了其中一个的用法，另一个也是差不多相同的。

我们来利用学到的知识

在你对包管理有了基本的了解，可以在之前创建的 web 页面中安装一些外部库，例如安装那些当用户点击按钮的时候弹出提示插件来展示提示信息，或者创建一个登陆表单，然后使用一些表单验证库来做表单验证，并使用不同选项，看如何安装不同的版本。

在阅读本文时，请务必阅读语义版本：

• https://semver.org/

CSS 预处理器

预处理器使用 CSS 默认不具备的功能来丰富 CSS 。有很多不同的选项如 Sass，Less，Stylus 等等。如果要我选一个，我会选择 Sass 。然而，PostCSS 最近获得了很多关注，它对 CSS 来说是有则更好的，与“Babel”是一类。你可以单独使用它，或者用在 Sass 之上。我建议你现在学 Sass ，有时间再回头再看看 PostCSS 。

CSS 框架

你不需要学习任何 CSS 框架，然而如果你想选择任何一个，在哪都可以找到。我用过的之中最喜欢的是 Bootstrap， Materialize 和 Bulma 。但是如果你看了他们在市场中的需求，而且如果我今天刚开始，我会选择**Bootstrap**。

CSS 组织

随着应用的成长，CSS 开始变得混乱且难以维护。很多方法可以更好的构建可扩展的 CSS ，如 OOCSS， SMACSS， SUITCSS，Atomic，以 及 BEM。你应该了解他们之间的区别，但是我更喜欢 BEM 。

构建工具

工具是来帮助你编译/打包以及开发 JavaScript 应用。这类包含 linters，任务处理和打包。

对于任务处理来说，头许多不同的选择，包括 npm 脚本，gulp， grunt 等等。但是现在，由于 webpack 让你处理以前使用 gulp 处理的大部分东西，所以任务处理现在只有 npm 脚本，你可以用他们来自动完成 webpack 可以完成的任务。你不需要学习 Gulp ，然而以后如果你有时间，你可以看看它是否能在你的应用中帮助你。

对于 linters ，同样有很多选择包括 ESLint，JSLint，JSHint 和 JSCS 。但是当前大多使用 ESLint 。

对于模块打包，也有不同的选择，包括 Parcel，Webpack，Rollup，Brwoserify 等等。如果你要选择一个，闭上眼现在选择 Webpack 。Rollup 也很常见，但是建议主要在库中使用；当涉及到应用，用 webpack 。所以，现在就自学 webpack ，如果你想的话，以后为了 Rollup 再来看这部分。

实践的时候到了 - 创造一些东西

恭喜！您现在可以称自己为75％的现代JavaScript开发人员。现在继续用你所学到的东西创造一些东西。也许创建某种类型的库，你必须使用Sass和JavaScript。然后使用Webpack将Sass转换为CSS并在其中使用babel来转换ES6代码。完成后，在Github和npm上发布它。

选择一个框架

在旧的路线图中，这一部分曾经是基础知识的下一部分内容，但我将其更改为Sass，构建工具和包管理器之后，因为您将在框架中使用所有这些并且没有掌握这些知识，这对您来说可能看起来很可怕。

在框架中，有几种选择。但是这些天常用的是React，Vue和** Angular。**如今，对React.js的需求越来越多。但是，你可以选择任何列出的那些，你会没事的。我个人会选择React或Angular。这里只是一个简单的注释，作为一个初学者，你可能会发现Angular比较容易一些，可能是因为它支持几乎所有开箱即用的东西，例如：功能强大的路由器，支持延迟加载，支持拦截器的HTTP客户端，依赖注入，组件CSS封装等，无需担心选择外部库。但React肯定会优先考虑周围的社区以及facebook的团队一直致力于改善它的方式。只要确保不要选择任何东西，因为炒作，谷歌搜索，比较来看看哪一款最适合你。

我将把比较和我的个人经历留给另外一篇文章，但由于这篇文章是关于学习，这里是你如何找到Angular和React的学习曲线

在下图中学习曲线考虑您已经了解TypeScript和Rx.JS的基本概念。对于“为什么”我将在未来的某篇文章中介绍，但主要是因为一些标准化和角度提供的一些关键功能开箱即用。但是_这并不意味着React很糟糕，两者都有自己的应用场景，我会在即将发布的帖子中广泛报道。

看看两者，看看最适合你的。

一旦您选择了框架，您可能还需要学习其他一些内容。例如，如果你决定使用React;您可能必须学习Redux或Mobx以进行状态管理，具体取决于您将要使用的应用程序的大小。Mobx适用于中小型应用，Redux更适合大规模应用。如果您的应用程序允许，您可能甚至不需要其中任何一个并依赖于React中的本机状态管理。

如果你选择Angular，你将不得不做TypeScript（你可以不使用typeScript而是自己开发angular应用程序，但建议你直接使用它）和Rx.js，这也将使你的Angular应用程序受益。它是一个非常强大的库，也适用于函数式编程。

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

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

是时候练习了

现在您你已经了解了构建现代 JavaScript 应用程序所需的一切。用你选择的框架来做一些应用。你可以在存储库的 ideas 目录中找到一些想法;选择一个，然后开始！

一旦你完成制作，去阅读有关如何测量和提高性能的信息。例如，看看交互性时间，页面速度指数，和 Lighthouse 评分等。

渐进式 WebApps

一旦完成了上面列出的所有步骤，就可以了解服务人员以及如何开发渐进式 web 应用。

测试你的应用程序

有很多不同的工具用于不同的目的。我自己经常使用 Jest，Mocha，Karma 和 Enzyme 的组合。但是，在你跳转并选择任何测试类型之前，最好首先了解不同的测试类型，查看所有可用的选项并使用最适合你需要的选项。

这是一个很好的入门总结：2018 年 JavaScript 测试概述：

• 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 。

路线图中可能还缺少一些东西，但已经包含所有“前端工程”角色所需要的。记住，关键是要尽可能多地练习。一开始你会觉得很可怕，你会觉得自己没有抓住点，但这是正常的，随着时间的推移，你会觉得自己越来越好。如果你被困住了，不要忘记寻求帮助，你会惊讶于人们愿意帮助你。

关于作者：Kamran Ahmed，Tajawal 的首席工程师。具有创业精神和做事技巧的技术人员。