三大 JS 框架的较量：Angular.js 与 React.js 与 Ember.js

   前言：通过选择合适的JavaScript框架来更好适配你的项目需求，这有利于提高你的开发能力与web apps的竞争力。然后，你可以为基于JavaScript的应用或者网站想个极佳的主意。选择合适框架应该对你项目的成功有显著效果。它可以推到你及时完成项目，并且有助于你将来维护代码。JavaScript框架，比如Angular.js，Ember.js，或者React.js，能提供很好的代码框架，并且保持代码的组织性，从而使得你的app更具灵活性与可扩展性，开发过程更加容易。

   JavaScript场景的波动

      Web开发变化速度非常快。几乎每个月都有一个JavaScript框架诞生，并且已存在的框架也在频繁更新。这些框架和开源代码一样，世界各大社区可以对它们进行完善。到后来，比较每个框架的优点与不同点，变成一件非常不容易的事情。

      Angular Vs React Vs Ember.Deep Dive

      许多开发者都对JavaScript框架有着困惑，因为框架外表与功能差异很大。下面，让我们来比较三大广泛应用于web的流行JavaScript框架的优点：AngularJs、ReactJs和EmberJs。

      框架概览

框架	AngularJS	ReactJS	EmberJS
概述	主要的 JavaScript MVW 框架	主要用于构建用户界面，但不仅限于此的 JavaScript 库	一个用于创建复杂 Web 应用程序的框架
创立	2009 由 Miško Hevery 创立	2013 年由 Jordan Walke 创立，开源	2007 年由 Yehuda Katz 创立，名为 SproutCore，2011 年被 Facebook 收购，更名为 EmberJS
主页	https://angularjs.org/	https://reactjs.net/	http://emberjs.com/
Github	https://github.com/angular/angular.js	https://github.com/facebook/react	https://github.com/emberjs/ember.js
错误报告	https://github.com/angular/angular.js/issues	https://github.com/facebook/react/issues
授权	MIT	MIT	BSD-3-Clause
使用该技术的知名网站	Youtube, Vevo, Freelancer, Istockphoto, Weather, Sky Store	Facebook, Instagram, Khan Academy, New York Times, Airbnb, Flipkart, Sony Lifelog	Apple Music, Yahoo!, LinkedIn, TinderBox, Netflix, Groupon
理想用途	建立调试活跃和互动的 Web 应用程序	数据变化频繁的大型 Web 应用程序	动态 SPA（Scratch Pad Area，暂存区）

AngularJS.框架中的王者

Angular.js是一个应用模型-视图-控制器（MVC）结构（Angular 1）的开源web应用框架，模型-视图-视图模型（MVVM）结构（Angular 2），版权归谷歌所有。它是以上最老的三大框架命名。因此，他拥有最庞大的社区。Angular.js通过径向扩展HTML功能，解决了开发SPA的问题（单页应用）。框架的突出特点是快速启动与运行你的app。

AngularJs 的优缺点

优点：

• 自定义文档对象模型（DOM）元素的创建。

• 明确的UI设计与替换。

• 当在一个HTML文档创建输入属性时，会为每个渲染属性创建独立的数据绑定。在发生变化需要重渲染之前，Angula先检测r页面的每一个明确属性。

• 依赖注解。

• 简单路径。

• 代码容易测试。

• 框架支持HTML语法的扩展，直接创建可复用的组件。

• 稳健的模板生成方案。在HTML属性使用绑定表达式来驱动模板功能。Angular的模板引擎拥有一个深度理解的DOM，它的优越结构模板减少了创建生成页面所需的代码量。

• 数据模型对于小规模数据的使用有所限制，其目的为了使得代码简单容易测试。

• 快速渲染静态列表。

• 良好的代码复用（Angular库）。

缺点：

• API指令的复杂度高。

• 对于有元素相互调用的页面，Angular速度变得很慢。

• 初始设计变得慢起来。

• 由于大量DOM元素，影响性能。

• 复杂的第三方集成。

• 曲折的学习路线。

• 域容易使用，但是难以调试。

• 路径具有局限性。

提示：Angular 2 的功能与上述有所不同。Angular 2 没有沿用Angular 1 的设计，它彻底重写了。该框架两个版本有翻天覆地的变化，在开发商之间引起很大的争议。

ReactJS. 领域中的新生代

ReactJS是一个开源库，利用其惊人的渲染性能来构建持久的用户接口，由Facebook推出与发布。React在模型视图控制器结构中专注“V”层。React首次发布之后，它迅速达到顶峰。它的出现是为了解决其他JavaScript框架的共同问题——渲染大数据集合的效率。

ReactJS 的优缺点

优点：

• 接口设计与学习API容易。

• 与其他JavaScript框架相比，具有显著性能。

• 更新速度快。React创建一个新的虚拟DOM，利用最近数据与比较上个版本的差异提供完善修复机制，创建一个最小的更新列表构成真正的DOM使其同步，而不是每次发生变化都进行重复渲染。

• 服务端渲染允许创建同构/通用的web apps。

• 容易导入组件，虽然有一些依赖。

• 更好的代码复用。

• 方便JavaScript的调试。

• 在提高复杂组件性能方面，Angular与React难分高低。

• 基于层次的全系组件。

• JSX，一个JavaScript扩展语法，允许引用HTML与使用HTML标签语法来渲染子组件。

• React Native 库。

缺点：

• 它不是完整框架，它是一个库。

• 非常传统的视图层。

• Flux结构是开发者使用过的一个与众不同的范例。

• 大量开发者不喜欢JSX。

• 曲折学习路线。

• 集成React到传统MVC框架，犹如铁轨一样需要一些特定配置。

EmberJS. 挑起重担

EmberJS 是一个开源的JavaScript框架，用以创建单页客户端web应用，使用模型-视图-控制器（MVC）模式。该框架提供通用数据绑定，基于网址驱动的方法用于构建不同应用，重点放在可扩展性上。

在2007年，Ember起源于SproutCore。在2011年，它被Facebook收购，重命名为Ember。它从本地框架例如苹果的Cocoa使用轻量灵敏性中，结合了成熟概念。

EmberJS 的优缺点

优点：

• 约定优于配置。Ember.js支持跟随命名约定于自动生成代码，而不是在你的应用不同路径提供详细配置，专款专用的情况下，不遵守公共约定。

• 客户端渲染，在视图层之外扩展web应用结构。

• 支持URL。

• Ember的对象模型有利于键值对的观察。

• 嵌套的UIs。

• 最小化DOM。

• 在庞大应用生态系统运行良好。

• 很好地集成java与强大数据层。

• 完全成熟模板机制（处理板模板引擎构建基于流行的Mustache模板引擎），减少了代码编写。它并不知道什么是DOM，而是直接依赖文本操作，构建动态的HTML文档。

• 使用观察者来观察内容的变化，只需要重新渲染改变的部分。

• 使用配件避免“脏检查”。

• 更快的启动时间与固有的稳定性。

• 性能专注。

• 友好的文档API接口。

缺点：

• Ember.js在控制等级上缺乏组件复用。

• 有许多再也不用的过时内容与例子。

• 曲折学习曲线。

• 处理板有大量<脚本>标签会污染DOM，它被用作标志，保持模板与您的模型同步更新。

• 它的典型用法会很繁琐。

• Ember的对象模型安装后体积过度膨胀与调试时调用栈。

• 框架中最具争议的并且是最笨重的。

• 对于小项目有点大材小用。

• 测试手段似乎是模糊的，不够完整。

弄清楚你的需求并且选择最有前途的框架

到底哪个框架适合你，取决于对你的应用程序需求评估与框架性能的匹配度。这需要深入剖析每个框架的优势与不足，它们如何应用于不同场合。所有框架有许多共同点：它们都是开源的，拥有发布版本证书，也是使用MVC设计模式来创建SPAs。它们都有视图，事件，数据模块与路径。但是，不同JavaScript框架能更好地适合不同类型的应用程序。

      假如你正在决定创建一个web app，Angular，React和Ember是最安全的，也提供长期支持并且活跃的社区。另外，最近Angular是三者中最流行的（框架）。你可以把它当做一站式服务商店来使用。大企业倾向选择它作为框架。Ember则是提供框架中工具齐全的最佳解决方案，所以你不必花费反复查询与合并库。由于Ember需要花很长时间来学习，它比较适合长期的项目。React是以上框架中最轻量级的。它在这方面做得尤为出色：渲染UI组件。许多场合甚至把它应用于上述的框架。假如你需要逐步改善存在的代码，它将是一个合适的选择。

如你所见，没有绝对的王者。对于特定工程，一些框架比其他更加适合。从几个角度检查你的项目，包括：成熟度、大小、依赖、互相操作性与特征等等。联系专业的web开发公司来构建完美的网站架构和网站设计，以达到最适合你的业务需求。

原文地址：https://dzone.com/articles/comparison-of-js-frameworks-angularjs-vs-reactjs-v