When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发，专注于前端

【翻译】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 logo React 2013年5月作为一个开源项目被引入。最初的作者是Facebook的工程师乔丹·沃克(Jordan Walke)。

React自称是“构建用户界面的JavaScript库”，而不是像Angular这样的完整框架。诸如路由、状态管理和数据获取等问题都留给了第三方。这就产生了一个巨大而活跃的生态系统。

许多大的React应用会使用流行的Redux 库进行状态管理，React Router 作为路由，但是还有其它好的选择。

React负责在新一代开发人员中推广函数式编程原则。虽然它不是一个纯粹的函数库，但它允许开发人员以主要的函数样式工作，特别是与Redux结合使用时。

想了解更多React组件与其它组件的对比，看我的文章在React and Angular，另外还有React and Vue。

优点

  • 非常受欢迎，有强大的就业市场
  • 大量的培训资源和第三方库帮助加速开发
  • 跨平台团队的最佳选择(web、移动、桌面、其他设备)
  • 通用性
  • 强大的企业支持(Facebook)

缺点

  • 大量的选择让人不知所措
  • 新手并不清楚如何是最佳实践
  • 学习曲线对于构建更大的应用程序是很困难的

其它的资源

⬆️ 返回顶部

Angular

Angular logoAngular 是AngularJS的继承。它是一个完整并且稳定的框架，它提供了默认的数据抓取，状态管理，开发语言以及构建工具链。

也许Angular最引人注意的是 TypeScript 作为开发语言进行使用。这使得框架很适合 那些传统的面向对象语言，比如Java和c#，TypeScript能从这些语言中汲取灵感。

据说"企业"是Angular的目标用户。从某种意义上来说，很多大公司的成员比较熟悉Java和其它一些面向对象的语言，这也许是对的。

优点
  • 功能齐全的框架以及默认经过了很好的测试
  • TypeScript提供了很熟悉的语言，对于那些有面向对象编程背景的人
  • 强大的企业支持(Google)
  • 清晰的最佳实践
缺点
  • 学习曲线很艰难
  • TypeScript很难被采纳
  • 在基准测试中启动指标不佳
其它的资源

⬆️ 返回顶部

Vue.js

Vue logo虽然经常被视为"新来的孩子", Vue从2013年就已经开始了。尤雨溪是创造者以及主要的开发者，不像React和Angular，vue没有大公司的直接支持，相反，它依赖于个人和企业的捐赠。

在这三大流行的框架中，Vue被视为是最易上手的。它在很多方面类似React，但是也有很多类似AngularJS—例如，指令和模板。

Vue的相对简单性、开发人员体验和良好的性能使得它的流行度猛增。

其中一个值得注意的vue特点是它是"先进的框架"，可以用作jQuery替换，也可以用于大型单页应用程序。从Vue文档：

与其他单片框架不同，Vue从头设计到尾都是渐进可采用的。核心库只关注视图层，并且很容易与其他库或现有项目进行收集和集成。

虽然Angular对路由和状态管理等问题具有固执己见和不可知的态度，但是Vue采用了一种中间的方法，使用官方的路由和状态管理解决方案，这些解决方案是可选的，但是与核心库保持同步

想了解更多关于Vue组件与React的对比，看我的文章 综述了两者不同。

优点
  • 简单易学
  • 好的文档
  • 在流行和使用上激增
  • 前三种框架的最佳性能
缺点
  • 目前的就业市场比React和Angular都要小。
其它的资源

⬆️ 返回顶部

具有历史意义的

几年前，这些框架曾一度被认为是“三巨头”。虽然现在不太流行，但它们仍然被广泛使用，并且在后来的框架的开发中具有影响力。

AngularJS

AngularJS logo在2013年, AngularJS 是最流行的框架。在此期间，导致它流行的一些因素是它的MVC架构，声明式编程风格、双向数据绑定和健壮的特性集。

AngularJS有一种固执已见的方法，目的是为开发人员提供一个完整解决方案:

在构建web应用程序的客户端这个整体难题中，AngularJS不是一个单独的部分。它处理你曾经手工编写的DOM和AJAX粘合代码，并将其放入定义良好的结构中。这使得AngularJS对构建CRUD(创建、读取、更新、删除)应用程序的方式有自己的看法。但它是固执已见的，它还确保它的观点只是你可以轻易改变的起点。

2013年之后React出现。React使用单向数据流，并认为双向数据绑定使应用程序变得困难，特别是他们进行推测。在2014年，Angular团队推出了Angular 2，一个后来被简单的进行重命名。Angular。这个新的版本将引入单向数据流以及其它主要变化。这标志着AngularJS的受欢迎程度开始下降。

尽管其后续项目不断发展，AngularJS仍然被广泛的使用，并正在积极的开发中。

优点
  • 丰富的训练资源
  • 好的文档
  • 很好的被建立
  • 全功能
缺点
  • 双向数据绑定，其它的技术问题可能不需要的
  • 不断下滑的支持率(很少的工作)
其它的资源

⬆️ 返回顶部

Backbone

Backbone logo由杰里米·阿什肯纳斯(Jeremy Ashkenas)创作，他还创作了咖啡剧本。Backbone 最初是在2010年秋天发布的。Backbone生态系统的关键部分是Marionette，简化开发的框架。

Backbone是重要的，因为它是第一个通过实现MVC模式将更多结构引入前端应用程序的框架之一。从文档:

Backbone可以帮助您的唯一最重要的事情是将业务逻辑与用户界面分开。当两者纠缠在一起时，改变就很难了;当逻辑不依赖UI时，您的接口就更容易使用了。

近几年，Backbone的使用量在下降，尽管它继续在Drupal内容管理系统的最新版本中发布，一个相关的评论关于下降的可能原因:

Backbone的作者，Jeremy Ashkenas在1.0发布后决定根据API和特性集来调用Backbone。这样做的好处是，到目前为止，Backbone仍然是最稳定的主要JavaScript框架，但这阻碍了从其他框架中吸取教训的努力。

优点
  • 提供了代码结构
  • 稳定的项目
缺点
  • 不断下滑的支持率(很少的工作)
  • 命令式编程风格(与流行的声明式风格相反)
其它的资源

⬆️ 返回顶部

Ember

Ember logoEmber 作者是Yehuda Katz，许多开源项目的多产作者或贡献者。Ember是基于MVVM模式，并且有丰富的特性集。它还有强大的哲学观点:

Ember着手为客户端应用程序问题提供一个整体解决方案。这与许多JavaScript框架形成了鲜明的对比，这些框架首先在MVC(模型-视图-控制器)中为V提供解决方案，然后尝试从这些框架中成长……

Ember是一组工具的组成部分，它们共同工作以提供完整的开发栈。这些工具的目的是使开发人员迅速高效工作。例如，Ember CLI提供了标准的应用程序结构和构建管道。它还有一个可插拔的体系结构和超过3500个插件来增强和扩展它。

其中一个主要的批评是Ember的大体积，这对性能有负面影响。Ember也被认为是一个陡峭的学习过程和难以掌握。

优点
  • 清晰最佳实践
  • 很好的建造
  • 完整性
缺点
  • 大体积
  • 学习艰难
  • 不断下滑的支持率(很少的工作)
Additional Resources

⬆️ 返回顶部

值得注意

本节中列出的框架都具有良好的文档和健康的社区。虽然它们不像“三巨头”那样被广泛使用，但它们填补了重要的空白，并以其独特或创新的方法而闻名。

Aurelia

Aurelia logoAurelia, 罗伯特·艾森伯格(Rob Eisenberg)著有《天使》(AngularJS)和艾森伯格之前的框架《杜兰达尔》(Durandal)。在创建奥雷里亚之前，艾森伯格是Angular的一员，2014年底因与Angular2项目的方向不一致而离开。

Aurelia是一个完整的框架。下面是文档的基本介绍:

Aurelia提供了一些核心功能，比如依赖注入、模板化、路由和发布/订阅，因此您不必为了构建应用程序而拼凑一堆库。在这个丰富的核心之上，Aurelia还为国际化、验证、模态对话框、UI虚拟化等提供了许多额外的插件。

你也不需要拼凑一堆不同的工具。Aurelia提供了一个用于生成和构建项目的CLI，一个用于调试的浏览器插件和一个VS代码插件。但是，您不必使用其中的任何一个，因为Aurelia的结构使您能够交换任何细节，甚至包括模板/绑定引擎，以确保最大的灵活性。

优点
  • 完整的方案
  • 语言不可知，适用于JavaScript、TypeScript和其他语言。
  • 稳定的API
缺点
  • 较小的社区与顶级框架
  • 很少的工作机会
其它的资源

⬆️ 返回顶部

Elm

Elm logoElm 在这个列表中是唯一的。相比于一个特别的框架，它实际上是一种编译JavaScript的独立语言，类似于Reason。但是，它将自己定位为React的备选办法：

Elm是一种编译为JavaScript的函数语言。它与一些项目竞争，如作为创建网站和web应用的工具的React。Elm是一款非常注重简单，易使用，并且保证质量的工具...我可以很放心保证，如果你给Elm一个机会，在里面做项目，最终您将编写更好的JavaScript并对代码进行响应。

Elm也有很大的影响力，包括成为流行的Redux状态管理库的灵感来源之一。

Elm基本优点：

忘记你听说过的函数式编程。花言巧语，奇思妙想，糟糕的工具。恶心。Elm是关于：

  • 在实践中没有运行时错误。没有空。没有未定义的不是函数。
  • 友好的错误消息可以帮助您更快地添加特性。
  • 有良好架构的代码，在应用程序增长时保持良好架构。
  • 为所有的Elm包自动执行语义版本控制。 JS库的任何组合都不能提供这种功能，但在Elm中，这一切都是免费和容易的。现在，这些美好的事情是可能的，因为Elm建立在40多年的类型化函数语言上。
优点
  • 消除几乎所有运行时错误
  • 强壮的架构
  • 简化的重构
Cons
  • 在某些情况下需要使用JavaScript的互操作性(增加了复杂性)。
  • 很小的社区
  • 很少的工作机会
其它的资源

⬆️ 返回顶部

Inferno

Inferno logo如果性能是你最关心的，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 也许会影响性能
其它的资源

⬆️ 返回顶部

Polymer

Polymer logoPolymer是谷歌支持的库，专注于Web组件,一组目前在浏览器中不受良好支持的技术。Polymer，伴随着Polymer App工具，帮助开发者使用这些技术来建立web应用程序。

Polymer是一个轻量级的库，帮你充分利用web组件 使用Web组件，您可以创建可重用的自定义元素，这些元素与浏览器的内置元素进行无缝交互，或者将应用程序分解为大小合适的组件，使代码更简洁，维护成本更低。 Polymer在标准的web组件上撒了一点糖，能够使你很轻松的得到很好的结果。

Polymer项目的主要动机是推动web平台前进。Polymer团队有一个#UseThePlatform标签，他们在他们的About页面上解释：

...在平台本身之外和之上做太多的事情是有代价的—开发者和用户都需要支付费用。开发人员的成本以复杂性和锁定的形式出现。

随着时间的推移，我们在平台之上构建的栈已经将web开发从简单的视图源和切换刷新推到一个每个项目都以巨大的海洋选择开始的地方。

由于有了新的原始web平台，现在平台本身就可以满足我们围绕平台构建的许多需求...

我们相信我们研究的模式、库和工具是有益的，并且我们是很开心的看到他们被广泛的采纳。但是我们的#UseThePlatform的活动最终并不是关于驱动人们使用Polymer项目构建的东西。它是关于推广使用web平台来交付尽可能最好的应用程序。

如果您多年来一直关注谷歌为推广web平台所做的备受赞赏的努力，那么这些努力中的大部分将听起来耳熟能详，并与公司的其他努力保持一致。

优点
  • 强大的企业支持 (Google)
  • 支持新兴的web标准
缺点
  • 社区的沟通抱怨
  • 差的浏览器支持限制了视觉的选项/实现
其它的资源

⬆️ 返回顶部

Preact

Preact logo作者是詹森•米勒，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也许会影响性能
其它的资源

⬆️ 返回顶部

Reason

Reason logo在某种方式上, 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开发者很熟悉
缺点
  • 非常新??
其它的资源

⬆️ 返回顶部

Svelte

Svelte logo作者是Rich Harris, Svelte 采取了独特的方法。它在构建时编译您的应用程序，这样您就可以交付最轻量级的代码。从文档：

...Svelte有一个重要的不同之处：不是在运行时解释应用程序代码，您的应用程序在构建时被转换成理想的JavaScript。这意味着你不需要支付框架抽象的性能成本，或者当你的应用程序第一次加载时，你会受到惩罚。

同时因为没有开销，您可以在现有的应用程序中逐步采用Svelte，或者将小部件作为独立的包发布到任何地方。

一个与Svelte相关的有趣项目是Sapper，在一定程度上与Next.js类似的框架，但是更加强调性能。

Sapper是一个用于构建高性能web应用的框架……有两个基本概念：

  • 应用程序的每一页都是一个Svelte的组件
  • 您可以通过将文件添加到项目的路径目录来创建页面。这些将通过服务器呈现，以便用户第一次访问您的应用程序时尽可能快，然后由客户端应用程序接管

用所有现代的最佳实践——代码拆分、脱机支持、使用客户端水化的服务器呈现视图——构建一个应用程序极其复杂。Sapper为你做了所有无聊的事情，这样你就可以继续进行创造性的部分。

优点
  • 快速并且轻量级
  • 好的文档
  • 创新
缺点
  • 很小的社区
  • 非常新(但是有前途！)
其它的资源

⬆️ 返回顶部

剩下的包

这里有一些很有趣的框架。其中一些是单个开发人员的产品，而另一些则拥有强大的社区，有大量的贡献者和企业赞助。

如果你是作者或者这些项目里面的贡献者，想要提供更多或者更新信息，请 联系我.

Binding.scala

Binding.scala 是一种用Scala编写的单向数据库，尽管它同时针对JavaScript和JVM。从文档:

Binding.scala可以在web和桌面GUI开发中用作reactive模板语言。它使您能够使用本地XHTML文字语法来创建reactive的DOM节点，这些节点能够在数据源发生更改时自动更改…绑定。scala比其他的reactive web框架(如ReactJS)有更多的特性和更少的概念。

其它的资源

⬆️ 返回顶部

Bobril

Bobril 从React和Mithril中获取灵感，从文档中：

它是很快的，基于虚拟DOM渲染的小体积框架。主要关注代码生成的速度和简单性……任何页面的内容和行为都可以通过组合JavaScript对象来定义。

页面内容呈现基于对虚拟dom的比较。应用程序具有一定的时间状态，bobril应用程序根据该状态生成虚拟DOM。虚拟DOM是最终DOM的对象表示。如果发生了一些状态更改事件，并且之前的虚拟DOM与当前生成的虚拟DOM不同，那么实际的DOM将根据此更改而更改。

其它的资源

⬆️ 返回顶部

Choo

Choo 是用于构建用户界面的函数库。它很小(4KB)，支持服务器渲染。Choo哲学:

我们认为框架应该是一次性的，组件应该是可回收的。我们不想要一个有围墙的花园相互竞争的网络。通过使DOM成为最小公分母，从一个框架切换到另一个框架将变得无摩擦。Choo在设计上很谦虚；我们不相信它会永远排在全班第一，所以我们把它弄得既容易又容易收拾。我们希望团队中的每个人，无论大小，都能充分理解应用程序是如何布局的。一旦构建了应用程序，我们希望它很小，性能好，易于推理。所有这些都使得调试代码、更好的结果和超级笑脸变得容易。

其它的资源

⬆️ 返回顶部

Cycle.js

作为“可预测代码的功能和reactive JavaScript框架”Cycle.js主要是Andre Staltz的工作。它有超过100个贡献者和企业赞助。从文档：

Cycle的核心抽象是您的应用程序作为一个纯函数main()，其中输入来自外部世界的读效果(源)，输出(汇聚)是影响外部世界的写效果。外部世界中的这些I/O效果由驱动程序管理：处理DOM效果、HTTP效果等的插件。

其它的资源

⬆️ 返回顶部

DIO

DIO 是一个轻量级(7KB)的声明式UI库，提供了一种响应的替代方法：

这里有很多小细节，让它的边缘不再触及新的API，而是创建一个更大的表面积，它已经支持并添加了这个。

例如，React可以渲染字符串、数字、元素和组件，但如果它能渲染Promises或回调呢?这将有助于解决大量的“问题”，数据抓取和延迟加载是可能的，但并没有在库级别上进行声明性的激励。

其它的资源

⬆️ 返回顶部

Dojo

Dojo背后的一个重要原则是易访问性，这使我认为它是政府和高等教育项目的潜在候选者，这些项目通常都有严格的合规要求。从网站：

Dojo 2基于这样的信念：在线可访问性与物理环境中的可访问性一样重要，两者的架构师都有相同的责任来提供对所有人的访问……所有的Dojo 2小部件都被设计为可以在默认情况下访问，并且满足WCAG标准所需的任何已经集成到@dojo/widget-core和@dojo/widgets工具中。

国际化是另一个重点领域：

国际化(i18n)是将应用程序与特定语言或文化分离的过程，是大多数企业应用程序的主要需求。因此，国际化是Dojo 2的核心关注点之一。Dojo /i18n, Dojo 2的国际化生态系统，提供了国际化和本地化应用程序所需的一切，从特定于本地的消息传递到日期、数字和单元格式。

像Angular，Dojo将TypeScript作为它的开发语言。

其它的资源

⬆️ 返回顶部

Domvm

Domvm是一个"小，快，相互间无依赖的vdom视图层"。像Vue，它可以作为jQuery的替代品使用。与React很类似，它将关注点放在视图之外的其他库中(但是提供了一个很好的选项列表)。从文档：

domvm很灵活，pure-js视图层用于构建高性能web应用程序。像jQuery，它将愉快地适合任何现有的代码库，而无需引入新的工具或需要进行重大的架构更改...作为视图层，domvm并没有包含一些你在大框架里面发现的东西。这使您可以自由地为常见任务选择您已经知道或喜欢的libs第三方框架。domvm为路由、流和不变的libs集成提供了一个小的、通用的表面。

其它的资源

⬆️ 返回顶部

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.

其它的资源

⬆️ 返回顶部

Gruu

Gruu是一种相对较新的Marek Łabuz框架。从Marek的文章介绍Gruu：

我相信没有哪个存在的库是完美的。每当一个库/框架被创造，一些新的想法就会被覆盖。无论这个新库是好还是坏。它总是会带来一些有价值的独特的东西。

许多前端库依赖于每次发生变化时调用的呈现函数，无论变化会影响什么。它导致应用程序的部分不必要的呈现，但我们仍然需要检查它，因为我们不确定……Gruu去掉了渲染函数。相反，它只在开始时呈现一次，然后它只改变视图的这部分，而实际上在没有呈现整个组件的情况下，它实际上已经改变了。

其它的资源

⬆️ 返回顶部

Glimmer

Glimmer是Ember生态系统的一部分，甚至使用Ember CLI管理项目。正如在讨论Ember时提到的，它是一个大型框架。Glimmer为Ember开发人员提供了一个轻量级的用于创建单页面应用程序的选项。如果需要的话，闪光组件可以直接投到Ember中，而不会出现问题。

其它的资源

⬆️ 返回顶部

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引擎——所有这些都没有依赖关系。

其它的资源

⬆️ 返回顶部

Hyperdom

以前命名为Plastiq， Hyperdom是一个“快速、特性丰富的构建动态浏览器应用程序的虚拟dom框架”。从文档：

Hyperdom应用程序由常规的JavaScript对象组成，这些对象用render()方法表示应用程序的状态，这些方法定义如何在HTML中表示该状态。Hyperdom支持一个简单的事件-更新-呈现周期，承诺异步操作、JSX、非JSX、客户端路由、SVG、双向数据绑定，并优化应用程序架构的性能、开发人员可用性和简洁性。

⬆️ 返回顶部

hyperHTML

框架不可知，hyperHTML被创建为“简化DOM性能最佳实践……”是100%的ECMAScript兼容，重量小于4Kb”。介绍性的文章：

它只不过是一个函数，与DOM节点和片段作为上下文绑定在一起。您可以绑定一次目标节点，如果您不介意的话，可以绑定更多节点，并且只需简单地传递新数据，就可以一次又一次地呈现相同的模板文本。

其它的资源

⬆️ 返回顶部

Ivi

Ivi文档指出，虽然Ivi很小，但是大小在优先事项列表的底部：

看起来现在javascript社区的许多人都被洗脑了，小的库大小是快速性能和简单实现的同义词。实际上，它通常意味着库使用不同的技巧来减少代码的大小，方法是使用不适当的数据结构(较低的性能)、在运行时初始化数据结构(较低的引导性能)、为许多不同的数据类型重用代码(较低的性能)等等。

ivi图书馆的图书馆大小在优先次序列表的底部：

  • 正确性
  • 一致性/可预测的行为
  • 性能/开发经验
  • 图书馆的规模
其它的资源

⬆️ 返回顶部

Knockout

使用MVVM模式，Knockout是一个已经存在了一段时间的库。从文档：

Knockout是JavaScript MVVM (MVC的一种现代变体)库，可以更容易地使用JavaScript和HTML创建丰富的、类似桌面的用户界面。它利用观察者使UI自动与底层数据模型保持同步，并使用一组强大的、可扩展的声明性绑定来支持生产性开发。

其它的资源

⬆️ 返回顶部

Maquette

Maquette 是一个轻量级(3KB)库，灵感来自于React, Mithril和Mercury：

Maquette是一个虚拟的DOM实现，它的速度和简单性都非常出色。它解决了保持用户界面与底层数据同步的问题。

Maquette允许使用普通Javascript指定UI。这使得maquette易于学习、易于调试和易于部署。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具有相同的表达性。

其它的资源

⬆️ 返回顶部

Mithril

Mithril是一个lighweight框架。与React不同，它包含用于路由、XHR和状态管理的功能。虚构的Mithril：

为什么使用Mithril？在某种意义上：因为Mithril是务实的。这10分钟指南就是一个很好的例子：这就是学习组件、XHR和路由所需的时间—这差不多就是构建有用应用程序所需的知识。

Mithril都是关于有效地完成有意义的工作。文件上传干什么?文档会告诉你怎么做。身份验证?记录。退出动画吗?你明白了。没有额外的库，没有魔法。

其它的资源

⬆️ 返回顶部

Moon

一个小的(7KB)库，Moon将自己定位为React、Vue和Mithril的替代品。

Moon是一个用于构建用户界面的小型、快速的库。它将流行的库的优点集成到一个小包中。它是超轻量的，并且包含高级优化以确保快速渲染时间。这个API很小，很直观，但是仍然很强大。Moon与IE9+兼容。

是的，最近发布了很多前端库，很多人喜欢这些库的不同部分。例如，React提供了使用JSX和使用虚拟DOM的能力，angle提供了易于使用的指令，Ember提供了内置的一个不错的模板引擎。

Moon旨在将这些库中最好的部分合并到一个单独的、轻量级的包中，同时提供更好的性能。

其它的资源

⬆️ 返回顶部

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提供了一些现成的核心中间件，您可以在下面找到。

其它的资源

⬆️ 返回顶部

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同等的性能。

其它的资源

⬆️ 返回顶部

Ractive.js

Ractive最初是为在卫报网站上使用而创建的，是一个被动的、模板驱动的UI库：

与其他框架不同，Ractive为您工作，而不是反过来。它对您想要使用的其他工具没有意见。它还适用于您希望采用的方法。你不会固守于特定框架的思维方式。如果你出于某种原因讨厌你的一个工具，你可以很容易地用它换另一个，然后继续向生活前进。

其它的资源

⬆️ 返回顶部

react-lite

旨在成为轻量版的React，react-lite是“针对小脚本尺寸的React的实现。”从文档：

当您不需要浏览器中的服务器端呈现时(不需要任何React。renderToString & ReactDOM.renderToStaticMarkup)，React-lite支持响应的核心api，如虚拟DOM，作为React的替代。

其它的资源

⬆️ 返回顶部

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但没有膨胀。它使用起来很直观，而且重量几乎为零。今天，它的工作原理。不是重新发明轮子，而是利用现有的好的部分，使最简单的工具成为可能。

其它的资源

⬆️ 返回顶部

rxdomh

尽管很有趣，rxdomh有非常丰富的项目。它是受Binding.scala 和react-flyd启发的。

⬆️ 返回顶部

San

San是来自中国开发者的另一个项目。它的文档是中文，但是Chrome提供了很好的翻译：

San, 是一个MVVM组件框架。它的体积是(12K)，好的兼容性(IE6)，高性能是实现响应性用户界面的可靠而可靠的解决方案。

San同时还支持data-to-view绑定指令,在业务发展最常用的分支,循环指令,等除了支持所有本机HTML，通过声明的语法特性类似HTML视图模板，保持充分利用的基础上，基于模板字符串解析完整的框架，并建立一个视图层节点的关系树，生成的用户界面视图快速视图的高性能引擎。

其它的资源

⬆️ 返回顶部

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都是以代码可维护性为主要目的进行设计的。

我们也不喜欢库迫使程序员跳过一些障碍，对它进行任何非标准的更改，因此所有东西都设计得很容易修改。

其它的资源

⬆️ 返回顶部

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。

其它资源

⬆️ 返回顶部

TSERS

TSERS表示反应流的转换信号-执行器框架。从文档:

在JavaScript疲劳的时代，新的JS框架如雨后春笋般冒了出来，每个框架都提供了一些新的革命性的概念。所以势不可挡!这就是为什么要创建TSERS。它没有提供任何新的东西。相反，它结合了一些旧的和众所周知的技术/概念，并将它们打包成适合现代web应用程序开发的单一紧凑的形式。

从技术上讲，与TSERS最接近的是Cycle.js,但概念上最近的一个是CALM^2。大约可以是说TSERS试图结合优秀的状态一致性维护策略，从CALM^2和明确的输入/输出门的周期中——来自两个世界中最好的。

其它的资源

⬆️ 返回顶部

Vidom

作者Filatov Dmitry, Vidom是另一个受React启发的库：

Vidom只是一个用来构建UI的库。它的灵感来自于“React”，基于同样的想法。它的主要目标是用与React相似的API尽可能快地提供轻量级实现。

其它的资源

⬆️ 返回顶部

Vuera

Vuera是一个不同寻常的库。它允许您在Vue中使用React组件，反之亦然。预期的用例是在React和Vue之间进行迁移或在单个项目中同时使用这两个框架时使用的用例。

其它的资源

⬆️ 返回顶部

Hey!你一路下来的!如果你喜欢这篇文章，那就订阅我的每周时事通讯吧。我从网上收集了最好的JavaScript代码，并在每周四向读者发布。注册表格就在这篇文章下面。

下次再续，快乐编程...

      </div>
posted @ 2018-08-22 10:34  婷风  阅读(1270)  评论(0)  编辑  收藏  举报