2017年值得關注的JavaScript框架與主題

時間 2019-12-05

標籤 2017年值得關注 javascript 框架主題欄目 JavaScript 简体版

原文原文鏈接

2017年值得關注的JavaScript框架與主題翻譯自Top JavaScript Frameworks & Topics to Learn in 2017，從屬於筆者的Web 前端入門與最佳實踐。其餘有關於2016年前端開發的總結包括2016 年前端工具使用度調研報告、2016年裏作前端是怎樣一種體驗、2016前端學習路線圖。另外推薦The State of UX in 2017，做爲開發者瞭解下設計的想法也是必需的。javascript

JavaScript的繁榮促生了不少優秀的技術、框架與工具庫，這空前的繁榮也給不少人形成了困惑，無所適從。到底何者是值得投入，表明了將來的方向，而何者又是真正適合於當前項目，當前團隊的？而本文即時做者基於自身實踐的一些思考，與諸君共享。html

JavaScript & DOM Fundamentals

工欲善其事，必先知其器。在咱們準備瞭解使用其餘JavaScript框架的時候，咱們首先須要去了解JavaScript的語法要點與一些工程實踐：前端

內建方法: 咱們須要瞭解標準數據類型 (特別是 arrays, objects, strings, 以及 numbers).java
函數 & 純函數: 或許你以爲本身已經很瞭解函數了，可是總有些小技巧是你沒有接觸過的。另外不只僅是對於基本的函數的用法，咱們還要對函數式編程的思想，譬如純函數高階函數等有所掌握。node
Closures: 在學習閉包的過程當中瞭解JavaScript傳統的函數做用域。react
Callbacks: 回調是JavaScript異步編程的基本概念，某個回調函數會在某個異步操做結束後被調用，就比如領導對你說：好好幹你的工做，作好了跟我彙報下。webpack
Promises: Promise是處理未來值的方法之一，當某個函數返回的是Promise對象時，你能夠調用該對象的then函數來獲取異步傳入的值。而調用者是經過傳入的resolve回調來傳值，譬如doSomething().then(value => console.log(value));ios
Ajax & 服務端API調用: 絕大部分有趣的應用都須要與服務端經過網絡進行交互，你應該瞭解基本的HTTP Client知識。git
ES6: 最新的JavaScript版本爲ES7，或者叫ES2016，不過不少人ES6還沒用熟練，正在過渡期吧。es6
Classes (note: 避免類繼承. 參考 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則是目前最爲流行的基於NodeJS的Web框架。
Lodash: 一個很是好用的、模塊清晰的JavaScript輔助工具，其也遵循了不少函數式編程的理念，你能夠經過 lodash/fp導入。

Tooling

Chrome Dev Tools: DOM inspect & JS debugger: Chrome Dev Tools算是最爲優秀的調試工具了，Firefox也有不少不錯的擴展。
npm: 官方開源的JavaScript包管理工具。
git & GitHub: 分佈式版本管理系統，很適合團隊協做。
Babel: 可以將ES6代碼編譯到ES5使之可以兼容老版本瀏覽器。
Webpack: 最著名的模塊打包工具之一，有很多優秀的模板配置奧，譬如Webpack2-React-Redux-Boilerplate。
Atom, VSCode, or WebStorm + vim: 你須要爲本身選擇合適的編輯器來輔助你快速開發。Atom與VSCode都是很是優秀的JavaScript編輯器，WebStorm也不錯可是它是收費版本。若是你打算直接在服務端開發的話，Vim是個不錯的選擇。
ESLint: ESLint可以幫助開發者更快地發現語法錯誤與樣式問題，在Code Review與TDD以後這是個不錯的減小Bug的方法。
Tern.js: 基於編輯器插件的標準JavaScript類型推導工具，不須要任何編譯步驟或者註解支持。
Yarn*: 相似於NPM的工具，不過安裝起來更爲可靠快速。
TypeScript*: JavaScript的靜態類型支持，不過須要特別注意的是，除非你在學習Angular 2，否則我以爲你若是要選用Angular 2的話仍是要慎重考慮。我我的很喜歡TypeScript，也很欽佩他們團隊的優秀工做，不過任然有不少的權衡，能夠參閱「The Shocking Secret About Static Types」 & 「You Might Not Need TypeScript」.
Flow*: JavaScript靜態類型檢測工具，能夠閱讀「TypeScript vs Flow」來對於這兩者有個大概的瞭解，若是你打算Flow的話也是推薦個人編輯器 Nuclide。

React

React 是個專一於構建用戶視圖層的JavaScript庫，其基於單向數據流的設計思想，也就意味着：

React 以Props的形式將參數傳入Components，而且在數據發生變化的時候選擇性重渲染部分DOM。在重渲染階段發生的數據變化並不會馬上觸發重渲染，而是在下一個繪製階段的時候纔會進行重渲染。
渲染完畢以後，就進入了事件處理，React使用特殊的合成事件幫助開發者監聽與響應事件，將全部的節點上的事件交託單一事件監聽器處理以得到更好的性能體驗。你能夠在這些事件的監聽函數中經過外部傳入的回調從新設置Props或者直接修改內部State。
對於數據的任何變化都會重複步驟1。

這種單向數據流與當時以Angular 1 / Knockout爲表明的雙向數據綁定造成對比，雙向數據綁定中若是發現綁定的數據發生變化則會馬上觸發重渲染，而不管當前是否處於渲染流程中，這一點也就致使了Reflows與Repaints的性能表現很是差。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-router*: 方便的React路由解決方案。
Next.js*: 很是簡單的通用React應用開發框架。
velocity-react*: 很是不錯的React動畫輔助庫。

Redux

Redux 爲應用提供了事務式的，肯定性的狀態管理支持。在Redux中，咱們僅能夠經過Action來修改當前的應用狀態。若是你但願深刻了解爲啥這麼作，能夠參閱「10 Tips for Better Redux Architecture.」或者跟着 Dan Abramov的官方課程:

實際上即便你不使用Redux，也很推薦學習Redux的設計思想，它能夠給你不少關於狀態管理的最佳實踐，告訴你純函數的價值所在，以及告訴你何謂Reducers，何謂General-Purpose函數。在Redux的工程實踐中，對於異步Action的處理也是值得討論的：

redux-saga*: A synchronous-style side-effect library for Redux. Use this to manage I/O (such as handling network requests).

Angular 2*

Angular 2 脫胎於風靡一時的Angular 1，鑑於當年瘋狂的流行度，學會這個會是你簡歷上濃墨重彩的一筆，不過我仍是推薦先學習React。我我的也認爲React是優於Angular 2的,React over Angular 2 because:

它更簡單
社區很強大

RxJS

RxJS 是JavaScript中一系列響應式編程工具的集合，就比如流處理領域的Lodash，它把響應式編程帶入到了JavaScript的領域。ECMAScript Observables是stage-1階段的草稿，RxJS 5+則是當前的標準實現。雖然我我的很是喜歡RxJS，可是若是你想在工程中使用RxJS的話仍是須要考慮下，由於其內置了不少的Operators，其會增長你的包體尺寸。不過咱們能夠經過僅引入部分所須要的庫來解決這個問題，最後大概只會使得包體增長200KB左右吧。