2017年，你需要學習的JavaScript框架和主題

隨著JavaScript的普及，應運而生了一個非常活躍的集技術，框架和庫為一體的生態圈。由于這個充滿多樣性的和活力的生態圈，因此大家非常困惑。應該學習哪種技術？

你應該投資哪一種技術才能獲得最大的收益？公司現在最需要招的人最需要哪一種技術堆棧？哪一個發展空間最大？

現在最需要了解的是哪個技術？這篇文章高度概括了你所需要了解的內容，同時附上了鏈接，你可以自行了解。

記住，當你正在實驗一些新的代碼，你可以在 Codepen.io 上玩玩，如果你在學習ES6，那么你可以看看如何使用 Babel REPL 編譯。

這個學習的列表很長，但是你不用感到灰心。你可以做到的！如果你在研究這列表，擔憂該如何學習這一切，如何創建現代APP，移步閱讀 “為什么我該感謝JavaScript疲勞” 。然后開始認真學習，動起來。

選擇性學習的一個注意事項

有些內容是 完全可選的 ，也就是說，如果你對我推薦東西此感興趣，或者工作需要，但是你不能感覺是被迫學的。每一個打了星號(*)的（比如 example* ）就是可選的。

沒有打*的，都是必須學的，但是并不是所有的都是一定要學透的，你需要熟悉每一樣內容。你需要了解可選的內容，但是你完全沒有必要精通所有的。

JavaScript & DOM 基礎

在你找到JavaScript的工作之前，你需要掌握JavaScript的基礎：

• 固定方法:標準數據類型的學習方法（特別是 數組 ， 對象 ， 字符串 ， 和 數字 ）。

• 函數 & 純函數 : 可能你覺得已經很好地掌握了函數，但是JavaScript經常事與愿違，你需要學會純函數以掌握函數編程。

• 閉包 : 學習JavaScript函數作用域是如何運行的.

• 回調： 回調是當另一個函數運行結束的時候，發出信號調用函數。可以這么說，“做你自己的事，做完了再叫我”。

• Promises : promise是處理終值的方法。當一個函數返回一個promise，你可以用 .then() 方法添加回調，在promise完成之后運行。終值會傳入你的回調函數中。比如 doSomething().then(value => console.log(value)); 。

• Ajax & 服務器API調用 : 大多數有趣的應用最終都是聯網的。你需要知道如何與API交互。

• ES6 : 最新版本的JavaScript版本是ES2016 (或者是ES7)，但是大多數開發者依然沒有掌握ES6。然而這已經是過去時了。

• 類 (注意： 避免類的繼承 。 請看 類的正確打開方式，然后晚上安心入眠 。)

• 函數編程基礎 : 函數編程通過編譯數學函數創建程序，避免分享狀態和可變數據。我已經好幾年沒有看到一個大量使用函數編程的JavaScript應用作品。現在是時候掌握這個方法了。

• 生成器 和 異步/等待 : 在我看來，寫異步代碼最好的方法是看上去是同步的。這里有一個學習曲線，但是一旦你學會了，那么代碼的閱讀會變得簡單。

• 性能: RAIL —— 從 “網頁響應速度觀察” 和 “WebPageTest.org” 開始。

• 漸進式Web應用程序 (PWAs)：請看 “原生應用是必然的” 和 “為什么原生應用是必然的” 。

• Node & Express : Node讓你在服務器上使用JavaScript，意味著你的用戶能夠在云中存儲數據然后在任何地方都可以使用它。Express是Node具有壓倒性優勢的歡迎程度的框架。

• Lodash : 一個極佳的用于JavaScript的，由函數編程模塊化功能打包而成的模塊化功能包。從 lodash/fp 從引入data-last函數模塊。

工具

• Chrome Dev Tools : DOM inspect 和 JS debugger ： 最好用的調試器，盡管在我看來, Firefox也有一些你會非常想嘗試而且很酷的工具。

• npm : JavaScript的標準語言開源包存儲庫。

• git 和 GitHub : 分布式版本管理——與你的源代碼的每次改變保持一致。

• Babel : 用于編譯ES6，使之可以兼容過時版本瀏覽器。

• Webpack : 最受歡迎的用于標準JavaScript的打包工具，通過簡單的啟動工具包/樣例配置案例，讓東西快速運行。

• Atom , VSCode , 或者 WebStorm + vim : 你需要一個編輯器。 Atom和VSCode是現在最受歡迎的 JS編輯器。Webstorm是另一個解決方案，穩健維護的優質工具。 我推薦學習vim, 或者至少記錄cheat sheet，你遲早會用到, 因為會需要在服務器上編輯文件的, 并且這是最方便的方法——vim在每個Unix兼容的操作系統都有安裝，并且在SSH終端鏈接上運行得很好。

• ESLint: 盡早捕獲語法錯誤和樣式問題。 代碼審查和TDD之后, 第三件你能做的事就是在代碼中減少bug。

• Tern.js: 標準 JavaScript的類型診斷工具, 并且是我最近最愛用于JavaScript的類型相關工具——沒有編譯步驟 或者注釋。我嘗試了所有的此類工具， 發現Tern.js大部分的優點都提供，并且給JS使用靜態類型系統，幾乎沒有成本。

• Yarn *: 和npm類似, 但是他的安裝行為是決定論的, 并且Yarn以比npm快為目標。

• TypeScript*: JavaScript的靜態類型。除非你在學習Angular2，不然這 完全可選 。 如果你沒有在用Angular 2， 在選擇TypeScript之前需要仔細評估一下。我很喜歡它的，并且我敬佩TypeScript團隊的出色工作, 但是你還是需要了解一些權衡。 必讀: “靜態類型，令人震驚的秘密” 以及 “你可能不需要TypeScript” .

• Flow*: JavaScript靜態類型檢查器。 查看 “TypeScript vs Flow” ，以獲得深刻的理解和客觀的對比。記住，我有一些困難需要Flow給我好的IDE反饋，即使使用 Nuclide 。

React

React 是一個由非死book創建的用于構建用戶接口的JavaScript庫。 這是一個基于單向數據流的概念，意味著對于每次周期更新：

1. React將輸入變成組件作為props，然后如果特定的Dom部分的數據發生了改變，那么就會只重新渲染滿足條件的部分。在這個階段更新的數據，直到下一次渲染階段都不能重新觸發渲染。

2. 事件處理階段 — DOM渲染之后，React監聽事件, 將事件委托到DOM樹的根節點上的一個單獨監聽器 （為了更好的性能）。 你可以監聽這些事件并響應更新數據。

3. 數據的任何改變,步驟重新從第一步開始。

這和雙向綁定形成了對比，雙向綁定是DOM的改變會改變數據（比如，Angular 1 和Knockout）。使用雙向綁定，當DOM渲染的時候（在Angular 1中稱之為digest cycle），DOM的改變可能會在渲染完成前重新觸發渲染階段，導致重新載入DOM和重繪——降低了性能。

React沒有規定一個數據管理系統, 但是Flux-based方法是推薦的。 React的單向數據流方法，借鑒了函數編程和不可變的數據結構，改變了我們眼中的前端框架架構。

想了解更多關于React和Flux架構, 請閱讀 “學習編程最好的方法就是開始編程: 從創建App中學習App架構” .

• create-react-app*: 最快了解React的方法。

• react-router*: React的超級簡單的路由（rotuer）。

• Next.js*: 超簡單的全局渲染，和 用于Node和React的路由.

• velocity-react*: React動畫——你可以使用VMD bookmarklet在您的頁面上做交互視覺動態設計。

Redux

Redux 給你的APP提供了事務處理的（transactional）, 確定性（deterministic）狀態管理。在Redux中，我們通過迭代大量的操作對象，以減少當前應用程序狀態。想知道為什么這個很重要, 更多請看 “給更好的Redux架構的10個建議.” 。想要開始使用Redux, 學習Redux的創建者 Dan Abramov 的極佳教程:

• “開始使用Redux”

• “用地道的Redux創建React應用吧！”

Redux對于生產項目是強制學習的，即使你從未用過Redux。

為什么？因為它給了你大量的練習，教會你 純函數 的價值，以及教會你新的思考 reducers 的方式, 這是迭代數據集和從中獲取數據的 通用的函數 。 reducers 如此實用，以至于 Array.prototype.reduce 都被加入了JS規范。

Reducer不僅僅對于組數（array）是重要的，并且學習用Reducer的新方式處理問題，本身就十分有價值。

• redux-saga*: Redux的處理同步方式副作用的庫。使用這個去處理I/O（比如處理網絡請求）。

Angular 2*

Angular 2 是繼來自谷歌的廣受歡迎的Angular之后的框架。因為這太受歡迎了， 這會讓你的簡歷看上去十分高大上——不過我建議還是先學React。

與Angular 2相比，我更愛React ，因為:

1. 這個更簡單, 以及……

2. 這十分受歡迎，并且有許多相關職位 (當然 Angular 2也是的)

因為這個原因，我推薦學習React, 但是我認為 Angular 2 完全是可選的* 。 如果你非常喜歡Angular 2， 那么就換過來. 先學Angular 2，將React列為可選。 每一個對你的簡歷來說都是受益匪淺的。

無論你選哪一個，試著集中精力學習至少半年到一年，之后再去學習另一個。這需要時間，你才能真正熟練掌握。

RxJS*

RxJS 是JavaScript的一些響應式編程工具。可以當作Lodash中的流。響應式編程已經正式登陸JavaScript的舞臺。ECMAScript的Observables提案是階段一的初稿, 而RxJS 5+是Observables權威標準的實現。

盡管我非常愛RxJS, 但是如果你一次性加載所有的包 你的包會膨脹地很厲害 （這里有許多操作）。為了控制包的大小, 不要加載所有的內容。請使用補丁加載：

使用補丁加載能夠將你的包對于rxjs依賴減少大約200k。這真的非常劃算。這會讓你的app變得 更快 。

EDIT: 為什么你不列出 ?

許多人問我，為何不列出他們喜歡的框架。我評判框架的其中一個標準就是“這真的會在工作上用到？”。

是的，有一個框架的人氣投票。但是當你決定耗費時間專注學習一個框架，這是否會脫穎而出是個非常重要的考慮因素。

為了回答這個問題，我看了一些關鍵指標。首先，谷歌趨勢（Google Trends）。如果你想要重現這個谷歌趨勢圖表，記得要選擇主題（topic)，而不是關鍵字（keyword），因為這些詞會過濾掉許多錯誤信息。換句話說，這些是主題趨勢， 而不是關鍵字搜索 。

谷歌趨勢上的JS主題

這個告訴我們在不同項目中的相對興趣。如果人們搜索他們，那么很有可能在探索他們的選擇，或者查找幫助或文檔。這是相對使用水平的一個非常不錯的指標。

另一個數據的有效來源是Indeed.com，這個集合了來自大量不同渠道的職位表數據。職位投遞熱點最近急速下降，但是他們依然收集足夠的數據，來做有效的相對對比，從而告訴你在生產項目中人們真正使用的框架。從職位中：

想要重現這些發現，搜索javascript，然后工作地點保持空白。你就可以清晰看到：

Angular和React占領絕對優勢：沒有可以與之相提并論的。（除了 在網站中具有巨大份額的jQuery——不包括app——因為它用于所有的遺留系統，包括受歡迎的CMS系統，比如WordPress）。

在這些列表中，與React相比，Angular具有絕對優勢。那么為什么我推薦先學React？ 因為：

1. 越來越多的人開始學React，而不是Angular。

2. 在用戶體驗上，React領先Angular。

換句話說， React贏得了思維占有率和用戶滿意度的競爭， 并且如果按照過去幾年的趨勢，只需要按照一半的程度繼續下去，React完全有可能超越Angular作為主要的前端框架。

Angular 2也有可能扭轉戰局,，因此Angular也有可能東山再起，但是到目前為止， React確實打了一場漂亮的仗.

觀察中的框架

• Vue.js * 擁有大量的GitHub的星星和下載量。如果這樣持續下去，它在2017年會表現地非常好，但是我不認為它在未來的一年內會擠走React或者Angular(這兩者都成長地非常快)。你學好了React或者Angular 之后 再學這個吧。

• MobX * 是一個很贊的數據管理庫，它已經是Redux的一個非常受歡迎的替代品。這也成長地很快， 我預期它會在2017年有所表現。我喜歡給所有的app使用Redux，但是在有些特定的情況下，Mobx是個更好的選擇。比如，如果在你的頁面上有成百上千的動態DOM對象， Mobx可能會表現更好。 同樣, 如果你的app工作流都是簡單的操作，并且你不需要事務（Transactional）和可確定狀態（Deterministic State），你完全就不需要使用Redux。MobX絕對是一個更簡單的解決方案。 不過，你學會 Redux之后 再來學這個吧。

 

來自：http://www.zcfy.cc/article/top-javascript-frameworks-amp-topics-to-learn-in-2017-2212.html