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