专栏名称: OSC开源社区

OSChina 开源中国官方微信账号

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

OSC开源社区 · 公众号 · 程序员 · 2016-11-10 08:40

正文

#长按上图识别二维码，参与OSC源创会年终盛典#

英文原文：Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

链接：https://dzone.com/articles/comparison-of-js-frameworks-angularjs-vs-reactjs-v

编译：xufuji456, 边城

通过选择合适的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. 框架空间的王者

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开发公司来构建完美的网站架构和网站设计，以达到最适合你的业务需求。

福利我为开源中国公众号出谋划策

为感谢 OSCer 们对 开源中国公众号的支持，我们联合华章图书为大家送福利啦。

在 11.07-11.11 日期间，在《送福利啦！我为开源中国公众号出谋划策》文章或公众号后台留言，为开源中国公众号内容出谋划策。我们从中选取 6 名用户送出以下图书。热情的 OSCer 们赶紧到后台留言吧。