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

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

译文:图灵社区


小米发布会高潮迭起:米3、电视、Hugo大牛 谷歌放在Windows上的特洛伊木马:Chrome Apps应用平台 解析:Google基于数据驱动的招聘面试程序 决战“缓存”之巅:微软 vs. 亚马逊 雪中送炭:十大前沿移动应用开发工具 高通智能手表Toq都用到了哪些技术? 研发周报:修改一行SQL代码 性能提升了100倍 2013年NoSQL就业趋势分析 鲜为人知的静态、命令式编程语言——Nimrod 高性能Web应用打造攻略:扩展过程中20个最大的绊脚石 开源项目Marathon:让你的数据中心像谷歌一样运行 精益化运营:10款移动统计分析工具推荐 移动建站工具(一):分秒钟将Web网站移动化 移动周报:小米的“倚天屠龙记” 智能手表是个尴尬的产品 屏幕缺陷一枪毙命 看15岁的谷歌的前21位员工现在都在做什么 分析师:三星将失去中国市场份额的头把交椅 5款工具助你写出更好的Java代码 Noitom:"中国创造"的动捕技术 缘创派:帮助技术人员寻找创业伙伴 Nginx创始人Igor Sysoev解读Nginx的发展史 对女性友好的编程语言 ISC2013专家云集,畅谈全球网络安全 CTO俱乐部第109期下午茶:数据库之分久必合,合久必分 CloudConvert:支持移动应用的格式转化服务 Angular.js VS. Ember.js:谁将成为Web开发的新宠? 斯卡利沉寂多年后首谈乔布 他的离开错在董事会不在我 CTO如何避免决策失控(二):遭遇棘手问题的七种迹象 微软面向开发者提前发布Windows 8.1 安抚不满情绪 PostgreSQL 9.3发布,可靠性、可用性获得较大提升! Web设计的新宠儿:卡片式设计 读数据库错误??急急急,在线等(马上给分) 缓存 到的 是什么定义啊 (斑竹来 告诉我吧) 系统分析师、系统设计师有什么区别? DB2技术讨论(1)如何简单理解表空间的定义 vc的ado数据库连接问题 请问linux的个人版和服务器版到底有什么区别?? DB2技术讨论(2)如何简单理解表模式的定义 int& operator[] (unsigned i); 存储过程问题 DB2技术讨论(3)如何处理索引 马上结:我用ASP和JSP分别写了一个人主页,可是服务器只支持PHP,所以我要写PHP.. 我要构建一个网吧?回答问题者都有分 DB2技术讨论(4)如何处理大量数据的增删 郁闷,没有理由,再散分一百,随便进来聊聊 昨天真的真的受了刺激 怎樣將dbedit控件的事件和它所在的form方法相關起來? 如何实现DOS工作站连接到LINUX服务器 DB2技术讨论(5)如何在建好的数据库中设定数据库和表的维护信息 feeboby(诺曼之路) 请进,刚才IE出现js的问题,帖子结了,但分没加上去,另开新帖,100分送上 如何把两个系统合并为一个系统(两个独立的系统) 如何实现集成?? 请教一个apache2.0加tomcat4.3.x时访问目录控制问题 那里有Zend的反编译软件下啊? 大家给我提建议拉,java项目该如何做?交友 这样的asp.net程序消耗是不是太高? 满分求救: 通过 scope="session" 定义的bean 我想继续在包含页中使用。。 大家给个名字建议吧 BDE问题 那个说我骗你手提电脑的进来!!!!!!! 谁知道啊? 直接写内存的Win32 API? 向高手请教.NET下怎样实现聊天室功能? 请教一个apache2.0加tomcat4.3.x时访问目录控制问题 关于JFC的问题 如何鼠标指到单元格中,把单元格中的文字颜色改变 小弟菜鸟,请教一个小问题 初学者问题:关于Serialize()用法 寻求好的解决方法 新手求助?谁有较好的打印控件,或较好的解次方案? 申请数据结构-算法版主 初学者问题:MFC数据库(ACCESS) 那里可以找到interbase7的全部文档? 初学者问题:MFC建立数据库连接 请帮我编个简单的VC++程序,速回复,谢谢 初学者问题:MFC(FORMVIEW) 在System.DirectoryServices中如何通过NT用户组来取得组中的用户 高分:在命令提示符中登录mysql并执行包含多个mysql脚本 新手求助!!!! C#中的控制问题,大家来看看 急,哭,IIS下无法调试ASP。555,高手求你们帮帮我吧。 映射网络驱动器错误,我在公司机子上可以用,而在自家电脑上却报错,为什么?在线等待 sos 高富帅和凯子的区别? 扣压机有哪些种类呢? 扣管机就是扣压机吗? 请问,往连二亚硫酸钠水溶液中添加氨水然后放入密封容器中,此时的氨水能够增加连二亚硫酸钠的稳定性吗? 请问,连二亚硫酸钠水溶液中添加适量硫化钠,能够增加连二亚硫酸钠的稳定性吗? 大自然的启示的故事,不要鲁班的. 一项工程,A单独做m小时完成,A、B合做20小时完成,则B单独做需()小时完成 A工人做一项工程要40小时,B工人做一项工程要30小时,A工人做了一部分,B工人比他多做2小时,A工人和B工人各做了多久.(用方程解) 如何增加发量 喜欢一个人不是看样子的,是看心的,而且选择一个知性的女孩比一个只会嫉妒的女孩好的英语翻译 求下面两式的不定积分1.sinx/x2.1/lnx 美一T-45C“苍鹰”教练机坠毁 机叙政府不参加日内瓦会议 称不会参与交日本拟造两艘宙斯盾护卫舰 将搭载最新美媒:28%美国人视中国为全球头号经马来西亚保安现状存隐患 保安员过半是日本拟造两艘宙斯盾护卫舰 将搭载最新美媒:28%美国人视中国为全球头号经克里称沙特是中东领导者 两国须维持正克里称沙特是中东领导者 两国须维持正诺基亚Lumia 929最新真机谍照巴基斯坦总理谢里夫:无意义的暴力换不巴西发生山洞塌方事件致10人死亡美元对其他主要货币汇率1日下跌老人七万元积蓄受潮腐烂 银行员工一张民调显示特朗普支持率自5月以来首次反国侨办主任裘援平到访拉各斯华助中心 韩永文率团访问俄罗斯丹麦瑞士长江经济带建设的建议增强“四个意识” 抓好各项工作一大波阳光正在赶来开放型经济迈上新台阶牢记重托开新局星破惊天豪门强聘:首席秘藏极品娇妻重生一品庶女重生之娱乐作家剑之狂星月传奇曲尽星河三国之绝代军师牧师小姐可是很忙的隋朝大老板至尊法神青山宫旅游十方普贤像旅游大连植物园旅游海军广场旅游花海梯田旅游永泰云顶旅游中原福塔旅游6501军事工程旅游余荫山房旅游白河堡水库旅游涟源湄江风景区旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘