本文轉(zhuǎn)載自：眾成翻譯
譯者：cherryvenus
鏈接：http://www.zcfy.cc/article/2212
原文：https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.wjdqwi2hr
隨著JavaScript的普及，應(yīng)運(yùn)而生了一個(gè)非常活躍的集技術(shù)，框架和庫(kù)為一體的生態(tài)圈。由于這個(gè)充滿多樣性的和活力的生態(tài)圈，因此大家非常困惑。應(yīng)該學(xué)習(xí)哪種技術(shù)？
你應(yīng)該投資哪一種技術(shù)才能獲得最大的收益？公司現(xiàn)在最需要招的人最需要哪一種技術(shù)堆棧？哪一個(gè)發(fā)展空間最大？
現(xiàn)在最需要了解的是哪個(gè)技術(shù)？這篇文章高度概括了你所需要了解的內(nèi)容，同時(shí)附上了鏈接，你可以自行了解。
記住，當(dāng)你正在實(shí)驗(yàn)一些新的代碼，你可以在Codepen.io上玩玩，如果你在學(xué)習(xí)ES6，那么你可以看看如何使用Babel REPL編譯。
這個(gè)學(xué)習(xí)的列表很長(zhǎng)，但是你不用感到灰心。你可以做到的！如果你在研究這列表，擔(dān)憂該如何學(xué)習(xí)這一切，如何創(chuàng)建現(xiàn)代APP，移步閱讀“為什么我該感謝JavaScript疲勞”。然后開始認(rèn)真學(xué)習(xí)，動(dòng)起來。
選擇性學(xué)習(xí)的一個(gè)注意事項(xiàng)
有些內(nèi)容是完全可選的，也就是說，如果你對(duì)我推薦東西此感興趣，或者工作需要，但是你不能感覺是被迫學(xué)的。每一個(gè)打了星號(hào)(*)的（比如 example* ）就是可選的。
沒有打*的，都是必須學(xué)的，但是并不是所有的都是一定要學(xué)透的，你需要熟悉每一樣內(nèi)容。你需要了解可選的內(nèi)容，但是你完全沒有必要精通所有的。
JavaScript & DOM 基礎(chǔ)
在你找到JavaScript的工作之前，你需要掌握J(rèn)avaScript的基礎(chǔ)：
固定方法: 標(biāo)準(zhǔn)數(shù)據(jù)類型的學(xué)習(xí)方法（特別是 數(shù)組， 對(duì)象， 字符串， 和數(shù)字）。
函數(shù) & 純函數(shù): 可能你覺得已經(jīng)很好地掌握了函數(shù)，但是JavaScript經(jīng)常事與愿違，你需要學(xué)會(huì)純函數(shù)以掌握函數(shù)編程。
閉包: 學(xué)習(xí)JavaScript函數(shù)作用域是如何運(yùn)行的.
回調(diào)： 回調(diào)是當(dāng)另一個(gè)函數(shù)運(yùn)行結(jié)束的時(shí)候，發(fā)出信號(hào)調(diào)用函數(shù)。可以這么說，“做你自己的事，做完了再叫我”。
Promises: promise是處理終值的方法。當(dāng)一個(gè)函數(shù)返回一個(gè)promise，你可以用
.then()方法添加回調(diào)，在promise完成之后運(yùn)行。終值會(huì)傳入你的回調(diào)函數(shù)中。比如doSomething().then(value => console.log(value));。
Ajax & 服務(wù)器API調(diào)用: 大多數(shù)有趣的應(yīng)用最終都是聯(lián)網(wǎng)的。你需要知道如何與API交互。
ES6: 最新版本的JavaScript版本是ES2016 (或者是ES7)，但是大多數(shù)開發(fā)者依然沒有掌握ES6。然而這已經(jīng)是過去時(shí)了。
類 (注意：避免類的繼承。 請(qǐng)看類的正確打開方式，然后晚上安心入眠。)
函數(shù)編程基礎(chǔ): 函數(shù)編程通過編譯數(shù)學(xué)函數(shù)創(chuàng)建程序，避免分享狀態(tài)和可變數(shù)據(jù)。我已經(jīng)好幾年沒有看到一個(gè)大量使用函數(shù)編程的JavaScript應(yīng)用作品。現(xiàn)在是時(shí)候掌握這個(gè)方法了。
生成器 和 異步/等待: 在我看來，寫異步代碼最好的方法是看上去是同步的。這里有一個(gè)學(xué)習(xí)曲線，但是一旦你學(xué)會(huì)了，那么代碼的閱讀會(huì)變得簡(jiǎn)單。
性能: RAIL——從 “網(wǎng)頁響應(yīng)速度觀察”和 “WebPageTest.org”開始。
漸進(jìn)式Web應(yīng)用程序 (PWAs)： 請(qǐng)看“原生應(yīng)用是必然的”和“為什么原生應(yīng)用是必然的”。
Node & Express: Node讓你在服務(wù)器上使用JavaScript，意味著你的用戶能夠在云中存儲(chǔ)數(shù)據(jù)然后在任何地方都可以使用它。Express是Node具有壓倒性優(yōu)勢(shì)的歡迎程度的框架。
Lodash: 一個(gè)極佳的用于JavaScript的，由函數(shù)編程模塊化功能打包而成的模塊化功能包。從
lodash/fp從引入data-last函數(shù)模塊。
工具
Chrome Dev Tools: DOM inspect和JS debugger： 最好用的調(diào)試器，盡管在我看來, Firefox也有一些你會(huì)非常想嘗試而且很酷的工具。
npm: JavaScript的標(biāo)準(zhǔn)語言開源包存儲(chǔ)庫(kù)。
Babel: 用于編譯ES6，使之可以兼容過時(shí)版本瀏覽器。
Webpack:
最受歡迎的用于標(biāo)準(zhǔn)JavaScript的打包工具，通過簡(jiǎn)單的啟動(dòng)工具包/樣例配置案例，讓東西快速運(yùn)行。Atom, VSCode, 或者 WebStorm + vim: 你需要一個(gè)編輯器。 Atom和VSCode是現(xiàn)在最受歡迎的 JS編輯器。Webstorm是另一個(gè)解決方案，穩(wěn)健維護(hù)的優(yōu)質(zhì)工具。 我推薦學(xué)習(xí)vim, 或者至少記錄cheat sheet，你遲早會(huì)用到, 因?yàn)闀?huì)需要在服務(wù)器上編輯文件的, 并且這是最方便的方法——vim在每個(gè)Unix兼容的操作系統(tǒng)都有安裝，并且在SSH終端鏈接上運(yùn)行得很好。
ESLint: 盡早捕獲語法錯(cuò)誤和樣式問題。 代碼審查和TDD之后, 第三件你能做的事就是在代碼中減少bug。
Tern.js: 標(biāo)準(zhǔn) JavaScript的類型診斷工具, 并且是我最近最愛用于JavaScript的類型相關(guān)工具——沒有編譯步驟 或者注釋。我嘗試了所有的此類工具， 發(fā)現(xiàn)Tern.js大部分的優(yōu)點(diǎn)都提供，并且給JS使用靜態(tài)類型系統(tǒng)，幾乎沒有成本。
Yarn*: 和npm類似, 但是他的安裝行為是決定論的, 并且Yarn以比npm快為目標(biāo)。
TypeScript:* JavaScript的靜態(tài)類型。除非你在學(xué)習(xí)Angular2，不然這完全可選。 如果你沒有在用Angular 2， 在選擇TypeScript之前需要仔細(xì)評(píng)估一下。我很喜歡它的，并且我敬佩TypeScript團(tuán)隊(duì)的出色工作, 但是你還是需要了解一些權(quán)衡。必讀: “靜態(tài)類型，令人震驚的秘密”以及“你可能不需要TypeScript”.
Flow:* JavaScript靜態(tài)類型檢查器。 查看“TypeScript vs Flow”，以獲得深刻的理解和客觀的對(duì)比。記住，我有一些困難需要Flow給我好的IDE反饋，即使使用Nuclide。
React
React 是一個(gè)由Facebook創(chuàng)建的用于構(gòu)建用戶接口的JavaScript庫(kù)。 這是一個(gè)基于單向數(shù)據(jù)流的概念，意味著對(duì)于每次周期更新：
React將輸入變成組件作為props，然后如果特定的Dom部分的數(shù)據(jù)發(fā)生了改變，那么就會(huì)只重新渲染滿足條件的部分。在這個(gè)階段更新的數(shù)據(jù)，直到下一次渲染階段都不能重新觸發(fā)渲染。
事件處理階段 — DOM渲染之后，React監(jiān)聽事件, 將事件委托到DOM樹的根節(jié)點(diǎn)上的一個(gè)單獨(dú)監(jiān)聽器 （為了更好的性能）。 你可以監(jiān)聽這些事件并響應(yīng)更新數(shù)據(jù)。
數(shù)據(jù)的任何改變,步驟重新從第一步開始。
這和雙向綁定形成了對(duì)比，雙向綁定是DOM的改變會(huì)改變數(shù)據(jù)（比如，Angular 1 和Knockout）。使用雙向綁定，當(dāng)DOM渲染的時(shí)候（在Angular 1中稱之為digest cycle），DOM的改變可能會(huì)在渲染完成前重新觸發(fā)渲染階段，導(dǎo)致重新載入DOM和重繪——降低了性能。
React沒有規(guī)定一個(gè)數(shù)據(jù)管理系統(tǒng), 但是Flux-based方法是推薦的。 React的單向數(shù)據(jù)流方法，借鑒了函數(shù)編程和不可變的數(shù)據(jù)結(jié)構(gòu)，改變了我們眼中的前端框架架構(gòu)。
想了解更多關(guān)于React和Flux架構(gòu), 請(qǐng)閱讀 “學(xué)習(xí)編程最好的方法就是開始編程: 從創(chuàng)建App中學(xué)習(xí)App架構(gòu)”.
create-react-app:* 最快了解React的方法。
react-router:* React的超級(jí)簡(jiǎn)單的路由（rotuer）。
Next.js:* 超簡(jiǎn)單的全局渲染，和 用于Node和React的路由.
velocity-react:* React動(dòng)畫——你可以使用VMD bookmarklet在您的頁面上做交互視覺動(dòng)態(tài)設(shè)計(jì)。
Redux
Redux給你的APP提供了事務(wù)處理的（transactional）, 確定性（deterministic）狀態(tài)管理。在Redux中，我們通過迭代大量的操作對(duì)象，以減少當(dāng)前應(yīng)用程序狀態(tài)。想知道為什么這個(gè)很重要, 更多請(qǐng)看“給更好的Redux架構(gòu)的10個(gè)建議.”。想要開始使用Redux, 學(xué)習(xí)Redux的創(chuàng)建者Dan Abramov的極佳教程:
Redux對(duì)于生產(chǎn)項(xiàng)目是強(qiáng)制學(xué)習(xí)的，即使你從未用過Redux。
為什么？因?yàn)樗o了你大量的練習(xí)，教會(huì)你純函數(shù)的價(jià)值，以及教會(huì)你新的思考reducers的方式, 這是迭代數(shù)據(jù)集和從中獲取數(shù)據(jù)的通用的函數(shù)。 reducers 如此實(shí)用，以至于Array.prototype.reduce都被加入了JS規(guī)范。
Reducer不僅僅對(duì)于組數(shù)（array）是重要的，并且學(xué)習(xí)用Reducer的新方式處理問題，本身就十分有價(jià)值。
- redux-saga:*Redux的處理同步方式副作用的庫(kù)。使用這個(gè)去處理I/O（比如處理網(wǎng)絡(luò)請(qǐng)求）。
Angular 2*
Angular 2是繼來自谷歌的廣受歡迎的Angular之后的框架。因?yàn)檫@太受歡迎了， 這會(huì)讓你的簡(jiǎn)歷看上去十分高大上——不過我建議還是先學(xué)React。
與Angular 2相比，我更愛React，因?yàn)?
這個(gè)更簡(jiǎn)單, 以及……
這十分受歡迎，并且有許多相關(guān)職位 (當(dāng)然 Angular 2也是的)
因?yàn)檫@個(gè)原因，我推薦學(xué)習(xí)React, 但是我認(rèn)為 Angular 2 完全是可選的*。 如果你非常喜歡Angular 2， 那么就換過來. 先學(xué)Angular 2，將React列為可選。 每一個(gè)對(duì)你的簡(jiǎn)歷來說都是受益匪淺的。
無論你選哪一個(gè)，試著集中精力學(xué)習(xí)至少半年到一年，之后再去學(xué)習(xí)另一個(gè)。這需要時(shí)間，你才能真正熟練掌握。
RxJS*
RxJS是JavaScript的一些響應(yīng)式編程工具。可以當(dāng)作Lodash中的流。響應(yīng)式編程已經(jīng)正式登陸JavaScript的舞臺(tái)。ECMAScript的Observables提案是階段一的初稿, 而RxJS 5+是Observables權(quán)威標(biāo)準(zhǔn)的實(shí)現(xiàn)。
盡管我非常愛RxJS, 但是如果你一次性加載所有的包 你的包會(huì)膨脹地很厲害 （這里有許多操作）。為了控制包的大小, 不要加載所有的內(nèi)容。請(qǐng)使用補(bǔ)丁加載：
使用補(bǔ)丁加載能夠?qū)⒛愕陌鼘?duì)于rxjs依賴減少大約200k。這真的非常劃算。這會(huì)讓你的app變得更快。
EDIT: 為什么你不列出 ?
許多人問我，為何不列出他們喜歡的框架。我評(píng)判框架的其中一個(gè)標(biāo)準(zhǔn)就是“這真的會(huì)在工作上用到？”。
是的，有一個(gè)框架的人氣投票。但是當(dāng)你決定耗費(fèi)時(shí)間專注學(xué)習(xí)一個(gè)框架，這是否會(huì)脫穎而出是個(gè)非常重要的考慮因素。
為了回答這個(gè)問題，我看了一些關(guān)鍵指標(biāo)。首先，谷歌趨勢(shì)（Google Trends）。如果你想要重現(xiàn)這個(gè)谷歌趨勢(shì)圖表，記得要選擇主題（topic)，而不是關(guān)鍵字（keyword），因?yàn)檫@些詞會(huì)過濾掉許多錯(cuò)誤信息。換句話說，這些是主題趨勢(shì)，而不是關(guān)鍵字搜索。
谷歌趨勢(shì)上的JS主題
這個(gè)告訴我們?cè)诓煌?xiàng)目中的相對(duì)興趣。如果人們搜索他們，那么很有可能在探索他們的選擇，或者查找?guī)椭蛭臋n。這是相對(duì)使用水平的一個(gè)非常不錯(cuò)的指標(biāo)。
另一個(gè)數(shù)據(jù)的有效來源是Indeed.com，這個(gè)集合了來自大量不同渠道的職位表數(shù)據(jù)。職位投遞熱點(diǎn)最近急速下降，但是他們依然收集足夠的數(shù)據(jù)，來做有效的相對(duì)對(duì)比，從而告訴你在生產(chǎn)項(xiàng)目中人們真正使用的框架。從職位中：
想要重現(xiàn)這些發(fā)現(xiàn)，搜索javascript，然后工作地點(diǎn)保持空白。你就可以清晰看到：
Angular和React占領(lǐng)絕對(duì)優(yōu)勢(shì)：沒有可以與之相提并論的。 （除了 在網(wǎng)站中具有巨大份額的jQuery——不包括app——因?yàn)樗糜谒械倪z留系統(tǒng)，包括受歡迎的CMS系統(tǒng)，比如WordPress）。
在這些列表中，與React相比，Angular具有絕對(duì)優(yōu)勢(shì)。那么為什么我推薦先學(xué)React？ 因?yàn)椋?/p>
換句話說， React贏得了思維占有率和用戶滿意度的競(jìng)爭(zhēng)，并且如果按照過去幾年的趨勢(shì)，只需要按照一半的程度繼續(xù)下去，React完全有可能超越Angular作為主要的前端框架。
Angular 2也有可能扭轉(zhuǎn)戰(zhàn)局,，因此Angular也有可能東山再起，但是到目前為止， React確實(shí)打了一場(chǎng)漂亮的仗.
觀察中的框架
Vue.js*****擁有大量的GitHub的星星和下載量。如果這樣持續(xù)下去，它在2017年會(huì)表現(xiàn)地非常好，但是我不認(rèn)為它在未來的一年內(nèi)會(huì)擠走React或者Angular(這兩者都成長(zhǎng)地非常快)。你學(xué)好了React或者Angular之后再學(xué)這個(gè)吧。
MobX***** 是一個(gè)很贊的數(shù)據(jù)管理庫(kù)，它已經(jīng)是Redux的一個(gè)非常受歡迎的替代品。這也成長(zhǎng)地很快， 我預(yù)期它會(huì)在2017年有所表現(xiàn)。我喜歡給所有的app使用Redux，但是在有些特定的情況下，Mobx是個(gè)更好的選擇。比如，如果在你的頁面上有成百上千的動(dòng)態(tài)DOM對(duì)象， Mobx可能會(huì)表現(xiàn)更好。 同樣, 如果你的app工作流都是簡(jiǎn)單的操作，并且你不需要事務(wù)（Transactional）和可確定狀態(tài)（Deterministic State），你完全就不需要使用Redux。MobX絕對(duì)是一個(gè)更簡(jiǎn)單的解決方案。 不過，你學(xué)會(huì)Redux之后再來學(xué)這個(gè)吧。
下一步
現(xiàn)在你已經(jīng)研究了所有的熱點(diǎn)技術(shù),請(qǐng)閱讀“在5步內(nèi)，獲得你的第一個(gè)開發(fā)工作”.
提升你的JavaScript游戲。 如果你不是其中一員，你會(huì)錯(cuò)過的。
Eric Elliott 是 “Programming JavaScript Applications” (O’Reilly)和 “Learn JavaScript with Eric Elliott”的作者. 他將他的軟件經(jīng)驗(yàn)貢獻(xiàn)給了 Adobe Systems, Zumba Fitness， The Wall Street Journal， ESPN， BBC, 以及頂級(jí)唱片人包括 Usher， Frank Ocean， Metallica等等。
他和世上最美的女人常年居住在舊金山港灣區(qū)。
