英文原文：
Modern Frontend Developer in 2018
在我们Start这篇文章之前，先给你一个关于我和这个道路图的设法；在过来的5年里，我不断在做全栈开发，如今在 tajawal 担负首席工程师，在那边我不能不戴上分歧的帽子。这不只是我的喜好，也是我的任务职责之一，我要亲密存眷趋向，并让其它开发者坚持承受杰出的培训。我看到初学者（和相似的经历的人）为了跟上时期有非常多迷惑。在2017年，我有非常多冤家来发邮件问我，假如他们想要从事这个职业，他们应当进修甚么。因而为了不费事和协助其别人，我决议一次性为一切人预备这些图表，因而不管谁来问我的时分，我城市将这些图表的衔接分享给他们。这就是这些图表的由来。
开发者道路图 GitHub ——2018年景为 web 开发者的道路图
后来他们只是平铺对Tools的引荐，可是我昨天决议给他们愈加构造化一些，增加细节，并且以步调的格局来设计他们，以便让你更好的了解选择甚么和以甚么次序来选择。
我依然在做后端和 DevOps 部分，可是前端部分曾经预备好了，你可以鄙人面看一下。
在我说明道路图中分歧的部分之前，让我花点工夫提出这个免责声明：
这个道路图的初志是给你关于蓝图的设法，而且假如你对以后学甚么有所迷惑，来做出一些领导，并非鼓舞你去学甚么工具时兴或许趋向。你应当了解为何一个Tools在某些状况下比其他的愈加合适，同时记着时兴和趋向从不料味捉崆最合适这个任务的。
让我们Start吧——你可以鄙人面的图片里找到概况，固然本文中，我会具体的说明图中的每一个步调。
你要做的第一件事是进修根底常识，包含进修 HTML、CSS 的根底常识和熟习 JavaScript 语法。
进修 HTML 根底
HTML 让你的页面变得有构造。它就像人类的骨架，让你坚持站立。第一件工作就是进修它的语法及其它供给的每样工具。那末如今，你应当把核心集中鄙人面这些点上：
Task?—：一旦学会了 HTML 的根底常识，就要最少制造5个 HTML 页面。 我引荐你选择网站上的页面，例如：检查任何 github 上的个人材料页面或 twitter 的登录页面。 并专注于准确构建内容。 虽然今朝看起来是丑陋的，但先不要担忧这一点，把首要的精神放在页面的构造上。
学一些 CSS
如今我们曾经学会了怎么为页面预备骨架，是时分在上面添加一些皮肤并让它看起来更美丽了。CSS —— 用来丑化你 HTML 页面的级联款式表。
你起首要做的是进修语法并熟习常用的 CSS 属性。
了解 box 模子和怎么运用 Grid 和 Flexbox 来预备结构。
一旦你完成了这个Task，再来进修怎么让你的网站对媒体的查询做出回应。
Task?—：一旦你把握了根本的工具，你接下来要做的就是在最初一步中完成你所设计的 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 搜刮一些项目，然后在一些开源项目中开启一些拉取恳求。以以下出一些建议：
链接这个库，通知他们你正在进修，然后从你的 PR 失掉反应，和你可以如何晋升。
固然我会引荐这个 Github 部分，可是它需求一些 git 的常识，它也是可选的。你不必必需去做这些，可是假如你做了，你会发明真的很有益处——你会感到诧异，假如你发问的话有几多人情愿协助你。你可以在 git 上找到非常多收费资本，尝尝这个。
表彰一下本人
你曾经把握了根底常识。假如你把每一个工具都学好了，你可以成为自在职业者或许找个全职任务。但是，不要止步于此，假如你想有一个更好的职业，另有很长的路要走。
保证理
这之前，假如你要用一些内部库，例如插件或许内部部件，你必需手动下载 JavaScript 和 CSS 文件，并将它们放入项目，然后当那些库或许插件宣布新的版本，你必需下载新的文件，再次将他们放入项目，这十分费事。保证理可让你的任务流防止这个费事。他们协助你将内部库和插件引入到项目，因而你不必担忧手动复制库，或许当他们宣布新版本的时分碰到更新的费事。如今可使用 yarn 和 npm 。他们两个简直类似，除完成，你可以选择他们中的任何一个，一旦你学会了此中一个的用法，另外一个也是差未几类似的。
我们来应用学到的常识
在你对保证理有了根本的了解，可以在之前创立的 web 页面中装置一些内部库，例如装置那些当用户点击按钮的时分弹出提醒插件来展现提醒信息，或许创立一个登岸表单，然后运用一些表单验证库来做表单验证，并运用分歧选项，看怎么装置分歧的版本。
在浏览本文时，请务必浏览语义版本
CSS 预处置器
预处置器运用 CSS 默许不具有的功用来丰厚 CSS 。有非常多分歧的选项如 Sass，Less，Stylus 等等。假如要我选一个，我会选择 Sass 。但是，PostCSS 比来取得了非常多存眷，它对 CSS 来讲是有则更好的，与“Babel”是一类。你可以独自运用它，或许用在 Sass 之上。我建议你如今学 Sass ，有工夫再转头再看看 PostCSS 。
CSS 框架
你不需求进修任何 CSS 框架，但是假如你想选择任何一个，在哪都可以找到。我用过的当中最爱好的是 Bootstrap， Materialize 和 Bulma 。可是假如你看了他们在市场中的需求，并且假如我今日刚Start，我会选择**Bootstrap**。
CSS 组织
跟着使用的生长，CSS Start变得凌乱且难以保护。非常多办法可以更好的构建可扩大的 CSS ，如 OOCSS， SMACSS， SUITCSS，Atomic，以 及 BEM。你应当了解他们之间的差别，可是我更爱好 BEM 。
构建Tools
Tools是来协助你编译/打包和开发 JavaScript 使用。这类包括 linters，Task处置和打包。
关于Task处置来讲，头很多分歧的选择，包含 npm 剧本，gulp， grunt 等等。可是如今，因为 webpack 让你处置之前运用 gulp 处置的大部分工具，所以Task处置如今只要 npm 剧本，你可以用他们来主动完成 webpack 可以完成的Task。你不需求进修 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，构建Tools和保证理器以后，由于您将在框架中运用一切这些而且没有把握这些常识，这对您来讲可能看起来很恐怖。
在框架中，有几种选择。可是这些天经常使用的是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+
本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。
2KB翻译任务按照
CC 协定，假如我们的任务有进犯到您的权益，请实时联络我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
