本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js。

这个问题获得了大量的关注,并吸引到这两个框架的开发者参与回答。如果你也纠结JavaScript框架的选择,那么本文对你来说也是一个非常好的参考资料。

Angular.js和Ember.js介绍

Angular.js是一款开源的JavaScript框架,由Google维护,其目标是增强基于Web应用,并带有MVC功能,使得开发和测试变得更加容易。

Angular.js读取包含附加自定义(标签属性)的HTML,遵从这些自定义属性中的指令,并将页面中的输入输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。

项目地址: http://angularjs.org/

Ember.js同样是一个用于创建web应用的JavaScript MVC 框架,其采用基于字符串的Handlebars模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化)、自动更新模板、路由控制、状态机等。

Ember.js使用自身扩展的类来创建Ember.js对象、数组、字符串、函数,提供大量方法与属性用于操作。每一个Ember.js应用都使用各自的命名空间,避免冲突。

项目地址: http://emberjs.com/

Angular.js开发者:Angular.js最能体现HTML的精髓

Angular.js其中一位开发者Misko Hevery回复了提问者的疑问,内容如下。

我是Angular团队中的一名开发者,我还不太了解Emeber.js,因此我的观点可能会有些偏颇。

有人说,Angular.js和Ember.js都在HTML中放入了太多的逻辑。当然,将逻辑放入HTML是一个不好的做法,我们也不建议这么做。事实上,Angular.js只放置绑定,而不是逻辑,我们建议把逻辑放入控制器中。但绑定同样是信息,这些信息可以放在一些地方,你有三种选择:

  1. 代码。但这使得程序模块化很成问题,因为HTML与代码紧密耦合,要想重新组成一个应用程序非常困难。
  2. HTML。这正是Angular.js所做的。我们认为,除了放置连接信息外,你不应该在HTML中做任何事情。任何逻辑都不应该出现在这里,因为它会导致各种问题。我认为Angular.js做的绑定相当好。
  3. 元数据文件:虽然我不知道是否有人这样做,但基本上这是一个双重问题,因为你将不得不在代码中连接HTML位置和模型位置。

当然,在构建一个应用程序时,你也可以不使用框架,但不可否认,使用框架将使得你的开发工作变得更容易。

我个人认为Angular.js的独特之处在于它拥抱HTML/CSS,遵循“HTML是什么”的精神。其他一些框架提供了它们自己的API,偏离了HTML。Angular.js在所有框架中是最能体现声明式的。我相信声明式非常适合用来构建用户界面,而JS非常适合用来编写逻辑。

Angular.js允许你扩展HTML,所以你在使用Angular.js过程中遇到的任何问题都可以很容易地克服。你可以在Angular.js官网中 http://angularjs.org找到一些能够展示其特性的例子。

Ember.js开发者:Ember.js是构建“雄心勃勃”的应用程序的不二选择

Ember.js的一位开发者Tom Dale对Angular.js和Ember.js进行了详细对比,具体内容如下。

作为Ember.js的作者之一,我经常会被问道:应该使用Angular.js还是Ember.js?

我认为在做出选择之前,需要考虑:要构建什么样的应用?那么Ember.js是不是比Angular.js更好呢?

虽然两者在表面上有一些相似之处——它们都使用绑定,都比其他框架(比如Backbone.js)更有利于编写Web应用程序。

我首先来介绍一下Ember.js项目的由来。从2009年开始,我就一直在苹果公司参与 SproutCore的开发,这是一个开源的类似于Cocoa的JavaScript框架,后来演变成了你现在所看到的 iCloud。当时,我的周围是一些世界上最好的Cocoa开发者。

问题是,多少年来在客户端应用程序方面,似乎并没有真正新的突破。自80年代以来就一直遵循的基本模型——代码运行在本地计算机上,从网络上获取数据,然后在本地处理,并显示在屏幕上;而如今唯一改变的是——代码运行在浏览器的沙箱环境中,然后加载所需的“二进制”文件,而不是由用户安装到硬盘上的文件。

在考虑这些问题是,我会首先想到:在我们之前,人们已经做了什么?我认为很难去争辩框架的成功,比如Cocoa,无论在Mac还是iOS上,Cocoa都可以让开发者轻松编写受用户喜爱的应用程序。

我们希望开发者能够创建雄心勃勃的、能够与本地应用竞争的Web应用程序。要做到这一点,开发者首先需要先进的工具和正确的概念,以帮助他们沟通和协作。

在开发Ember.js过程中,我们花了大量时间从其他一些本地应用程序框架(如Cocoa)中引入一些概念,但后来我们感觉到这些概念带来的困扰多于帮助,或它们并不适合用来构建Web应用程序。因此,我们开始转向其他流行的开源项目,比如Ruby on Rails和Backbone.js,从它们中来找灵感。

因此,Ember.js最终成为了一个综合的、强大的、符合现代Web特性的、轻量级的工具。

在我看来,与Ember.js相比,Angular.js更像一个研究项目。比如,来看看它们的学习文档:Ember.js主要讨论模型、视图和控制器,而Angular.js指南要求你去学习一些类似于范围、指示符和transclusion方面的内容等。

我完全支持一些研究型项目,并希望它们能够变成最好的。但是,要记住,要在生产环境中看待应用程序。

一些大公司已经在Ember.js上投入了时间和精力,比如新版ZenDesk已经使用Ember.js重写(在他们对Backbone.js失望后,决定放弃它改用Ember.js),Square的整个Web层面也是基于Ember.js的(因为他们想要一个漂亮、响应式的UI),Groupon的移动版Web应用也是使用Ember.js开发的。此外,还有很多初创型公司通过Ember.js获得了成功,并开始对Ember.js社区进行贡献。

而我目前所看到使用Angular.js开发的大多数应用程序只是演示项目,或是Google的内部项目。

Yehuda(Ember.js开发者之一)和我也一直积极邀请真正的用户参与Ember.js框架的设计和维护,这可以确保我们在Ember.js中添加的功能对于实际开发是有用的。

事实上,在过去的几个月中,大多数Ember.js开发工作都是由Ember.js社区的核心贡献组完成的,他们来自不同的公司。如果Yehuda和我哪天有什么事情,或者我们的公司倒闭了,Ember.js还将会持续发展。这是一个真正的社区项目,而不是“Google”项目。

回到技术细节。Angular.js官网上写道“Angular.js是HTML的未来,它被设计用于构建Web应用程序。”我认为当看他们的应用程序时,这种理念是显而易见的——用户界面由HTML标记定义,使用有语义意义的属性(比如data-ng-repeat)来装饰。

而Ember.js使用Handlebars来描述HTML,来展现你的应用程序界面。从美观角度,我们可以谈谈你是更喜欢Handlebars语法(使用类似于{{#each}}的helper),还是喜欢像Angular.js那样通过额外的属性来注释HTML。我个人认为,HTML属性方法有点杂乱,难以阅读。当然,你可以使用其中任何一种方式。如果Ember.js不存在,而我又必须使用一个使用了数据属性的框架,那么我会考虑Angular.js。

抛开美观不谈,我相信,Ember.js使用基于字符串的模板的方式也为我们带来了一些优势:

  • 基于字符串的模板可以在服务器上预编译。这样可以减少启动时间,也意味着渲染一个模板可以像调用一个函数一样简单。
  • Angular.js需要你在应用程序启动时遍历整个DOM,你的应用程序越大,启动速度越慢。
  • 如果你想在服务器上渲染你的应用程序(用于Google爬虫索引或让首次加载时显示速度更快),Angular.js需要你去启动整个浏览器环境,像PhantomJS,这是资源密集型的。而Handlebars是100%的JavaScript字符串,所有你需要的只是像node.js或Rhino之类的东西。
  • 如果你的应用程序变得越来越大,那么字符串模板可以很容易地被分割和懒加载。

此外,Handlebars只让你绑定属性,而Angular.js允许你嵌入实时更新的任意表达式。很多人最初将这个视为Ember.js的局限性,但实际上:

  • Ember.js允许非常容易地使用JavaScript来创建可计算属性,它可以包含任意表达式。我们只要求你指定你的依赖,这样在更新时可以智能些。
  • Angular.js在每次有新的变化时,必须重新计算这些表达式,这意味着需要在你的应用程序中绑定更多的元素,速度会变慢。
  • 因为Ember.js只允许你绑定属性,我们将可以很容易地利用ECMAScript 6的性能优势,如Object.observes。由于Angular.js发明了自己的带有 自定义解析器的JavaScript子集,这对于浏览器来说,优化代码变得比较困难。

在一般情况下,Angular.js依靠一种叫做“ 脏检查(dirty checking)”的机制来确定对象是否已进行更改。“脏检查”的方式是,在你扫描每个对象和其所有绑定属性时,比较当前值和之前已知的值。如果它发生了变化,你就需要去更新其绑定。正如你能想到的那样,代码中对象越多,成本将越昂贵。

但Angular.js开发者非常聪明,他们非常仔细地进行了折中。他们的方案是:

  • 使用“脏检查”,你不需要使用accessors。你可以用person.name = "Bill"来代替person.set('name', "Bill"),就像在Ember.js 或 Backbone.js中的一样。
  • 为什么在DOM中你会有这么多的对象?这最终将会成为一个瓶颈的。

Miško Hevery在StackOverflow上介绍了 这种折中方式。他指出,使用“脏检查”,你无法一次有超过2000个绑定对象。

我认为这很好地说明了Ember.js 和 Angular.js理念上的区别。Ember.js 和 Angular.js都力求简单和易用。而Ember.js使你不必担心代码中是否有超过2000个绑定。如果你正在编写大型应用程序,那么你已经解决了你所担心的最大的事情。对于中小规模的应用程序来说,Angular.js同样是伟大的,因为这些应用程序不会触及Angular.js的限制区。

在Ember.js中,我们总是希望利用浏览器和语言中的新功能,以便使事情变得更容易。例如,一旦ES6中 代理对象(proxies)可用,我们不会再要求你使用get()和set()。

所以这就是为什么我认为——如果你想构建雄心勃勃的应用程序,你应该选择Ember.js。

我们从不拒绝从其他一些框架中吸取一些知识,因为这些框架已经知道如何最好地去构建大型应用程序。

我们已经有了一个梦幻般的社区,有一群最聪明的Web开发人员,他们致力于解决现实中遇到的最难的一些问题。

此外,在开发过程中,我们对于性能方面和如何利用语言新特性方面也考虑了很久。Yehuda Katz和我一起开发Ember.js,他同时也是TC39(负责JavaScript下一个版本的制定)的成员,在此方面相当有经验。

我们已经发布了1.0版API,因此你可以开始学习,而不用担心有大的变化。

你可以通过这个视频来了解如何通过Ember.js从头开始构建一个应用程序: Building an App with Ember.js

下面是一些非常棒的学习资源:

  • Ember.js指南
  • Rey Bango的 Ember.js入门教程
  • Luke Melia 的 介绍Ember.js幻灯片

如果你想构建一个雄心勃勃的应用程序,你一定要考虑Ember.js。

angularjs_scaffold开发者:Angular.js符合Web的未来

angularjs_scaffold的开发者Patrick Aljord也参与了讨论,内容如下。

我是 angularjs_scaffold(基于Angular.js编写的针对scaffolding视图的Rails插件)的开发者,我来说说为什么我会选择Angular.js。

事实上,我原本打算在项目中使用Ember.js,因为我比较信赖Yehuda(Ember.js开发者之一)在Rails和jQuery方面的工作。但是Ember.js中随时会变化的API和匮乏的文档,使我一再推迟使用它。我偶然发现了Angular.js,就被它吸引了。

像Tom Dale(Ember.js开发者之一)所说,Ember.js受Cocoa 和Rails启发。但问题是,通过Ember.js,我并没有真正感觉到像在写一个Web应用程序,它就像一堆抛出的概念。而在Angular.js中,我感觉像在写一个Web应用程序,它真正支持所有的Web概念,并以一种非常自然的方式来扩展HTML。

事实上,Angular.js并没有使用自己的对象或重写JS方法,当你使用Angular.js时,你就使用了纯JS,并且Angular.js实现的许多概念都将直接进入下一个版本的Javascript中。

学习Angular.js,就意味着学习未来的Javascript,而学习Ember.js,你只是学习到了Ember的特定概念。

来看个例子。HTML是伟大的,因为它是声明式的,如果想要定义一个段落,你只需写如下代码:

 

但是如果你想非常动态地实现?你需要通过类似于下面的代码来引导浏览器:

来看看Angular.js如何实现:

它通过HTML声明来编写动态代码。再来看一个示例,如果你要遍历一个数组,只需:

这个语法看起来像新的 MDV标准。这看起来比Ember.js更加简洁。另外,Angular.js被优化得非常快,开发团队通过如下措施来实现:

这个语法看起来像新的 MDV标准。这看起来比Ember.js更加简洁。另外,Angular.js被优化得非常快,开发团队通过如下措施来实现:

  • 脏检查
  • 只检查当前视图
  • 只在变化发生时检查
  • 通过和Chrome团队协作来利用JIT

在一些基准测试中,结果显示Angular.js的速度要快于Ember.js,具体可见 Angular VS Knockout VS Ember。

Angular.js未来会拥有可重用的组件,这允许你编写非常简洁的代码,并轻松重用一些部件。这不是Angular.js特定的需求,而是Web的未来。

原文链接:http://www.anzhuodiy.com/html5/3499.html

【转】Angular.js VS. Ember.js:谁将成为Web开发的新宠?的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. Angular.js vs Ember.js

    Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...

  3. Angular.js VS. Ember.js:谁将成为Web开发的新宠?

    这篇博文陈述的非常好,比较全面的剖析了Angular.js与Ember.js,下面的链接,供学习与参考: http://www.csdn.net/article/2013-09-09/2816880- ...

  4. 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

    摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...

  5. AngularJS 、Backbone.js 和 Ember.js 的比较

    1 介绍 我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS.Backbone和Ember.为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的 ...

  6. Node.js入门笔记(6):web开发方法

    使用node进行web开发 用户上网流程: 表面上看:打开浏览器--输入网址--跳转--上网. 背后的过程是什么呢? http请求网址到指定的主机--服务器接收请求--服务器响应内容到用户浏览器--浏 ...

  7. 比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得

    還記得第一次寫網站的時候,我無意間寫成了 SPA(single page application),當時還沒有SPA這個詞,後來因為廣告主需要不同 url location 頁面的廣告展示,只好把部分 ...

  8. 点燃圣火! Ember.js 的初学者指南

    现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...

  9. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

随机推荐

  1. weex图片加载更多方法loadmore的使用

    首先,放一个weex中loadmore使用的demo,可以看一下http://dotwe.org/vue/8dd2a10c69e149ae8971f8298cc8bebf 1.在list标签上添加 @ ...

  2. js常用共同方法

    var uh_rdsp = (function(){ //获取根目录 var getContextPath = function(){ var pathName = document.location ...

  3. ubuntu安装flashplayer插件三步走

    1.去官网下载flash;2.解压3.复制.so文件到~/.mozilla/plugins/

  4. Ansible实现主备模式的高可用(Keepalived)

    前言 Ansible是一款极其简单的IT自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序 ...

  5. background-image 背景图片的设置

    background-image 背景图片的设置 属性:background-image: url(img/banner.jpg); 1.设置背景图的宽度 background-size: 400px ...

  6. 前端优化:css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  7. PHP Mysql字符集utf8mb4支持Emoji表情

    项目开发中经常会遇到用户在评论或者发表文章的时候会打一些表情在里面,如果我们在开发中不去做一些处理的话,表情会出不来的,甚至是报错,下面简单介绍处理方式.原文地址:小时刻个人博客:http://sma ...

  8. Zabbix 3.4.11监控 apache服务,ftp服务的配置

    一 zabbix 的安装部署 略 二监控 apache服务的配置 首先在本机下载模板:https://github.com/rdvn/zabbix-templates/archive/m aster. ...

  9. 20145209 2016-2017-2 《Java程序设计》第4周学习总结

    20145209 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性 ...

  10. MVC PartialView 方式实现点击加载更多

    <table id="MovieListing"> </table><div> <button id="btnShowMore& ...