2016年JavaScript領域中最受歡迎的“明星”們
JavaScript 社區的發展正如盛壯之時的騏驥，—日而馳千里，趨勢如長江后浪推前浪。
2016 年已經過去了，你是否會擔心錯過一些重要的東西？無須擔心，JS.ORG 不久前分享了一篇博文，為大家回顧了去年主要的趨勢。
InfoQ 翻譯并整理這篇博文，以饗 JavaScript 的開發者。
JS.ORG 通過比較過去 12 個月里，在 Github 上增加的星標數，告訴你 2016 年的趨勢。
在 2015 年，React 是社區之王，Redux 在與 Flux 的大戰中獲勝。那么，誰是 2016 年的 JavaScript 的新星？
以下圖表比較了 Github 在過去 12 個月中增加的星標數量。JS.ORG 分析了 bestof.js.org 的項目，這是一個與網絡平臺相關的最佳項目的精選列表。
一. 2016 年最受歡迎的項目
概述
通過一年中最熱門的 10 個項目，由此可以很好地了解 2016 年的 Web 開發環境，因為您會發現：
- 3 個 UI 框架：Vue.JS、React、Angular 2
- 新的 node.js 包管理器：Yarn
- 構建桌面應用程序的領先解決方案：Electron
- 快速啟動新的 React 項目的解決方案：Craste React App
- 移動框架：React Native
- 最著名的 CSS 工具包：Bootstrap
- 基于函數概念的狀態管理庫：Redux
- 強大靈活的圖表庫：D3
以上展現了 2016 年中，JavaScript 表現出了無處不在，功能多樣的特性。
而 2016 年的王者是……
Vue.JS 項目在去年的 Github 上獲得了超過 25,000 顆星標，將包括 React 和 Angular 的其他框架甩在身后，一騎絕塵。
10 月發布的 Veu.JS 的版本2，帶來了虛擬 DOM 的性能。
Vue.JS 用于大公司（包括阿里巴巴，中國最大的電子商務公司）的生產，所以你可以認為它是一個安全的選擇。
它已經有一個相當成熟的生態系統，包括路由（vue-router）和狀態管理庫（Vuex）。
看來 Vue.JS 采用了最好的 React（組件方法）和 AngularJS（模板是 html 代碼增強的框架特性）。
二. 前端框架
前端框架類可能是 2016 年 JavaScript 最累的一個牌行榜，幾乎每個月都會出現一個競爭者，但是，這推動了創新的步伐。
確切地說，在這個類別中混合了兩種類型的項目：
- 完整的框架包含了所有功能，能夠創建一個現代的 Web 應用程序（路由、數據提取、狀態管理）。AngularJS、Angular 2、Ember 或 Aurelia 都屬于這一類。
- 更輕量級的解決方案專注于 UI 層，如 React、Vue.JS、Inferno……
我們已經提到了總體排名第一的 Vue.JS，讓我們看看其他競爭者。
React 及其競爭者
React 總體排名第二，前端開發者沒有誰可以忽略 React 及其豐富的生態系統。
React 如此受歡迎，它激發了很多其他庫，旨在采取最好的 React，沒有臃腫，提高在瀏覽器的性能和構建時間。
Inferno 是這個類別中最受歡迎的項目，它聲稱是 React 最快的替代品。
在我們的排名中，緊跟 Inferno 之后，Preact 也是 React 的一個不錯的替代品。它的生態系統是相當成熟的，例如有一個具有離線功能的 Bolierplates、路由、Compat 模塊，以便您可以使用 Preact 項目中的任何現有 React 庫。
Angular 1 和2
Angular 項目已經拆分為 2 個存儲庫，因為 Angular 2 是 Angular 1 的完全重寫，即使一些概念保持不變。
Angular 2是用 TypeScript 編寫的，并且利用 ES6 提供一個現代和徹底的框架。
AngularJS 項目是 1.x 的分支，它在許多項目中仍然使用，并將繼續流行一段時間。
值得一提的是，Ember 雖然擁有龐大的生態系統，但它的社區并不在前十名。
因此看起來，與其選擇“開箱即用”的所有功能的完整框架，2016 年開發商更傾向輕量級的方案，并喜歡組成自己的方案——“點菜”。
在 2016 年調味的更輕的方法，并更喜歡組成自己的解決方案“點菜”。
三. Node.js 框架
2016 年，使用以下解決方案創建和部署 node.js 應用程序從未如此簡單：
像 Gomix 這樣的項目甚至降低了 node.js 世界的門檻，使得任何人都可以在瀏覽器中輕松點擊幾下來編寫和共享 node.js 代碼。
如果你必須構建一個 web 應用程序，你會選擇哪個框架？
當你使用 node.js 構建 Web 應用程序時，Express 通常被視為事實上的 Web 服務器。它的哲學（一個可以使用中間件包擴展的簡約核心）是大多數 node.js 開發人員熟悉的。
Koa 的哲學接近 Express，但它是使用 ES6 生成器，以避免有時被稱為回調地獄的問題。
Feathers 是一個非常靈活的解決方案，創建一個“面向服務”的架構，它是一個很好的適合創建 node.js 微服務。
Nodal 框架以目標無狀態和分布式服務連接到 PostgreSQL 數據庫。
Keystone 是我所知得到一個管理客戶端并運行得最好的解決方案之一，以便管理來自 MongoDB 數據庫的內容。管理界面自動從模型生成，具有所有 CRUD 操作和精細的過濾器。
Sails 是一個完整的 MVC 框架，受 Ruby on Rails 的啟發（因此名為 Sails！）。它已經存在了很長時間。它可以與任何類型的數據庫（SQL 或無 SQL）良好工作。
Loopback 是另一個成熟的框架，內置許多函數，包括使用令牌和到任何類型的數據庫的連接器的認證。
它的殺手級功能是 API 瀏覽器功能，允許開發人員以直觀的方式檢查所有 API 端點，并能檢查任何用戶的令牌。如果你必須構建一個 API，這絕對是一個不錯的選擇。
四. React Boilerplates
React 是一個偉大的 UI 庫，但使用 React 和現代 Web 開發工作流工具需要大量的配置。那么如何開始創建一個應用程序呢？
這是 React 的“Boilerplates”和其他“Starter Kits”提供的答案：
非死book 通過提供一個稱為 Create React App 的輕量級方法來解決這個需求，這是一個非常方便的啟動一個新的 React 項目。
Dan Abramov（Redux 的創造者，現在為 非死book 工作）做了一個偉大的工作，在簡單性和功能找到了正確的平衡點。例如，沒有花哨的樣式解決方案（只是簡單的 CSS），沒有服務器端渲染，但是所有的一切，都很好地打包了，開發人員的體驗非常棒。
與其競爭者的主要區別是，如果使用 Create React App，它將成為項目的依賴項，所有的魔法是隱藏的，你看到的只是你的應用程序代碼。您可以隨時升級依賴關系，它并非只是一個起點。
命名為 React boilerplate 具有您需要的一切，包括 Redux 和一些漂亮的離線功能，利用 web workers 技術。
它讓開發人員創建所謂的漸進式 Web 應用程序（Progressive Web Applications，PWA）：離線運行的 Web 應用程序，使用一種名為 Service Worker 的技術，請閱讀 NicolásBevacqua 的這篇文章。
Next.js 由 Zeit 創建，具有可用于創建通用應用程序的服務器端呈現功能（或同構應用程序，如我們在 2015 年所說），也就是說客戶端和服務器端運行的應用程序使用相同代碼。
五. Mobile
JavaScript 無處不在，你可以使用技術 Web 開發人員已知的任何技術（HTML、JavaScript、CSS）構建移動應用程序。
使用 React Native，你可以從相同的代碼庫使用 React 開發人員熟悉的概念構建 iOS 和 Android 真正的原生移動應用程序。要了解有關構建 iOS 和 Android 應用程序的更多信息，請閱讀這本教程。
其他基于 Cordova 的解決方案，依靠 Webview 來渲染屏幕，并且不如原生解決方案那么高效。 “一次編寫，隨處運行”，這是開發人員的夢想成真！
Ionic 是“混合”應用程序概念的先驅。在后臺中，它基于 Cordova 訪問移動設備功能。這是一個非常成熟的大型生態系統。
NativeScript 旨在實現與 React Native 相同的目標（使用 Web 技術構建真正的移動應用程序）。它有兩種種風格：NativeScript Core 和 NativeScript + Angular 2。
前瞻
在 2017 年密切關注的一個項目：Weex，一個構建在 Vue.JS 之上的移動跨平臺 UI 框架。
六. Compilers
我們在這里談論生成任何語言（或 JavaScript 的任何變體）的 JavaScript 的編譯器（或“transpilers”）。它們將代碼轉換為瀏覽器（或 node.js）可以執行的“標準 JavaScript”代碼。
例如，編譯器允許開發人員使用最新版本的 JavaScript（ES6）編寫代碼，而無須擔心瀏覽器的支持。
最時髦的轉換器是 TypeScript，它為 Web 開發人員提供了 Java 和C＃開發人員使用的靜態類型。事實上，Angular 2使用 TypeScript 增加了更多的牽引力。在 JavaScript 中使用類型有優缺點，閱讀這些文章，使你自己的觀點：
Babel 與 Webpack 一起，幾乎成為編譯 ES5 代碼和標準 JavaScript 中的庫（如 React（JSX））使用的模板的標準。最初創建用于編譯 ES6，它成為一個更通用的工具，可以完成任何代碼轉換，拜一個系統的插件所賜。
Flow 不是一個編譯器，它是一個用于“注釋”JavaScript 代碼的靜態類型檢查器。基本上在代碼庫中使用 Flow 意味著添加注釋來描述期望的類型（點閱讀更多了解使用 Flow 編寫模塊）。
它在 非死book 項目的代碼源內使用。因為 非死book 成為開源世界的主要角色之一（像 React、React Native、Flux、Immutable、Jest 等項目），這意味著很多。
多年來，CoffeeScript 由于其精簡語法（靈感來自 Python 和 Ruby 語法），成為最受歡迎的編譯器，但它在 2016 年不太流行，很多開發人員從 CoffeeScript 遷移到 ES6 與 Babel。
七. Build Tools
在 2016 年，很難想象一個沒有任何構建過程的 Web 應用程序。通常需要一個構建過程來編譯模板和優化資源，以便在生產環境中運行 Web 應用程序。
Webpack 是用于構建單頁應用程序的主要工具，它與 React 生態系統一起使用。新發布的版本 2 帶來了一些令人鼓舞的增強功能（查看這份介紹）。
Gulp 是一個通用的任務運行器，可以用于涉及文件系統的任何類型的自動過程，因此它不是 Webpack 或 Browserify 的直接競爭者。
像 Grunt 一樣，Gulp 通過聚合工作：你可以要求它縮小和連接資源列表，但是它不會像 Webpack 或 Browserify 那樣處理模塊化 JavaScript 本身。
然而，它可以很好地與 webpack 一起工作，即使開發人員傾向于使用 npm 腳本。
Browserify 由于其簡單性，受到了 node.js 開發人員喜愛。
基本上，它需要幾個 node.js 包作為輸入，并為瀏覽器生成一個單一的“構建”文件作為輸出。但是似乎一個更有見地的工具像 Webpack 是一個更好地適合 Web 應用程序工作流。
前瞻
2017 年的模塊捆綁包，強調性能：匯總（rollup）。
它使用 ES6 模塊與一個稱為樹搖動（Tree shaking）功能創建捆綁包，只包括您在代碼中使用的功能，而不是搬運完整的庫。
八. Testing Frameworks
最著名的兩個測試框架是 Jasmine 和 Mocha，但最近的兩個項目在 2016 年有更多的牽引力：AVA 和 Jest。
AVA，由多產的 Sindre Sorhus 創建的強調性能（并行測試）和 ES6。 AVA 的語法接近標準測試框架，如 Tape 和 Node-tap。
Jest，另一個 非死book 項目，在過去的幾周里得到了很大的牽引力。它在 React 社區中是眾所周知的，越來越多的人轉向 Jest（閱讀這篇故事來了解），它可能成為 2017 年最流行的測試框架。
Jest 有內置的良好的模擬能力，而其他測試框架通常依賴于像 Sinon.JS 這樣的庫。
九. IDE
關于 IDE（Integrated Development Environment，集成開發環境），值得一提的是，兩個最流行的 IDE 是使用 Web 技術開發的開源項目。
在我們的結果中，Microsoft 憑借 Visual Studio Code 遙遙領先。
它提供了一個與 TypeScript 和 node.js 的很好的集成。一些開發人員提到關于開發速度，很感謝 IntelliSense 功能（高亮和自動完成的混合）。
在同一句話中提到“開源”和“微軟”不再矛盾了！
Atom 是由 Github 推動的、并且由 Electron 構建（像其他一些桌面應用程序，包括 Slack 桌面客戶端），并非遠遠落后 Visual Studio Code。關于 Atom 的一個有趣的事實：它的主要語言是 CoffeeScript！
十. Static Site Generators
靜態網站生成器（Static site generators，SSG）是生成一系列 .html、.css 和 JavaScript 文件的工具，您可以在任何簡單的 Web 服務器（Apache 或 NGNX）上部署，而不必大驚小怪，或者設置數據庫或任何網絡框架。正如 Gatsby 網站所說：
就像 1995 年那樣建立網站。
靜態網站具備快速性、魯棒性和易維護性。
SSG 非常受歡迎，因為有很多很好的解決方案來主持靜態網站免費：
在 2016 年，使用 node.js 構建的最流行的 SSG 是 Hexo。它是一個徹底的 SSG，接近 CMS 系統，可用于構建一個博客，如 Wordpress。它有很多功能，包括國際化插件。
新來的 Gatsby 是一個非常有趣的解決方案，它從競爭對手脫穎而出，因為它使用 React 生態系統來生成靜態 html 文件。事實上，您可以組合 React 組件，Markdown 文件和服務器端渲染使它非常強大。
# 總結
盡管存在 JavaScript 疲勞?和戲劇（記住“左鍵門”），但對于社區而言，隨著像 Vue.JS 和 React Native 項目的興起，以及像 Yarn 或 Creat React App 的新項目，2016 年仍然不啻為一個偉大的年份。
我們一直在談論的項目，2016 年在 Github 得到了吸晴，但真正重要的是開發者的滿意度。所以，如果你想要一個更定性的方法，上 Sacha Greif 查看 JavaScript 調查的結果，它收集了超過9,000 的反饋。
以下是我的年度十大選擇，代表了在 2016 年我所喜歡的項目和想法，將在 2017 年持續增長：
- Vue.JS：勢頭強勁，不會停止
- Electron
- Create React App
- React Native
- Gatsby
- Yarn: 一個快速，可靠和安全的依賴管理，可以取代 npm，點此處了解 node.js 包管理器的狀態
- 漸進式 Web 應用程序
- Node.js 微服務使用像 Now 這樣的托管解決方案很容易部署
- Node.js 的演變：最新版本對 ES6 語法提供良好的支持
- 還有一個選擇是 GraphQL：據我了解，GraphQL 將有大動作
來自: InfoQ