【翻譯】JavaScript框架的最終指南

翻譯原文連接
個人翻譯小站

緊跟JavaScript框架的腳步是一個挑戰。如今有太多的框架，幾乎一個月就會出來一個新的。那麼如何知道到底哪個比較合適你的項目呢？它們分別有什麼優勢和缺點呢？你要如何開始呢？

這就是這篇指南出來的意義。它是一個活生生的文檔，是全部已知前端JavaScript框架的參考（不包括歸檔或棄用的項目）。在這種狀況下，「框架」一詞在廣義上被普遍使用。它包括像React這樣的用戶界面(UI)庫，以及像Angular同樣的完整框架。

爲何它有益?

大家當中有些人可能會好奇，爲何這個指南有益。大多數讀者最終會使用我稱之爲「三巨頭」的框架之一—React, Angular and Vue。很好，他們是很好的選擇。那也就是說，這篇指南有其存在的價值。這裏有個例子...

也許你據說過 Dojo 這個框架。也許沒有，雖然，Dojo專一於一些使其獨特的事情—可訪問性。默認狀況下，全部的Dojo小部件都是能夠訪問的，而且它提供了一切國際化所須要的應用程序。

另外一個例子...也許你正在開發一款應用程序，在移動網絡上須要出色的性能。有一些很是好的，下面列出的高性能庫和框架可能正好符合這個要求。

還有一些小框架能夠提供極好的學習機會。你能夠深刻了解代碼並瞭解如何構建此類軟件。Picodom是一個能夠用來構建本身的framework庫，很酷，對吧？

如何組織本指南

這些框架被分爲普遍的類別 — 你將會在下面列出的表中看到。在可能的範圍內，每一個框架都有一個部分來解釋這個框架的基本原理、優缺點以及一些額外的學習資源。

若是你是框架的做者—或者粉絲 —而且你沒有看到列出你的框架，或者但願可以糾正一些信息， 在Twitter上聯繫我，我會很樂意增長或者更新清單。

指南圖標:

下面的圖標旨在幫助讀者瞭解框架的通常特徵和趨勢。他們只是粗略的嚮導。

🔥性能：在基準測試 中排名前五。
函數式編程範式
反應性編程範式
面向對象的編程範式
TypeScript做爲主要的開發語言

三大巨頭

React

Angular

Vue.js

具備歷史意義的

AngularJS

Backbone

Ember

值得注意的

Aurelia	Elm	Inferno 🔥
Polymer	Preact	ReasonML
Svelte 🔥

剩下的包

AppRun	Binding.scala	Bobril 🔥
Choo	CxJS	Cycle.js
DIO 🔥	Dojo	Domvm 🔥
DoneJS	Etch	Gruu
Glimmer	Hyperapp 🔥	Hyperdom
hyperHTML	Ivi 🔥	Knockout
Maquette	Marko	Mithril
Moon	Nerv	NX
petit-dom 🔥	Pux	Ractive
react-lite	RE:DOM 🔥	Reflex
Riot	rxdomh	San
Simulacra.js	Slim.js	Stem JS
Stencil	Stimulus	Surplus 🔥
Thermite	TSERS	Ultradom 🔥
Vidom	Vuera

三大巨頭

目前在流行和使用中占主導地位的三個框架是React, Angular 和Vue。他們每一個都有龐大的社區和大量可用的培訓資源。若是你是一個新開發人員，正在學習一個框架來幫助你找到一份工做，這三個是你最好的選擇。如下是他們過去六個月的npm下載狀況：

咱們能夠看到React遠超Angular and Vue。不太明顯的是，過去一年，Vue的增加速度與Angular速度相比大約翻了一番。若是GitHub上的星是開發者熱情或興趣的標誌，那麼Vue在那裏看起來也很強大，有79000顆星，而Angular只有32000顆。在這篇文章中，React有近8.6萬顆星。

React

React 2013年5月做爲一個開源項目被引入。最初的做者是Facebook的工程師喬丹·沃克(Jordan Walke)。

React自稱是「構建用戶界面的JavaScript庫」，而不是像Angular這樣的完整框架。諸如路由、狀態管理和數據獲取等問題都留給了第三方。這就產生了一個巨大而活躍的生態系統。

許多大的React應用會使用流行的Redux 庫進行狀態管理，React Router 做爲路由，可是還有其它好的選擇。

React負責在新一代開發人員中推廣函數式編程原則。雖然它不是一個純粹的函數庫，但它容許開發人員以主要的函數樣式工做，特別是與Redux結合使用時。

想了解更多React組件與其它組件的對比，看個人文章在React and Angular，另外還有React and Vue。

優勢

• 很是受歡迎，有強大的就業市場
• 大量的培訓資源和第三方庫幫助加速開發
• 跨平臺團隊的最佳選擇(web、移動、桌面、其餘設備)
• 通用性
• 強大的企業支持(Facebook)

缺點

• 大量的選擇讓人不知所措
• 新手並不清楚如何是最佳實踐
• 學習曲線對於構建更大的應用程序是很困難的

其它的資源

• 是的，React正在接管前端開發。問題是爲何。
• 我從Angular轉向React的10個緣由
• React的前端功能
• 初學者指南 (免費視頻教程)

⬆️ 返回頂部

Angular

Angular 是AngularJS的繼承。它是一個完整而且穩定的框架，它提供了默認的數據抓取，狀態管理，開發語言以及構建工具鏈。

也許Angular最引人注意的是 TypeScript 做爲開發語言進行使用。這使得框架很適合 那些傳統的面嚮對象語言，好比Java和c#，TypeScript能從這些語言中汲取靈感。

聽說"企業"是Angular的目標用戶。從某種意義上來講，不少大公司的成員比較熟悉Java和其它一些面向對象的語言，這也許是對的。

優勢

• 功能齊全的框架以及默認通過了很好的測試
• TypeScript提供了很熟悉的語言，對於那些有面向對象編程背景的人
• 強大的企業支持(Google)
• 清晰的最佳實踐

缺點

• 學習曲線很艱難
• TypeScript很難被採納
• 在基準測試中啓動指標不佳

其它的資源

• 爲何我要使用Angular?
• 新項目中使用Angular 2實列
• Angular 4的60分鐘講解 (免費的視頻教程)
• Angular中使用RxJS
• 做爲React和Vue的開發者學習Angular5

⬆️ 返回頂部

Vue.js

雖然常常被視爲"新來的孩子", Vue從2013年就已經開始了。尤雨溪是創造者以及主要的開發者，不像React和Angular，vue沒有大公司的直接支持，相反，它依賴於我的和企業的捐贈。

在這三大流行的框架中，Vue被視爲是最易上手的。它在不少方面相似React，可是也有不少相似AngularJS—例如，指令和模板。

Vue的相對簡單性、開發人員體驗和良好的性能使得它的流行度猛增。

其中一個值得注意的vue特色是它是"先進的框架"，能夠用做jQuery替換，也能夠用於大型單頁應用程序。從Vue文檔：

與其餘單片框架不一樣，Vue從頭設計到尾都是漸進可採用的。核心庫只關注視圖層，而且很容易與其餘庫或現有項目進行收集和集成。

雖然Angular對路由和狀態管理等問題具備執拗己見和不可知的態度，可是Vue採用了一種中間的方法，使用官方的路由和狀態管理解決方案，這些解決方案是可選的，可是與核心庫保持同步

想了解更多關於Vue組件與React的對比，看個人文章 綜述了二者不一樣。

優勢

• 簡單易學
• 好的文檔
• 在流行和使用上激增
• 前三種框架的最佳性能

缺點

• 目前的就業市場比React和Angular都要小。

其它的資源

• 各類框架之間的對比
• 爲何咱們選擇Vue.js
• 學習Vue 2: 一步一步 (免費的視頻課程)
• 深度剖析相關性

⬆️ 返回頂部

具備歷史意義的

幾年前，這些框架曾一度被認爲是「三巨頭」。雖然如今不太流行，但它們仍然被普遍使用，而且在後來的框架的開發中具備影響力。

AngularJS

在2013年, AngularJS 是最流行的框架。在此期間，致使它流行的一些因素是它的MVC架構，聲明式編程風格、雙向數據綁定和健壯的特性集。

AngularJS有一種執拗已見的方法，目的是爲開發人員提供一個完整解決方案:

在構建web應用程序的客戶端這個總體難題中，AngularJS不是一個單獨的部分。它處理你曾經手工編寫的DOM和AJAX粘合代碼，並將其放入定義良好的結構中。這使得AngularJS對構建CRUD(建立、讀取、更新、刪除)應用程序的方式有本身的見解。但它是執拗已見的，它還確保它的觀點只是你能夠輕易改變的起點。

2013年以後React出現。React使用單向數據流，並認爲雙向數據綁定使應用程序變得困難，特別是他們進行推測。在2014年，Angular團隊推出了Angular 2，一個後來被簡單的進行重命名。Angular。這個新的版本將引入單向數據流以及其它主要變化。這標誌着AngularJS的受歡迎程度開始降低。

儘管其後續項目不斷髮展，AngularJS仍然被普遍的使用，並正在積極的開發中。

優勢

• 豐富的訓練資源
• 好的文檔
• 很好的被創建
• 全功能

缺點

• 雙向數據綁定，其它的技術問題可能不須要的
• 不斷下滑的支持率(不多的工做)

其它的資源

• 深刻理解AngularJS
• PhoneCat教程應用程序
• 實際使用的AngularJS

⬆️ 返回頂部

Backbone

由傑里米·阿什肯納斯(Jeremy Ashkenas)創做，他還創做了咖啡劇本。Backbone 最初是在2010年秋天發佈的。Backbone生態系統的關鍵部分是Marionette，簡化開發的框架。

Backbone是重要的，由於它是第一個經過實現MVC模式將更多結構引入前端應用程序的框架之一。從文檔:

Backbone能夠幫助您的惟一最重要的事情是將業務邏輯與用戶界面分開。當二者糾纏在一塊兒時，改變就很難了;當邏輯不依賴UI時，您的接口就更容易使用了。

近幾年，Backbone的使用量在降低，儘管它繼續在Drupal內容管理系統的最新版本中發佈，一個相關的評論關於降低的可能緣由:

Backbone的做者，Jeremy Ashkenas在1.0發佈後決定根據API和特性集來調用Backbone。這樣作的好處是，到目前爲止，Backbone仍然是最穩定的主要JavaScript框架，但這阻礙了從其餘框架中吸收教訓的努力。

優勢

• 提供了代碼結構
• 穩定的項目

缺點

• 不斷下滑的支持率(不多的工做)
• 命令式編程風格(與流行的聲明式風格相反)

其它的資源

• backbone教程-第1部分:Backbone.Js的介紹。
• 開始使用Backbone.js

⬆️ 返回頂部

Ember

Ember 做者是Yehuda Katz，許多開源項目的多產做者或貢獻者。Ember是基於MVVM模式，而且有豐富的特性集。它還有強大的哲學觀點:

Ember着手爲客戶端應用程序問題提供一個總體解決方案。這與許多JavaScript框架造成了鮮明的對比，這些框架首先在MVC(模型-視圖-控制器)中爲V提供解決方案，而後嘗試從這些框架中成長……

Ember是一組工具的組成部分，它們共同工做以提供完整的開發棧。這些工具的目的是使開發人員迅速高效工做。例如，Ember CLI提供了標準的應用程序結構和構建管道。它還有一個可插拔的體系結構和超過3500個插件來加強和擴展它。

其中一個主要的批評是Ember的大致積，這對性能有負面影響。Ember也被認爲是一個陡峭的學習過程和難以掌握。

優勢

• 清晰最佳實踐
• 很好的建造
• 完整性

缺點

• 大致積
• 學習艱難
• 不斷下滑的支持率(不多的工做)

Additional Resources

• 創造你本身的APP
• Ember.js指南
• Ember.js正在慢慢熱門起來

⬆️ 返回頂部

值得注意

本節中列出的框架都具備良好的文檔和健康的社區。雖然它們不像「三巨頭」那樣被普遍使用，但它們填補了重要的空白，並以其獨特或創新的方法而聞名。

Aurelia

Aurelia, 羅伯特·艾森伯格(Rob Eisenberg)著有《天使》(AngularJS)和艾森伯格以前的框架《杜蘭達爾》(Durandal)。在建立奧雷里亞以前，艾森伯格是Angular的一員，2014年末因與Angular2項目的方向不一致而離開。

Aurelia是一個完整的框架。下面是文檔的基本介紹:

Aurelia提供了一些核心功能，好比依賴注入、模板化、路由和發佈/訂閱，所以您沒必要爲了構建應用程序而拼湊一堆庫。在這個豐富的核心之上，Aurelia還爲國際化、驗證、模態對話框、UI虛擬化等提供了許多額外的插件。

你也不須要拼湊一堆不一樣的工具。Aurelia提供了一個用於生成和構建項目的CLI，一個用於調試的瀏覽器插件和一個VS代碼插件。可是，您沒必要使用其中的任何一個，由於Aurelia的結構使您可以交換任何細節，甚至包括模板/綁定引擎，以確保最大的靈活性。

優勢

• 完整的方案
• 語言不可知，適用於JavaScript、TypeScript和其餘語言。
• 穩定的API

缺點

• 較小的社區與頂級框架
• 不多的工做機會

其它的資源

• Aurelia和Angular2應該如何選擇?
• 建立一個Todo應用
• Rob Eisenberg對Aurelia以及它如何與Angular2和React進行抗爭

⬆️ 返回頂部

Elm

Elm 在這個列表中是惟一的。相比於一個特別的框架，它其實是一種編譯JavaScript的獨立語言，相似於Reason。可是，它將本身定位爲React的備選辦法：

Elm是一種編譯爲JavaScript的函數語言。它與一些項目競爭，如做爲建立網站和web應用的工具的React。Elm是一款很是注重簡單，易使用，而且保證質量的工具...我能夠很放心保證，若是你給Elm一個機會，在裏面作項目，最終您將編寫更好的JavaScript並對代碼進行響應。

Elm也有很大的影響力，包括成爲流行的Redux狀態管理庫的靈感來源之一。

Elm基本優勢：

忘記你據說過的函數式編程。花言巧語，奇思妙想，糟糕的工具。噁心。Elm是關於：

• 在實踐中沒有運行時錯誤。沒有空。沒有未定義的不是函數。
• 友好的錯誤消息能夠幫助您更快地添加特性。
• 有良好架構的代碼，在應用程序增加時保持良好架構。
• 爲全部的Elm包自動執行語義版本控制。 JS庫的任何組合都不能提供這種功能，但在Elm中，這一切都是免費和容易的。如今，這些美好的事情是可能的，由於Elm創建在40多年的類型化函數語言上。

優勢

• 消除幾乎全部運行時錯誤
• 強壯的架構
• 簡化的重構

Cons

• 在某些狀況下須要使用JavaScript的互操做性(增長了複雜性)。
• 很小的社區
• 不多的工做機會

其它的資源

• Elm的介紹
• 開始使用Elm搭建web應用程序

⬆️ 返回頂部

Inferno

若是性能是你最關心的，Inferno正是適合你的框架。最開始的做者是多米尼克·甘納韋—如今，做爲React團隊的一員，Inferno最初的設計目的是爲了證實JavaScript框架能夠在移動設備上運行良好。

Inferno兩年前開始的，看看UI庫是否真的能改善移動設備上的體驗、電池、內存使用和性能。當時，咱們真的很難在任何UI庫/框架上得到良好的性能——它根本就沒有發生……

Inferno證實它在移動上更快是可能的...就性能而言，Inferno是目前JavaScript UI庫最快的—不管是在基準測試中仍是實際的真實場景中。它在初始頁面加載、解析時間、呈現時間和更新時間方面優於瀏覽器。Inferno的服務器端渲染比React要快5倍，比Angular2快3倍，比Preact和Vue快1.5倍。

Inferno有一個API，跟React很是像，而且使用「Inferno -compat」庫能夠直接將React應用程序移植到Inferno中。

Inferno也有它本身的路由，而且很快將更新版本以匹配React 路由4的API，同時與Redux和Mobx狀態管理庫兼容。

優勢

• 很是好的性能
• 對React開發人員來講，熟悉的API
• 好的文檔

缺點

• 很小的社區
• 使用 inferno-compat 也許會影響性能

其它的資源

• Inferno指南
• 學習InfernoJS: 構建並驗證應用程序
• 採訪多米尼克Gannaway

⬆️ 返回頂部

Polymer

Polymer是谷歌支持的庫，專一於Web組件,一組目前在瀏覽器中不受良好支持的技術。Polymer，伴隨着Polymer App工具，幫助開發者使用這些技術來創建web應用程序。

Polymer是一個輕量級的庫，幫你充分利用web組件 使用Web組件，您能夠建立可重用的自定義元素，這些元素與瀏覽器的內置元素進行無縫交互，或者將應用程序分解爲大小合適的組件，使代碼更簡潔，維護成本更低。 Polymer在標準的web組件上撒了一點糖，可以使你很輕鬆的獲得很好的結果。

Polymer項目的主要動機是推進web平臺前進。Polymer團隊有一個#UseThePlatform標籤，他們在他們的About頁面上解釋：

...在平臺自己以外和之上作太多的事情是有代價的—開發者和用戶都須要支付費用。開發人員的成本以複雜性和鎖定的形式出現。

隨着時間的推移，咱們在平臺之上構建的棧已經將web開發從簡單的視圖源和切換刷新推到一個每一個項目都以巨大的海洋選擇開始的地方。

因爲有了新的原始web平臺，如今平臺自己就能夠知足咱們圍繞平臺構建的許多需求...

咱們相信咱們研究的模式、庫和工具是有益的，而且咱們是很開心的看到他們被普遍的採納。可是咱們的#UseThePlatform的活動最終並非關於驅動人們使用Polymer項目構建的東西。它是關於推廣使用web平臺來交付儘量最好的應用程序。

若是您多年來一直關注谷歌爲推廣web平臺所作的備受讚揚的努力，那麼這些努力中的大部分將聽起來耳熟能詳，並與公司的其餘努力保持一致。

優勢

• 強大的企業支持 (Google)
• 支持新興的web標準

缺點

• 社區的溝通抱怨
• 差的瀏覽器支持限制了視覺的選項/實現

其它的資源

• 建立一個真實的Polymer的To-Do應用
• Polymer: 開始使用
• 用Polymer建立本身的App以及Web組件
• Web組件的失信
• Polymer團隊 - 我真的很沮喪

⬆️ 返回頂部

Preact

做者是詹森•米勒，Preact是一個很是好的React替代品，注重小庫的體積。Preact使用與React相同的API，而且與大部分生態系統兼容。

Preact自己並非要從新實施React。這裏有一些差別。許多這些差別都是微不足道的，或者能夠經過使用Preact -compat徹底消除，這是一層薄薄的Preact層，試圖達到與React 100%的兼容性

Preact不嘗試包含React的每一個特性的緣由是爲了保持小而專一——不然，簡單地向React項目提交優化就更有意義了，該項目已是一個很是複雜、架構良好的代碼庫。

Preact被許多大型組織使用，包括Lyft、Pepsi和Uber。儘管Preact啓動性能(例如頁面加載)比React要好，但在最新的基準測試中，React在加載頁面以後更新UI的速度更快。

優勢

• 輕量
• 好的文檔
• React-兼容性

缺點

• 相比於React很是小的社區(可是有不少重疊，相互交織)
• 使用 preact-compat也許會影響性能

其它的資源

• 開始入門
• 開始使用PreactJS — 一步一步的指南
• Preact的介紹 — 一個小，快的React替代品

⬆️ 返回頂部

Reason

在某種方式上, Reason 能夠認爲是React生態系統的一部分。Reason是一種語言上的語法。它能夠編譯成JavaScript，但也能夠編譯到程序集，用於構建桌面和移動應用程序。如下是文件的進一步解釋：

Reason不是一個新的語言；它是一種新的語法和工具鏈，由通過戰鬥測試的語言OCaml提供支持。Reason爲OCaml提供了一種熟悉的面向JavaScript程序的語法，而且迎合了現有的人們已經知道的NPM/Yarn工做流...

因爲咱們的合做夥伴項目BuckleScript, 將OCaml/Reason編譯成具備流暢互操做的可讀JavaScript。因爲OCaml自己，Reason也能夠編譯成快速的、光骨組裝。

Reason(有時被稱爲推理機)有一個伴生項目，ReasonReact：

ReasonReact是一種更安全、更簡單的構建React組件的方式。

經過利用後者強大的類型系統、表達性的語言特性和與JS的流暢互操做性，ReasonReact將ReactJS的特性變成了一個API，即：

• 安全和靜態類型
• 簡單和精益
• 熟悉和容易插入到現有的ReactJS代碼庫。

• 通過深思熟慮(由ReactJS的創造者本身作的!)

  人們常說，編寫ReactJS代碼就像「使用JavaScript」。一樣的道理也適用於ReasonReact，但咱們進一步推進它；編寫路由、數據管理、組件組合和組件自己感受就像「僅僅使用Reason」。

優勢

• 強大的企業支持 (Facebook)
• 好的文檔
• 通用性
• 對React開發者很熟悉

缺點

• 很是新??

其它的資源

• ReasonML第一印象
• ReasonReact文檔
• ReasonML大戰TypeScript

⬆️ 返回頂部

Svelte

做者是Rich Harris, Svelte 採起了獨特的方法。它在構建時編譯您的應用程序，這樣您就能夠交付最輕量級的代碼。從文檔：

...Svelte有一個重要的不一樣之處：不是在運行時解釋應用程序代碼，您的應用程序在構建時被轉換成理想的JavaScript。這意味着你不須要支付框架抽象的性能成本，或者當你的應用程序第一次加載時，你會受到懲罰。

同時由於沒有開銷，您能夠在現有的應用程序中逐步採用Svelte，或者將小部件做爲獨立的包發佈到任何地方。

一個與Svelte相關的有趣項目是Sapper，在必定程度上與Next.js相似的框架，可是更增強調性能。

Sapper是一個用於構建高性能web應用的框架……有兩個基本概念：

• 應用程序的每一頁都是一個Svelte的組件
• 您能夠經過將文件添加到項目的路徑目錄來建立頁面。這些將經過服務器呈現，以便用戶第一次訪問您的應用程序時儘量快，而後由客戶端應用程序接管

用全部現代的最佳實踐——代碼拆分、脫機支持、使用客戶端水化的服務器呈現視圖——構建一個應用程序極其複雜。Sapper爲你作了全部無聊的事情，這樣你就能夠繼續進行創造性的部分。

優勢

• 快速而且輕量級
• 好的文檔
• 創新

缺點

• 很小的社區
• 很是新(可是有前途！)

其它的資源

• Svelte指南
• Svelte - 神奇消失的UI框架-採訪Rich Harris
• Slim、快速的Svelte框架將JavaScript置於平衡之中
• 沒有框架的框架：爲何咱們不早點想到這個呢?

⬆️ 返回頂部

剩下的包

這裏有一些頗有趣的框架。其中一些是單個開發人員的產品，而另外一些則擁有強大的社區，有大量的貢獻者和企業贊助。

若是你是做者或者這些項目裏面的貢獻者，想要提供更多或者更新信息，請 聯繫我.

Binding.scala

Binding.scala 是一種用Scala編寫的單向數據庫，儘管它同時針對JavaScript和JVM。從文檔:

Binding.scala能夠在web和桌面GUI開發中用做reactive模板語言。它使您可以使用本地XHTML文字語法來建立reactive的DOM節點，這些節點可以在數據源發生更改時自動更改…綁定。scala比其餘的reactive web框架(如ReactJS)有更多的特性和更少的概念。

其它的資源

• 使用Binding.scala輕鬆建立UI
• Binding.scala Todo MVC

⬆️ 返回頂部

Bobril

Bobril 從React和Mithril中獲取靈感，從文檔中：

它是很快的，基於虛擬DOM渲染的小體積框架。主要關注代碼生成的速度和簡單性……任何頁面的內容和行爲均可以經過組合JavaScript對象來定義。

頁面內容呈現基於對虛擬dom的比較。應用程序具備必定的時間狀態，bobril應用程序根據該狀態生成虛擬DOM。虛擬DOM是最終DOM的對象表示。若是發生了一些狀態更改事件，而且以前的虛擬DOM與當前生成的虛擬DOM不一樣，那麼實際的DOM將根據此更改而更改。

其它的資源

• Bobril - I -開始使用

⬆️ 返回頂部

Choo

Choo 是用於構建用戶界面的函數庫。它很小(4KB)，支持服務器渲染。Choo哲學:

咱們認爲框架應該是一次性的，組件應該是可回收的。咱們不想要一個有圍牆的花園相互競爭的網絡。經過使DOM成爲最小公分母，從一個框架切換到另外一個框架將變得無摩擦。Choo在設計上很謙虛；咱們不相信它會永遠排在全班第一，因此咱們把它弄得既容易又容易收拾。咱們但願團隊中的每一個人，不管大小，都能充分理解應用程序是如何佈局的。一旦構建了應用程序，咱們但願它很小，性能好，易於推理。全部這些都使得調試代碼、更好的結果和超級笑臉變得容易。

其它的資源

• 你的第一個app
• 有趣的函數式編程與Choo框架

⬆️ 返回頂部

Cycle.js

做爲「可預測代碼的功能和reactive JavaScript框架」Cycle.js主要是Andre Staltz的工做。它有超過100個貢獻者和企業贊助。從文檔：

Cycle的核心抽象是您的應用程序做爲一個純函數main()，其中輸入來自外部世界的讀效果(源)，輸出(匯聚)是影響外部世界的寫效果。外部世界中的這些I/O效果由驅動程序管理：處理DOM效果、HTTP效果等的插件。

其它的資源

• Cycle.js的基本原理 (free video course)
• 簡單介紹一下Cycle.js

⬆️ 返回頂部

DIO

DIO 是一個輕量級(7KB)的聲明式UI庫，提供了一種響應的替代方法：

這裏有不少小細節，讓它的邊緣再也不觸及新的API，而是建立一個更大的表面積，它已經支持並添加了這個。

例如，React能夠渲染字符串、數字、元素和組件，但若是它能渲染Promises或回調呢?這將有助於解決大量的「問題」，數據抓取和延遲加載是可能的，但並無在庫級別上進行聲明性的激勵。

其它的資源

• DIO與React的對比

⬆️ 返回頂部

Dojo

Dojo背後的一個重要原則是易訪問性，這使我認爲它是政府和高等教育項目的潛在候選者，這些項目一般都有嚴格的合規要求。從網站：

Dojo 2基於這樣的信念：在線可訪問性與物理環境中的可訪問性同樣重要，二者的架構師都有相同的責任來提供對全部人的訪問……全部的Dojo 2小部件都被設計爲能夠在默認狀況下訪問，而且知足WCAG標準所需的任何已經集成到@dojo/widget-core和@dojo/widgets工具中。

國際化是另外一個重點領域：

國際化(i18n)是將應用程序與特定語言或文化分離的過程，是大多數企業應用程序的主要需求。所以，國際化是Dojo 2的核心關注點之一。Dojo /i18n, Dojo 2的國際化生態系統，提供了國際化和本地化應用程序所需的一切，從特定於本地的消息傳遞到日期、數字和單元格式。

像Angular，Dojo將TypeScript做爲它的開發語言。

其它的資源

• 通往Dojo2的漫長而曲折的道路
• Dojo 2的深刻介紹

⬆️ 返回頂部

Domvm

Domvm是一個"小，快，相互間無依賴的vdom視圖層"。像Vue，它能夠做爲jQuery的替代品使用。與React很相似，它將關注點放在視圖以外的其餘庫中(可是提供了一個很好的選項列表)。從文檔：

domvm很靈活，pure-js視圖層用於構建高性能web應用程序。像jQuery，它將愉快地適合任何現有的代碼庫，而無需引入新的工具或須要進行重大的架構更改...做爲視圖層，domvm並無包含一些你在大框架裏面發現的東西。這使您能夠自由地爲常見任務選擇您已經知道或喜歡的libs第三方框架。domvm爲路由、流和不變的libs集成提供了一個小的、通用的表面。

其它的資源

• React的井字遊戲demo用的是domvm

⬆️ 返回頂部

Etch

儘管Etch可以被前端web應用程序使用，它的目標用途是在Atom包和電子桌面框架中。從文檔：

Etch是一個用於編寫基於html的用戶界面組件的庫，它提供了虛擬DOM的便利性，同時力求最小化、互操做和顯式。Etch能夠在任何地方使用，但它是想特別設計與原子包和電子應用。 Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.

其它的資源

• Etch路由

⬆️ 返回頂部

Gruu

Gruu是一種相對較新的Marek Łabuz框架。從Marek的文章介紹Gruu：

我相信沒有哪一個存在的庫是完美的。每當一個庫/框架被創造，一些新的想法就會被覆蓋。不管這個新庫是好仍是壞。它老是會帶來一些有價值的獨特的東西。

許多前端庫依賴於每次發生變化時調用的呈現函數，不管變化會影響什麼。它致使應用程序的部分沒必要要的呈現，但咱們仍然須要檢查它，由於咱們不肯定……Gruu去掉了渲染函數。相反，它只在開始時呈現一次，而後它只改變視圖的這部分，而實際上在沒有呈現整個組件的狀況下，它實際上已經改變了。

其它的資源

• Gruu創造單頁面應用

⬆️ 返回頂部

Glimmer

Glimmer是Ember生態系統的一部分，甚至使用Ember CLI管理項目。正如在討論Ember時提到的，它是一個大型框架。Glimmer爲Ember開發人員提供了一個輕量級的用於建立單頁面應用程序的選項。若是須要的話，閃光組件能夠直接投到Ember中，而不會出現問題。

其它的資源

• Glimmer.js: TypeScript是怎麼回事?
• Glimmer來創造web組件

⬆️ 返回頂部

Hyperapp

以很是纖細的1KB的速度進來，Hyperapp Coming in at a very slender 1KB, [Hyperapp]是一個具備最低限度API的庫。可是，它支持服務器渲染。Hyperapp作法：

Hyperapp是一個JavaScript庫來建立web應用程序

最小化：Hyperapp的誕生是爲了用更少的資源作更多的事情。咱們積極地最小化了您須要理解的概念，同時保持與其餘框架相同的功能。

功能： Hyperapp的設計靈感來自Elm架構。使用功能範例建立可伸縮的基於瀏覽器的應用程序。問題是你不須要學習一門新的語言。

batteriers - Out of the box, Hyperapp結合了狀態管理和支持鍵控更新和生命週期事件的VDOM引擎——全部這些都沒有依賴關係。

其它的資源

• 純編程與超應用
• HyperApp—用於前端應用程序的微型庫—訪問Jorge Bucaran

⬆️ 返回頂部

Hyperdom

之前命名爲Plastiq， Hyperdom是一個「快速、特性豐富的構建動態瀏覽器應用程序的虛擬dom框架」。從文檔：

Hyperdom應用程序由常規的JavaScript對象組成，這些對象用render()方法表示應用程序的狀態，這些方法定義如何在HTML中表示該狀態。Hyperdom支持一個簡單的事件-更新-呈現週期，承諾異步操做、JSX、非JSX、客戶端路由、SVG、雙向數據綁定，並優化應用程序架構的性能、開發人員可用性和簡潔性。

⬆️ 返回頂部

hyperHTML

框架不可知，hyperHTML被建立爲「簡化DOM性能最佳實踐……」是100%的ECMAScript兼容，重量小於4Kb」。介紹性的文章：

它只不過是一個函數，與DOM節點和片斷做爲上下文綁定在一塊兒。您能夠綁定一次目標節點，若是您不介意的話，能夠綁定更多節點，而且只需簡單地傳遞新數據，就能夠一次又一次地呈現相同的模板文本。

其它的資源

• hyperHTML：虛擬DOM替代
• 新hyperHTML v1

⬆️ 返回頂部

Ivi

Ivi文檔指出，雖然Ivi很小，可是大小在優先事項列表的底部：

看起來如今javascript社區的許多人都被洗腦了，小的庫大小是快速性能和簡單實現的同義詞。實際上，它一般意味着庫使用不一樣的技巧來減小代碼的大小，方法是使用不適當的數據結構(較低的性能)、在運行時初始化數據結構(較低的引導性能)、爲許多不一樣的數據類型重用代碼(較低的性能)等等。

ivi圖書館的圖書館大小在優先次序列表的底部：

• 正確性
• 一致性/可預測的行爲
• 性能/開發經驗
• 圖書館的規模

其它的資源

• Ivi Todo MVC

⬆️ 返回頂部

Knockout

使用MVVM模式，Knockout是一個已經存在了一段時間的庫。從文檔：

Knockout是JavaScript MVVM (MVC的一種現代變體)庫，能夠更容易地使用JavaScript和HTML建立豐富的、相似桌面的用戶界面。它利用觀察者使UI自動與底層數據模型保持同步，並使用一組強大的、可擴展的聲明性綁定來支持生產性開發。

其它的資源

• 學習Knockout
• Knockout.js and Rx.js之間有何區別?

⬆️ 返回頂部

Maquette

Maquette 是一個輕量級(3KB)庫，靈感來自於React, Mithril和Mercury：

Maquette是一個虛擬的DOM實現，它的速度和簡單性都很是出色。它解決了保持用戶界面與底層數據同步的問題。

Maquette容許使用普通Javascript指定UI。這使得maquette易於學習、易於調試和易於部署。Maquette不受設計的影響，儘量不費力地與其餘框架和庫集成。

雖然這不是默認設置，可是您可使用帶有Maquette的TypeScript。

其它的資源

• The Maquette指南
• Maquette和Typescript快速啓動

⬆️ 返回頂部

Marko

eBay開源產品Marko是一個強調UI性能的被動前端框架。與Vue相似，您可使用包含組件邏輯、模板和CSS的單個文件組件。

這裏引用了Marko vs React首席開發者Patrick Steele-Idem的一句話：

雖然Marko的許多特性都受到了React的啓發，但Marko和React提供了很是不一樣的可用性和性能特徵。Marko設計的目的是避免幾乎全部的樣板文件，而且與HTML更緊密地結合在一塊兒。在幾乎全部的狀況下，Marko UI組件須要的代碼行都少於其與React JSX等效的代碼行，同時保持可讀性並容許與JSX具備相同的表達性。

其它的資源

• Marko vs React： 深刻透析
• 創建一個顏色拾色器的組件

⬆️ 返回頂部

Mithril

Mithril是一個lighweight框架。與React不一樣，它包含用於路由、XHR和狀態管理的功能。虛構的Mithril：

爲何使用Mithril？在某種意義上：由於Mithril是務實的。這10分鐘指南就是一個很好的例子：這就是學習組件、XHR和路由所需的時間—這差很少就是構建有用應用程序所需的知識。

Mithril都是關於有效地完成有意義的工做。文件上傳幹什麼?文檔會告訴你怎麼作。身份驗證?記錄。退出動畫嗎?你明白了。沒有額外的庫，沒有魔法。

其它的資源

• 具備Mithril.js的同構web應用程序
• Mithril - 你從未據說過的最小框架 (YouTube)

⬆️ 返回頂部

Moon

一個小的(7KB)庫，Moon將本身定位爲React、Vue和Mithril的替代品。

Moon是一個用於構建用戶界面的小型、快速的庫。它將流行的庫的優勢集成到一個小包中。它是超輕量的，而且包含高級優化以確保快速渲染時間。這個API很小，很直觀，可是仍然很強大。Moon與IE9+兼容。

是的，最近發佈了不少前端庫，不少人喜歡這些庫的不一樣部分。例如，React提供了使用JSX和使用虛擬DOM的能力，angle提供了易於使用的指令，Ember提供了內置的一個不錯的模板引擎。

Moon旨在將這些庫中最好的部分合併到一個單獨的、輕量級的包中，同時提供更好的性能。

其它的資源

• 開始使用Moon.js

⬆️ 返回頂部

Nerv

(Nerv)(https://nerv.aotu.io/)是中國的新框架。它標榜本身是「快速React的替代品，與IE8兼容，React16」。實際上，只需在webpack配置中添加一個別名，就能夠將React應用程序轉換爲Nerv。全部這些以及4.4 KB的庫大小。

由於它太新了，而且聲稱擁有卓越的性能vs React — React團體的一些成員要求澄清這些說法，以及關於Nerv的更多信息。從做者的回答:

依我拙見，與preact，Inferno, and Nerv最大不一樣之處，不是像實現React特性的正確方法那樣的技術問題。它是關於一個庫想要達到的目標。在preact中，他們可能只是想要一個lite庫，Inferno想要儘量快，React只想要額外的兼容性，他們都須要一個compat模塊來實現這一點。可是對於Nerv來講，與React兼容是咱們的主要目標，經過這樣作，咱們能夠犧牲性能和規模。

彼得·米基什的批評是正確的。Nerv沒法經過React fiber(16) 100%的單元測試，這是能夠預測的——React團隊要花整整一年的時間才能達成目標，兩個不知從哪裏來的傢伙(Hacker news上某個傢伙說)怎麼可能作到這一點呢?

因此，權衡是什麼?顯然，一些第三方的React組件/庫不能在Nerv中正常工做。可是哪個呢?老實說，我不知道。我很高興聽到你這樣說。js的下一個新聞開始了第一次嘗試。但與此同時，基準標籤在Firefox(修復)中沒法工做——全部這些，若是咱們不公開的話，咱們都不知道。

冰凍三尺，非一日之寒。Nerv不是完美的，沒有庫，特別是在早期階段，可能還有不少咱們不知道的bug。因此咱們決定開源，上市，咱們須要社區的幫助，咱們須要你的幫助。

其它的資源

• 什麼是權衡?

⬆️ 返回頂部

NX

NX是RisingStack的JavaScript工程師Bertalan Miklos的成果。(NX)(https://github.com/nx-js/framework)的文檔：

NX是一個模塊化的前端框架——由ES6和Web組件構建。NX的構建塊是核心、中間件、組件和實用程序。這些都託管在單獨的GitHub repos和npm包中。

NX核心是一個很小的庫，只負責一件事。它容許您建立無聲組件並使用中間件來加強它們。當組件附加到DOM時，它將執行它的中間件，並從中得到全部額外的功能。NX提供了一些現成的核心中間件，您能夠在下面找到。

其它的資源

• 編寫javascript框架 - 項目結構
• TodoMVC

⬆️ 返回頂部

petit-dom

Yassine Elouafi是性能基準測試中速度最快的人之一， petit-dom採用了一種極簡主義的方法:

Diff algroithm基於https://neil.fraser.name/writing/diff/ 所描述的預優化和論文《An O(ND)差分算法及其變化》中提出的算法。還有一篇優秀的文章解釋了算法的工做原理。本文包含一個GUI應用程序來處理該算法。

⬆️ 返回頂部

Picodom

Picodom有趣的是，它是由Hyperapp的做者Jorge Bucaran所寫。Picodom是一個「1kb VDOM構建器和補丁函數」，能夠用來構建本身的框架：

Picodom支持鍵控更新和生命週期事件——都沒有依賴項。與您喜歡的狀態管理庫或建立您本身的自定義視圖框架混合使用。

⬆️ 返回頂部

Pux

Pux 是一個使用PureScript的框架，這是一種強類型的函數式編程語言，聽從JavaScript。目前性能存在如下問題：

緩慢的性能來自於翻譯Pux的(smolder)虛擬DOM以React的虛擬DOM。目標是爲smolder編寫一個purescript虛擬DOM模塊，這樣能夠避免轉換步驟，而且能夠針對一元數據結構進行優化。我懷疑這將達到與Halogen同等的性能。

其它的資源

• Pux例子

⬆️ 返回頂部

Ractive.js

Ractive最初是爲在衛報網站上使用而建立的，是一個被動的、模板驅動的UI庫：

與其餘框架不一樣，Ractive爲您工做，而不是反過來。它對您想要使用的其餘工具沒有意見。它還適用於您但願採用的方法。你不會固守於特定框架的思惟方式。若是你出於某種緣由討厭你的一個工具，你能夠很容易地用它換另外一個，而後繼續向生活前進。

其它的資源

• 你好, 世界!
• Todo MVC

⬆️ 返回頂部

react-lite

旨在成爲輕量版的React，react-lite是「針對小腳本尺寸的React的實現。」從文檔：

當您不須要瀏覽器中的服務器端呈現時(不須要任何React。renderToString & ReactDOM.renderToStaticMarkup)，React-lite支持響應的核心api，如虛擬DOM，做爲React的替代。

其它的資源

• react-lite - 小尺寸優化React的實現——Jade訪談

⬆️ 返回頂部

RE:DOM

做者是Juha Lindstedt，RE:DOM是一個小(2KB)而且很快的UI框架。事實上，它是最新的基準測試中表現最好之一。從網站：

RE:DOM是Juha Lindstedt和貢獻者建立的一個小(2 KB) DOM庫，它添加了有用的助手來建立DOM元素並使它們與數據保持同步。

由於RE:DOM與金屬很是接近，並且不使用虛擬DOM，因此它實際上比幾乎全部基於虛擬DOM的庫(包括React (benchmark))更快，佔用的內存也更少。

它是很容易的使用RE:DOM來創造重複使用的組件。

另外一個好處是，你可使用純粹的JavaScript,所以不須要學習複雜的模板語言。另外，RE:DOM和其餘人相處得很好。不須要爲谷歌映射之類的東西編寫包裝器。

其它的資源

文檔指南

⬆️ 返回頂部

Reflex

做者Irakli Gozalishvili， Reflex是一個深受Elm啓發的庫:

Reflex是一個功能性的、reactive的UI庫，深受elm(基本上是elm的一個端口)的啓發，它的架構很是簡單，可是很是強大，響應式中的「flux」只是模式的副產品。爲了保持elm -代數數據類型和類型安全的主要吸引力，庫使用了流，JS的靜態類型檢查器。全部類型都與實現分離，所以，若是您想利用它或忽略它，就須要調用它。

⬆️ 返回頂部

Riot

Riot文檔直入主題:

前端的空間確實很擁擠，但咱們真的以爲解決方案仍然「在那裏」。咱們相信Riot提供了正確的平衡來解決這個大難題。React公司彷佛作到了這一點，但它們有一些嚴重的弱點，Riot會解決。

Riot的一個主要特性是自定義標記(它看起來很像Vue單個文件組件):

自定義標記將相關的HTML和JavaScript粘合在一塊兒，造成一個可重用的組件。像React + Polymer，但有愉快的語法和一個小的學習曲線。

同時...

Riot是每一個人的組件。像React + Polymer但沒有膨脹。它使用起來很直觀，並且重量幾乎爲零。今天，它的工做原理。不是從新發明輪子，而是利用現有的好的部分，使最簡單的工具成爲可能。

其它的資源

• 鮮活的demo
• Riot.js指南

⬆️ 返回頂部

rxdomh

儘管頗有趣，rxdomh有很是豐富的項目。它是受Binding.scala 和react-flyd啓發的。

⬆️ 返回頂部

San

San是來自中國開發者的另外一個項目。它的文檔是中文，可是Chrome提供了很好的翻譯：

San, 是一個MVVM組件框架。它的體積是(12K)，好的兼容性(IE6)，高性能是實現響應性用戶界面的可靠而可靠的解決方案。

San同時還支持data-to-view綁定指令,在業務發展最經常使用的分支,循環指令,等除了支持全部本機HTML，經過聲明的語法特性相似HTML視圖模板，保持充分利用的基礎上，基於模板字符串解析完整的框架，並創建一個視圖層節點的關係樹，生成的用戶界面視圖快速視圖的高性能引擎。

其它的資源

• San指南

⬆️ 返回頂部

Simulacra.js

能夠說，沒有其餘框架的API比Simulacra更小：

Simulacra.js當一個對象發生改變時， 返回一個Dom節點。它的API是一個函數，不引入任何新的語法或模板語言。它遞歸地將元編程特性添加到普通的數據結構中。

這是一個至關低成本的抽象，儘管它可能沒有手工優化的代碼那麼快。這個庫的大體大小約爲5kb(縮小和gzipped)。

⬆️ 返回頂部

Slim.js

做者Avichay Eyal，Slim.js 是一個輕量級web組件創做庫:

Slim.js是一個快速開發本地web組件和基於定製元素的現代應用程序的庫。涉及任何魔法。它使用了es6+DOM原生API，並用超能力加強了HTML元素。

其它的資源

• 文檔指南

⬆️ 返回頂部

Stem JS

做者Mihai Ciucu, Stem JS是試圖不成爲框架的框架：

語法可能看起來很熟悉，可是Stem是爲單個組件而不是框架而設計的……

無論您的項目有100或100k行代碼，Stem都是以代碼可維護性爲主要目的進行設計的。

咱們也不喜歡庫迫使程序員跳過一些障礙，對它進行任何非標準的更改，所以全部東西都設計得很容易修改。

其它的資源

• 另外一個Javascript框架

⬆️ 返回頂部

Surplus

在性能基準測試中，Surplus很是快。它也有一個不一樣的方法，利用S.js:

Surplus是一個編譯器和運行時容許S.js應用程序，使用JSX建立高性能web視圖。得益於JSX，視圖是UI的明確的聲明性定義。多虧了S，當你的數據發生變化時，它們會自動有效地更新。

同時...

Surplus不是一個React「類似工做」，可是它使用React流行的JSX語法來定義它的視圖……JSX減輕了採用(或放棄)Surplus的一些風險。許多多餘的JSX代碼已經做爲無狀態函數組件來工做，反之亦然。Surplus能夠避免任意的差別，並在可行的狀況下作出反應。

與React不一樣之處:

1. Surplus使真正的DOM元素，而不是虛擬的，它們自動更新。這將刪除大部分React API。
2. ref屬性接受可指定的引用，而不是函數。
3. 事件是本地事件，而不是響應的合成事件。
4. 對於它接受的屬性名，Surplus稍微寬鬆一些，好比onClick/ onClick、className/class等。

⬆️ 返回頂部

Thermite

Thermite是另外一個使用PureScript(編譯爲JavaScript的函數語言)的庫。從文檔:

它沒有提供React的全部功能，而是爲其API中最經常使用的部分提供了一個乾淨的API。對於更特殊的用例，可使用purescript-react。

其它資源

• App樣例

⬆️ 返回頂部

TSERS

TSERS表示反應流的轉換信號-執行器框架。從文檔:

在JavaScript疲勞的時代，新的JS框架如雨後春筍般冒了出來，每一個框架都提供了一些新的革命性的概念。因此勢不可擋!這就是爲何要建立TSERS。它沒有提供任何新的東西。相反，它結合了一些舊的和衆所周知的技術/概念，並將它們打包成適合現代web應用程序開發的單一緊湊的形式。

從技術上講，與TSERS最接近的是Cycle.js,但概念上最近的一個是CALM^2。大約能夠是說TSERS試圖結合優秀的狀態一致性維護策略，從CALM^2和明確的輸入/輸出門的週期中——來自兩個世界中最好的。

其它的資源

• TSERSful樣例

⬆️ 返回頂部

Vidom

做者Filatov Dmitry, Vidom是另外一個受React啓發的庫：

Vidom只是一個用來構建UI的庫。它的靈感來自於「React」，基於一樣的想法。它的主要目標是用與React類似的API儘量快地提供輕量級實現。

其它的資源

• 指南
• 開始MVC

⬆️ 返回頂部

Vuera

Vuera是一個不一樣尋常的庫。它容許您在Vue中使用React組件，反之亦然。預期的用例是在React和Vue之間進行遷移或在單個項目中同時使用這兩個框架時使用的用例。

其它的資源

• 在一個應用程序中集成React和Vue組件

⬆️ 返回頂部

Hey!你一路下來的!若是你喜歡這篇文章，那就訂閱個人每週時事通信吧。我從網上收集了最好的JavaScript代碼，並在每週四向讀者發佈。註冊表格就在這篇文章下面。

下次再續，快樂編程...