【译】如何在2019年修炼成一个高阶的前端开发者？

Web开发是一个不断变化的领域 - 我们今天构建网站的方式与几年前的方式完全不同。随着大量工具的出现以及新 工具 的层出不穷，大多数时候开发人员发现对于自己该怎么选择感到困惑。

我是 WEB开发者修炼图谱 的作者和维护者，其中列出了您希望学习进入前端，后端或运维需要了解（掌握）的工具和技术。这个修炼图谱是在 2017 年创建的，并在 2018 年进行了更新，最近修订了 2019 年版本。在撰写本文时，前端开发修炼图谱（2019版）已经更新。我仍在研究后端和运维的修炼图谱，希望在接下来的几天内发布它。

在这边文章中我将回顾和分享制作这个修炼图谱的背后动机，一些免责声明如果你决定根据这个修炼图谱学习（这句不知道怎么翻译，反正意思就是，你根据我的修炼图谱学习，学不好跟我没关系 ），最后有一些细分和学习上的技巧，如果你期望在2019成为一个成熟的前端开发者。

动机

在开始这篇文章之前，为了让您了解我，我在过去的6年里一直在进行全栈开发，目前在 tajawal 担任首席工程师，在那里我不得不穿着许多不同的帽子作为工作的一部分。这不仅是我的爱好，也是我的工作职责之一，要密切关技术注趋势，承担技术决策并保持开发人员的积极性和成长性。

前端开发已经成长了很多而且成长的也很快；前端可用的技术数量多到足以让任何人感到困惑。我在开源和社区非常活跃; 如果我每次被问到或者在论坛上看到这个问题“接下来应该学什么”弹出时我都有一分钱，那么几年前我就会退休。大约2017年，我的一个大学老教授为她的学生准备一套计划来了解市场，并且向我求助希望我能给她一份WEB开发的工具和技术建议清单。我画了一个粗略的草图并转发给她，但后来我决定把它弄清楚一点并把它放在Github上。以便每当我被问到这个问题时我都可以推荐任何人。这就是这些修炼图谱诞生的原因。

声明

在开始看修炼图谱之前，请记住一些免责声明。

这个修炼图谱的目的是给你一个关于学习过程的概念，在你对下一步要学什么感到困惑时给你指导，并且不鼓励你去学习什么是时髦或过时的技术。

其次，研究一下你的就业市场。

不要忽视你所用的语言和工具对市场非常依赖是事实，所以对你所针对的市场做一些研究。

第三，您不需要知道此处列出的所有东西

你不需要学习这里列出的所有东西就可以找到你的第一份工作。如果你刚刚踏入前端开发不要被这堆积如山的路线图所吓到。我只是试图覆盖到你最终可能学到或者用到的所有东西。你可以只是学习其中很小的一部分，并在你开始项目开发后继续学习其他内容。

段位1 - 就业准备

如果你是一个刚刚踏入WEB开发的初学者，这里有一份不同修炼图谱给你。看一看下面的修炼图谱并且停止往下阅读；完成下面这个修炼图谱中列出的内容，在你在一些项目中运用到这些东西后再返回继续阅读。

只要学习完上面列出的内容你就可以称自己为web开发者了并能在市场上找到一份工作。我认识很多这样的人，他们从自由职业或是一份日常工作中赚了不少钱。花点时间在修炼图谱中列出的所有内容上，牢牢掌握所有这些内容并多练习；做很多很多的项目；下面提供一些建议供你参考：

任务：

• 构建一个 番茄时钟 应用。您可以克隆并制作此 应用程序的Web版本 ;
• 创建一个响应式网站通过 GitHub Repositories API 来获取并展示本周前10库。
• 创建一个 简单待办事项列表 ，支持 添加任务，标记任务完成，编辑或删除任务。
• 创建一个简单的秒表，支持用户启动，停止，暂停和重置。

完成上面这些后，学习一下版本控制系统，了解Git的基本用法并在 GitHub 上创建账号。

段位2 - 写更好的CSS

在你掌握基础之后，下一步就是学习如何写出可维护性的Css和使用Css框架。下面是这个修炼图谱大概的样子

完成此步骤后，请继续对您在第1阶段中所做的项目执行以下任务

任务：

• 使用 npm 或 yarn 将bootstrap添加到上述项目中。
• 将第一阶段你创建的项目转换成使用BEM
• 在SASS中编写CSS
• 使用NPM脚本自动将SASS转换成CSS

段位3 - 加速

这个阶段将是持续的一段时间，也是您踏入成熟的前端开发者的一步。继续学习有关JavaScript的更多信息。了解什么是Webpack，了解不同的概念以及为什么需要它。了解什么是babel，为什么我们要使用它并学习如何与webpack集成，最后学习如何使用ESLint来规范代码。此阶段列出的所有项目都围绕webpack。

到本周末，您将开始体验成熟的前端开发。完成此阶段后，请继续执行以下步骤，以便更好地掌握构建工具

任务：

• 创建一个npm包，接受一个用户名然后返回该用户名相关的社交网络上的链接列表（如果存在的话）。它可以在浏览器中使用，用webpack打包，通过Babel转译并使用Eslint来规范代码。
• 创建一个简单的待办事项列表应用，用SASS编写CSS，样式风格使用bootstrap，使用BEM，使用babel转译JavaScript，webpack 打包，优化应用构建并把它发布到Github上。

段位4 - 成熟的前端应用

下一步是学习一些前端框架。有多种选择，但目前最常用的是React，Angular和Vue。我的建议是去学习React。

首先学习React，然后看看redux，然后了解JS中的CSS; 这不是必需的，但如果您愿意，可以看看样式组件和CSS模块。

在您学习完React后，您可以继续阅读有关渐进式web应用的东西。现在您已经了解了前端框架，那对你来说应该不是难事。看一看 PWA checklist ，了解了解 Service Workers ， 通过 lighthouse 进行一些性能测试以及查看可用于您的不同浏览器的API，例如， Storage , Location , Notifications , Device Orientation 以及 Payments 。另外还要了解一些有关 RAIL模型 和 PRPL模式 的信息。

做完这些，你就可以称为一个成熟的前端工程师了。一定要练习你学到的东西。如果你在寻找方案，您或许从下面的列表中获得一些

任务：

• 创建一个简单的应用，它允许你选择一些哈希标签并用使用 Twitter搜索接口 来获取并以类似 Trello 的网格形式展示那些主题标签的最新推文。尝试固定主题标签，以便在用户刷新页面时，它能记住用户选择的主题标签。使用 React Router 并添加相关页面。

• 创建一个 与此类似的番茄钟应用程序 ，允许用户配置工作和休息的持续时间，显示通知并在工作或休息结束/开始时播放声音。

• 使用React重新创建 Github今日热门项目 ，并允许使用语言和日期过滤，就像github一样。您可以添加任何库来处理日期。

段位5 - 自动化测试

学习为您的应用程序编写自动化测试将在未来为您节省很多麻烦，并且在寻找工作时会让您处于更有利的位置。首先，继续学习不同类型测试的不同，不同的概念，例如 mocking， stubs 。这之后，以各自的方式继续学习 jestjs , Enzyme , Cypress 。还需要学习计算测试覆盖率。

任务：

关于这个阶段的任务任务，为您在上面的第4阶段中创建的应用编写单元、集成和功能测试。

段位6 - 静态类型检查器

类型检查器促使您的代码在增长过程中更易于维护，在进行重构时提高灵活性，在IDES中提供更好的支持，并且是您可以拥有的最佳文档形式。目前在这个领域的主要是 Flow 和 TypeScript 。然而，趋势趋向于TypeScript我建议你使用TypeScript。

在学完TypeScript后，把你的项目转换成TypeScript。

段位7 - 服务器端渲染

与客户端渲染应用相比，服务端渲染应用拥有更好的性能以及更好的SEO。虽然服务端渲染不是必须的，但是他确实能帮助你打造一个更好的前端应用。服务端渲染的方案各不相同，取决于你使用的前端框架；但是如果你使用那么React.js 你应该使用 Next.js ，这使得SSR变得轻而易举。

任务，使用Next.js把你的任意一个项目改成服务端渲染。

段位8 - 超越

此阶段显示的所有内容都是可选的，并不是您真正需要的，但如果您想尝试一下，请继续

请注意，为了简洁起见，我没有深入了解细节并试图给你一个更全的图谱; 在你学习的时候要去弄清楚更多的细节。

完整的修炼图谱

下面给出了整个路线图的完整图表，其中包含了一些其他详细信息。

修炼图中可能仍然缺少一些东西，但这就是你成为一个”前端工程师”所需要的所有东西。记住，关键是尽可能多地练习。在刚开始的时候这看起来可能很可怕并感觉自己无法掌握那么多，但这是正常的，随着时间的推移，你会感觉到自己越来越棒。如果你遇到困难，不要忘记寻求帮助，你会惊讶于有这么多人愿意提供帮助。

在我的GitHub主页可以找到关于后端和运维的修炼图谱。请注意，我仍在努力更新后端和运维的图谱，并计划在未来几天内发布它们。

话虽如此，这篇文章即将结束，随时在 Twitter 上与我交朋友或通过 电子邮件 打个招呼。回见，敬请期待！

译自： Learn to become a modern Frontend Developer in 2019 , 部分内容有修改。

作者 Github , 开发者知识图谱项目