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