12个你应该了解的最佳JavaScript（JS）框架

开始学习javascript开发了吗？找出一些最好的框架来在更短的时间内构建现代应用程序。

javascript (js) 框架是构建动态现代应用程序、实时聊天、电子商务、库存、处理等等的首选平台。

无论是小型还是企业级、前端还是后端，js都非常适合。你可能听说过以下使用javascript的网站。

• hulu
• flickr
• paytm
• wsj
• dictionary

让我们来探索一下市场上最好的用于web应用程序开发的js框架。

sencha ext js

sencha ext js是一个全面的高级javascript框架，帮助您创建跨平台的移动和web应用程序以及现代设备的数据密集型应用程序。

它包括140多个经过测试和预集成的高性能ui组件，例如网格、d3适配器、列表、面板、工具栏、窗口、枢轴网格、树、菜单、表单、html日历等等。

通过这个框架、工具和组件来加速web应用程序开发，以帮助您无缝地工作。此外，使用诸如stencils、themer、sencha cmd、sencha fiddle、ide、代码编辑器插件、stencils和sencha architect等工具来增强设计过程。

sencha test帮助工程师和开发人员提高应用程序质量，利用功能和单元测试来测试ext js应用程序并创建强大的测试。此外，inspector是一种调试工具，可以让您访问类、对象、组件等等。

数据包是协议不可知的，可以从后端源消耗数据。它允许使用功能模型进行客户端数据集合，并包括管理功能以减少往返并允许客户端服务器操作。

angularjs

angular.js是一个流行的开源前端开发框架，主要用于开发动态单页web应用程序（spa）。

angularjs将服务器上的所有内容转移到浏览器并同时加载所有网页。一旦内容加载完成，点击页面上的任何链接都不会重新加载整个页面内容，而是仅更新页面内的部分。

像paypal、freelancer、linkedin、lego、hopscotch等大型组织都在使用angularjs来提供ui。

传统网站和基于angular的网站之间最重要的区别是angular希望浏览器来构建页面。这不会给服务器带来很大的负载，从而导致页面加载速度更快。

angular具有原生应用程序的nativescript和混合应用程序的ionic框架。angular允许在模板内直接添加if条件、循环和本地变量，并使用数据绑定跟踪、处理和显示用户的更改。angular通过其基于json的处理和渲染能力，使动态渲染更容易。任何具备html5和javascript基础的开发人员都可以很容易地学习angular js。

angular最初依赖于typescript，这使得它在开源项目中更加一致。然而，最新的angular版本远不止于此。

它具有路由器并且本身支持表单验证。通过控制页面间的导航和管理用户行为和操作，它完成了用户体验。

angular的开发目标是让它模块化、可测试和可维护。因此，它成为一个出色的前端开发框架。

特点

• 数据绑定 – 双向数据绑定功能可以节省开发人员编写大量代码的时间。它是模型和视图组件之间数据的自动同步。
• 模板 – html模板会被浏览器直接解析成dom。
• 依赖注入 – angularjs内置了依赖注入（di），有助于自然的开发、理解和测试。
• 指令 – 借助这个功能，可以轻松创建像新的自定义部件那样的自定义html标签。还可以用于操作dom属性。
• 如果你对angular.js有很好的掌握，与传统的html+javascript开发相比，开发速度更快
• 它可以在mvc和mvw架构中进行配置

angularjs是一个跨平台框架。由于控制器和基于数据的呈现，代码易于理解，更少出错。

react

react是用于开发ui应用程序的库。它于2013年发布，并且是当今世界上增长最快的js框架。

当需要为用户交付高性能企业应用程序时，react.js是首选。像instagram和facebook这样的用户界面运用了它。

选择angular和react之间一直存在着激烈的竞争。与angular相比，react更加灵活，因为开发人员将不得不使用独立的库，具有相对更好的响应时间。react在处理接收输入并将元素作为输出返回的小型和无状态函数方面非常出色。它专注于js es6，并且可以使用flow来启用react中的类型检查。

react中的每个项目都有不同的架构和有限的指导，因此容易出错。react主要用于mvc模型中的v（视图），因为可以在不访问服务器和获取新视图的情况下更新用户界面。

当应用程序有多个视图时，reactjs是最佳选择，因为每个视图都需要不同的部件。然后可以将各种组件或部件添加到视图中。使用angular来处理视图不是一个好主意，因为它可能会导致许多复杂性和不必要的问题。因此，reactjs最适合构建基于部件的视图。

特点

• 组件：react是声明性和基于组件的。将网页划分为小组件以创建用户界面。组件特性在处理大型项目时非常有用。
• jsx：jsx是一种javascript扩展，表示需要处理并转换为实际的javascript。与javascript相比，jsx使用更短且更简单的语法，简化了编码。
• 数据绑定：单向数据绑定以及一个名为flux的应用程序基础设施。单向数据流使得应用程序易于理解，而flux是一种保持数据单向的模式。
• 基于react.js的页面由虚拟dom组成。对于每个dom对象，都有一个该dom对象的副本。
• 您可以很容易地将react与其他框架（如angular.js、backbone.js）一起使用。
• 由于react的基于组件的架构和可重用性，维护react非常简单。
• react可以在服务器端和客户端上使用，因此可以根据需要将渲染负载从服务器分发到客户端。

react对于前端开发来说是seo友好且快速的。在这里学习完整指南。

ember.js

ember也是一个开源框架，允许开发人员创建单页和大型web应用程序。ember是一个高度主观的框架，旨在具有很大的灵活性。

虽然angular和react是灵活且不那么主观的，但ember对应用程序做出了许多假设，并要求开发人员符合其期望。

使用ember和其他重要工具可以形成完整的开发堆栈。ember具有一种名为ember组件的小部件化方法。handlebars布局和ember的后端架构允许开发人员编写自己的应用程序特定的html标签。

handlebars集成的模板会在底层数据更改时自动更新，编码量显著减少。像linkedin、vine和live这样的网站都使用了ember。它还用于构建桌面和移动应用程序。

ember在与react或angular相比拥有强大的路由系统。

在更新方面，ember领先于许多框架，经常添加新功能。

与meteor相比，ember在管理员便利性和支持质量方面表现出色，但在易用性和设置方面欠缺。ember在最佳客户端javascript mv框架方面击败了polymer和mithril。

特点

• ember遵循“模型-视图-视图模型（mvvm）”模式，并遵循“约定优于配置（coc）”
• ember-cli：ember的cli提供了一个标准的应用程序结构和构建管道。它是一个命令行实用程序，与ember框架的软件堆栈一起提供。
• ember模板：模板嵌入到ui中，使用handlebars模板语言编写。
• ember inspector工具对于调试应用程序非常有用。
• html和css构成了ember开发模型的核心。
• ember数据库非常出色。
• 提供了许多可以添加到应用程序的ember插件。
• 测试工具内置，ui嵌套。
• 支持客户端渲染和url。
• 最小化dom。

ember用户喜欢的一个很棒的功能是其友好的api，这使得理解和使用变得容易。它允许以易于理解的方式利用复杂的功能。通过约定优于配置，一切都准备好并配置好，供开发人员立即开始项目。

vue.js

vue.js于2014年发布，是开发人员采用的增长最快的框架。它是一个轻量级的渐进式js框架，从reactjs和angularjs中获得了很多概念。

它的模板风格类似于angular，并且具有基于组件的props，就像reactjs一样。vue为应用程序、ui和交互式web界面开发提供了简单快速的解决方案。它可以为高级单页web应用程序提供动力。

选择vue而不是react的最大优势是在vue中，组件的依赖关系在渲染过程中会自动跟踪。因此，当状态改变时，系统知道需要重新渲染哪个组件。

这避免了为优化而需要的额外工作，并让开发人员更专注于构建应用程序。

vue提供了渲染函数，支持jsx，有效的html也可以是有效的vue模板。vue的样式方法是通过单文件组件中的样式标签来实现的。单文件组件允许在与其他组件代码相同的文件中完全访问css。

vue使用透明依赖跟踪观察和异步排队。与ember不同，vue会自动批处理更新。vue对于browserify和webpack具有成熟的工具支持。我们可以说，每个javascript框架收集的所有小想法都被放入vue中，使其成为一个全能工具。

特点

• 模板：vue使用基于html的模板语法。vue中的所有模板都是有效的html，使用html解析器和符合规范的浏览器进行解析。可以使用jsx编写渲染函数。
• 过渡效果：vue允许在将项目插入、移除或更新dom时应用过渡效果。
• 组件：这被认为是最强大的功能之一。组件扩展了基本的html元素，用于封装可重用的代码。
• 响应性：vue拥有强大的响应性系统。当javascript对象模型（model）被修改时，视图会自动更新。
• 占用空间小。
• 易于理解和开发。
• 灵活且易于集成。

与angular相比，vue证明是一个更灵活和模块化的前端开发框架。它在组件和指令之间有清晰的分离。

立即获取终极的vuejs开发课程。

backbone.js

backbone.js是一个轻量级的javascript库，最初于2010年发布，并自那时以来一直作为一个灵活的结构化代码框架。它允许开发人员开发单页web应用程序和在web浏览器中运行的客户端应用程序。

它提供了mvp网络，将数据抽象为模型，将文档对象模型（dom）抽象为视图，并使用事件将这两者绑定在一起。

与其他框架不同，backbone让开发人员负责选择适合给定项目的最佳工具。backbone中不存在自己的模板引擎。

像索尼娱乐网络、airbnb和soundcloud这样的公司在其项目中使用backbone.js。公司和开发人员使用backbone是因为它能够将任何代码用作其控制器，同时保持控制器是可选的。

对restful api的良好支持允许将模型映射到restful端点。值得注意的是，backbone避免使用双向数据绑定，因为在真实世界的应用程序中它并不是非常有用。无论backbone还是angular都擅长处理较小的页面，但随着页面的增长，angularjs中的双向数据绑定功能开始显示出性能下降。

另一方面，在backbone中，开发人员必须自己编写绑定。这可能会增加代码量，但提供了在不必担心底层框架的情况下专注于提高性能的好处，因此在这种情况下比angular更好。

特点

• restful json接口：backbone是一个基于model-view-presenter (mvp)应用模型的框架/库，具有restful json接口。json是一种轻量级格式，用于数据序列化，而restful接口包含了rest架构的特征。
• 与后端同步：在backbone.js中，可以将模型与后端绑定，因为backbone对restful api提供了很好的支持。
• 事件驱动：视图和模型之间的事件驱动通信可以防止代码变得难以阅读。
• backbone在处理dom时采用命令式编程风格。
• backbone对underscore.js有强依赖，对jquery有软依赖。
• 如果模型发生任何变化，html代码会自动更新。
• 它是一个简单的库，将ui与业务逻辑分离。
• 它包含了100多个扩展，有助于组织代码并作为任何项目的骨架。

backbone也被认为是reactjs的最佳“model”和“controller”，以完成mvc模式。虽然angular通过向文档添加动态html属性提供模板化，但backbone借鉴了underscore模板，使其格式类似于ember。

mithril.js

mithril是一个较少人知的js库，用于在客户端上创建单页应用的现代javascript框架。

它非常小巧（不到8kb gzip），速度快，提供路由和xhr实用程序。它支持所有浏览器，如ie9，无需任何垫片。

mithril目前被像nike和fitbit这样的公司以及像lichess这样的开源平台所使用。mithril利用先进且经过优化的虚拟dom算法，以最小化dom更新的量。

它还创建了使用javascript引擎编译的vnode数据结构，以提高数据结构访问性能。

mithril支持重新创建整个虚拟dom树的渲染模型，以提供一种声明式api，使得管理ui复杂性更加容易。据说学习组件、路由和xhr只需不到15分钟即可开始构建应用程序。

mithril具有内置的xhr和路由模块，而react需要第三方模块来实现相同功能，且内存使用量也较大。此外，与react、angular甚至vue相比，mithril的库加载时间和更新性能都很快！vue.js的大小虽然也较小且紧凑，但仍然比mithril大。与vue不同，mithril的概念较少，更侧重于将应用程序按照数据层和组件进行组织。

特点

• 核心功能: mithril提供了分层mvc组件、url路由、默认安全的模板、可定制的数据绑定。
• 可测试性: mithril模板只是javascript，开发者可以在任何javascript引擎中进行测试，无需构建步骤。
• 组件: 在mithril.js中，组件由可选的控制器和必需的视图属性创建。
• 性能: 与其他框架相比，mithril在加载时只需不到5毫秒。它是todomvc基准测试中最快的mvc库。
• 它与模块系统和编译语法正交，因此开发者可以自由使用es3、es5、es6、异步模块定义（amd）。它还包含了typescript定义。
• mithril的开发非常活跃，并且有适当的文档。
• 它拥有智能的自动重绘系统
• 它与flux兼容，健壮且不固执己见
• 它是由虚拟dom组成的纯javascript

与angular相比，mithril的小代码库大小使得易于审核，这使得它比angular更快。与angular不同，mithril提供了入门教程和广泛的api参考部分，其中包含了构建应用程序所需的一切。

虽然mithril并不被广泛认可，但它经常与其他javascript框架进行直接竞争。

polymer.js

polymer是另一个用于构建使用web组件的web应用程序的开源javascript库。该库由google开发人员开发，并在github上有贡献者。与任何其他javascript框架不同，polymer被构建用于利用web平台中存在的功能，使开发者能够构建组件。它是第一个允许通过组合组件来构建交互式应用程序的库。

polymer被许多google服务和网站使用。youtube、google play music等都在使用它，还有netflix等。polymer开始在市场上获得认可，其结构化设计过程受到了很多关注。由于组件是polymer的最大优势，它对web组件有更好的支持，并且与react相比具有更好的离线模块。

react和polymer的力量可以用于实现更多面向组件的web开发未来。polymer的组件和angular的指令显示出一些相似之处，但在创建自定义html元素方面采用了不同的方法。

在polymer中，组件被描述在一个html文件中，而在angular中，组件可以被拆分成多个文件。与其他js框架相比，polymer也被认为是与spring boot rest资源一起使用的最佳框架之一。

特点

• web组件：web组件标准有助于在web文档和应用程序中创建可用的小部件。这些组件是可重复使用的web组件。这些组件也可以用于将应用程序拆分为合适大小的部分，以使编码更清洁和更经济。
• 数据绑定：这个库可以实现单向和双向数据绑定。
• polyfills：它使用最新的web平台api，并为浏览器提供polyfills。polyfills是用于创建自定义的可重复使用元素的web组件规范。
• polymer构建在web标准api之上，允许构建自定义html元素。
• 提供手势事件以及条件和重复模板。
• polymer提供了将js、css和html组合为自定义元素的功能。
• 速度：在chrome上快3倍，在safari上快4倍。
• polymer元素包括设计和主题，这意味着开发人员不需要修改复杂的网页源代码以匹配设计师的需求。

话虽如此，谷歌将很快发布下一代产品，其中包括litelement，这是一个超轻量级的自定义元素基类，具有表达力和简单直观的api。有了chrome团队支持polymer，我们可以期待web组件成为构建渐进式web应用程序（pwa）的未来。

node.js

node.js是一个最常下载的开源、跨平台的运行时环境，用于在浏览器之外执行javascript代码。它用于构建后端服务或api，并开发服务器端和网络应用程序。它是建立在google chrome的javascript引擎（v8引擎）之上的平台。

在node上构建的应用程序是用javascript编写的，可以在像microsoft windows、linux和macos这样的操作系统上在node.js运行时中运行。还可以查看一些最佳的node.js托管平台。

来源：stackoverflow

node使用非阻塞单线程事件循环异步处理多个请求，非常适合处理大量的网络请求的分布式系统。它被像uber、paypal和walmart这样的公司使用，这反映了它作为后端语言的全球接受度。

提到一个实际的事实-在paypal中，当使用node.js构建他们的应用程序时，他们发现该应用程序用更少的文件和代码构建速度提高了一倍。它还使每秒请求数量翻倍，并且响应时间快了35%。与其他框架相比，node.js对于生成数据库查询非常有用，因为js用于编写像mongodb和couchdb这样的数据库的查询。

选择node.js的另一个原因是它非常适合实时协作或编辑类型的应用程序，用户可以看到另一个用户实时修改文档，就像在google文档或dropbox中一样。此外，node.js拥有最大的开源库生态系统npm包生态系统。通过最新的node.js更新，它对esm的支持更好。

特点

• 代理服务器：node技术有助于从不同来源流式传输数据，并可用于代理一些服务器。
• 无缓冲：node中的应用程序永远不会缓冲任何数据。这是因为应用程序将数据分块输出。
• 异步和事件驱动：node的库api是异步的，这意味着服务器不会等待api返回数据，从而以异步方式渲染数据，对每个请求提供更快的响应。
• 可扩展和单线程：node使用单线程模型，其中包含事件循环。这种事件机制帮助服务器以异步方式响应，使得服务器具有高度可扩展性。与apache http服务器相比，它所使用的单线程程序可以为大量请求提供服务。
• 借助javascript堆栈实现良好的集成
• 客户端和服务器端使用相同的代码
• npm软件包非常有用，因为它包含了模块所需的所有文件。
• node非常快，因为它使用了google的v8引擎。

现在它不再依赖js运行时，并且允许开发人员编写c/c++插件而无需对v8的工作原理有深入了解，因为它提供了更好的抽象。由于其强大的功能，人们很难忽视node.js，它已被用于编写许多其他javascript，其中meteor js是最好的一个。

svelte

svelte是javascript（前端）框架家族的新成员。它与我们在本文中讨论的传统和著名框架不同。

它与其他框架有何不同之处？

svelte发布于三年前。最近由于其简单性而日益流行。

svelte是一个像react和vue一样的基于组件的前端框架。它与这些框架之间有一个重大区别。svelte不像react、vue等框架那样使用虚拟dom，它在构建时运行，并将您的组件转换为在浏览器中运行的代码，而其他框架在浏览器中执行这些操作。

了解svelte的一些要点。

• 因此，纯粹的javascript操作您应用程序中的dom。
• 它也被称为消失的框架，因为在浏览器中没有框架的工作。
• svelte文件具有.svelte扩展名。
• 我们可以在svelte文件中使用css，在style标签内编写。
• 它使用rollup作为打包工具。
• svelte的语法有所不同，学习起来更简单。

让我们来看看svelte的优势。

• 性能，它在速度和大小方面与react、vue和angular等顶级框架竞争。
• svelte应用程序快速，因为在浏览器中没有框架，并且在构建时将代码编译为原生的javascript。
• 与其他框架相比，捆绑包的大小非常小。
• 我们可以在相同的文件中使用样式标签为组件编写所有样式。
• 它带有一个状态管理系统。
• 我们在浏览器中找不到任何与svelte相关的文件。
• 更少的样板代码，如果您熟悉javascript，可以快速开始使用svelte。

svelte非常适合小型项目。如果您需要在短期内构建一个应用程序，那么选择svelte吧。它是一个适合初学者的框架。

meteor.js

meteorjs是一个使用node.js编写的开源、全栈且免费的javascript框架。它允许快速原型设计并创建跨平台代码。它在node.js平台上快速开发小型和响应式应用程序。meteor使用在浏览器上运行的前端javascript和在node.js内的meteor服务器上的后端。

meteor与其他javascript框架（如react、express和angular）集成。它还与mongodb和cordova技术集成，以使用html、css和js构建在webview上运行的混合应用程序。

使用meteor，可以使用较少的编码仅使用一种语言javascript开发任何设备的应用程序。这是大多数公司都在寻找的类型的用户界面。像马自达、霍尼韦尔和高通这样的公司使用meteor。它使用数据在网络上，这意味着服务器发送数据而不是html，客户端渲染数据。

meteor还用c或c++编写，并支持windows和linux等操作系统。它附带了npm捆绑包，这样开发人员只需键入'meteor npm'即可，而无需他们自己安装。

meteor.js支持三种主要的ui渲染库：angular、react和blaze（blaze是meteor的一部分）。meteor中的一个很好的ux模式是乐观ui。乐观ui可以避免服务器往返，因此与react.js或angular相比，用户体验更快速。

特点

• 同构javascript代码：它允许在移动和web应用程序的前端和后端使用相同的代码。开发人员无需配置和安装不同的库、api、驱动程序和模块管理器。
• 实时浏览器重新加载：当在前端进行更改时，meteor会自动重新加载实时网页。集成的实时重新加载功能只会刷新所需的dom元素，而不重新加载整个页面。
• 全栈解决方案：meteor为开发和使用web应用程序提供了一个全栈解决方案。
• 通过javascript语言将前端、后端和数据库简化为统一的开发方式。
• 易于设置和开始创建项目。
• 可扩展性强且适合初学者。

实际上，如果我们仔细观察，meteor是nodejs、blaze、angular、react、cordova和mongodb的组合，因此被称为“一揽子解决方案”。

aurelia

aurelia是一组开源的现代javascript模块，被称为“下一代ui框架”，使用ecmascript编写。由blue spire赞助，它是构建浏览器、桌面和各种移动应用程序的强大平台。自推出以来，aurelia一直受到很多认可。freska、ordami和btek software等公司都在其项目中使用aurelia。

<p不容忽视的是，aurelia是唯一一个允许开发人员使用纯净的vanilla typescript或javascript构建组件的框架。据说aurelia在模块化方面超过了angular。

由于angular将其所有组件捆绑到一个大型包中，因此在这种架构中删除或更改组件变得困难。另一方面，aurelia由一组库组成，这些库使用定义良好的接口共同工作，因此它完全具备模块化特性。

它采用了一种与其他框架不同的mv*方法，因为不需要指定特定的控制器或视图模型。与react和angular2相比，它更加优雅和简单易懂。虽然aurelia在其绑定系统中采用了现代和反应式的方法，vue使用了虚拟dom，就像react一样。

aurelia.io的特点和优势

• 前瞻性：专注于下一代javascript。它是用ecmascript编写的。aurelia与web组件集成，无需外部依赖。
• 双向数据绑定：提供了一种观察模块中每个属性并自动将其与ui同步的高效方式，具有最佳性能。
• 可扩展的html：aurelia的此功能允许开发人员创建自定义html元素，并向现有元素添加自定义属性，完全支持动态加载、数据绑定和批量渲染。
• 路由和ui组合：使用先进的客户端路由器及其可插拔的流水线、子路由器和异步屏幕激活。
• 广泛的语言支持：aurelia支持es5、es2015、es2016和typescript。api设计得兼容当今和明天流行的网络编程语言。
• 测试：可用于es2015的可测试di容器。单元代码测试非常简化。
• 配置和设置非常容易和快速。
• 它具有简单的结构，使得框架更快、更容易学习。
• 它非常高效和模块化。

aurelia还提供了一个良好的编码和设计系统，可以构建spa而无需使用任何第三方库。与mithril.js相比，aurelia具有一个出色的cli，用于更快地开发由热重载和生成器组成的项目。寻找react或angular的一个很好的替代品的开发人员可以考虑aurelia。

结论

希望上述内容能给您关于下一个项目的js框架提供一些想法。如果您想学习js，我建议您参加这个中级javascript课程。

接下来，探索一些加速开发的最佳ide。