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

CharleneMcK 8年前發布 | 26K 次閱讀 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 & DOM Fundamentals

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

  • 內建方法:我們需要了解標準數據類型 (特別是 arrays , objects , strings , 以及 numbers ).

  • 函數 & 純函數 : 或許你覺得自己已經很了解函數了，但是總有些小技巧是你沒有接觸過的。另外不僅僅是對于基本的函數的用法，我們還要對函數式編程的思想，譬如純函數高階函數等有所掌握。

  • Closures : 在學習閉包的過程中了解JavaScript傳統的函數作用域。

  • Callbacks:回調是JavaScript異步編程的基本概念，某個回調函數會在某個異步操作結束后被調用，就好比領導對你說：好好干你的工作，做好了跟我匯報下。

  • Promises : Promise是處理將來值的方法之一，當某個函數返回的是Promise對象時，你可以調用該對象的 then 函數來獲取異步傳入的值。而調用者是通過傳入的 resolve 回調來傳值，譬如 doSomething().then(value => console.log(value));

  • Ajax & 服務端API調用 : 絕大部分有趣的應用都需要與服務端通過網絡進行交互，你應該了解基本的HTTP Client知識。

  • ES6 : 最新的JavaScript版本為ES7，或者叫ES2016，不過很多人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” 。

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:

  1. 它更簡單

  2. 社區很強大

RxJS

RxJS 是JavaScript中一系列響應式編程工具的集合，就好比流處理領域的Lodash，它把響應式編程帶入到了JavaScript的領域。ECMAScript Observables是stage-1階段的草稿，RxJS 5+則是當前的標準實現。雖然我個人非常喜歡RxJS，但是如果你想在工程中使用RxJS的話還是需要考慮下，因為其內置了很多的Operators，其會增加你的包體尺寸。不過我們可以通過僅引入部分所需要的庫來解決這個問題，最后大概只會使得包體增加200KB左右吧。

為什么沒有提到其他框架？

有不少人問我為啥沒有把他們喜歡的框架也列舉進來，對于我而言我會先考慮：這個在真實的工作中會所有幫助嗎？當然，這一點見仁見智，我也是打算從一些所謂的人氣投票中一窺變化。首先，我會去Google Trends中查看各個框架關聯關鍵詞的被搜索情況:

另一個很有幫助的網站就是Indeed.com，會聚合不同站點上對于不同職位的開發者的需求信息，可以看出目前招聘上對于前端開發者技能需求的情況為:

在上圖中，Angular（Angular 1+Angular 2）還是高于React的，不過我個人還是會推薦React，有如下幾個原因吧：

 

來自：https://segmentfault.com/a/1190000007805673

 

 本文由用戶 CharleneMcK 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！