前端開發路線圖——從小白到前端工程師

編者按：不少人都想學編程。可是苦於沒有具體的步驟和指導。好比想找份前端開發的工做，殊不知道應該先學習什麼再學習什麼，也不知道該選擇什麼樣的工具。由於常常被人問到相似的問題，全棧開發者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