JavaScript的流行促進了一個非常活躍的由相關技術,框架和庫組成的生態圈的發展。整個生態圈的多樣性和活躍性越來越強,這讓許多人變得越來越困惑。 你應該了解些什么技術呢?
我們應該將時間花費在哪里才能獲得最大的收益? 現在公司招聘要求的技術棧包括哪些?哪項技術的發展潛力最大?
當前需要掌握的最重要的技術是什么?
這篇文章高度概括了你需要了解的技術,并附上了每個技術對應的鏈接,通過鏈接中內容你可以詳細了解該技術。
記住,在學習的過程中一定要多動手寫代碼。 你可以通過 Codepen.io 網站來交互式地寫代碼;或者如果你在學習ES6的話,可以嘗試通過 Babel REPL來對其進行轉碼。
這將會是一份很長的清單,但請不要氣餒。相信自己,你能夠做到的!如果你看著這份清單,擔心到什么時候才能學會構建現代應用程序所需的一切,請先移步 “Why I’m Thankful for JavaScript Fatigue”。然后沉下心來開始我們的學習:
文章中的有些內容是 可選的*,這里可選的意思是:如果你對這些內容感興趣的話,我向你推薦這些知識;或者,找工作的時候可能會需要了解它們,但是不是非得學習它們。 任何標有星號(如例*)的都是可選的。
任何沒有標有 “*” 的內容都需要學習,但不要覺得有義務去學習每項內容。你需要知道這些非可選的知識,但你不一定需要成為該主題絕對的專家。
在找一份JavaScript工作之前,你應該熟練掌握相關的JS基礎知識:
.then()
方法綁定一個回調函數,它在諾言兌現的時候被調用。 而且,諾言兌現時候的值會傳遞到你的回調函數比如: doSomething().then(value => console.log(value));
const doSomething = (err) => new Promise((resolve, reject) => { if (err) return reject(err); setTimeout(() => { resolve(42); }, 1000);});const log = value => console.log(value);// Using returned promisesdoSomething().then( // on resolve: log, // logs 42 // on reject (not called this time) log);// remember to handle errors!doSomething(new Error('oops')) .then(log) // not called this time.catch(log); // logs 'Error: oops'
lodash/fp
.
React 是一個JavaScript庫,用于構建用戶界面,由Facebook創建. 它是基于單向數據流的概念, 意味著每個更新周期:
這是雙向數據綁定,在DOM變化的地方可直接更新ID, DOM的變化可以直接更新數據 (e.g., 類似Angular 1 和 Knockout). 使用雙向綁定, DOM渲染過程中對DOM的更新(稱為消化周期 Angular 1) 有可能在觸發繪圖階段之前就完成了, 這樣也造成回流和重繪?—?減慢了性能.
React沒有規定數據管理系統, 但是推薦使用 Flux-based. React’s ,它是單向數據流的方法,借鑒于函數式編程不可變數據結構改變了我們對前端框架結構的思考方式.
更多關于 React & Flux 架構的內容請閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.
Redux 為你的 App 提供了事務的、確定性狀態管理的功能。在 Redux 中,可以對 action 對象流進行迭代來減少應用的狀態。想要了解為什么這個問題很重要,請閱讀 “10 Tips for Better Redux Architecture.” 。想要開始學習 Redux ,可以閱讀 Redux 創始人發布的超棒的教程。
Redux是必須掌握的一項知識, 即便是你在生產項目從來沒有使用過Redux .
為什么必須要掌握學習? 因為它會給你大量的經驗和指導,讓你了解使用純函數和教你新的思考方式reducers的價值, 一般的函數編程遍歷集合的數據,只是能提取一些值. Reducers 通常是用于數組原型方法Array.prototype.reduce被
添加到JS的規范.
Reducers優勢遠遠超越了僅僅使用數組,它的作用對工作是很重要很有幫助,因此學習一種新的 Reducers知識是很有價值的.
Angular 2 是谷歌開發的非常受歡迎的一個Angular框架. 因為它瘋狂的流行,它會使你的簡歷看著非常棒?—但是我強烈建議你首先學習 React.
我有一些建議關于 React 超越 Angular 2 因為:
基于這些原因我建議你學習React, 我把 Angular 2 設置為可選學的*. 如果你有強烈的偏愛Angular 2 , 兩者隨意使用.首先 主要學習Angular 2 , 然后考慮React 選學. 這兩個的任何一個都會是你的簡歷看起來很棒.
不論你選擇哪一個,試著去關注它至少6個月?—?1年之后再去學習另一個. 要真正精通是需要時間的歷練.
RxJS is JavaScript的響應編程實用程序的集合. 認為這是lodash流. 響應式編程已經正式官方的進入JavaScript的使用場景. ECMAScript可見提案草案階段1, and RxJS 5 規范化標準的實現.
我非常喜歡 RxJS,如果你只是一下子就把整件事全部導入, 它真的可以擴大你的包大小 (會產生很多的數據流量,套餐不夠用了). 為了減小bundle生產環境文件的大小, 不要導入所有程序接口. 使用補丁 imports, 替代:
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));
使用片段式導入減小和壓縮生產文件到~200k. 非常劃算. 它會使你的應用程序更快.
有幾個人問我為什么沒有列出他們最喜歡的框架。 我考慮的一個重要標準 “這對實際工作有用嗎?”.
是的,這是一個受歡迎的挑戰, 這些有利條件用一個框架去開發一個重要的條件在哪里你花費你的學習時間長短.
為了回答這個問題,我看了一些關鍵指標。 一、谷歌趨勢。 如果你想看看谷歌趨勢圖, 記住按主題選擇, 不是關鍵詞, 僅僅靠幾個簡單的關鍵詞很難做出正確的判斷. 換句話說, 這些都是主題聚焦的趨勢, 不是關鍵字搜索:
Google Trends 關于 JS 的主題
這個圖表告訴我們感興趣的幾個項目的信息。如果人們在搜索這些項目,他們可能正在探索該選擇什么樣的項目,或者是尋求幫助和文檔。這個是一個對項目受歡迎程度的一個比較不錯的指標。
另外一個很好的數據來源是 Indeed.com,這里匯集了來自各種源頭的招聘信息數據列表。近年來,工作崗位的受歡迎程度急劇下降,但是他們仍然收集了足夠多的數據來做相對的比較,可以告訴你人們在生產項目和工作中實際使用的技術:
為了重現這些結果,請搜索框架名稱 javascript,然后讓地址欄為空。你就可以清晰的看到:
Angular 和 React 占據主導地位:其他的暫時無法比擬。(除了 jQuery ,這是大量網站正在使用的框架,包括非 App,因為它在幾乎所有的老舊系統中使用,包括廣受歡迎的 CMS —— WordPress)。
你可能會看到 Angular 相比起 React 有較明顯的優勢。那為什么我會首先推薦 React 呢?因為:
換句話說,React 贏得了媒體和客戶滿意度的戰斗,如果這個勢頭繼續保持,React 非常有機會能夠干掉 Angular ,成為前端框架的主導。
Angular 2 有機會扭轉這一局面,所以它卷土重來,但是到目前為止,React 還是打了一場很好的戰斗。
需要關注的框架:
編者注:關于 MobX 和 Redux 的比較請閱讀這篇文章。
現在你已經研究了這些熱門技術, 閱讀 “如何在5個簡單步驟中開始你的第一個開發工作”.
提高你的JavaScript技能. 如果你還沒有進入角色, 你將會錯過很多.
“JavaScript應用程序編程”(O’Reilly) 的作者是埃里克·艾略特 , “學習JavaScript和Eric Elliott”. 他曾經的軟件經驗 Adobe 系統, Zumba 健身, 《華爾街日報》, ESPN, 英國廣播公司, 頂級錄音藝術家包括 亞瑟,弗蘭克海洋,金屬樂隊, and many more.
他大部分時間都呆在舊金山灣,和世界上最漂亮的女人在一起.