2018年，前端開發者需要學習哪些東西？

作者｜Kamran Ahmed

譯者｜奚甜甜

在過去的 5 年裡，我一直在做全棧開發，現擔任 tajawal 的總工程師。因工作需要，我必須身兼多職。這不僅是我的愛好，也是我的工作職責之一。因此我可以密切地關注這一行業的發展趨勢，並確保其他工程師也能緊跟趨勢。在緊跟趨勢這一問題上，我發現無論是初學者，還是那些有著豐富經驗的工程師，都會覺得很困惑。

2017 年，有很多朋友寫郵件來問我，如果他們想要從事這一職業，他們應該學習些什麼。為了幫助他們，我準備了這些圖表，並分享給大家。如果以後有人有相同類型的疑惑，我可以將這些圖表分享給他們，這便是我製作這些圖表的初衷。

最開始，他們都想要我給他們推薦一些合適的工具，但是昨天我決定應該制定一個詳細的學習大綱，讓大家更好地了解應該按照什麼順序去學習。我仍然在研究後端和 DevOps 的內容，但是前端的部分已經準備就緒，請繼續往下閱讀。

在開始介紹這份大綱之前，請讓我先做一份免責聲明：

這份大綱的目的是讓你了解 JavaScript 的發展趨勢，如果你對接下來要學習的東西感到困惑，它能夠給你一份專業的指導，而不會鼓勵你去學習那些炒的比較火熱的東西。記住，並不是當下流行的工具都適合用在所有的項目中。你應該了解哪些工具適合用在哪些項目中。

接下來讓我們開始吧——你可以看到下面這張圖片，它已經很詳盡地畫出了相關內容，當然，在文中我還是會逐一解釋大綱中的每一個步驟。

首先你要做的是學習一些基礎的知識，包括 HTML、CSS 的基礎知識，並熟悉 JavaScript 的語法。

學習基本的 HTML

HTML 用來組織網頁的結構，就像人類的骨架一樣。首先你要做的是學習它的語法以及與它相關的所有內容。重點要學習的內容如下：

學習基礎知識及如何編寫語義化的 HTML。

了解頁面的各個部分，並且學會如何正確地構建 DOM。

任務——學習完 HTML 的基礎知識後，請至少動手編寫 5 個 HTML 頁面。我的建議是可以選擇任何網站的頁面，例如可以嘗試去編寫任何一個 Github 配置頁面或者 Twitter 的登錄頁面，而且要確保結構是正確的。雖然完成的頁面看起來很醜，但是暫時還不用著急，現階段的重點是學會編寫正確的結構。

學習一些 CSS 知識

既然我們已經學會了如何編寫頁面的結構，現在我們可以開始給頁面添加一些修飾，讓它看起來更漂亮。CSS——層疊樣式表就是用來給你的 HTML 頁面添加效果的。

首先你需要學習 CSS 的語法以及常見的屬性。

了解盒子模型以及如何使用 Grid 和 Flexbox。

完成以上操作後，還需要學會如何使用媒體查詢來編寫響應式網頁。

在掌握了 CSS 的基礎知識以後，你可以在上一階段完成的 HTML 頁面中添加 CSS 樣式。例如，如果你編寫了一個 Github 配置頁面，就可以添加 CSS 代碼讓你編寫的頁面看起來就跟真實的 Github 頁面一樣。按照這個步驟給上一個階段編寫的 5 個 HTML 頁面都加上 CSS 樣式。

學習 JavaScript 基礎知識

JavaScript 可以讓你的 HTML 頁面更具有交互性。當我們不用載入整個頁面，而只載入部分內容，這時出現的滑塊，彈窗和吐司消息等都是由 JavaScript 完成的。在這一個階段，你將學習 JavaScript 的基礎知識並會開啟你真正的旅程：

學習 JavaScript 語言的語法和基礎結構。

學習如何通過 JavaScript 來操作 DOM 對象。例如，通過 JavaScript 刪除頁面中的某些元素、添加一些元素、操作類名、應用 CSS 樣式等等。

學習並理解作用域、閉包、變數提升和事件冒泡等。

學習如何使用 XHR 或者 Ajax 發送 HTTP 請求。Ajax 可以讓你在不重新載入頁面的情況下執行某些頁面操作。

完成上面的內容後，可以去學習 ES6+ 中所有的新功能。ES6 是 JavaScript 的一個版本，它提供了很多有趣的更新。例如類、多種聲明變數的方式、新的數組方法、字元串連接等。但是一些舊版的瀏覽器還不支持 ES6，你可以在網上找一些文章，它們會教你如何使用 Babel 將 ES6 轉換為老版的 JavaScript。不用擔心不了解 Babel，你只要理解這些概念，並在支持 ES6 語言的瀏覽器中實踐它即可。稍後我們將重新討論 ES6。

現在你應該會覺得 JavaScript 更貼近生活了。如果你是一個人在堅持學這些內容，給自己一個贊！這些是你剛剛學到的最重要的東西。

我應該學習 JQuery 嗎？

曾有一度，幾乎所有人都為 jQuery 而瘋狂，因為它太好用了。JQuery 是一個功能強大的庫，它封裝了 JavaScript 常用的功能代碼，並實現了高兼容性，使用它你可以更加方便地操作頁面。但是那些輝煌已經過去了，對於很多新項目來說，它並沒有太多用處，但仍然有人在使用它。你不必學習它，但是它非常簡單，如果你想了解一下，也是非常好的。

實踐時間

關於這個部分我說了很多，但是在這裡我還是要再說一次，如果沒有實際操作，你什麼都學不會。可能有時候你會覺得你理解了那些內容，但是如果沒有實際操作的話，你很快就會忘掉它們。所以當你遵循這份大綱的時候，請儘可能多做一些練習。

接下來你可以做一些響應式網站並使用 JavaScript 添加交互功能。你可以照著編寫任何你感興趣的網頁，但要儘可能地利用你學過的內容。

一旦你完成了一些網頁的創建，就可以開始嘗試做真正的項目了。你可以去 Github 上搜索一些開源項目。以下是查找項目的一些建議：

增強 UI，嘗試編寫一些響應式網站或改善 UI 設計；

查看任何你可以解決的問題；

重構任何你認為可以改進的代碼。

關於 Github 的部分，你可能需要去學習一些 Git 知識，但這個不是必需的。在你開始使用 Github 之後，你會打開新世界的大門——只要你提問，就會有很多人願意幫助你，你會因此感到詫異。

現在你已經掌握了基本的知識。如果你認真學的話，現在已經可以去找一份相關的兼職或者全職的工作了。但是，革命尚未成功，如果想擁有更好的工作，同志仍需努力。

包管理器

在此之前，如果你需要使用一些外部的庫或者任何插件，你都需要手動下載相應的 JavaScript 和 CSS 文件，然後把它們放進項目中。但是如果這些庫或者插件發布新版本的話，你也得在項目中做出相應的更新，這樣管理項目是非常麻煩的。包管理器幫助你解決了這個麻煩，它們可以幫助你自動地將外部庫和插件引入到項目中，這樣你就不必專門手動更新外部文件了。包管理器有 yarn 和 npm，兩者幾乎相同，都只有安裝的功能。你可以選擇其中的任何一個，一旦學會使用其中的一個，另一個也就會了。

學以致用

當你對包管理器有了基本的了解之後，就可以在你製作的網頁中引入一些外部庫。例如你可以安裝一些 Toast 插件，當用戶點擊按鈕的時候，用 Toast 插件向他們顯示信息；或者你可以創建一個登陸表單，利用一些表單驗證庫來進行表單驗證。可以學習如何使用不同的庫，並了解如何安裝不同的版本。

CSS 預處理器

預處理器讓 CSS 的功能更加豐富。CSS 預處理器有 Sass、Less、 Stylus 等。如果讓我選擇的話，我最喜歡 Sass。最近比較流行的 CSS 預處理器是 PostCSS, 它的作用相當於 CSS 的解析器，了解它的使用也是很不錯的。它可以單獨使用，也可以配合 Sass 使用。我的建議是先學會 Sass，如果你有時間的話可以再研究 PostCSS.

CSS 框架

你不需要再學習 CSS 框架，當然如果你想學習的話，也有很多選擇。我最喜歡的 CSS 框架是 Bootstrap、Materialize 和 Bulma。但是結合現在的市場需求來說，我會選擇 Bootstrap。

CSS 文件管理

隨著項目的複雜程度增加，CSS 也會開始變得混亂而無法維護。我們也有很多方式可以更好地構建 CSS，以實現可伸縮性。例如 OOCSS、SMACSS、SUITCSS、Atomic 和 BEM。你可以了解下它們之間的不同，我個人更喜歡 BEM。

構建工具

構建工具可以幫助你構建、打包和開發 JavaScript 應用程序。這裡包括校驗工具、自動化構建工具及打包工具。

自動化構建工具有 npm、gulp、grunt 等。但是現在 Webpack 已經能夠實現 Gulp 的很多功能，所以，現在通常都只使用 npm 來配合 webpack 完成任務自動化。你不必學習 Gulp，當然以後如果你有時間的話，也可以了解一下，看看它是否適用於你的項目。

校驗工具有 ESLint、JSLint、JSHint 和 JSCS，但是目前大部分人都使用 ESLint。

打包工具有 Parcel、Webpack、Rollup、Browserify 等。如果必須選擇一個的話，請毫不猶豫地選擇 Webpack。Rollup 也很常用，但是建議將它用在庫裡面。在開發 app 的時候，請使用 Webpack。所以，現在請開始自學 Webpack，如果你願意的話，了解一下 Rollup 也可以。

實踐時間

恭喜你，你現在幾乎已經可以自稱為 JavaScript 開發者了！請繼續用你學過的知識來開發一些東西吧。你可以創建一些 Sass 和 JavaScript 庫。然後使用 Webpack 將 Sass 轉換為 CSS，然後用 Babel 轉換 ES6 代碼。完成後，你可以把代碼上傳到 Github 和 npm 上面。

選擇一個框架

我之前將框架這一部分放在基礎知識的後面，但是現在我把它放到了 Sass、構建工具和包管理器的後面。因為框架要用到以上所有的知識，如果不先了解它們的話，可能根本看不懂框架。

框架也有很多選擇，最近流行的是 React、Vue 和 Angular，而且 React 越來越火。但是，你選擇它們中的任何一個都可以。對我個人來說，我更喜歡 React 和 Angular。作為初學者，你可能會發現，相對來說，Angular 會比較容易學，可能是因為它幾乎支持所有常用的功能。例如支持懶載入的路由器、支持攔截器的 HTTP 客戶端、依賴注入、CSS 封裝組件等等。有了它，你可以不用再引入其他庫了。但是從社區的討論來看，React 更具優勢，Facebook 的團隊也一直在努力改進它。不要因為更流行而跟風，多多了解比較，你肯定會發現哪種框架更適合你。

我會在另一篇文章里給出我的對比分析和個人經驗。這篇文章的重點是學習以及如何找到 Angular 和 React 的學習曲線。

下面所給出的學習曲線是有一定前提的，要求對 TypeScript 和 Rx.JS 有基本的了解。圖表中的曲線並不意味著 React 不好，它們都有自己的特點，以後的文章中會具體介紹。

同樣，需要你都做了解，並找到合適自己的。

選擇好框架以後，你就需要學習一些關於該框架的知識。假如你選擇了 React，你需要學習狀態管理要用到的 Redux 或者 Mobx，學習哪一個取決於你的項目大小。Mobx 適用於中小型應用程序，Redux 更適合大型應用程序。如果項目允許的話，你可能並不需要使用它們，就用 React 本地的狀態管理就可以了。

如果你選擇了 Angular，你需要學習 TypeScript(開發 Angular 項目的時候也可以不使用它，但通常建議使用) 和 Rx.js，就算不用於 Angular 項目，也可以學習一下 Rx.js。因為它是一個非常強大的庫，也可以用來進行函數式編程。

如果你選擇了 Vue.js，需要學習 Vuex，它與 Redux 類似，但是是用於 Vue 的。

需要注意的是，Redux、Mobx 和 Rx.js 不是僅用於這些框架的，你也可以在普通的 JavaScript 項目中使用它們。另外，如果你選擇了 Angular，請學習 Angular2+，而不要學習 Angular1+。

實踐時間

現在你幾乎了解了構建一個現代的 JavaScript 項目所需的一切知識。繼續使用你選擇的框架增加一些功能吧。你可以在 ideas 目錄中獲取一些靈感，隨便選擇一項就可以開始了！

完成這些後，可以開始了解如何衡量並提高性能。例如可以關注下交互時間，頁面載入速度，測試分數等。

當你完成了上面所有的步驟，請了解下後端人員是如何使 web 應用程序運行起來的。

測試你的應用程序

不同的工具作用不同。我常用的工具包括 Jest, Mocha, Karma 和 Enzyme。如果你想選擇一個新的工具，最好先了解不同的測試類型，查看所有的可用選項並使用最適合你需求的那一個。

靜態類型檢查器

靜態類型檢查器可以幫助你將類型檢查添加到 JavaScript 中。你不一定需要學習這些東西，但是如果你能花幾小時學會並保持使用它們的話，它們會讓你如有神助。主要的靜態類型檢查器有 TypeScript 和 Flow。我更喜歡 TypeScript。你們選擇自己喜歡的即可。

服務端渲染

前面所掌握的技能足以讓你獲得任何「前端工程師」的職位，但是不要停留在這一步。

了解服務端是怎樣渲染框架的。框架不同，選擇也不同。如果你使用的是 React，特別要注意 Next.js 和 After.js，Angular 是通用的，Vue.JS 的是 Nuxt.js。

以上大綱中可能還有不足，但它基本上包含了「前端工程師」所需的全部知識。其實最主要的還是要儘可能的多練習。開始的時候，你可能會覺得非常困難，感覺抓不住任何關鍵點。但是這種感覺是正常的，隨著經驗的增加，你會越來越熟練。如果你遇到問題，記得尋求幫助，你肯定會為有很多人願意幫助你而感到驚訝。

英文原文

https://medium.com/tech-tajawal/modern-frontend-developer-in-2018-4c2072fa2b9c

前端之巔

「前端之巔」是 InfoQ 旗下關注大前端技術的垂直社群。緊跟時代潮流，共享一線技術，歡迎關注。

活動推薦

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