2018前端工程师成长路线图

译者按： 上王者算什么？有本事刷一下你的前端技术！



本文采用意译，版权归原作者所有

过去 5 年，我一直作为一枚全栈工程师，经常会有小朋友问我应该学什么，于是我写了这篇博客，希望可以帮助大家。本文的所有图表都在我的 GitHub 仓库kamranahmedse/developer-roadmap。

下图是我给前端工程师制定的成长路线图(由Fundebug翻译)，希望对大家有所帮助：



成为前端工程师，第一步应该是学习HTML/CSS/JavaScript，这是基础。

1. HTML

HTML 用于定义网页的结构。你的第一步是学习 HTML 的语法，学会如何把页面拆分为多个部分。

任务： 至少撸 5 个纯 HTML 页面，你可以实现任意网站的页面，比如 GitHub 的 profile 页面或者 Twitter 的登陆页面。纯 HTML 会有点丑，但是不用担心，专注于网页的结构。

2. CSS

CSS，全称 Cascading stylesheets，是用来美化 HTML 页面的。

  • 学习 CSS 语法，并且熟悉 CSS 的常用属性。
  • 学习 Box Model，学会使用 Grid 和 Flexbox 布局。
  • 学会使用 Media Queries 来实现响应式布局。

任务： 使用 CSS 美化第 1 步中实现的 HTML 页面。如果你实现的 HTML 是 GitHub 的 profile 页面，那你现在就可以使用 CSS 让它看起来更像实际页面。

3. JavaScript

JavaScript为静态页面添加交互性。比如网站的所有弹框、提醒，以及更新页面的部分内容，都是由 JavaScript 实现的。

  • 学习 JavaScript 的基本语法。
  • 学习如何使用 JavaScript 操作 DOM 元素。比如，如何删除、添加页面元素等。
  • 理解作用域、闭包、变量提升等 JavaScript 难点。
  • 学习使用 XHR 和 Ajax 发起 HTTP 请求。
  • 学习 JavaScript 最新标准 ES6。

是否需要学习 JQuery? No!

很久以前，大家热爱 JQuery，因为它封装了 JavaScript 的接口，让我们可以不用考虑浏览器兼容性。但是，JQuery 的时代已经过去了，新的项目已经很少用它了。因此，你不需要学习 JQuery 了！。要知道，GitHub 已经完全移除 jQuery 了！但是，仍然有人在使用 JQuery，它很简单，了解一下就好了。

4. 使用 HTTM/CSS/JavaScript 写一个网站

学习编程的最佳方式是敲代码。既然你已经学会了 HTTM/CSS/JavaScript，那你就可以写一个简单的网站了，比如个人博客。记住，你可以去复制他人的代码，但是你需要尽量使用你所学到的所有知识点。前端工程师都应该有个人网站，至少有个静态网站！

5. 为 GitHub 项目提 PR

是时候做一些正真的事情了！到GitHub找一些前端项目，提一些 PR。下面我提供一些思路：

  • 优化 UI
  • 解决 issue
  • 重构代码

GitHub 是一个非常好的学习和交流的平台，试着为开源社区做一点点贡献吧！现在已经有人开始花钱在 GitHub 买账号，买项目，买 Star，这是一件很无聊的事情，严重败坏了社区风气，请大家一起抵制！

6. 包管理器

如果你不使用包管理工具的话，当你需要使用第三方插件时，需要手动下载 JavaScript 或者 CSS 文件，将它们放进你的项目；这些插件更新时，你又得重新下载文件，这非常麻烦。

如果你使用包管理工具，比如npm或者yarn时，一切就方便很多了。它们可以帮助第管理所有第三方库，更新也很方便。另外，NPM 和 YARN 基本没什么区别，你可以选择任意一个。

7. 使用 NPM 或者 YARN 模块

不要重复造轮子，第三方模块极大丰富了前端开发的生态系统，我们应该学会好好利用。你可以为第 4 步中开发的网站添加一些第三方模块，比如使用moment处理时间，使用echarts画图表。

8. CSS 预处理器

CSS 预处理器，例如 Sass，Less 和 Stylus，可以增强 CSS 的功能，比如支持变量、计算以及函数等。如果让我选择的话，我会选择 Sass。最近，PostCSS 开始变得流行起来，它确实还不错，相当于 CSS 的 Bable。你可以单独使用 PostCSS 或者基于 Sass 使用。我建议你先学习 Sass，有时间再了解一下 PostCSS。

9. CSS 框架

目前，最流行的 CSS 框架是 Bootstrap、Materialize 和 Bulma。如果非要选一个最流行的，那我觉得是 Bootstrap。

各位前端大侠，欢迎免费试用Fundebug的实时 BUG 监控服务，阔以帮你快速发现线上 BUG 哈！

10. CSS 规范

对于大型前端项目，CSS 会变得非常混乱，难以维护，需要使用规范。我们有多种方式来组织 CSS，比如 OOCSS、SMACSS、SUITCSS、Atomic 和 BEM。你应该了解一下它们之间的不同，个人更加偏好BEM。

11. 构建工具

构建工具指的是开发前端项目用到的代码校验工具(linter)、任务管理工具(task runner)、打包工具(bundlers)。

代码校验工具有 ESLint、JSLint、JSHint 和 JSCS。目前 ESLint 是最受欢迎的。

任务管理工具有 npm script、gulp 和 Grunt 等。现在，webpack 可以完成任务管理工具的大部分工作，因此我们可以结合 npm script 和 webpack 一起使用就好了。

打包工具有 Webpack、Rollup、Browserify。我推荐大家使用 Webpack。Rollup 也很常见，不过通常用于打包第三方库。

12. 开发一个 NPM 模块

恭喜！你已经是个 75%的前端工程师了！现在，你要做的事情是开发一个真正有用的东西。比如，你可以写一个 NPM 模块，把它开源到 GitHub 并发布到 NPM。编程过程中难免遇到一些问题，需要自己造一些轮子，你要做的就是把轮子造好一点，发布出来就好了。优秀的工程师不仅要参与开源项目，还应该创造并维护自己的开源项目，哪怕是一个小小的工具。还是那句话，不要去花钱买项目，那是骗自己玩的。

13. 前端框架

在其他人的学习计划中，会把前端框架放在 HTML/CSS/JavaScript 之后。但是，我觉得你需要先了解一下 Sass、构建工具和包管理工具，这些在框架中都会用到，如果你知道他们，大概会被吓到…

目前，最流行的前端框架有 React、Vue 和 Angular，你可以选择任意一个，都没啥毛病。如果是我的话，我会选择 React 或者 Angular。

如果你是初学者，你也许会发现 Angular 更简单，它把所有需要的东西都给你弄好了，比如路由功能(支持懒加载)、HTTP 客户端(支持拦截器)、依赖注入等，这样你就不需要去使用第三方库了。对于 React，你就需要使用很多第三方库。两者各有优劣吧。

框架对比是个很大的话题，这里我就不多说了。我们可以简单对比一下 Angular 和 React 的学习曲线：



如果你选择了一个框架，意味着你必须学习一些特定的技术。对于 React，你需要学习 Redux 或者 Mobx 来进行状态管理。至于选择 Redux 还是 Mobx，取决于应用的大小。Mobx 适合中小型应用，而 Redux 适于大型项目。对于 Angular，你需要学习 TypeScript 和 Rx.js。而对于 Vue.js，你需要学习 Vuex，相当于 Redux。

14. 使用框架开发一个网站

现在，你已经掌握了现代前端开发所需要的所有技术。那就使用你选择的框架开发一个应用吧！当然，现在前端项目基本上都是框架开发的…

当你开发完之后，学习一下如何衡量和优化性能，比如你可以关注一下 Interactivity Time, Page Speed Index 和 Lighthouse Score。

15. 测试

对于前端测试，有很多不同的工具，比如 Jest、Mocha、Karma 和 Enzyme，在你学习测试工具之前，请先理解测试的价值，并了解一下测试的分类。推荐读一下这些博客：

16. Progressive Web Apps

学习一下Service Worker和Progressive Web Apps。

17. 静态类型检查

为 JavaScript 添加静态类型检查，可以让代码更加严谨，避免很多错误。你只要学习数个小时，就可以一直受益。TypeScript 和 Flow 是两种不同的 JavaScript 静态类型检查技术。

TypeScript 重新制定一套支持类型检查的语言，编译为 JavaScript 代码来运行。

Flow 是一种静态类型检查工具，可以在编码时检查到类型错误并做出提示。

因此，TypeScript 更强大，难度更大，尤其是重构成本很高；而 Flow 功能和使用都很简单，基本上基本上够用。你可以根据需要进行选择。

18. 服务端渲染

服务端渲染，即 Server Side Rendering，又称为后端渲染。其实就是服务端先把 HTML 页面填充数据之后，再返回给前端。这样做可以提升首屏性能，有助于 SEO，减少客户端用电。

对于不同的前端框架，有不同的服务端渲染技术。React 有Next.js和After.js，Angular 有Universal，Vue.js 有Nuxt.js。

但是，是否采用服务端渲染其实还有争议，了解一下可以，是否根据需要决定是否使用。

19. 其他技术

作为一个专业的前端工程师，学习一下 canvas、HTML5、SVG、Source Map、函数式编程、TC39 等技术还是非常有必要的！

参考博客

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/

您的用户遇到BUG了吗？

体验Demo 免费使用