2017年最值得學習的前端框架和技術

NO IMAGE

2017年最值得學習的前端框架和技術

推薦一個前端學習群606721798這裡每天晚上20:00都有一節【免費的】前端直播課程,都是純乾貨分享,

JavaScript 的普及造就了一個非常活躍的技術,框架和庫的生態系統。 這個生態系統不斷湧現多式多樣的框架和技術,對許多人來說都是高度的混亂。 那麼你應該關注什麼樣的技術呢?

你應該在哪裡方面投入時間來獲得最大收益呢? 目前公司招聘哪些技術棧呢? 哪些技術增長潛力最大呢?

現在最重要的技術是什麼?這篇文章高度概括了你需要知道的內容。

記住,當你在學習一些實際的程式碼時,您可以在 Codepen.io 上互動式地執行程式碼。如果你還在學習 ES6 ,您可以看看如何使用 Babel REPL 進行轉譯。

JavaScript & DOM基礎知識

2017年最值得學習的前端框架和技術

在嘗試以 Javscript 為生,進行工作之前,您應該對 Javascript 的基礎知識有深刻的瞭解:

  • ES6 :當前最新版本的 JavaScript 是 ES2016(又名 ES7 ),但很多開發人員還沒有正確學習 ES6 。是時候學習是 ES6 要點 了: Arrow functions(箭頭函式) ,rest(剩餘引數) / spread(擴充套件操作符) ,default parameters(預設引數) , concise object literals(物件字面量) ,destructuring(解構),解構等等…

  • Closures(閉包) :瞭解 JavaScript 函式作用域的基本特性。

  • 函式 和 pure functions(純函式):你可能以為你已經很好地掌握了函式,但是 JavaScript 有一些技巧,您需要了解 純函式 來掌握函數語言程式設計。

  • Functional programming basics(函數語言程式設計基礎) :函數語言程式設計通過組合數學中的函式來生成一個大的程式,避免共享狀態和可變資料。多年以來,我還沒有看到一個大量使用函數語言程式設計的 JavaScript 應用程式。是時候掌握基本原理了。 (愚人碼頭注:可以看看知乎上的這個回答:https://zhihu.com/question/28292740/answer/40336090)

  • Partial application(區域性應用) 和 Curry(柯里化)

  • Builtin methods(內建方法) :學習標準的資料型別 (特別是 arrays , objects , strings , 和 numbers )。

  • Callbacks(回撥): 回撥是一個函式,當另一個函式有結果就緒時立即執行。 就像你說,“做你的工作,做完後打電話給我。”

  • Promises : promise 是處理未來值的一種方式。當函式返回 promise 時,您可以使用 .then()方法附加回撥,這個回撥將在 promise resolves時執行。resolved 值被傳遞到你的回撥函式中,例如:

doSomething().then(value => console.log(value));

  • Ajax & server API calls (Ajax 和 伺服器API呼叫) : 那些有趣的應用程式最終需要與網路伺服器通訊。 你應該知道如何與 API 進行通訊。

  • Classes (注意: Avoid class inheritance(避免類繼承)。檢視 How to Use Classes and Sleep at Night(如何使用類才能晚上睡個好覺).)

  • Generators & async/await 在我看來,最好的非同步程式碼的寫法就是用寫同步程式碼的方式去寫非同步程式碼。不可否認這些都存在學習曲線,但一旦你學會了,程式碼將更容易閱讀。

  • Performance(效能):RAIL — 從 “PageSpeed Insights”> & “WebPageTest.org” 開始,他們會給你一些建議

  • Progressive Web Applications (PWAs) : 檢視 “Native Apps are Doomed” & “Why Native Apps Really Are Doomed”

  • Node & Express: Node 允許你在服務端執行 JavaScript ,這意味著您的使用者可以將資料儲存在雲中並隨時隨地訪問。而 Express 是 Node 社群最為流行的 Web 框架。

工具

  • Chrome Dev Tools:DOM inspect & JS debugger: 最為好的除錯工具,雖然 Firefox 也有很多非常酷的工具,你也可以去體驗一下。

  • npm:JavaScript 語言公然的開源包倉庫庫。

  • git & GitHub : 分散式版本管理系統,隨時跟蹤你原始碼的變化。

  • Babel :用於將 ES6 程式碼轉譯到 ES5 以使之能夠相容老版本瀏覽器。

  • Webpack : 最流行的標準 Javascript打包工具,通過一個簡單的配置檔案,就能快速讓專案執行。

  • Atom,VSCode,或者WebStorm vim: 你需要為自己選擇一個合適的編輯器來輔助你快速開發。Atom 和 VSCode 是當今最流行的 JS 編輯器。 Webstorm 是另一種解決方案,它對質量工具的支援非常強大。我建議學習 vim ,或至少加入到你的收藏書籤,因為遲早,你需要在伺服器上編輯檔案,掌握 vim 是最簡單的方法 – vim 安裝在幾乎所有的 Unix 相容的作業系統,通過 SSH 終端連線可以很好的運作。

  • ESLint:: 儘早發現語法錯誤和程式碼風格問題。除了程式碼評審和TDD之外,這是你可以做的第三件事,儘量減少程式碼中的Bug。

  • Tern.js:標準 JavaScript 型別的推理工具,這是我目前最喜歡的型別相關的 JavaScript 工具 – 不需要編譯步驟或註釋。我踢掉了其他相關工具,Tern.js 提供了大部分的功能,並且幾乎沒有為 JS 使用靜態型別系統的成本。

  • Yarn: 類似於npm,但是安裝起來更為可靠快速。

  • *::靜態型別的JavaScript。除非你學習 Angular 2 ,否則是完全可選的。如果你不使用 Angular 2 ,你應該在選擇學習之前要仔細評估。我非常喜歡它,我很欽佩 TypeScript 團隊的出色工作,但是你需要知道一些權衡。必讀:“關於靜態型別的驚人祕密” 和 “你可能不需要 TypeScript” 。

  • Flow*:: JavaScript靜態型別檢測工具,可以閱讀 “TypeScript vs Flow” 來對於這二者有個大概的瞭解,請注意,我讓 Flow 來反饋給我的 IDE 有一些困難,即使使用Nuclide。

React

2017年最值得學習的前端框架和技術

React 是個專注於構建使用者介面的 JavaScript 庫,由 Facebook 建立。它基於單向資料流的設計思想,也就意味著對於每個更新週期:

  1. React 接受元件的輸入作為 props,並有條件地渲染 DOM 更新,如果資料已經改變了 DOM 的特定部分。在重渲染階段發生的資料變化並不會立刻觸發重渲染,而是在下一個繪製階段的時候才會進行重渲染。

  2. 事件處理階段 – 在渲染 DOM 之後,React 偵聽和事件,將事件委託給其 DOM 樹根(為了更好的效能)的單個事件偵聽器。 你可以監聽這些事件並更新響應中的資料。

  3. 對於資料的任何變化都會重複步驟1。

這種單向資料流與雙向資料繫結形成對比,其中對 DOM 的改變可以直接更新資料(例如,如在 Angular 1和 Knockout 的情況下)。 使用雙向繫結,在 DOM 渲染過程(稱為 Angular 1 中的摘要迴圈)中對 DOM的 更改可能會在繪製完成之前重新觸發繪圖階段,從而導致迴流和重繪 – 從而降低效能。

React 沒有規定資料管理系統,但推薦使用基於 Flux 的方法。 React 的單向資料流方法借鑑了函數語言程式設計和不可變資料結構的思想,改變了我們對前端框架架構的思考方式。

有關React&Flux架構的更多資訊,請閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”。

  • create-react-app *:開始使用 React 的最快方法。

  • react-router *:React 的簡單路由。

  • Next.js *:簡單的通用渲染和路由 Node & React 。

  • velocity-react *:React的動畫 – 允許您使用 VMD – bookmarklet 在頁面上進行互動式視覺運動設計

Redux

Redux 為應用程式提供事務性,確定性的狀態管理支援。在 Redux 中,我們遍歷操作物件流,以減少到當前應用程式狀態。要了解為什麼這很重要,請閱讀 “10 Tips for Better Redux Architecture”。要開始使用 Redux,請檢視 Redux 建立者 Dan Abramov 的優秀課程:

  • “Getting Started with Redux”

  • “Building React Applications with Idiomatic Redux”

Redux 是強制性學習,即使你從未使用 Redux 作為實際專案。

為什麼?因為它會給你很多實踐,並告訴你純函式的價值所在,並教你如何將通用函式 reducers,這是一種通用的函式,用於遍歷資料集合並從中提取一些值。Reducers通常是非常有用的,以至於Array.prototype.reduce已新增到 JS 規範。

Reducers 不僅僅對於陣列是重要的,同時學習使用Reducers 的新方法本身也是有價值的。

  • redux-saga *:Redux 的同步樣式的副作用庫。使用它來管理I / O(例如處理網路請求)。

Angular 2*

2017年最值得學習的前端框架和技術

Angular 2 是 Google 廣受歡迎的 Angular 框架的繼承者。 因為它瘋狂的人氣,掌握它會使簡歷看起來很棒 —— 但我仍舊建議優先學習 React 。

我喜歡 React 超過 Angular 2 ,因為:

  • React 更簡單

  • React 很受歡迎,許多工作都需要它使用(Angular 2 也是)

為此,我推薦學習 React,但我認為 Angular 2  嚴格可選*。 如果你對 Angular 2 有強烈的偏好,那麼你可以隨意選擇 React 或者 Angular 2 。 首先學習 Angular 2 ,並考慮 React 可選。 這兩種情況都會讓你受益,並且在你的簡歷上看起來很不錯。

無論你選擇哪一個,儘量將精力集中學習和使用你所選擇的那個,至少6個月 – 1年後,再去學習另一個。 真正掌握它們需要很多實踐。

觀察中的框架

Vue.js * 在 GitHub 上有大量的 stars 和 下載。如果繼續下去,它將在 2017 年能做得更好,但我認為在未來的一年左右的時間裡,我不認為它不會超越 React 或 Angular(兩者都快速增長)。建議學習了 React 或 Angular 後學習 Vue.js 。

MobX * 是一個很棒的資料管理庫,已成為 Redux 的流行替代品。它也在快速增長,我預計在 2017 年會更好。對於大多數應用來說,我更喜歡Redux,但在某些情況下,MobX是更好的選擇。例如,如果頁面上有成千上萬個動態 DOM 物件,MobX 可能會表現得更好。另外,如果你的應用程式工作流都很簡單,而且你不需要事務性的、確定性的狀態,那麼你可能就不需要 Redux 了。MobX 無疑是一個更簡單的解決方案。建議你在學習了 Redux 之後,再學習 MobX 。