JavaScript 的普及造就了一個非?；钴S的技術(shù)，框架和庫的生態(tài)系統(tǒng)。 這個生態(tài)系統(tǒng)不斷涌現(xiàn)多式多樣的框架和技術(shù)，對許多人來說都是高度的混亂。 那么你應(yīng)該關(guān)注什么樣的技術(shù)呢？
你應(yīng)該在哪里方面投入時間來獲得最大收益呢？ 目前公司招聘哪些技術(shù)棧呢？ 哪些技術(shù)增長潛力最大呢？
現(xiàn)在最重要的技術(shù)是什么？這篇文章高度概括了你需要知道的內(nèi)容，你可以通過文章中的鏈接了解所有關(guān)于它的一些信息。
記住，當(dāng)你在學(xué)習(xí)一些實際的代碼時，您可以在 Codepen.io 上交互式地執(zhí)行代碼。如果你還在學(xué)習(xí) ES6 ，您可以看看如何使用 Babel REPL 進(jìn)行轉(zhuǎn)譯。
這個列表很長，但不要氣餒。你可以做到！ 在看這個清單列表時，如果你擔(dān)心你將如何學(xué)習(xí)所有構(gòu)建現(xiàn)代應(yīng)用程序所需知識，那么建議你先閱讀一下 “為什么我要感謝 JavaScript 疲勞” 。然后靜下心來，開始學(xué)習(xí)和工作。
有些東西嚴(yán)格的說是 可選的* ，這意味著，如果您對他們感興趣，我推薦它們，或者你的工作需要了解它們，但你不應(yīng)該覺得必須去學(xué)習(xí)它們。任何標(biāo)有星號的東西(例如:example*)都是可選的。
任何沒有帶 * 的東西都應(yīng)該學(xué)習(xí)，但是不要覺得要學(xué)習(xí)一切或知道一切。應(yīng)該有一個很好的認(rèn)知，不一定需要成為一名各個領(lǐng)域都出眾的專家。
在嘗試以 Javscript 為生，進(jìn)行工作之前，您應(yīng)該對 Javascript 的基礎(chǔ)知識有深刻的了解：
.then() 方法附加回調(diào)，這個回調(diào)將在 promise resolves時運行。resolved 值被傳遞到你的回調(diào)函數(shù)中，例如：doSomething().then(value => console.log(value));JavaScript 代碼:
- const doSomething = (err) => new Promise((resolve, reject) => {
- if (err) return reject(err);
- setTimeout(() => {
- resolve(42);
- }, 1000);
- });
- const log = value => console.log(value);
- // 使用返回的 promises
- doSomething().then(
- // 當(dāng) resolve 時:
- log, // logs 42
- // 當(dāng) reject 時(resolve 時不會調(diào)用)
- log
- );
- // 記得處理錯誤哦!
- doSomething(new Error('oops'))
- .then(log) // not called this time
- .catch(log); // logs 'Error: oops'
Progressive Web Applications (PWAs) ： 查看 “Native Apps are Doomed” & “Why Native Apps Really Are Doomed”
Node & Express： Node 允許你在服務(wù)端運行 JavaScript ，這意味著您的用戶可以將數(shù)據(jù)存儲在云中并隨時隨地訪問。而 Express 是 Node 社區(qū)最為流行的 Web 框架。
Lodash ：一個很好用的、模塊化的 JavaScript 實用工具函數(shù)庫，包含功能編程的好東西，你可以通過 lodash/fp 導(dǎo)入 data-last 功能模塊。
React 是個專注于構(gòu)建用戶界面的 JavaScript 庫，由 Facebook 創(chuàng)建。它基于單向數(shù)據(jù)流的設(shè)計思想，也就意味著對于每個更新周期：
這種單向數(shù)據(jù)流與雙向數(shù)據(jù)綁定形成對比，其中對 DOM 的改變可以直接更新數(shù)據(jù)（例如，如在 Angular 1和 Knockout 的情況下）。 使用雙向綁定，在 DOM 渲染過程（稱為 Angular 1 中的摘要循環(huán)）中對 DOM的 更改可能會在繪制完成之前重新觸發(fā)繪圖階段，從而導(dǎo)致回流和重繪 – 從而降低性能。
React 沒有規(guī)定數(shù)據(jù)管理系統(tǒng)，但推薦使用基于 Flux 的方法。 React 的單向數(shù)據(jù)流方法借鑒了函數(shù)式編程和不可變數(shù)據(jù)結(jié)構(gòu)的思想，改變了我們對前端框架架構(gòu)的思考方式。
有關(guān)React＆Flux架構(gòu)的更多信息，請閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”。
Redux 為應(yīng)用程序提供事務(wù)性，確定性的狀態(tài)管理支持。在 Redux 中，我們遍歷操作對象流，以減少到當(dāng)前應(yīng)用程序狀態(tài)。要了解為什么這很重要，請閱讀 “10 Tips for Better Redux Architecture”。要開始使用 Redux，請查看 Redux 創(chuàng)建者 Dan Abramov 的優(yōu)秀課程：
Redux 是強制性學(xué)習(xí)，即使你從未使用 Redux 作為實際項目。
為什么？因為它會給你很多實踐，并告訴你純函數(shù)的價值所在，并教你如何將通用函數(shù) reducers，這是一種通用的函數(shù)，用于遍歷數(shù)據(jù)集合并從中提取一些值。Reducers通常是非常有用的，以至于Array.prototype.reduce已添加到 JS 規(guī)范。
Reducers 不僅僅對于數(shù)組是重要的，同時學(xué)習(xí)使用Reducers 的新方法本身也是有價值的。
Angular 2 是 Google 廣受歡迎的 Angular 框架的繼承者。 因為它瘋狂的人氣，掌握它會使簡歷看起來很棒 —— 但我仍舊建議優(yōu)先學(xué)習(xí) React 。
我喜歡 React 超過 Angular 2+，因為：
為此，我推薦學(xué)習(xí) React，但我認(rèn)為 Angular 2+ 嚴(yán)格可選*。 如果你對 Angular 2+ 有強烈的偏好，那么你可以隨意選擇 React 或者 Angular 2+。 首先學(xué)習(xí) Angular 2+，并考慮 React 可選。 這兩種情況都會讓你受益，并且在你的簡歷上看起來很不錯。
無論你選擇哪一個，盡量將精力集中學(xué)習(xí)和使用你所選擇的那個，至少6個月 – 1年后，再去學(xué)習(xí)另一個。 真正掌握它們需要很多實踐。
RxJS 是 JavaScript 的響應(yīng)式編程實用程序的集合。就好比流處理領(lǐng)域的 Lodash 。它把響應(yīng)式編程帶入到了 JavaScript 領(lǐng)域。ECMAScript Observables 提案是第一階段草案，而 RxJS 5+ 是規(guī)范標(biāo)準(zhǔn)的實現(xiàn)。
雖然我個人非常喜歡 RxJS ，如果你想在工程中使用使用整個 RxJS 的話，包體積可能很大（因為其內(nèi)置了很多的 Operators ）。你可以使用部分引入來解決這個問題：
JavaScript 代碼:
- import { Observable } from 'rxjs/Observable';
- // then patch import only needed operators:
- import 'rxjs/add/operator/map';
- import 'rxjs/add/observable/from';
- const foo = Observable.from([1, 2, 3]);
- foo.map(x => x * 2).subscribe(n => console.log(n));
使用部分導(dǎo)入可以將您的 bundle 中的 rxjs 依賴關(guān)系減小約 200k 。 對于web項目來說這個減少已經(jīng)很大了。 這將使您的應(yīng)用程序更快。
很多人問我，“為什么沒有列舉出他們喜歡的框架？” 因為其中一個重要標(biāo)準(zhǔn)是，“在工作中能被真正的用上”。
是的，這是一個人氣競賽，但當(dāng)你在思考學(xué)習(xí)的時間投入在什么上時，了解一個框架的時機變得格外重要。
為了回答這個問題，我看了一些關(guān)鍵指標(biāo)。 首先，Google趨勢。 如果您想重現(xiàn)此Google趨勢圖，請記住按主題而不是關(guān)鍵字進(jìn)行選擇，因為其中幾個字詞會帶來大量的假陰性。 換句話說，這些是以主題為主的趨勢，而不是關(guān)鍵字搜索：
這告訴我們?nèi)藗儗Ω鱾€項目的相對興趣度。 如果人們正在搜索它們，那么它們很可能正在搜索他們選擇的項目，或?qū)ふ規(guī)椭蛭臋n。 這是一個相對合理的評價指標(biāo)。
另一個很好的數(shù)據(jù)來自 Indeed.com ，它聚合不同站點上對于不同職位的開發(fā)者的招聘信息。 近幾年招聘信息急劇下降，但他們?nèi)匀皇占銐蚨嗟臄?shù)據(jù)，可以看出目前招聘上對于前端開發(fā)者技能需求的情況為:
要重現(xiàn)這些發(fā)現(xiàn)，搜索 框架名稱 javascript 即可。 要重現(xiàn)這些發(fā)現(xiàn)，請搜索 javascript并將該位置留空。你可以清楚地看到：
Angular 和 React: 遙遙領(lǐng)先 （除了jQuery，它用于所有網(wǎng)站 – 包括非應(yīng)用程序的巨大份額 – 因為它被幾乎所有的遺留系統(tǒng)使用，包括流行的 CMS 系統(tǒng)，如 WordPress）。
你可能會看到 Angular 在這些列表中比 React 有顯著的優(yōu)勢。 為什么我依然推薦優(yōu)先學(xué)習(xí) React？ 因為：
換句話說，React 贏得了社區(qū)活躍和用戶體驗度，如果過去一年半的趨勢繼續(xù)保持，React 有一個非常明顯的機會，來代替 Angular 成為主導(dǎo)的前端框架。
Angular 2 擁有改變這個局面的機會，所以 Angular 可以卷土重來，但到目前為止，React 正在處于優(yōu)勢一面。
Vue.js * 在 GitHub 上有大量的 stars 和 下載。如果繼續(xù)下去，它將在 2017 年能做得更好，但我認(rèn)為在未來的一年左右的時間里，我不認(rèn)為它不會超越 React 或 Angular（兩者都快速增長）。建議學(xué)習(xí)了 React 或 Angular 后學(xué)習(xí) Vue.js 。
MobX * 是一個很棒的數(shù)據(jù)管理庫，已成為 Redux 的流行替代品。它也在快速增長，我預(yù)計在 2017 年會更好。對于大多數(shù)應(yīng)用來說，我更喜歡Redux，但在某些情況下，MobX是更好的選擇。例如，如果頁面上有成千上萬個動態(tài) DOM 對象，MobX 可能會表現(xiàn)得更好。另外，如果你的應(yīng)用程序工作流都很簡單，而且你不需要事務(wù)性的、確定性的狀態(tài)，那么你可能就不需要 Redux 了。MobX 無疑是一個更簡單的解決方案。建議你在學(xué)習(xí)了 Redux 之后，再學(xué)習(xí) MobX 。
原文鏈接：https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711
