web前端开源框架_9个用于前端Web开发的开源JavaScript框架
web前端开源框架
大约十年前，JavaScript开发人员社区开始目睹JavaScript框架之间出现的激烈战斗。 在本文中，我将介绍一些最著名的框架。 需要特别注意的是，这些都是开放源代码JavaScript项目，这意味着您可以在开放源代码许可下自由使用它们，甚至可以为源代码和社区做出贡献。
如果您喜欢在探索这些框架时继续学习，则可以观看我的视频。
但是，在开始之前，学习一些JavaScript开发人员在讨论框架时常用的术语将很有用。
| 术语 | 这是什么 |
|---|---|
| Document Object Model (DOM) | 网站的树结构表示形式，其中每个节点都是代表网页一部分的对象。 万维网联盟（W3C）是万维网的国际标准组织，维护DOM的定义。 |
| Virtual DOM | 用户界面（UI）的“虚拟”或“理想”表示形式保留在内存中，并通过诸如ReactDOM之类的库与“真实” DOM同步。 要进一步探索，请阅读ReactJS的虚拟DOM和内部文档。 |
| Data Binding | 一种编程概念，旨在为访问网站上的数据提供一致的界面。 Web元素与DOM维护的元素的属性或属性相关联。 例如，当您需要以网页形式填写密码时，数据绑定机制可以使用密码验证逻辑进行检查，以确保密码采用有效格式。 |
既然我们已经了解了通用术语，那么让我们探索一下那里的开源JavaScript框架。
| 构架 | 关于 | 执照 | 发布日期 |
|---|---|---|---|
| ReactJS | 由Facebook创建，目前是最受欢迎JavaScript框架 | 麻省理工学院执照 | 2013年5月24日 |
| Angular | 由Google创建的流行JavaScript框架 | 麻省理工学院执照 | 2010年1月5日 |
| VueJS | 快速增长JavaScript框架 | 麻省理工学院执照 | 2013年7月28日 |
| MeteorJS | 功能强大的框架不只是JavaScript框架 | 麻省理工学院执照 | 2012年1月18日 |
| KnockoutJS | 开源Model-View-ViewModel（MVVM）框架 | 麻省理工学院执照 | 2010年7月5日 |
| EmberJS | 另一个开源的Model-View-ViewModel框架 | 麻省理工学院执照 | 2011年12月8日 |
| BackboneJS | 具有RESTful JSON和Model-View-Presenter模式JavaScript框架 | 麻省理工学院执照 | 2010年9月30日 |
| Svelte | 开源JavaScript框架未使用虚拟DOM | 麻省理工学院执照 | 2016年11月20日 |
| AureliaJS | 现代JavaScript模块的集合 | 麻省理工学院执照 | 2018年2月14日 |
就上下文而言，这是基于npm趋势基于每个框架的NPM包下载量的可公开获得的流行度数据。
ReactJS
ReactJS是Facebook发明的，尽管它是在Angular之后发明的，但它显然是当今JavaScript框架中的领导者。 React引入了一个称为虚拟DOM的概念，这是一个抽象副本，开发人员可以在其中仅使用所需的ReactJS功能，而无需重写整个项目即可在框架中工作。 此外，React项目活跃的开源社区绝对是增长的动力。 以下是React的一些主要优势：
- 合理的学习曲线-React开发人员可以轻松创建React组件，而无需用JavaScript重写整个代码。 在ReactJS的首页上查看ReactJS的好处以及它如何使其变得更容易编程。
- 高度优化的性能-React的虚拟DOM实现和其他功能可提高应用程序渲染性能。 请参阅ReactJS关于如何通过应用程序性能对其性能进行基准测试和测量的描述 。
- 出色的支持工具-Redux ， Thunk和Reselect是用于构建结构良好的可调试代码的一些最佳工具。
- 数据绑定的一种方法-“到达”中使用的模型从所有者流到子节点，这仅使跟踪代码中的因果关系变得更加简单。 在ReactJS的数据绑定页面上阅读有关它的更多信息。
谁在使用ReactJS？ 自从Facebook发明它以来，该公司本身就在其首页上大量使用React，据说Instagram完全基于ReactJS库。 您可能会惊讶地发现， 《纽约时报》 ， Netflix和Khan Academy等其他知名公司也在其技术堆栈中实现了ReactJS。
如下所示，您可以从Stackoverflow的研究中看到，ReactJS开发人员可以得到更多的工作，这可能会更加令人惊讶。 嘿，您可以从事开源项目，并获得报酬。 太酷了！
Stackoverflow显示了对ReactJS开发人员的巨大需求- 来源：2017年开发人员招聘趋势 -Stackoverflow 博客
ReactJS的GitHub当前显示了超过1.3万的提交和1,377位贡献者。 它是MIT许可下的一个开源项目。
角度的
- 精心设计的命令行界面：Angular具有出色的命令行界面（CLI）工具，可以轻松地引导和使用Angular进行开发。 ReactJS还提供了命令行界面以及其他工具，但是Angular具有广泛的支持和出色的文档，如您在此页面上所见。
- 单向数据绑定-与React类似，单向数据绑定模型使框架较少受到有害副作用的影响。
- 对TypeScript的强大支持-Angular与TypeScript具有出色的一致性，实际上是JavaScript的更多类型强制实施。 它还可以编译为JavaScript，从而使其成为强制执行类型以减少错误代码的绝佳选择。
YouTube， Netflix ， IBM和Walmart等知名网站都已在其应用程序中实现了Angular。 我亲自学习了有关该主题的知识，从而开始使用Angular进行前端JavaScript开发。 我参与了许多涉及Angular的个人和专业项目，但当时是AngularJS调用的Angular1.x。 当Google决定将版本升级到2.0时，他们彻底改造了该框架，然后将其变为Angular。 新的Angular是对以前的AngularJS的完全改造，它淘汰了一些现有的开发人员，同时带来了新的开发人员。
在撰写本文时， Angular的 GitHub页面显示了17,781个提交和1,133个贡献者。 它也是具有MIT许可证的开源项目，因此您可以随时将其用于项目或做出贡献。
VueJS
VueJS是一个非常有趣的框架。 它是JavaScript框架领域的一个新手，但是在过去的几年中，它的流行性大大提高了。 VueJS由曾从事Angular项目的前Google工程师Evan Yu创建。 该框架如此流行，以至于许多前端工程师现在更喜欢VueJS而不是其他JavaScript框架。 下图描述了框架随着时间的推移获得牵引力的速度。
以下是VueJS的一些关键优势：
- 更轻松的学习曲线-与Angular或React相比，许多前端开发人员都认为VueJS具有最低的学习曲线。
- 体积小-与Angular或React相比，VueJS相对较轻。 在其官方文档中 ，它的大小仅声明为30 KB，而例如Angular生成的项目则超过65 KB。
- 简洁的文档-Vue拥有详尽但简洁明了的文档。 自己查看其官方文档 。
VueJS的GitHub显示了3099个提交和239个贡献者。
流星JS
MeteorJS是一个免费的开源同构框架 ，这意味着，与NodeJS一样，它同时运行客户端JavaScript和服务器端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是一个独立的开源JavaScript框架，采用带有模板的Model-View-ViewModel（MVVM）模式。 尽管与Angular，React或Vue相比，听说过此框架的人较少，但该项目在开发社区中仍然相当活跃，并利用以下功能：
- 声明性绑定-Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI。 绑定到简单数据属性或使用单个绑定通常很容易。 在KnockoutJS的官方文档页面上了解更多有关它的信息 。
- 用户界面自动刷新
- 依赖跟踪模板
Knockout的GitHub页面显示了约1,766项提交和81位贡献者。 与其他框架相比，这些数字没有那么重要，但是该项目仍在积极维护中。
BackboneJS
BackboneJS是具有RESTful JSON接口的轻量级JavaScript框架，基于Model-View-Presenter（MVP）设计范例。
据说该框架供Airbnb ，Hulu，SoundCloud和Trello使用。 您可以在Backbone的页面上找到所有这些案例研究。
BackboneJS GitHub页面显示3,386个提交和289个贡献者。
斯维尔特
Svelte是一个开放源代码JavaScript框架，该框架生成用于操作DOM的代码，而不包含框架引用。 在某些情况下，在构建时而非运行时将应用程序转换为JavaScript的过程可能会稍微提高性能。
截至撰写本文时， Svelte的 GitHub页面显示了5,729个提交和296个贡献者。
奥雷利亚
名单上的最后一个是Aurelia 。 Aurelia是一个前端JavaScript框架，它是现代JavaScript模块的集合。 Aurelia具有以下有趣的功能：
- 快速渲染-Aurelia声称其框架可以比当今任何其他框架更快地渲染。
- 单向数据流-Aurelia使用基于可观察的绑定系统，该系统将数据从模型推送到视图。
- 使用普通JavaScript进行构建-您可以使用普通JavaScript来构建网站的所有组件。
截至撰写本文时， Aurelia的 GitHub页面显示788个提交和96个贡献者。
这就是我在查看JavaScript框架世界中的新增内容时发现的。 我是否错过了任何有趣的框架？ 随时在评论部分分享您的想法！
翻译自: https://opensource.com/article/20/5/open-source-javascript-frameworks
web前端开源框架