OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

JavaScript MVC框架的未来:Backbone.js还不够优秀


分享到


分类 技术前沿   关键字 分享   发布 ourjs  1387979246000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

作者:Vyacheslav Egorov (@mraleph)


注* MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。
相关阅读: JavaScript的MVC模式向导

注* 一篇相反观点的文章: 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember

Om 介绍

我们都知道,ClojureScript出来已经有一段时间了 —— 我们用Java写的那些解决方案通过Clojure不需要改动即可以在Web端直接使用。现代JavaScript引擎已经有了很长足的发展,现在JS引擎比Java虚拟机快2.5倍已经不是什么新鲜事了。

等等!你不想知道JavaScript MVC框架在数据持久化方面的性能究竟如何吗?


原因后果

我们将看到,或者从直觉上感觉到,新的Om库能像Backbone.js那样持久化数据,不需要任何手动优化就可以生成一个性能出众的JavaScript MVC结构。Om是从Facebook一个非常伟大的框架上建立起来的。如果你从来没有听说过它,我建议你看一看JSConf EU 2013会议的视频。非常有意思,Om的性能提升比直接使用React的更大。

这些评测(benchmarks)不是去证明Om是世界上最快的UI组件。设计这些评测的目的是为了防止违反全局优化的事情产生,而且尽量避免你的用户犯同样的错误。

你当然可以一个一个的在客户端解决这些问题,但重点是比起枯燥乏味的手工优化,Om的提供的组件优化更加方便。


测评竞赛

在第一个标签页(tab)里打开Om的TodoMVC,并跑第一个测评Case。他在我的11寸苹果机上使用500毫秒产生了200个todos(待完善任务列表)。

在Chrome和火狐中,Om在我的机器上会快2~4倍。如果你关掉所有的todos你会感觉稍微自然一点,但是Backbone.js会感觉有点卡。这是因为只有当requestAnimationFrame事件触发时,Om会重新渲染。这个在你的程序里面是一个很好的优化方案。

打开Chrome的开发者工具,切换到性能(profile)的图形化界面,然后你会得到一个令人吃惊的信息,React/Om的性能远远高于使用Backbone.js的性能。

这是React/Om的:




这是Backbone.js的:




这张图表似乎表明,至少从我的角度观察来说,React/Om更适合全局优化。

好吧,干的不错。但是在三种主流浏览器中快了2~4倍,这会让任何一个人都产生兴趣,尤其是当我们在持久化数据的时侯,不过他离Twitter宣称的快30~40倍还差得很远。

试试第二个测评实例:他会产生200个todos,然后全部轮换5次,最后再删掉他们。我的11英寸苹果机上的Safari 7用了大约5豪秒渲染完成。

然后确定你在Backbone.js里删除了所有的todos,再跑一下Backbone.js的评测。在我的机器里,Safari使用了大约4200毫秒。

这怎么可能?


很简单

Om不做他不需要做的任何事,视图(Views)和控制器逻辑(Control)并没有绑定在一起。如果数据(data)发生了改变,不会立即触发渲染事件(render view)响应-我们只是通过requestAnimationFrame推入了一个渲染任务到列表里。Om把浏览器当成GPU考虑了。

我怀疑很多JS MVC框架都跟Backbone.js TodoMVC差不多,会对model的改变进行绑定,视图(view)方面,其实将一系列的app的状态改变放到localStorage中是非常不方便的,只有很少的框架会去关注这些用户根本不关心的方面。因此这样结果就并不令人吃惊了,主流的做法都是使用字符串来实现模板(templates),CSS选择器的,还有对DOM元素的直接操作,这些直接导向型编程都成为了性能瓶颈,使Om远远地超过了他们。

当然你仍然可以使用Backbone.js或其他你喜欢的JS MVC来实现映射绑定,这样的绑定很有价值。但是我并不认为事件导向型的MVC系统是值得的-上面的性能图表已经说明了这一点。数据models和视图views抽象分离只是比较重要的一步。

希望这篇文章能给那些JS MVCs迷们,甚至那些坚持使用原生JavaScript或jQuery的人一些启发。我已经展示了一门需要编绎成JavaScript的语言(尽管他的性能可能会比原生的差一点),但给最终用户体验带来非常明显的提升。排在前列的Om TodoMVC,只用了260行代码(包括所有的模板),并且最终的压缩包只有63K(包括27K的React框架)

如果你是一名JavaScript程序员,仔细研究一下React是非常值得的。我认为将来通过数据绑定的框架(像mori)可以使JS应用跑在任何设备上。当然持久化数据会产生更多的垃圾内存,我认为现代JS引擎和移动硬件足以处理这样的缺陷。

下面是一些技术细节

它的工作原理


修改和查询DOM结构是巨大的性能瓶颈,React避免了这种牺牲性能的操作。他设计了一系列面向对象的接口,但是所有的操作都已经被封装了,程序员仅需要关注他的业务逻辑。他会产生一系列虚拟的DOM视图,如果你的应用改变了DOM的状态,并且在一段时间之后这种改变还存在,它才会在DOM上面做一些不得不做的最小改动。

Om使用ClojureScript数据结构来替代JavaScript Objects。正因为如此我们可以设计一些实现shouldComponentUpdate的接口来快速地检查DOM是否改变,引用匹配检测。所以当路径发生改变时,我们总能即时的从源头开始检测。

所以我们不需要像setState一样的React操作,这样的方式既能很好的OO,又不损失性能。因为是从根部自顶向下更新的,所以他可以像闪电一样快。

最后,因为只需要一部分数据我们就可以得到整个UI的状态,我们可以序列化(持久化)所有重要的APP状态。Om UI的状态永远是序列化的。

这也意味着Om UIs随时可以撤消。你可以简单的在内存中截取一种状态,然后恢复他。这是内存级别的效率,因为ClojureScript数据结构都是引用类型的。

最后的思考
简单来讲,我并不认为现在的JavaScript MVCs会有多好的前景。我认为如果你坐下来思考一段时间,最后总会想出来一个类似React/Om的东西(即便它仍然套着传统mvc的外衣),这个框架同样也会给你带来简单,性能,快速的提升。这里没什么特别的技术,如果你把浏览器当成一个远程的渲染引擎,然后不把它当成一个查询和存储东西的仓库,所有的东西就会变得很快。听上去是不是有点耳熟?对,这个就是计算机图形处理编程。

未来我可能会发表更多的文章,来更深地阐述那我已经提及或者未提及的内容:UI状态VCR回放,琐碎的UI指令,服务/服务器端模板共享,用户界面关联等等。

 

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2015年的JavaScript:Angular之类的框架将被库取代
  2. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  3. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  4. HTML5的TCP和UDP Web Socket API草案定稿
  5. 为什么io.js要从Node.js中分裂出来?
  6. JavaScript代码组织结构良好的5个特点[reuqire.js]
  7. io.js新图标logo征集中
  8. 避免Node.js中的命令行注入安全漏洞
  9. 在JavaScript的Array数组中调用一组Function方法
  10. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 技术前沿
  1. NodeJS连接Redis:安装及开机自动启动设置
  2. Duktape:一个新的小巧的超精简可嵌入式JavaScript引擎
  3. HTML5的TCP和UDP Web Socket API草案定稿
  4. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  5. 基于 Web 的 Go 语言 IDE
  6. Nginx的大计划:将原生支持JavaScript
  7. 不需要密码的登录
  8. 15个最好的HTML5前端响应式框架(2014)
  9. Go 语言基础教程:10分钟入门
  10. Docker究竟是什么,为什么这么流行,它的优点和缺陷有哪些?

 关键字 - 分享
  1. 为jquery的ajax请求添加超时timeout时间
  2. IE、Chrome、Firefox浏览器默认首页被改成360导航解决办法(删除daohang88.com)跳转
  3. 上海行业工资排名:产品经理一骑绝尘,前端排名第二?
  4. 使用简单的JavaScript,我们为什么应该抵制ES6的一些特性
  5. Git服务器搭建,多用户组权限控制配置,添加新用户密码登陆
  6. JavaScript MVC框架的未来:Backbone.js还不够优秀
  7. 不用花钱和推广,用户就能从这些渠道进入小程序!
  8. Node初学者入门,一本全面的NodeJS教程
  9. 第三方评论平台多说即将关闭
  10. 分享7款最新HTML5/CSS3应用

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号