大约十年前，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 目前显示该开源项目有超过 1.3 万次提交和 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 被多家公司使用，例如 Qualcomm、Mazda 和 Ikea，以及 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 条评论