編者按：很多人都想學(xué)編程墓贿。但是苦于沒(méi)有具體的步驟和指導(dǎo)茧泪。比如想找份前端開(kāi)發(fā)的工作，卻不知道應(yīng)該先學(xué)習(xí)什么再學(xué)習(xí)什么聋袋，也不知道該選擇什么樣的工具队伟。因?yàn)榻?jīng)常被人問(wèn)到類(lèi)似的問(wèn)題，全棧開(kāi)發(fā)者Kamran Ahmed索性在github上制訂了一份現(xiàn)代前端開(kāi)發(fā)的路線圖幽勒，并且用一篇文章對(duì)前端開(kāi)發(fā)的整個(gè)學(xué)習(xí)過(guò)程進(jìn)行了詳細(xì)解釋嗜侮。感興趣的初學(xué)者不容錯(cuò)過(guò)。

進(jìn)入正題之前先交代一下我和這張路線圖的背景啥容。過(guò)去5年我一直在進(jìn)行全棧開(kāi)發(fā)锈颗，目前是tajawal的首席工程師（我得有很多頭銜）。關(guān)注趨勢(shì)并且讓其他開(kāi)發(fā)者訓(xùn)練得當(dāng)不僅是我的愛(ài)好也是我的工作職責(zé)咪惠。在如何跟上形勢(shì)方面我發(fā)現(xiàn)有很多新手（也包括一些有經(jīng)驗(yàn)的）都感到很困惑击吱。2017年的時(shí)候我有很多朋友都發(fā)郵件給我尋求指導(dǎo)，他們想知道做這一行的話應(yīng)該學(xué)些什么遥昧。所以為了避免自己老是要碰到這樣的麻煩同時(shí)也是為了幫助別人覆醇，我決定一勞永逸準(zhǔn)備這些圖表，這樣只要有人問(wèn)我時(shí)就把這些圖表的鏈接發(fā)給他們炭臭。所以這些圖表就是這么誕生的永脓。

一開(kāi)始他們只是想要一些工具的推薦，但是昨天我決定給他們一份更加結(jié)構(gòu)化一點(diǎn)的東西鞋仍，增加了細(xì)節(jié)并且設(shè)計(jì)成步驟的形式以便你可以更好地理解該選擇什么常摧，按照什么樣的次序。

同時(shí)我還在制作后端和DevOps部分的路線圖威创，但是前端已經(jīng)做好了落午，你可以看看下面。

在詳細(xì)介紹這份路線圖的不同部分之前那婉，我先花點(diǎn)時(shí)間講講我的免責(zé)聲明：

這份路線圖的目的是讓你了解一下整體情況并且提供指導(dǎo)板甘，如果你對(duì)接下來(lái)該學(xué)什么感到困惑的話。但并不鼓勵(lì)你用趕時(shí)髦的心態(tài)去學(xué)東西详炬。你應(yīng)該對(duì)為什么一項(xiàng)工具在一些情況下更適合有基本了解盐类，并且要記住時(shí)髦的東西從來(lái)都不意味著就是最適合你要處理的工作的。

好了呛谜，下面開(kāi)始吧——下面就是這份路線圖在跳，但是本文的目的是依次解釋路線圖的每一個(gè)步驟。

你首先想要去做的第一件事是學(xué)習(xí)一些基礎(chǔ)隐岛，包括學(xué)習(xí)HTML猫妙、CSS的一點(diǎn)基礎(chǔ)知識(shí)，以及熟悉一下JavaScript的語(yǔ)法聚凹。

學(xué)習(xí)HTML基礎(chǔ)

HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)割坠。它就像是人的骨架那樣讓你保持站立齐帚。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上：

學(xué)習(xí)HTML基礎(chǔ)彼哼，了解如何編寫(xiě)語(yǔ)義HTML

理解如何把網(wǎng)頁(yè)分成section（段落）对妄，以及如何正確組織DOM（文檔對(duì)象模型）

任務(wù)——一旦你學(xué)習(xí)了HTML基礎(chǔ)，至少要制作5個(gè)HTML網(wǎng)頁(yè)敢朱。我建議你隨便找一個(gè)

網(wǎng)站剪菱，比如看看Github的檔案頁(yè)或者Twitter的登錄頁(yè)。然后把焦點(diǎn)放在恰當(dāng)?shù)亟M織內(nèi)容上拴签。出來(lái)的東西可能會(huì)很難看孝常，但是暫時(shí)別擔(dān)心，把你的關(guān)注點(diǎn)放在恰當(dāng)?shù)慕Y(jié)構(gòu)上蚓哩。

學(xué)點(diǎn)CSS

現(xiàn)在我們已經(jīng)學(xué)會(huì)了如何給網(wǎng)頁(yè)準(zhǔn)備好骨架构灸，接下來(lái)就是在此基礎(chǔ)上添加一些皮膚讓它好看一點(diǎn)了。CSS——級(jí)聯(lián)樣式表就是用來(lái)美化你的HTML頁(yè)面的杖剪。

首先要做的是學(xué)習(xí)語(yǔ)法冻押，熟悉常見(jiàn)的CSS屬性驰贷。

了解盒模型（box model）盛嘿，掌握如何利用Grid和Flexbox準(zhǔn)備布局

一旦學(xué)習(xí)完上面的，再學(xué)習(xí)以下通過(guò)媒體查詢(xún)把網(wǎng)站做成響應(yīng)式的括袒。

任務(wù)——一旦你掌握了基礎(chǔ)次兆，接下來(lái)就應(yīng)該設(shè)計(jì)上一步制作的HTML網(wǎng)頁(yè)。比方說(shuō)如果你給Github檔案編寫(xiě)了HTML頁(yè)面的話锹锰，現(xiàn)在是時(shí)候應(yīng)用CSS來(lái)讓它的樣子看起來(lái)像實(shí)際的Github資料頁(yè)面一樣了芥炭。前面的那5個(gè)頁(yè)面都要拿來(lái)試一下。

學(xué)習(xí)JavaScript基礎(chǔ)

JavaScript能讓你的HTML頁(yè)面互動(dòng)性更強(qiáng)恃慧。比方說(shuō)你在網(wǎng)站上看過(guò)的所有那些幻燈片园蝠、彈出窗口以及廣播通知，以及在沒(méi)有重載頁(yè)面的情況下重載頁(yè)面的特定部分痢士，這些都是用JavaScript做的彪薛。在這一步中，你將會(huì)學(xué)習(xí)JavaScript的基礎(chǔ)來(lái)為后面的旅程做好準(zhǔn)備——

學(xué)習(xí)這門(mén)語(yǔ)言的語(yǔ)法和基本機(jī)構(gòu)怠蹂。

學(xué)習(xí)如何用JavaScript來(lái)操縱DOM善延，比方說(shuō)如何從頁(yè)面移除一些元素，如何增加一些元素城侧，增加和移除類(lèi)易遣，通過(guò)JavaScript應(yīng)用CSS樣式等。

完成之后再學(xué)習(xí)和理解諸如范圍嫌佑、閉包豆茫、變量提升以及事件冒泡這樣的主題侨歉。

學(xué)習(xí)如何用XHR或者Ajax生成HTTP調(diào)用。Ajax可以讓你在不需要重載網(wǎng)頁(yè)的情況下執(zhí)行特定動(dòng)作揩魂。

學(xué)完之后接下來(lái)就要了解ES6+的所有新特性为肮。ES6只是JavaScript的一個(gè)版本，里面給這門(mén)語(yǔ)言引入了大量有趣的更新肤京，比如類(lèi)颊艳、定義變量的多種方式，給數(shù)組增加了新的方法忘分，字符串連接等棋枕。你們?cè)诰W(wǎng)上找到的大部分文章都會(huì)用Babel來(lái)解析ES6，這其實(shí)是個(gè)轉(zhuǎn)譯器妒峦，可以將這門(mén)新的JavaScript轉(zhuǎn)換為舊的JavaScript重斑，因?yàn)橛幸恍┡f版的瀏覽器不支持新版的JS。不過(guò)現(xiàn)在先不用擔(dān)心Babel肯骇，只需要了解相關(guān)概念窥浪，然后用到任何一種支持ES6的最新版瀏覽器上來(lái)練習(xí)一下就行。我們后面還會(huì)再繼續(xù)講ES6的笛丙。

現(xiàn)在你應(yīng)該已經(jīng)感覺(jué)到東西像是那么一回事了漾脂。如果你按照上面的步驟做下來(lái)的話應(yīng)該鼓勵(lì)一下。這些是你剛剛學(xué)到的一些最重要的東西胚鸯。

我應(yīng)該學(xué)jQuery嗎骨稿？

曾經(jīng)有一段時(shí)間每個(gè)人都對(duì)jQuery瘋狂，也有充分的理由姜钳；這是一個(gè)強(qiáng)大的庫(kù)坦冠，在JavaScript基礎(chǔ)上提供了一個(gè)封裝，讓你可以用兼容瀏覽器的方式執(zhí)行任何東西哥桥。不過(guò)那些日子已經(jīng)一去不復(fù)返辙浑，現(xiàn)在新項(xiàng)目用它已經(jīng)不是很多了，但是仍然還有人在用拟糕。你不是一定要學(xué)它判呕，但是這玩意兒的確很容易，如果你想看看的話還是有好處的已卸。

練習(xí)時(shí)間

我已經(jīng)說(shuō)過(guò)很多次但是還是要再說(shuō)一次佛玄，不練習(xí)的話你學(xué)不到任何東西。你可能隨時(shí)都會(huì)感覺(jué)自己已經(jīng)理解了但是如果不練習(xí)的話很快就會(huì)忘掉累澡。在按照這份路線圖去學(xué)習(xí)的時(shí)候梦抢，要確保盡可能多地去上手實(shí)踐。

繼續(xù)做些響應(yīng)式網(wǎng)站愧哟，用JavaScript增加交互性奥吩。你可以添加任何感興趣的現(xiàn)有的網(wǎng)頁(yè)上去哼蛆，但記住要利用上目前學(xué)到的一切。

一旦你制作出了一些網(wǎng)站霞赫，接下來(lái)就是開(kāi)始做真正的東西了腮介。你可以到github上面找一些項(xiàng)目打開(kāi)某些開(kāi)源項(xiàng)目的pull請(qǐng)求。以下就是一些可以去嘗試的pull請(qǐng)求：

增強(qiáng)UI端衰，把任何演示頁(yè)做成響應(yīng)式或者改進(jìn)設(shè)計(jì)

看看有什么開(kāi)放的issue是你能夠解決的

重構(gòu)任何你認(rèn)為自己可以改進(jìn)的代碼

就像這個(gè)repo一樣叠洗，告訴他們你正在學(xué)習(xí)讓他們就你的PR以及可以如何加以改進(jìn)提供反饋。

盡管我愿意推薦這個(gè)Github庫(kù)旅东，但是這需要了解一點(diǎn)git的知識(shí)灭抑，所以這是可選的。你不必做這個(gè)但如果你做了的話抵代，你會(huì)發(fā)現(xiàn)真的很有用——只要你開(kāi)口你會(huì)驚訝地發(fā)現(xiàn)居然有那么多人愿意幫助你腾节。那你也可以找到很多有關(guān)git的免費(fèi)資源，比如試試這個(gè)荤牍。

鼓勵(lì)自己一下

現(xiàn)在你已經(jīng)學(xué)習(xí)了必要的基礎(chǔ)了案腺。如果一切都學(xué)得不錯(cuò)的話，你就可以去找份自由職業(yè)工作或者也許可以去試試能不能找份全職了康吵。然而劈榨，如果你想有一份更好的職業(yè)的話，現(xiàn)在還不能停止腳步涎才，因?yàn)檫€有很長(zhǎng)一段路要走鞋既。

包管理器

在此之前，如果你要用到一些外部庫(kù)比如插件或者任何外部的桌面小部件的話耍铜，你得手工下載JavaScript和CSS文件并且將它們放到項(xiàng)目里面，然后那些庫(kù)或者插件發(fā)布新版本的時(shí)候跌前，你又得下載更新的文件再放到你的項(xiàng)目里面棕兼，這是極其麻煩的事情。包管理器可以干掉這種麻煩抵乓。它們幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面伴挚，這樣你就不用關(guān)心手工復(fù)制庫(kù)或者費(fèi)事地在它們發(fā)布新版時(shí)更新文件的事情了。現(xiàn)在有yarn和npm了灾炭。這兩個(gè)幾乎是一樣的茎芋，都只是實(shí)現(xiàn)，你可以任選一個(gè)蜈出，一旦學(xué)會(huì)了使用其中一個(gè)田弥，另一個(gè)自然也不成問(wèn)題。

現(xiàn)在學(xué)以致用吧

在對(duì)包管理器有了基本了解之后铡原，你就可以去安裝一些外部庫(kù)到你前面制作的一些網(wǎng)頁(yè)上了偷厦，比如安裝一些提示插件商叹，當(dāng)用戶(hù)點(diǎn)擊某個(gè)按鈕時(shí)顯示提示信息，或者創(chuàng)建一個(gè)登錄表單用一些表單驗(yàn)證庫(kù)進(jìn)行表單驗(yàn)證只泼，或者試試不同的選項(xiàng)看看如何安裝不同的版本剖笙。

記得要看看語(yǔ)義版本控制

CSS預(yù)處理器

預(yù)處理器以CSS默認(rèn)不支持的功能豐富了后者∏氤可選項(xiàng)有很多弥咪，包括Sass、Less十绑、Stylus等等酪夷。要我選的話，我會(huì)選擇Sass孽惰。然而晚岭，PostCSS最近的發(fā)展勢(shì)頭也不錯(cuò)，這屬于一個(gè)錦上添花的東西勋功，有點(diǎn)類(lèi)似于CSS的“Babel”坦报。你可以拿來(lái)獨(dú)立使用或者在Sass的基礎(chǔ)上疊加。目前我建議你先學(xué)Sass狂鞋，等后面有時(shí)間了再看看PostCSS片择。

CSS框架

你已經(jīng)不再需要學(xué)習(xí)CSS框架了，然而如果你想學(xué)一個(gè)的話骚揍。我會(huì)推薦在Bootstrap字管、Materialize和Bulma里面選。但如果你要考慮它們的市場(chǎng)需求的話信不，我會(huì)選擇Bootstrap嘲叔。

CSS組織

隨著你的應(yīng)用不斷膨脹，CSS也開(kāi)始變得混亂難以維系抽活。有多種手段可以對(duì)你的CSS進(jìn)行組織硫戈，讓它更好地應(yīng)對(duì)伸縮性，比如OOCSS下硕、SMACSS丁逝、SUITCSS、Atomic以及BEM梭姓。你應(yīng)該了解它們之間的不同霜幼，但是我更偏好BEM。

構(gòu)建工具

工具可以幫助你進(jìn)行JavaScript應(yīng)用的構(gòu)建/打包以及開(kāi)發(fā)誉尖。這一類(lèi)包括了linter（代碼檢查）罪既、task runner（自動(dòng)構(gòu)建）以及bundler（打包工具）。

對(duì)于自動(dòng)構(gòu)建，這個(gè)本來(lái)是是很多選項(xiàng)的萝衩，包括npm腳本回挽、gulp、grun等等猩谊。不過(guò)這一次千劈，既然webpack能夠處理gulp能做的大部分東西，所以只有自動(dòng)構(gòu)建中的npm腳本可以用來(lái)對(duì)webpack能做的任務(wù)進(jìn)行自動(dòng)化牌捷。你不需要學(xué)習(xí)Gulp墙牌，然而到后面如果你有點(diǎn)時(shí)間的話，可以去看看它能否對(duì)你的應(yīng)用有所幫助暗甥。

至于linter喜滨，再次地也有很多選項(xiàng)，其中包括ESLint撤防、JSLint虽风、JSHint以及JSCS等。但是目前主要是ESLint用得多寄月。

對(duì)于模塊打包工具辜膝，不同的選項(xiàng)包括Parcel、Webpack漾肮、Rollup厂抖、Browserify等。如果你必須選一個(gè)克懊，目前你可以閉著眼睛選Webpack就是忱辅。Rollup也很常用但是主要建議用到庫(kù)上面，至于app谭溉，還是以webpack為主墙懂。所以現(xiàn)在你就先學(xué)習(xí)一下webpack吧，后面如果想的話再了解一下Rollup夜只。

練習(xí)時(shí)間——做點(diǎn)什么

恭喜你垒在！你現(xiàn)在可以稱(chēng)自己為75%的現(xiàn)代JavaScript開(kāi)發(fā)者了。現(xiàn)在繼續(xù)用你學(xué)到的東西做點(diǎn)什么出來(lái)扔亥。也許可以做個(gè)庫(kù)將來(lái)用到Sass和JavaScript上。然后用Webpack將Sass轉(zhuǎn)換成CSS谈为，用babel轉(zhuǎn)換成ES6代碼旅挤。一旦你做完了再把它發(fā)布到Github和npm上。

選一個(gè)框架

在舊的路線圖中伞鲫，這個(gè)部分往往是緊挨著基礎(chǔ)部分的粘茄，但是這次我改到放在Sass、構(gòu)建工具和包管理器后面了，因?yàn)樵诳蚣苤心闳紩?huì)用上那些東西柒瓣，如果不具備相應(yīng)知識(shí)的話會(huì)嚇到你的儒搭。

框架也有好些選項(xiàng)。不過(guò)目前比較常用的是React芙贫、Vue和Angular搂鲫。最近對(duì)React.js的需求越來(lái)越旺盛。然而磺平，前面列的這幾個(gè)你隨便選一個(gè)都不會(huì)錯(cuò)魂仍。我個(gè)人會(huì)選React或者Angular。不過(guò)特別說(shuō)明一下拣挪，作為初學(xué)者你也許會(huì)發(fā)現(xiàn)相對(duì)而言Angular會(huì)容易點(diǎn)擦酌，也許是因?yàn)樗С謳缀跻磺辛⒓纯捎玫臇|西，比如支持延遲加載的強(qiáng)大路由器菠劝，支持?jǐn)r截器的HTTP客戶(hù)端赊舶，依賴(lài)注入，組件CSS封裝等而不需要關(guān)心選擇外部庫(kù)的問(wèn)題赶诊。不過(guò)React在社區(qū)方面無(wú)疑更有優(yōu)勢(shì)笼平，而且Facebook一直都在努力改進(jìn)它。你需要確保的是不要因?yàn)槭裁礀|西火就選擇什么甫何，要去google一下出吹，對(duì)比一下，看看哪一個(gè)最適合你辙喂。

這兩個(gè)的比較以及我的個(gè)人體會(huì)我要留到下一篇文章再談了捶牢，不過(guò)既然這篇文章是談學(xué)習(xí)的，我就來(lái)講講如何找到Angular和React的學(xué)習(xí)曲線巍耗。

下圖中的學(xué)習(xí)曲線考慮了你已經(jīng)具備TypeScript的知識(shí)秋麸，而且也懂了一些Rx.JS的基礎(chǔ)。至于這種假設(shè)的原因我會(huì)在將來(lái)的文章中解釋?zhuān)贿^(guò)主要是因?yàn)锳ngular提供的其中的一些即時(shí)可用的標(biāo)準(zhǔn)和關(guān)鍵功能炬太。但這并不意味著React就是壞的灸蟆，它們各自都有自己的地位，我以后會(huì)進(jìn)一步細(xì)談亲族。

你可以看看各自的學(xué)習(xí)曲線炒考，看看哪個(gè)更適合你。

一旦你選擇了自己的框架霎迫，當(dāng)然還有其他一些東西需要你學(xué)的斋枢。比方說(shuō)如果你決定學(xué)React的話，你可能還得學(xué)Redux或者M(jìn)obx去了解狀態(tài)管理知给，具體選學(xué)什么要取決于你要做的應(yīng)用的規(guī)模瓤帚。Mobx適合中小規(guī)模應(yīng)用描姚，Redux更適合大規(guī)模應(yīng)用。甚至你可能都不需要學(xué)戈次，靠React的原生狀態(tài)管理就行了轩勘，如果你的app允許的話。

如果你選擇Angular怯邪，你就得用TypeScript（沒(méi)有它你也能開(kāi)發(fā)出Angular應(yīng)用绊寻，但是我們還是推薦你使用）和Rx.js，這些除了Angular應(yīng)用以外在其他地方也能用得上擎颖。這都是非常強(qiáng)大的庫(kù)榛斯，也適合于函數(shù)編程開(kāi)發(fā)。

如果你選了Vue.js的話搂捧，也許還得學(xué)習(xí)Vuex驮俗，這東西有點(diǎn)類(lèi)似于Redux但是是給Vue用的。

需要注意的是允跑，Redux王凑、Mobx以及Rx.js都不是跟這些框架綁死到一起的，你也可以用到各種JavaScript應(yīng)用里面聋丝。此外索烹，如果你選擇了Angular的話，確保你用的是Angular 2+而不是Angular 1+弱睦。

練習(xí)時(shí)間

現(xiàn)在你已經(jīng)知道了開(kāi)發(fā)現(xiàn)代JavaScript應(yīng)用所需的一切“傩眨現(xiàn)在就用你選擇的框架做點(diǎn)東西出來(lái)吧。你會(huì)在庫(kù)中的idea目錄找到一些點(diǎn)子况木；任選一個(gè)然后開(kāi)始吧垒拢！

做完之后，再去看看如何衡量和改進(jìn)性能火惊。比方說(shuō)可以看看Interactivity Time求类、Page Speed Index以及Lighthouse Score等。

漸進(jìn)式Web應(yīng)用

一旦完成了上述所有步驟屹耐，再來(lái)學(xué)習(xí)一下service worker以及如何制作漸進(jìn)式web應(yīng)用尸疆。

測(cè)試你的應(yīng)用

應(yīng)用測(cè)試有很多工具，各自的用途也不一樣惶岭。我本人經(jīng)常是組合使用Jest寿弱、Mocha、 Karma及Enzyme按灶。然而脖捻，在開(kāi)始選擇工具之前，最好是首先理解有哪些不同的測(cè)試類(lèi)型兆衅，看看所有的選項(xiàng)情況，然后從中再選擇最適合您需求的一個(gè)。

這里有一份很好的概括羡亩，你可以去看看摩疑。

靜態(tài)類(lèi)型檢查器

靜態(tài)類(lèi)型檢查器幫助給JavaScript增加類(lèi)型檢查。你不需要學(xué)習(xí)這些畏铆，不過(guò)這些東西可以賦予你超能力雷袋，而且學(xué)習(xí)起來(lái)也很快，幾個(gè)鐘頭就行了辞居。這方面主要有TypeScript?和?Flow楷怒。我喜歡TypeScript?，不過(guò)你可以?xún)蓚€(gè)都看看瓦灶，再選你喜歡的鸠删。

服務(wù)器渲染

目前為止，你所學(xué)到的技能應(yīng)該足夠你找到一個(gè)“前端工程”的位置了贼陶。但且慢刃泡，你還可以更上一層樓。

你還可以在選定的任何框架內(nèi)再學(xué)學(xué)服務(wù)器端渲染的知識(shí)碉怔。有不同的選項(xiàng)可選烘贴，這要取決于你用什么樣的框架。比方說(shuō)如果你決定用React撮胧，最值得關(guān)注的選項(xiàng)是Next.js?和?After.js桨踪。如果是Angular，你可以選Universal芹啥。對(duì)于Vue.js锻离，我們有?Nuxt.js。

這份路線圖可能還會(huì)有遺漏的地方叁征，但是足以應(yīng)付任何“前端工程”角色之所需纳账。還要記住的是，關(guān)鍵是盡可能多地練習(xí)捺疼。一開(kāi)始你可能會(huì)覺(jué)得很?chē)樔耸璩妫偢杏X(jué)自己沒(méi)有掌握，但這是正常的啤呼，慢慢你就會(huì)覺(jué)得自己變得越來(lái)越好卧秘。還有，陷入困境時(shí)別忘了尋求幫助官扣，你會(huì)驚喜地發(fā)現(xiàn)有多少人愿意幫助你的翅敌，或者至少我愿意。