大约十年前，JavaScript 开发者社区开始见证 JavaScript 框架之间激烈的竞争。在本文中，我将介绍其中一些最知名的框架。重要的是要注意，这些都是开源 JavaScript 项目，这意味着您可以在 开源许可证下免费使用它们，甚至可以为源代码和社区做出贡献。
如果您喜欢跟随我一起探索这些框架，您可以观看我的视频。
不过，在开始之前，了解 JavaScript 开发者在讨论框架时常用的术语会很有用。
| 术语 | 解释 |
|---|---|
| 文档对象模型 (DOM) | 网站的树形结构表示，其中每个节点都是代表网页一部分的对象。 万维网联盟 (W3C) 是万维网的国际标准组织，负责维护 DOM 的定义。 |
| 虚拟 DOM | 用户界面 (UI) 的“虚拟”或“理想”表示形式保存在内存中，并通过 ReactDOM 等库与“真实”DOM 同步。 要进一步探索，请阅读 ReactJS 的虚拟 DOM 和内部文档。 |
| 数据绑定 | 一种编程概念，用于提供一致的界面来访问网站上的数据。 Web 元素与 DOM 维护的元素的属性或特性相关联。 例如，当您需要在网页表单中填写密码时，数据绑定机制可以检查密码验证逻辑，以确保密码格式有效。 |
现在我们已经清楚了一些常用术语，让我们来探索一下有哪些开源 JavaScript 框架。
| 框架 | 简介 | 许可证 | 发布日期 |
|---|---|---|---|
| ReactJS | 由 Facebook 创建，目前是最受欢迎的 JavaScript 框架 | MIT 许可证 | 2013 年 5 月 24 日 |
| Angular | 由 Google 创建的流行的 JavaScript 框架 | MIT 许可证 | 2010 年 1 月 5 日 |
| VueJS | 快速增长的 JavaScript 框架 | MIT 许可证 | 2013 年 7 月 28 日 |
| MeteorJS | 强大的框架，不仅仅是 JavaScript 框架 | MIT 许可证 | 2012 年 1 月 18 日 |
| KnockoutJS | 开源 Model-View-ViewModel (MVVM) 框架 | MIT 许可证 | 2010 年 7 月 5 日 |
| EmberJS | 另一个开源 Model-View-ViewModel 框架 | MIT 许可证 | 2011 年 12 月 8 日 |
| BackboneJS | 具有 RESTful JSON 和 Model-View-Presenter 模式的 JavaScript 框架 | MIT 许可证 | 2010 年 9 月 30 日 |
| Svelte | 不使用虚拟 DOM 的开源 JavaScript 框架 | MIT 许可证 | 2016 年 11 月 20 日 |
| AureliaJS | 现代 JavaScript 模块的集合 | MIT 许可证 | 2018 年 2 月 14 日 |
作为参考，以下是基于每个框架的 NPM 包下载量的公开可用数据，感谢 npm trends。
ReactJS
ReactJS 由 Facebook 发明，是当今 JavaScript 框架的明显领导者，尽管它的发明比 Angular 晚得多。 React 引入了一个名为虚拟 DOM 的概念，这是一个抽象的副本，开发者可以仅使用他们想要的 ReactJS 功能，而无需重写整个项目以在框架内工作。 此外，React 项目活跃的开源社区绝对是其增长背后的功臣。 以下是 React 的一些关键优势
- 合理的学习曲线——React 开发者可以轻松创建 React 组件，而无需在 JavaScript 中重写整个代码。 请参阅 ReactJS 的优势以及它如何使 ReactJS 上的编程更轻松首页。
- 针对性能进行了高度优化——React 的虚拟 DOM 实现和其他功能提高了应用程序的渲染性能。 请参阅 ReactJS 的 描述，了解如何根据应用程序的性能来对性能进行基准测试和衡量。
- 出色的支持工具——Redux、Thunk 和 Reselect 是构建结构良好、可调试代码的最佳工具。
- 单向数据绑定——Reach 中使用的模型仅从所有者流向子模型，从而更容易在代码中追踪因果关系。 在 ReactJS 的 数据绑定页面上阅读更多相关信息。
谁在使用 ReactJS？ 由于 Facebook 发明了它，该公司本身在其首页上大量使用 React，并且据说 Instagram 完全基于 ReactJS 库。 您可能会惊讶地发现，其他知名公司（如 纽约时报、Netflix 和 可汗学院）也在其技术堆栈中实施了 ReactJS。
更令人惊讶的可能是 ReactJS 开发者职位的可用性，如下面 Stackoverflow 所做的研究所示。 嘿，你可以从事一个开源项目并获得报酬。 这太酷了！
Stackoverflow 显示了对 ReactJS 开发者的巨大需求——来源：2017 年开发者招聘趋势 - Stackoverflow 博客
ReactJS 的 GitHub 目前显示有超过 13K 次提交和 1,377 位贡献者参与该开源项目。 并且它是一个在 MIT 许可证下的开源项目。
Angular
React 现在可能是开发者数量最多的 JavaScript 框架，但 Angular 紧随其后。 事实上，虽然 React 在开源开发者和初创公司中更受欢迎，但较大的公司往往更喜欢 Angular（下面列出了一些）。 主要原因是，虽然 Angular 可能更复杂，但其统一性和一致性非常适合大型项目。 例如，在我的职业生涯中，我同时使用过 Angular 和 React，并且我观察到较大的公司通常认为 Angular 的严格结构是一种优势。 以下是 Angular 的一些其他关键优势
- 设计良好的命令行界面：Angular 具有出色的命令行界面 (CLI) 工具，可以轻松地使用 Angular 进行引导和开发。 ReactJS 也提供命令行界面以及其他工具，但 Angular 具有广泛的支持和出色的文档，您可以在 此页面上看到。
- 单向数据绑定——与 React 类似，单向数据绑定模型使框架不易受到不良副作用的影响。
- 对 TypeScript 的大力支持——Angular 与 TypeScript 具有极佳的兼容性，TypeScript 实际上是具有更多类型强制的 JavaScript。 它还可以转译为 JavaScript，使其成为强制类型以减少代码错误的绝佳选择。
YouTube、Netflix、IBM 和 Walmart 等知名网站都已在其应用程序中实施了 Angular。 我个人是通过学习 Angular 来开始前端 JavaScript 开发的。 我参与了相当多的涉及 Angular 的个人和专业项目，但那是 Angular 1.x，当时称为 AngularJS。 当 Google 决定将版本升级到 2.0 时，他们彻底改造了该框架，然后它变成了 Angular。 新的 Angular 是对之前 AngularJS 的完全改造，这赶走了一些现有开发者，同时也带来了新的开发者。
Angular 的 GitHub 页面显示，在撰写本文时，有 17,781 次提交和 1,133 位贡献者。 它也是一个具有 MIT 许可证的开源项目，因此您可以随意将其用于您的项目或做出贡献。
VueJS
VueJS 是一个非常有趣的框架。 它是 JavaScript 框架领域的新手，但在过去几年中，它的受欢迎程度显着提高。 VueJS 由 Evan Yu 创建，他是一位曾在 Angular 项目工作的 Google 前工程师。 该框架非常受欢迎，以至于许多前端工程师现在更喜欢 VueJS 而不是其他 JavaScript 框架。 下图描述了该框架随着时间的推移获得的关注速度。
以下是 VueJS 的一些关键优势
- 更容易的学习曲线——即使与 Angular 或 React 相比，许多前端开发者也认为 VueJS 具有最低的学习曲线。
- 体积小巧 — 与 Angular 或 React 相比，VueJS 相对轻量。在其官方文档中，其大小仅约为 30 KB，而 Angular 生成的项目，例如，超过 65 KB。
- 简洁的文档 — Vue 拥有详尽但简洁明了的文档。请参阅其官方文档。
VueJS 的 GitHub 显示有 3,099 次提交和 239 位贡献者。
MeteorJS
MeteorJS 是一个免费且开源的同构框架，这意味着，就像 NodeJS 一样，它同时运行客户端和服务器端 JavaScript。 Meteor 可以与任何其他流行的前端框架（如 Angular、React、Vue、Svelte 等）结合使用。
Meteor 被高通、马自达和宜家等多家公司以及 Dispatch 和 Rocket.Chat 等许多应用程序使用。请参阅其官方网站上的案例研究。
Meteor 的一些关键特性包括：
- 线上的数据 — 服务器发送数据，而不是 HTML，客户端负责渲染。线上的数据主要指的是 Meteor 在页面加载时与服务器建立 WebSocket 连接的方式，然后通过该连接传输所需的数据。
- 使用 JavaScript 开发一切 — 客户端、应用服务器、网页和移动界面都可以用 JavaScript 设计。
- 支持大多数主要框架 — Angular、React 和 Vue 都可以与 Meteor 结合使用。 因此，您仍然可以使用您喜欢的框架，例如 React 或 Angular，但仍然可以利用 Meteor 提供的一些强大功能。
到目前为止，Meteor 的 GitHub 显示有 22,804 次提交和 428 位贡献者。 对于开源活动来说，这非常多！
EmberJS
EmberJS 是一个基于Model-view-ViewModel (MVVM)模式的开源 JavaScript 框架。 如果您从未听说过 EmberJS，您一定会惊讶于有多少公司正在使用它。 Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都将 EmberJS 作为其技术栈之一。 请查看 EmberJS 的官方页面，了解所有使用 EmberJS 的应用程序和客户。
虽然 Ember 具有与我们讨论过的其他框架相似的优势，但以下是它的一些独特区别：
- 约定优于配置 — Ember 标准化命名约定并自动生成结果代码。 这种方法需要更多的学习曲线，但可以确保程序员遵循最佳实践。
- 完善的模板机制 — Ember 依赖于直接的文本操作，动态构建 HTML 文档，同时对 DOM 一无所知。
正如人们可能从许多应用程序使用的框架中预期的那样，Ember 的 GitHub 页面显示有 19,808 次提交和 785 位贡献者。 真是太棒了！
KnockoutJS
KnockoutJS 是一个独立的开源 JavaScript 框架，它采用带有模板的Model-View-ViewModel (MVVM) 模式。 尽管与 Angular、React 或 Vue 相比，听说过此框架的人可能较少，但该项目在开发社区中仍然非常活跃，并利用了以下功能：
- 声明式绑定 — Knockout 的声明式绑定系统提供了一种简洁而强大的方式来将数据链接到 UI。 通常很容易绑定到简单的数据属性或使用单个绑定。 在 KnockoutJS 的官方文档页面上阅读更多相关信息。
- 自动 UI 刷新
- 依赖跟踪模板
Knockout 的 GitHub 页面显示大约有 1,766 次提交和 81 位贡献者。 与其他框架相比，这些数字并不重要，但该项目仍在积极维护中。
BackboneJS
BackboneJS 是一个轻量级的 JavaScript 框架，具有 RESTful JSON 接口，并且基于 Model-View-Presenter (MVP) 设计范例。
据说该框架被 Airbnb、Hulu、SoundCloud 和 Trello 使用。 您可以在 Backbone 的页面上找到所有这些案例研究。
BackboneJS GitHub 页面显示 3,386 次提交和 289 位贡献者。
Svelte
Svelte 是一个开源 JavaScript 框架，它生成操作 DOM 的代码，而不是包含框架引用。 在构建时而不是运行时将应用程序转换为 JavaScript 的过程可能会在某些情况下略微提高性能。
截至撰写本文时，Svelte 的 GitHub 页面显示 5,729 次提交和 296 位贡献者。
AureliaJS
列表中的最后一个是 Aurelia。 Aurelia 是一个前端 JavaScript 框架，它是现代 JavaScript 模块的集合。 Aurelia 具有以下有趣的功能：
- 快速渲染 — Aurelia 声称其框架的渲染速度比当今任何其他框架都要快。
- 单向数据流 — Aurelia 使用基于观察者的绑定系统，该系统将数据从模型推送到视图。
- 使用原生 JavaScript 构建 — 您可以使用纯 JavaScript 构建网站的所有组件。
截至撰写本文时，Aurelia 的 GitHub 页面显示 788 次提交和 96 位贡献者。
这就是我在查看 JavaScript 框架领域的新事物时发现的内容。 我错过了任何有趣的框架吗？ 请随时在评论部分分享您的想法！
6 条评论