2018 年前端開發修鍊手冊

在我們開始這篇文章之前，先給你一個關於我和這個路線圖的想法；在過去的5年里，我一直在做全棧開發，現在在 tajawal 擔任首席工程師，在那裡我不得不戴上不同的帽子。這不僅是我的愛好，也是我的工作職責之一，我要密切關注趨勢，並讓其它開發者保持接受良好的培訓。我看到初學者（和類似的經驗的人）為了跟上時代有很多困惑。

在2017年，我有很多朋友來發郵件問我，如果他們想要從事這個職業，他們應該學習什麼。因此為了避免麻煩和幫助其他人，我決定一次性為所有人準備這些圖表，因此無論誰來問我的時候，我都會將這些圖表的連接分享給他們。這就是這些圖表的由來。

開發者路線圖 GitHub ——2018年成為 web 開發者的路線圖

http://github.com/kamranahmedse/developer-roadmap

起初他們只是平鋪對工具的推薦，但是我昨天決定給他們更加結構化一些，增加細節，而且以步驟的格式來設計他們，以便讓你更好的了解選擇什麼以及以什麼順序來選擇。

我仍然在做後端和 DevOps 部分，但是前端部分已經準備好了，你可以在下面看一下。

在我解釋路線圖中不同的部分之前，讓我花點時間提出這個免責聲明：

這個路線圖的初衷是給你關於藍圖的想法，並且如果你對之後學什麼有所困惑，來做出一些引導，並不是鼓勵你去學什麼東西時髦或者趨勢。你應該 理解為什麼一個工具在某些情況下比其他的更加適合，同時記住時髦和趨勢從不意味著是最適合這個工作的。

讓我們開始吧——你可以在下面的圖片里找到詳情，當然本文中，我會詳細的解釋圖中的每個步驟。

你要做的第一件事是學習基礎知識，包括學習 HTML、CSS 的基礎知識以及熟悉 JavaScript 語法。

學習 HTML 基礎

HTML 讓你的頁面變得有結構。它就像人類的骨架，讓你保持站立。第一件事情就是學習它的語法及其它提供的每一樣東西。那麼現在，你應該把焦點集中在下面這些點上：

學習基礎並學會如何編寫語義化的 HTML

了解如何將頁面劃分為多個部分以及如何正確地構建 DOM

任務?—：一旦學會了 HTML 的基礎知識，就要至少製作5個 HTML 頁面。 我推薦你選擇網站上的頁面，例如：查看任何 github 上的個人資料頁面或 twitter 的登錄頁面。 並專註於正確構建內容。 儘管目前看起來是醜陋的，但先不要擔心這一點，把主要的精力放在頁面的結構上。

學一些 CSS

現在我們已經學會了如何為頁面準備骨架，是時候在上面添加一些皮膚並讓它看起來更漂亮了。CSS —— 用來美化你 HTML 頁面的級聯樣式表。

你首先要做的是學習語法並熟悉常見的 CSS 屬性。

了解 box 模型以及如何使用 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 的轉換器。但是現在不用擔心 Babel ，只要了解這個概念，在實踐的時候在任何支持 ES6 的最新的瀏覽器使用它就可以。我們之後會重提 ES6 的。

你現在應該感覺這些東西越來越真實了。如果你緊跟步伐，你值得表揚。這些是你剛學到的最重要的東西。

我應該學習 jQuery 嗎？

有一段時間每個人都熱衷於 jQuery ，而且理由充分；它是一個很強大的庫，為 JavaScript 的上層提供了一個封裝，讓你可以用瀏覽器兼容的方式執行任何操作。但是那段時間已經過去了，在新的項目中現在用它沒有那麼多了，但是還有一些人在用。你不用必須學習它，但是它真的很簡單，而且如果你想去看看，它會對你有好處。

實踐時間

我說了很多次，而且在這我再次提起了它，如果沒有實踐，你什麼也學不會。短時間內你可能感覺你都明白了，但是如果你不實踐，就會忘記。確定你儘可能多的實踐，雖然你跟著路線圖。

繼續使用 JavaScript 為一些響應式網站添加交互。你可以複製當前你能在網上找到有趣的 web 網頁，但是記住要把至今所有學到的東西都用上。

一旦已創建了一些網站，該進入到真實的業務中了。去 github.com 搜索一些項目，然後在一些開源項目中開啟一些拉取請求。以下列出一些建議：

加強 UI ，編寫響應式頁面 demo 或者改善設計

查看任何你可以解決的開放話題

重構任何你覺得可以改進的代碼

鏈接這個庫，告訴他們你正在學習，然後從你的 PR 得到反饋，以及你可以怎樣提升：

http://github.com/kamranahmedse/developer-roadmap

雖然我會推薦這個 Github 部分，但是它需要一些 git 的知識，它也是可選的。你不用必須去做這些，但是如果你做了，你會發現真的很有好處——你會覺得驚訝，如果你提問的話有多少人願意幫助你。你可以在 git 上找到很多免費資源，試試這個：

https://www.codeschool.com/courses/try-git

表揚一下自己

你已經掌握了基礎知識。如果你把每個東西都學好了，你可以成為自由職業者或者找個全職工作。然而，不要止步於此，如果你想有一個更好的職業，還有很長的路要走。

包管理

這之前，如果你要用一些外部庫，例如插件或者外部部件，你必須手動下載 JavaScript 和 CSS 文件，並將它們放入項目，然後當那些庫或者插件發布新的版本，你必須下載新的文件，再次將他們放入項目，這非常麻煩。包管理可以讓你的工作流避免這個麻煩。他們幫助你將外部庫和插件引入到項目，因此你不用擔心手動複製庫，或者當他們發布新版本的時候遇到更新的麻煩。現在可以使用 yarn 和 npm 。他們兩個幾乎相同，除了實現，你可以選擇他們中的任何一個，一旦你學會了其中一個的用法，另一個也是差不多相同的。

我們來利用學到的知識

在你對包管理有了基本的了解，可以在之前創建的 web 頁面中安裝一些外部庫，例如安裝那些當用戶點擊按鈕的時候彈出提示插件來展示提示信息，或者創建一個登陸表單，然後使用一些表單驗證庫來做表單驗證，並使用不同選項，看如何安裝不同的版本。

在閱讀本文時，請務必閱讀語義版本：

https://semver.org/

CSS 預處理器

預處理器使用 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 應用。這類包含 linters，任務處理和打包。

對於任務處理來說，頭許多不同的選擇，包括 npm 腳本，gulp， grunt 等等。但是現在，由於 webpack 讓你處理以前使用 gulp 處理的大部分東西，所以任務處理現在只有 npm 腳本，你可以用他們來自動完成 webpack 可以完成的任務。你不需要學習 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，構建工具和包管理器之後，因為您將在框架中使用所有這些並且沒有掌握這些知識，這對您來說可能看起來很可怕。

在框架中，有幾種選擇。但是這些天常用的是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+。

是時候練習了

現在您你已經了解了構建現代 JavaScript 應用程序所需的一切。用你選擇的框架來做一些應用。你可以在存儲庫的 ideas 目錄中找到一些想法;選擇一個，然後開始！

一旦你完成製作，去閱讀有關如何測量和提高性能的信息。例如，看看交互性時間，頁面速度指數，和 Lighthouse 評分等。

漸進式 WebApps

一旦完成了上面列出的所有步驟，就可以了解服務人員以及如何開發漸進式 web 應用。

測試你的應用程序

有很多不同的工具用於不同的目的。我自己經常使用 Jest，Mocha，Karma 和 Enzyme 的組合。但是，在你跳轉並選擇任何測試類型之前，最好首先了解不同的測試類型，查看所有可用的選項並使用最適合你需要的選項。

這是一個很好的入門總結：2018 年 JavaScript 測試概述：

https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

靜態類型檢查

靜態類型檢查器幫助你向 JavaScript 添加類型檢查。你不需要學習這些，但它們確實給了你超能力，你可以在幾個小時內學會，然後你可以繼續。主要有 TypeScript 和 Flow 。我喜歡 TypeScript ，我會選擇它，但你可以自由地檢查並選擇你喜歡的。

伺服器端渲染

到目前為止，你所掌握的技能足以讓你勝任任何「前沿工程」角色。但不要停在這裡！

了解那些伺服器端渲染適合你選擇的框架。根據你使用的框架，有不同的選項。例如，如果你決定使用 React ，最值得注意的選項是 Next.js 和 After.js 。對於 Angular 而言，有 Universal 。對 Vue.js 來說有 Nuxt.js 。

路線圖中可能還缺少一些東西，但已經包含所有「前端工程」角色所需要的。記住，關鍵是要儘可能多地練習。一開始你會覺得很可怕，你會覺得自己沒有抓住點，但這是正常的，隨著時間的推移，你會覺得自己越來越好。如果你被困住了，不要忘記尋求幫助，你會驚訝於人們願意幫助你。

關於作者：Kamran Ahmed，Tajawal 的首席工程師。具有創業精神和做事技巧的技術人員。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！