前端工程師必知：2016 年崛起的 JS 項目

時間 2020-12-18

標籤前端 vue react webpack web vue-router 數據庫 npm 編程後端欄目 JavaScript 简体版

原文原文鏈接

近幾年 JS 社區創新和演化的速度是有目共睹的，幾個月前比較時髦的技術極可能如今已通過時了。2016 已通過去，你有沒有擔憂錯過了什麼重要的內容？在這篇調查報告中咱們會爲你解讀社區的主流趨勢。前端

咱們將從數量上來分析哪些項目 2016 年得到比較多的關注，具體的作法是比較各項目 2016 年在 Github 上新增 star 的數量。vue

回顧 2015 年：React 無疑佔據了統治地位，而 Redux 則在衆多牛毛的 Flux 實現中脫穎而出。那麼 2016 年哪些項目最受開發者關注呢？react

1. 最受歡迎項目

仔細觀察 2016 年排名前 10 的項目，你就能對 WEB 社區的演化方向有個直觀的把握，歸納以下：

3 個 UI 框架：Vue.JS, React and Angular 2
1 個新的 Node.js 包管理器：Yarn
建立桌面應用的首選：Electron
建立 react 新項目的首選：Create React App
1 個移動開發框架：React Native
最受歡迎的 CSS 工具箱：Bootstrap
函數式編程風格的狀態管理庫：Redux
強大兼具靈活的繪圖庫：D3

上面這些項目覆蓋的領域，無疑證實了 JS 的通用性，印證了那句話：能被 JS 編寫的，早晚都會被 JS 編寫。

2016 年的最佳項目是...

Vue.JS 2016 年新增超過 25000 個 star，意味着平均天天新增 72 個 star，超過了全部同類項目的流行速度，好比 React 和 Angular。採用 Virtual DOM 來加強性能的 Vue.JS v2 於 2016 年 10 月發佈。

Vue.JS 已經被很多大公司用在了生產環境中，好比中國最大的電子商務網站裏巴巴，因此你能夠將Vue.JS 做爲一個安全的選擇。

圍繞着 Vue.JS 的社區生態也日趨成熟，包括路由庫（vue-router）和狀態管理庫（Vuex）。 Vue.JS 兼具了 React 和 Angular 1 二者的優勢，其中 React 的基本思想是組件式開發，而 Angular 1 是模板加強。

2. 前端框架

前端框架的百花齊放也許是出現 JS 疲勞的緣由所在，新的框架、工具和庫層出不窮，把創新的車輪推向前進。

歸納來說，前端框架能夠分爲兩大類：

大而全的框架，包括建立現代 WEB 應用的全部功能特性，好比路由、數據獲取、狀態管理，典型項目有：Angular 一、Angular 二、Ember 和 Aurelia。
小而美、聚焦在 UI 層面的解決方案，典型項目有 React、Vue.JS、Inferno...

前文中咱們已經探討了排名第 1 的項目 Vue.JS，下面來看看其餘競爭者：

React 及其競爭者

React 排名第 2，全部開發者都知道 React 有着龐大的社區和完整的生態系統。

React 設計思想很是流行，受 React 啓發而誕生了大量類 React 項目，這些項目繼承 React 優勢的同時有很是大的改進，好比各類能提升性能和縮短構建時間的瘦身版本。

Inferno 在類 React 項目中是最受歡迎的，它本身則標榜是全部競爭者中性能最快的。

Preact 也是一個很是不錯的選擇，它也有不錯的生態，好比各類腳手架、路由，甚至還有一個 compact模塊讓任何能在 React 環境運行的庫在 Preact 中運行。

Angular 1 和 Angular 2

Angular 項目已經被拆分紅兩個倉庫，由於 Angular 2 幾乎是 Angular 1 的全面重寫，雖然二者在部分概念上是相同的。

Angular 2 所有用 TypeScript 編寫，這樣它利用 ES6 語法特性提供了現代的、全面的 WEB 框架。

Angular 1 (在 Github 上稱做 "AngularJS") 目前仍然被大量的項目使用，目測會持續流行一段時間。

此外，不得不提的 Ember, 雖然社區和生態都很大，可是沒有排到前 10 名。

總體來看，相比於那些開箱即用的大而全的框架，開發者更青睞本身組合使用那些小而美的輕量級解決方案，由於這樣給了他們更大的自由度。

3. Node.js 框架

2016 年建立和部署 Node.js 應用變得空前的容易，好比下面這些解決方案：

Now
Webtask.io
Stdlib

相似於 Gomix 的項目則把 Node.js 的門檻降到不能再低，只要經過瀏覽器簡單的點擊拖拽就都能垂手可得的編寫和分享 Node.js 代碼。

那麼，若是想建立一個 WEB 應用，咱們該選哪一個框架呢？

Express

Express 已經成爲開發 Node.js WEB 應用的標準框架，大多數工程師都很熟悉他的設計思想（極簡的內核，但能讓你用各類中間件來擴展他的功能）。

Koa

Koa，設計思想很是相似 Express，區別在於它是使用 ES6 中的 generator 編寫的，這種寫法解決了你們所熟知的回調地獄問題。

Feathers

Feathers，是用來實現面向服務架構的一種靈活的解決方案，很是適合建立 Node.js 微服務。

Nodal

Nodal，用來建立基於 PostgreSQL 的無狀態的、分佈式的服務。

Keystone

Keystone，是我所知的快速搭建基於 MongoDB 的管理後臺的最佳解決方案，Keystone.js 基於數據模型的定義便可自動生成後臺界面，支持常見的增刪改查操做和靈活的數據過濾。

Sails

Sails，是一個全能的 MVC 框架，主要是受到 Ruby on Rails 啓發，他已經存在很長時間，支持各類數據庫，無論是 SQL 仍是 No-SQL。

Loopback

Loopback，內置了不少特性的成熟框架，支持基於 token 的認證，支持各類數據庫。 Loopback 的「殺手鐗」功能是 API 瀏覽器，該功能能讓開發者用很是直觀的方式查看全部的 API 接口，若是你須要建立 API 服務的話，它無疑是個很好的選擇。

4. React 項目模板

React 是很是棒的 UI 庫，可是基於現代 WEB 應用開發工做流建立 React 應用時仍然須要大量的配置才能把全部的部分拼湊到一塊兒，如何建立一個「真實」的 React 應用呢？各類 React 項目模板（boilerplates）和啓動工具箱（starter kits）就是來解決這個問題的，典型的有下面幾個：

Create React App

Facebook 開源的，輕量級的解決方案，使用 Create React App 建立 React 應用很是的簡單。Create React App 的做者 Dan Abramov (也是 Redux 的做者，目前供職於 Facebook) 在功能豐富和簡單可靠之間取得了很好的平衡，沒有酷炫的樣式解決方案 (僅需純粹的 CSS) ，沒有服務端渲染，可是 React 應用開發的其餘方面都渾然一體，開發者體驗也很是棒。

相比於同類工具，若是你使用了 Create React App，它會成爲你項目的依賴，全部的黑科技都是不可見的，你只能看到你本身的應用代碼，你能夠隨時更新這個依賴。

React boilerplate

React boilerplate 則包含了 React 應用所需的一切，包括 Redux 以及基於 Web Worker 實現的離線功能。使用它能夠建立「漸進式 Web 應用」（亦稱「PWA」），若是想了解更多 PWA 的知識，能夠閱讀 Nicolás Bevacqua 的這篇文章。

Next.js

Next.js, 由來自 Zeit 的 busy folks 建立，支持服務端渲染，能夠用來建立 universal 應用（或者「同構應用」），直白點說，這種應用的先後端能夠運行相同的代碼。

5. 移動開發

JS 的通用性是毋庸置疑的，現現在能夠用 WEB 工程師很是熟悉的技術（HTML、JS、CSS）構建 Native 移動應用。下面是幾個典型的解決方案：

React Native

使用 React Native，能夠用相似於 React 思路，用同一份代碼構建出支持 iOS 和 Android 平臺的、真正的 Native 應用，想了解如何構建跨平臺的更多內容？建議閱讀這篇教程。

其餘基於 Cordova 的方案多使用 Webview 來渲染頁面，相比於 Native 應用運行時性能會大打折扣，不過，開發者那種「Write Once Run Everywhere」的夢想終於成真了！

Ionic

Ionic 是「hybird」應用開發領域的先鋒，底層基於 Cordova 來訪問移動設備的系統功能，社區和生態系統很是成熟。

NativeScript

NativeScript 和 React Native 的目標是相同的，即基於 WEB 技術構建 Native 應用，其核心分爲兩部分：NativeScript 內核，NativeScript + Angular 2。

展望將來...

Weex 是 2017 年須要密切留意的項目，他是基於 Vue.JS 的、用來建立跨平臺移動應用的框架。

6. 編譯工具

咱們這裏討論的是把其餘語言或者 JS 變體編譯（Compiler）或轉換成（Transpiler）標準 JS 代碼的工具，這些工具生產出來的代碼能夠在瀏覽器或者 Node.js 環境中執行。

最多見的場景是，這類編譯工具可以讓開發者使用 ES6 語法編寫代碼，而不用擔憂瀏覽器支持狀況。

TypeScript

最具潛力的編譯工具多是 TypeScript 了，它爲 JS 帶來了相似於 Java 和 C# 的靜態類型，而 Angular 2 徹底使用 TypeScript 的事實讓他看起來更誘人，固然關於在 JS 使用靜態類型的討論有不少，建議閱讀下面這兩篇文章來作出本身的決定：

你可能不須要 TypeScript
TypeScript 入門手冊

Babel

Babel + webpack 已經成了 ES6 代碼轉換、React 模板編譯的標準工具組合，Babel 最初是用來編譯 ES6 的，但得益於他的插件系統，現在儼然已經演化成一個用途普遍，幾乎能實現各類代碼轉換的工具。

Flow

Flow 並非一個編譯工具，它只是一個基於 JS 代碼標記的靜態類型檢查工具，也就是說，使用 Flow 時須要在代碼中添加各類註釋來註明須要的數據類型，關於 Flow 的使用，能夠閱讀這篇文章。

Flow 在不少 Facebook 項目的源代碼中都有使用，而 Facebook 已經成爲開源社區的重要玩家，開源了React、React Native、Flux、Immutable、Jest 等衆多的項目，相信你明白這意味着什麼。

CoffeeScript

CoffeeScript 的簡潔語法大量借鑑了 Python 和 Ruby 的語言特性，過去幾年曾經是最受歡迎的編譯器，但 2016 年不少開發者從 CoffeeScript 轉向了 ES6 + Babel 組合。

7. 構建工具

2016 年「構建過程」彷佛成了 WEB 項目的標配，若是一個 WEB 應用沒有構建過程則是不可思議的事情，在構建過程當中一般你須要作編譯模板、靜態資源合併壓縮之類的事情，覺得生產環境作好準備。

Webpack

Webpack 是構建單頁應用（SPA）的主要工具，它和 React 生態結合的很是好，最新發布的 Webpack 2 帶來了很多很是有前景的改進，具體能夠閱讀這裏。

Gulp

Gulp 是一個通用的任務運行工具，能夠在任何和文件系統打交道的自動化流程中使用，能夠認爲它並非Webpack 和 Browserify 的直接競爭者。

和 Grunt 相似，Gulp 的主要角色是任務管理，你可讓它壓縮合並代碼，可是它不會幫你處理 JS 模塊化問題，而 Webpack 和 Browserify 是能夠的。

固然了，Gulp 能夠和 Webpack 結合起來使用，即便開發者傾向於使用 npm script 也是能夠的，實際上不少開發者就是這麼作的。

Browserify

Browserify 由於很是簡單，在 Node.js 工程師羣體中比較受歡迎。簡單來講，它把多個 Node.js 的包做爲輸入，而後輸出單個編譯後的文件。相比而言，Webpack 在 WEB 應用打包方面考量更多，更適合現代的 WEB 開發工做流。

展望將來...

2017 年須要留意的模塊打包工具是 rollup，它強調的是性能，基於 ES6 的模塊規範，而且支持 Tree Shaking 這種黑科技，構建產生的結果只包含實際業務邏輯用到的代碼，而不是簡單的文件合併。

8. 測試框架

相比於流行了好久的測試框架 Jasmine 和 Mocha，2016 年出現了 2 個更新的、並有不少人使用的測試框架：AVA 和 Jest。

AVA

AVA 由很是高產的 Sindre Sorhus 開發和維護，其標榜的重點是性能和 ES6，可以並行的運行測試。AVA 的語法很是相似 Tape 和 Node-tap。

Jest

Jest，又一個 Facebook 開源項目，最近幾個月引發了大量的開發者注意，在 React 社區更加流行，而且愈來愈多的人開始遷移到 Jest，能夠閱讀這個故事，2017 年 Jest 極有可能成爲最受歡迎的測試框架。

Jest 內置了很是強大的 Mock 特性，而其餘的測試框架一般須要依賴第三方的 Mock 包，好比 Sinon.JS。

9. IDE

說到 IDE（集成開發環境，Integrated Development Environment），使人振奮的是最受歡迎的 2 款 IDE 都是用 WEB 技術開發的開源項目。

Visual Studio Code

微軟的 Visual Studio Code 在 WEB 開發者羣體中很是受歡迎，由於他提供了很是棒的 TypeScript 和 Node.js 集成，部分開發者甚至特別提到 Visual Studio Code 的智能感知功能極大的提升了開發效率。如今把微軟和開源放在一塊兒，終於不那麼違和了。

Atom

Atom 由 Github 開源，使用 Electron 構建，在受歡迎程度上並無落後 Visual Studio Code 太多，關於 Atom 的一個有趣事實是，他所使用的主要語言是 CoffeeScript。

10. 靜態網站生成器

靜態網站生成器（SSG）是指可以生成一大坨 HTML、CSS、JS 文件方便你快速部署到簡單的 WEB 服務器上而不用安裝和配置數據庫的工具。就像 Gatsby 所標榜的：

像 1995 年那樣構建網站。

靜態網站的特色是速度快、健壯性高、容易維護。

靜態網站如此流行的重要緣由是市面上有不少很是好用而且免費的靜態網站託管解決方案，好比：

Github pages
Gitlab pages
Netlify
Surge
Now static

Hexo

2016 年最流行的靜態網站生成工具是 Hexo，他有點相似於 Workdpress 這樣的 CMS 系統，能夠用來方便的建立博客網站，他還有不少其餘的特性，好比國際化插件。

Gatsby

新玩家 Gatsby 是一個比較有趣的解決方案，相比於競爭者優秀的地方在於：它使用 React 生態系統來生成靜態文件，能夠組合 React Component、Markdown 和服務端渲染來完成靜態網站生成讓他更強大。

總結和展望

雖然 2016 年出現了「JS 疲勞」，也發生了戲劇性的事件(如 "leftpad 門")，但整體來說 2016 年對 JS 社區來講是很是重要的一年，部分項目在 2016 年崛起，如 Vue.JS 和 React Native，還有些黑馬項目 2016 年誕生，如 Yarn 和 Create React App。

咱們談論了 2016 年 Github 上最受矚目的開源項目，可是真正重要的是開發者的滿意度，若是你想就這個話題有更量化的認識，建議去看看 Sacha Greif 的調查 State of JavaScript，該調查收集了超過 9000 份問卷。

接下來該思考 2017 年了，哪些將會持續得到開發者的青睞？哪些會成爲新星呢？下面是我精選的 10 個我 2016 年比較欣賞，而且 2017 年會繼續保持增加的項目或創意：