前端开发路线图——从小白到前端工程师

编者按：不少人都想学编程。可是苦于没有具体的步骤和指导。好比想找份前端开发的工做，殊不知道应该先学习什么再学习什么，也不知道该选择什么样的工具。由于常常被人问到相似的问题，全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图，而且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。

进入正题以前先交代一下我和这张路线图的背景。过去5年我一直在进行全栈开发，目前是tajawal的首席工程师（我得有不少头衔）。关注趋势而且让其余开发者训练得当不只是个人爱好也是个人工做职责。在如何跟上形势方面我发现有不少新手（也包括一些有经验的）都感到很困惑。2017年的时候我有不少朋友都发邮件给我寻求指导，他们想知道作这一行的话应该学些什么。因此为了不本身总是要碰到这样的麻烦同时也是为了帮助别人，我决定一劳永逸准备这些图表，这样只要有人问我时就把这些图表的连接发给他们。因此这些图表就是这么诞生的。

一开始他们只是想要一些工具的推荐，可是昨天我决定给他们一份更加结构化一点的东西，增长了细节而且设计成步骤的形式以便你能够更好地理解该选择什么，按照什么样的次序。

同时我还在制做后端和DevOps部分的路线图，可是前端已经作好了，你能够看看下面。

在详细介绍这份路线图的不一样部分以前，我先花点时间讲讲个人免责声明：

这份路线图的目的是让你了解一下总体状况而且提供指导，若是你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦的心态去学东西。你应该对为何一项工具在一些状况下更适合有基本了解，而且要记住时髦的东西历来都不意味着就是最适合你要处理的工做的。

好了，下面开始吧——下面就是这份路线图，可是本文的目的是依次解释路线图的每个步骤。

你首先想要去作的第一件事是学习一些基础，包括学习HTML、CSS的一点基础知识，以及熟悉一下JavaScript的语法。

学习HTML基础

HTML给你的网页赋予告终构。它就像是人的骨架那样让你保持站立。首先你须要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：

• 学习HTML基础，了解如何编写语义HTML

• 理解如何把网页分红section（段落），以及如何正确组织DOM（文档对象模型）

任务——

一旦你学习了HTML基础，至少要制做5个HTML网页。我建议你随便找一个网站，好比看看Github的档案页或者Twitter的登陆页。而后把焦点放在恰当地组织内容上。出来的东西可能会很难看，可是暂时别担忧，把你的关注点放在恰当的结构上。

学点CSS

如今咱们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。

• 首先要作的是学习语法，熟悉常见的CSS属性。

• 了解盒模型（box model），掌握如何利用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，由于有一些旧版的浏览器不支持新版的JS。不过如今先不用担忧Babel，只须要了解相关概念，而后用到任何一种支持ES6的最新版浏览器上来练习一下就行。咱们后面还会再继续讲ES6的。

如今你应该已经感受到东西像是那么一回事了。若是你按照上面的步骤作下来的话应该鼓励一下。这些是你刚刚学到的一些最重要的东西。

我应该学jQuery吗？

曾经有一段时间每一个人都对jQuery疯狂，也有充分的理由；这是一个强大的库，在JavaScript基础上提供了一个封装，让你能够用兼容浏览器的方式执行任何东西。不过那些日子已经一去不复返，如今新项目用它已经不是不少了，可是仍然还有人在用。你不是必定要学它，可是这玩意儿的确很容易，若是你想看看的话仍是有好处的。

练习时间

我已经说过不少次可是仍是要再说一次，不练习的话你学不到任何东西。你可能随时都会感受本身已经理解了可是若是不练习的话很快就会忘掉。在按照这份路线图去学习的时候，要确保尽量多地去上手实践。

继续作些响应式网站，用JavaScript增长交互性。你能够添加任何感兴趣的现有的网页上去，但记住要利用上目前学到的一切。

一旦你制做出了一些网站，接下来就是开始作真正的东西了。你能够到github上面找一些项目打开某些开源项目的pull请求。如下就是一些能够去尝试的pull请求：

加强UI，把任何演示页作成响应式或者改进设计

看看有什么开放的issue是你可以解决的

重构任何你认为本身能够改进的代码

就像这个repo同样，告诉他们你正在学习让他们就你的PR以及能够如何加以改进提供反馈。

尽管我愿意推荐这个Github库，可是这须要了解一点git的知识，因此这是可选的。你没必要作这个但若是你作了的话，你会发现真的颇有用——只要你开口你会惊讶地发现竟然有那么多人愿意帮助你。那你也能够找到不少有关git的免费资源，好比试试这个。

鼓励本身一下

如今你已经学习了必要的基础了。若是一切都学得不错的话，你就能够去找份自由职业工做或者也许能够去试试能不能找份全职了。然而，若是你想有一份更好的职业的话，如今还不能中止脚步，由于还有很长一段路要走。

包管理器

在此以前，若是你要用到一些外部库好比插件或者任何外部的桌面小部件的话，你得手工下载JavaScript和CSS文件而且将它们放到项目里面，而后那些库或者插件发布新版本的时候，你又得下载更新的文件再放到你的项目里面，这是极其麻烦的事情。包管理器能够干掉这种麻烦。它们帮助你把外部库和插件放到你的项目里面，这样你就不用关心手工复制库或者费事地在它们发布新版时更新文件的事情了。如今有yarn和npm了。这两个几乎是同样的，都只是实现，你能够任选一个，一旦学会了使用其中一个，另外一个天然也不成问题。

如今学以至用吧

在对包管理器有了基本了解以后，你就能够去安装一些外部库到你前面制做的一些网页上了，好比安装一些提示插件，当用户点击某个按钮时显示提示信息，或者建立一个登陆表单用一些表单验证库进行表单验证，或者试试不一样的选项看看如何安装不一样的版本。

记得要看看语义版本控制

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应用的构建/打包以及开发。这一类包括了linter（代码检查）、task runner（自动构建）以及bundler（打包工具）。

对于自动构建，这个原本是是不少选项的，包括npm脚本、gulp、grun等等。不过这一次，既然webpack可以处理gulp能作的大部分东西，因此只有自动构建中的npm脚本能够用来对webpack能作的任务进行自动化。你不须要学习Gulp，然而到后面若是你有点时间的话，能够去看看它可否对你的应用有所帮助。

至于linter，再次地也有不少选项，其中包括ESLint、JSLint、JSHint以及JSCS等。可是目前主要是ESLint用得多。

对于模块打包工具，不一样的选项包括Parcel、Webpack、Rollup、Browserify等。若是你必须选一个，目前你能够闭着眼睛选Webpack就是。Rollup也很经常使用可是主要建议用到库上面，至于app，仍是以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一直都在努力改进它。你须要确保的是不要由于什么东西火就选择什么，要去google一下，对比一下，看看哪个最适合你。

这两个的比较以及个人我的体会我要留到下一篇文章再谈了，不过既然这篇文章是谈学习的，我就来说讲如何找到Angular和React的学习曲线。

下图中的学习曲线考虑了你已经具有TypeScript的知识，并且也懂了一些Rx.JS的基础。至于这种假设的缘由我会在未来的文章中解释，不过主要是由于Angular提供的其中的一些即时可用的标准和关键功能。但这并不意味着React就是坏的，它们各自都有本身的地位，我之后会进一步细谈。

你能够看看各自的学习曲线，看看哪一个更适合你。

一旦你选择了本身的框架，固然还有其余一些东西须要你学的。比方说若是你决定学React的话，你可能还得学Redux或者Mobx去了解状态管理，具体选学什么要取决于你要作的应用的规模。Mobx适合中小规模应用，Redux更适合大规模应用。甚至你可能都不须要学，靠React的原生状态管理就好了，若是你的app容许的话。

若是你选择Angular，你就得用TypeScript（没有它你也能开发出Angular应用，可是咱们仍是推荐你使用）和Rx.js，这些除了Angular应用之外在其余地方也能用得上。这都是很是强大的库，也适合于函数编程开发。

若是你选了Vue.js的话，也许还得学习Vuex，这东西有点相似于Redux可是是给Vue用的。

须要注意的是，Redux、Mobx以及Rx.js都不是跟这些框架绑死到一块儿的，你也能够用到各类JavaScript应用里面。此外，若是你选择了Angular的话，确保你用的是Angular 2+而不是Angular 1+。

练习时间

如今你已经知道了开发现代JavaScript应用所需的一切。如今就用你选择的框架作点东西出来吧。你会在库中的idea目录找到一些点子；任选一个而后开始吧！

作完以后，再去看看如何衡量和改进性能。比方说能够看看Interactivity Time、Page Speed Index以及Lighthouse Score等。

渐进式Web应用

一旦完成了上述全部步骤，再来学习一下service worker以及如何制做渐进式web应用。

测试你的应用

应用测试有不少工具，各自的用途也不同。我本人常常是组合使用Jest、Mocha、 Karma及Enzyme。然而，在开始选择工具以前，最好是首先理解有哪些不一样的测试类型，看看全部的选项状况，而后从中再选择最适合您需求的一个。

这里有一份很好的归纳，你能够去看看。

静态类型检查器

静态类型检查器帮助给JavaScript增长类型检查。你不须要学习这些，不过这些东西能够赋予你超能力，并且学习起来也很快，几个钟头就好了。这方面主要有TypeScript 和 Flow。我喜欢TypeScript ，不过你能够两个都看看，再选你喜欢的。

服务器渲染

目前为止，你所学到的技能应该足够你找到一个“前端工程”的位置了。但且慢，你还能够更上一层楼。

你还能够在选定的任何框架内再学学服务器端渲染的知识。有不一样的选项可选，这要取决于你用什么样的框架。比方说若是你决定用React，最值得关注的选项是Next.js 和 After.js。若是是Angular，你能够选Universal。对于Vue.js，咱们有 Nuxt.js。

这份路线图可能还会有遗漏的地方，可是足以应付任何“前端工程”角色之所需。还要记住的是，关键是尽量多地练习。一开始你可能会以为很吓人，总感受本身没有掌握，但这是正常的，慢慢你就会以为本身变得愈来愈好。还有，陷入困境时别忘了寻求帮助，你会惊喜地发现有多少人愿意帮助你的，或者至少我愿意。

转自:http://www.iteye.com/news/32985

分享一个vue.js 2 的全家桶教程：

1.vue.js 2 入门与提升: http://xc.hubwiz.com/course/vue.js

2.vuex 2 入门与提升: http://xc.hubwiz.com/course/vuex

3.vue-router 2 入门与提升: http://xc.hubwiz.com/course/vuerouter

4.vue.js 2 + webpack 工程化实践: http://xc.hubwiz.com/course/vuegch