说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember

HTML文档下载 WORD文档下载 PDF文档下载
选择JavaScript MVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。本文对JavaScript MVC框架Angular、Backbone、CanJS和Ember作了比较,供大家参考。

选择JavaScript MVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。想知道有哪些JavaScript MVC框架可以选择?看看 TodoMVC吧。

我用过其中4个框架:AngularBackboneCanJSEmber。因此,可以对它们作一比较,供大家参考。本文会涉及框架选型过程中需要考虑的一系列因素,我们逐一讨论。


每一个因素我们都会按照1到5分来打分,1分代表很差,5分代表很好。我会尽量保持客观,但也不敢保证真能“一碗水端平”,毕竟这些分数都是根据我个人经验给出的。

功能

作为构建应用的基础,框架必须具备一些重要的功能。比如,视图绑定、双向绑定、筛选、可计算属性(computed property)、脏属性(dirty attribute)、表单验证,等等。还能罗列出一大堆来。下面比较了一些我认为MVC框架中比较重要的功能:

功能 Angular Backbone CanJS Ember
可观察对象(observable)
路由(routing)
视图绑定(view binding)
双向绑定(two way binding) - -
部分视图(partial view) -
筛选列表视图(filtered list view)
-
  • 可观察对象:可以被监听是否发生变化的对象。
  • 路由:把变化通过浏览器URL的参数反映出来,并监听这些变化以便执行相应的操作。
  • 视图绑定:在视图中使用可观察对象,让视图随着可观察对象的变化而自动刷新。
  • 双向绑定:让视图也能把变化(如表单输入)自动推送到可观察对象。
  • 部分视图:包含其他视图的视图。
  • 筛选列表视图:用于显示根据某些条件筛选出来的对象的视图。
得分

根据上述功能,我打出的分数如下:

有一点必须指出,使用Backbone也能实现上述大多数功能,只是手工编码量挺大的,有时候还要借助插件。这里的打分只考虑了框架核心是否支持某一功能。

Angular Backbone CanJS Ember
5 2 4 5

灵活性

enter image description here

有时候,框架配合一些现成的插件和库来使用,可能要比使用框架原生同类功能效果更好,而这种插件和库几乎遍地都是(不下数百个),又各有特色。因此,能够把这些库和插件整合到MVC框架中也非常重要。

Backbone是其中最灵活的一个框架,因为它的约定和主张最少。使用Backbone需要你自己作出很多决定。

CanJS的灵活性与Backbone差不多,把它跟别的库整合起来很容易。在CanJS中甚至可以更换其他渲染引擎,我在CanJS中就一直用 Rivets,没有任何问题。不过,我还是推荐框架自带的组件。

Ember和Angular也都还算灵活,可有时候你会发现,就算不喜欢它们的某些实现方法,你也只能默默忍受。 这是在选择Ember或Angular时必须考虑的。

得分

Angular Backbone CanJS Ember
3 5 4 3

上手难度

enter image description here

Angular

Angular一开始会让人大呼过瘾,因为可以利用它干好多意想不到的事,比如双向绑定,而且学习难度不高。乍一看让人觉得很简单。可是,进了门之后,你会发现后面的路还很长。应该说这个框架比较复杂,而且有不少标新立异之处。想看着它的文档上手并不现实,因为Angular制造的概念很多,而文档中的例子又很少。

Backbone

Backbone的基本概念非常容易理解。但很快你会发现它对怎么更好地组织代码并没有太多主张。为此,你得观摩或阅读一些教程,才能知道在Backbone中怎么编码最好。而且,你会发现在有了Backbone的基础上,还得再找一个库(比如 Marionette或 Thorax)跟它配合才能得心应手。正因为如此,我不认为Backbone是个容易上手的框架。

CanJS

CanJS相对而言是这里面最容易上手的。看看它只有一页的网站( http://canjs.com/),基本上就知道怎么做效率最高了。当然,还得找其他一些资料看,不过我个人很少有这种需求(比如看其他教程、上论坛或讨论组提问呀什么的)。

Ember

Ember的上手难度与Angular有一拼,我认为学习Ember比学习Angular总体上容易一些,但它要求你一开始就要先搞懂一批基本概念。而Angular呢,一开始不需要这么费劲也能做一些让人兴奋不已的事儿。Ember缺少这种前期兴奋点。

得分

Angular Backbone CanJS Ember
2 4 5 3

开发效率

enter image description here

比较全面地掌握了一个框架之后,重点就转移到了产出上。什么意思呢?约定啊、戏法啊,反正要尽可能快。

Angular

熟悉Angular之后,你的效率会非常高,这一点毋庸置疑。之所以我没给它打最高分,主要因为我觉得Ember的开发效率似乎更胜一筹。

Backbone

Backbone要求你写很多样板(boilerplate )代码,而我认为这完全没必要。要我说,这是直接影响效率的一个因素。

CanJS

CanJS的开发效率属于不快不慢的那种。不过,考虑到学习难度很低,因此适合早投入早产出的项目。

Ember

Ember的开发效率首屈一指。它有很多强制性约束,可以帮你自动完成的事很多。而开发人员要做的,就是学习和应用这些约定,Ember会替你处理到位。

得分

Angular Backbone CanJS Ember
4 2 4 5

社区支持

enter image description here

能轻易找到参考资料和专家帮忙吗?

Backbone的社区很大,这是人所共知的事实。关于Backbone的教程也几乎汗牛充栋,StackOverflow和IRC社区非常热闹。

Angular和Ember社区也相当大,教程什么的同样不少,StackOverflow和IRC也很热闹,但还是比不上Backbone。

CanJS社区呢,相对小一些,好在社区成员比较活跃,乐于助人。我倒没发现CanJS社区规模小有什么负面影响。

得分

AngularBackboneCanJSEmber
4534

生态系统

enter image description here

有没有插件或库构成的生态系统?

说起插件和库,Backbone的选择是最多的,可用插件俯拾皆是,这一点让其他框架都望尘莫及。Angular的生态圈加上Angular UI还是很令人瞩目的。我觉得Ember的下游生态虽然欠发达,但Ember本身很受欢迎, 所以前景十分乐观。CanJS的下游支脉比较少见。

得分

AngularBackboneCanJSEmber
4524

文件大小

enter image description here

这个因素有时候很重要,特别是对于移动开发项目。

自身大小(无依赖,未压缩)

AngularBackboneCanJSEmber
80KB18KB33KB141KB

Backbone最小,这一点也是最为人们所津津乐道的。但不能只看库本身的体积。

包含依赖的大小

80KB的Angular是唯一不需要其他库就能使用的。其他三个框架则都对其他库有依赖。

Backbone至少需要Underscore和Zepto。虽然在Underscore中可以使用最小的模板来渲染视图,但多数情况下,还要借助更好的模板引擎,比如Mustache。这样它就增肥到了61KB。

CanJS至少需要Zepto,因此会达到57KB。

Ember需要jQuery和Handlebars,总共是269KB。

AngularBackboneCanJSEmber
80KB61KB57KB269KB
得分

AngularBackboneCanJSEmber
4552
性能

enter image description here

我不认为性能是选择框架的关键因素,因为这些框架在预期应用领域中的性能都不差。当然啦,具体还得看你做什么项目。要是想开发游戏,那性能是个重要因素。

虽然我见过,也亲自做过一些性能对比(比如这个测试),但我并不完全相信测试结果。很难说这种测试的方法和结果与实际项目吻合。

不过,据我所见所闻,CanJS的性能是最高的,而且在视图绑定上格外突出。相对来说,我觉得Angular性能稍差,因为它执行对象的脏检查(dirty checking),这一点就拖了它的后腿了。参见这里。

得分

AngularBackboneCanJSEmber
3454
成熟度

enter image description here

这个框架成熟吗,经过实际检验了吗,有多少网站在用它呢?

使用Backbone的网站不计其数。最近两年,它的核心代码没怎么改过,这是成熟的一个重要标志。

Ember已经不是新框架了,但它的重大变更还是经常有,前几月刚刚稳定下来。因此,目前还不能说它是个成熟的框架。

Angular似乎比Ember更稳定,验证的示例也更多,但不能与Backbone相提并论。

CanJS好像还未经任何验证,因为不知道有什么网站在使用它。不过,CanJS其实也没有看起来那么弱不经风,它可是从JavaScriptMVC精简来的。JavaScriptMVC是2008年就出现的一个库,因此会有很多智慧结晶留传下来。

得分

AngularBackboneCanJSEmber
4543

内存泄漏隐患

如果你想开发每次打开都得运行很长时间的单页应用,这是必须得考虑的问题。你当然不希望自己的应用导致内存泄漏,这个问题非常现实。不幸的是,内存泄露很容易发生,而自己编写的DOM事件监听器则是重灾区。

只要你守规矩,Angular、CanJS和Ember能把这个问题帮你解决好。Backbone则不然,它需要你自己手工来卸载。

得分

AngularBackboneCanJSEmber
5355

这恐怕是选择框架时最重要的一个因素了。

本项没办法打分。

  • 你喜欢声明式HTML吗?-> Angular
  • 你喜欢使用模板引擎吗?-> Backbone、CanJS或Ember
  • 你喜欢固执已见的框架吗?-> Ember
  • 你希望框架与最初的SmallTalk MVC模式完全吻合吗?-> 没有完全吻合的,或许CanJS最接近
  • 你希望使用目前看来很酷的框架吗?-> Ember、Angular

算总分

好啦,把各框架所得分数做个汇总吧。别忘了这只是我个人看法,如果你觉得哪一项打分有失偏颇,请务必告诉我。

(此处只是一个静态图表,单击可以打开) 

如果每一个因素的权重都一样,那么这几个框架确实难分高下。因此,我觉得最终决定很大程度上还是取决于你的个人偏好,或者必须要给每个因素赋予不同的权重才行。

英文:Sebastian's Blog

译文:图灵社区


苹果将于6月10日召开WWDC 新版OS X和iOS或将面世 传Amazon今年秋季发布电视机顶盒设备 够快:不会3种以上语言的程序员不是好程序员 Cloud Foundry、Greenplum获通用电气1亿美元注资 微软推超强Android应用Switch to Windows Phone Unity CEO宣布:放弃支持Flash平台 为交房租做App:我第一年赚了7万美金 iOS越狱大神Comex加盟Google 曾错过苹果Offer 维基百科正式从MySQL迁移到MariaDB数据库 JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember 大数据推广引领精准推广浪潮 ThoughtWorks负责人曾学海:数字渠道细分带来的架构演进 你画我猜2 : Draw Something 2正式发布 云中游科技CEO张帆:畅谈“找你妹”的自营销 Oracle当心,MySQL原始团队已重整旗鼓! 优秀的Meteor学习资源 ThoughtWorks美女分析师:如何规划企业在线数字渠道战略? OpenStack将怎样影响软件行业? 知识产权日特稿:谁动了程序员的源代码版权? MIT技术评论评选2013十大突破性技术:深度学习居首 Chrome测试版添扩展程序 可直接浏览Office文档 Ubuntu 13.04携中文衍生版UbuntuKylin 13.04发布 Spark核心开发者:性能超Hadoop百倍,算法实现仅有其1/10或1/100 移动开发的碎片化时代,我们该怎么办? 谈应用分发控制力:还是渠道为王 Unity亚洲开发者大会:手游半衰期越短,开发者手中的机会越多 《割绳子》开发者:俄罗斯双胞胎的奋斗史 曾应聘Rovio未果 Win7系统上常见IE 10问题汇总 如果苹果推廉价手机,市场份额会不会超过安卓? 移动互联网下,如何做儿童新音乐? 第三届“中科杯”全国软件设计大赛正式启动 一个很简单的问题 读取远程的页面文件内容,但需要搜索结果的页面,请问如何实现??? 写了一个telnet服务器端程序,不能用exit退出,请大家帮忙看看~~谢谢! ?!我怎么看不了帖子内容啊?!点开每一贴都出现同样的页面如下,各位是怎样? 我只能看见标题:( 图片文件上载页,在上载页中实现预览的问题?急! 我的Asp为什么不能执行? 请教xml问题。 如何动态获得表单中checkbox中的name的值还有获得其值。 如何在UNIX下配置 Tomcat4.0 + Apache1.3 + JDK1.3? 在线等待! 请问版主:为何我在本版搜索“多语言”,找到的结果中没一个打得开? 如何在一个菜单项里控制另一个菜单项的状态(如变灰) 菜鸟问题 关于几个按钮布局?急 求救:关于在程序中运行其他程序的问题! 请问哪有Report Machine的下载? 请问只知道备份文件如何恢复数据库? To:qxjavajava: 哪里可以找到scjd的题目大家先做一下? 高程水平压线通过后的一点总结 请帮初学者看看这段简单的代码!感激t0 '_bstr_t' : missing storage-class or type specifiers 文件操作安全问题,请微软专家和各位高手进来看看 请教tdbgrid如何在非绑定模式下加入新行写入数据 问一下,在datagrid里加入comboBox控件后,怎样使comboBox的边框不可见? ==高手请看,数据库备分恢复问题== 这两种赋值方法真的有区别吗?内有代码,请指点 关于与后台连接的问题 请问黑龙江中程成绩怎么查? 如何用sql语句统计满足条件的记录数? 用ASP作下拉式菜单怎么坐呀?蛮着急的呀!! 一个看似简单实则绕脑的小问题 pb8是否内嵌easerver服务器? help 请教高手:一个写输出的问题,再线等待 我在一个组件中定义了一个Text2的属性,可如何让它显示在VS。NET的属性框中呢。 用了XTREME后,它自己生成的SDI框架中,菜单.状态栏的字体太小,我想改成9号宋体,怎么办? 怎样在数据库里保存文件! 急急。。得到树的导航?在线等待!! 刚才忘记说了,如何在sql里给中文排序? 请问有什么函数可以将BigdDecimal类型转换成为String类型??(很着急!) 来者有分 今天天气很好,出来晒晒太阳!你说哪? J2EE 和J2SE 的区别? 双网卡的机器上安装Oracle的listener的配置 查了有关目录,文件的函数没找到,问一下各位,怎样判断一个目录是否为空目录? 怎么搞的,又看不了帖? 请问有什么函数可以将BigdDecimal类型转换成为String类型??(很着急!) 如何用TUXEDO同步调用存储过程? 两个SQL Server通过拔号互连为何连不通呢?ICU!!! 心情不错,散分 想写一个自定义控件,里面包含一个button控件,一个text控件,和一个JS文件。如果做到button事件调用js文件后,能传到text控件? 怎么样让DBedit1.text的值在修改后需要点击button1后才由程序去修改,不是由它自己修改,但是readonly不能真和不用普通组件怎么样做? BUILD出现以下错误怎么办?? 杭州公安消防局公布上半年全市火灾3481名肯尼亚学生获中国奖学金赴华留学外媒评述 美对叙动武属非法“战争行为英要求安理会授权对叙采取行动日本为解禁集体自卫权寻求美国理解欧洲最大公共图书馆将在伯明翰开放南非华人商城遭抢劫造成一死一伤随笔:全面理解“和平解决争端”肯尼亚发生公路交通事故日男子对车站女职员施暴 未想对方系柔日本海被标注为“东海” 日防灾地形图李显龙说应由内阁年轻人推选新加坡未来潘基文谴责刚果(金)反政府武装袭击维万人民调:94.5%受访者反对延迟退湖南衡阳土地储备中心主任涉嫌违纪被调今年第二批700余所院校在浙计划招生杭州昨迎来第十八个高温日 今明最高气嘉绍跨江通道后天零点开通 全线双向八日常水果送检实验室 样品检出农药残留金华7月份平均高温日数17.2天 秒慈溪晒上半年三公经费开支 公务接待下孕妇化妆的禁忌和注意事项十种贵人,四种朋友,遇到了千万别放手古代结婚为什么要喝交杯酒 竟藏有大秘如何引导模特流露自然情绪宝宝为什么一放床上就醒?新手爸妈通常【甜蜜影院】糖祸之恋(上)手表手机在凯里上市 备受小学生喜爱孩子最容易模仿你这12个坏习惯!父母女神王菲与酷男谢霆锋要结婚,是传言还贵州中小学生 真的蛮拼的:46%的学全国注册资本金最大村镇银行在贵州成立广西两男子偷狗被打致1死1伤 有人在“考得好我就给你买”这样的奖励方式后上海6青年逼人吃粪并暴打其致伤 后发贵州城市职业学院与荔波广播电视台签订产品众筹带你赢在创业路上这家花房式的西餐厅有毒!教你做绵软可口的“雪媚娘”,快来学吧别用你的孩子打扰我!引起很多家长的沉为什么你就是过不去美国签证申请呢?程华志:市场买预期卖事实,谨防白银利
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘