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

富Web应用开发的七大原则

HTML文档下载 WORD文档下载 PDF文档下载
针对富Web应用,开发者应该注意哪些要点?原文作者Guille认为如何让用户以最快的时间获得想要的数据尤为重要,开发者应注重七大原则,包括:服务器渲染、即时响应用户输入、响应数据/状态变更、增强历史记录处理等。
 【编者按】对于Web开发者而言,除了具拥有精湛的开发技术外,还应具备一些软技能。而针对富Web应用,开发者应该注意哪些要点呢?原文作者Guille认为如何让用户以最快的时间获得想要的数据尤为重要,开发者应注重以下七大原则。译文如下:


网络上有关Web开发未来的热门讨论有很多,比如:JavaScript能否替代实现诸如历史记录、网页浏览、页面渲染等浏览器功能?开发者应该放弃后端,直接进行HTML渲染吗?单页面应用会流行起来吗?

要解答上述问题,我会尝试以JavaScript为突破口,从用户体验方面进行考虑;如何能让用户以最快的时间获得想要的数据是我最为看重的。

1. 服务器渲染是必须的

目前有个比较错误的分立观点:“服务器渲染与单页面应用的对立。”如果我们真的想最大程度地提升用户体验和性能,把这两者区别对待、互为排斥都不是好的解决方法。

首先,当进行页面传送时,互联网连接本身有个理论速度限制。地理位置上两点间的传输速度受到地域、带宽、路由等因素影响;减少两点之间往返的通讯次数显得尤为关键。一个足够灵活的系统应当能够均衡好浏览器端和服务器端的代码渲染工作,减少网站和网络应用之间的差别。

2. 即时响应用户输入

当用户访问某个网站时,每个交互动作都应该尽量做到少延迟、快响应。

HTML中文档的连接是透过超链或<a>标签完成的。当点击这些链接时,浏览器会发送一个请求,这个请求被接收和响应前的用时是无法确定的。相反,JavaScript能够针对用户输入做出即时的响应。例如谷歌或百度,现在我们在其首页进行输入时,不用点击搜索或确定,浏览器会自动进入搜索结果页面;还有就是智能提醒,边输入边提醒的功能也是非常人性化的。


只要在Google搜索栏敲任何一个键,都会直接跳入搜索结果页面

3. 响应数据/状态变更

现在无论是采用传统的页面刷新还是AJAX交互来对静态页面执行更新都显得稍稍落伍了。目前更好的做法是自行更新(self-updating)。

如果有款应用同时打开了多个标签/页面,如果用户进行了登出操作,所有已打开的标签都应该能同时失效。要想做到类似的自行更新,状态协调(state reconciliation)是需要多加考虑的。在只是更新少量数据的参合,我们往往很容易忽略了长时间连接中断后该如何让程序作出正确响应。比方说休眠电脑数天后再打开,我们的程序该如何对这个状态(如机器状态标识码)进行处理呢?如果我们想在初始页面传送数据,在客户端脚本装载前必须确保数据是可访问的。一旦发生连接中断,脚本建立的初始连接必须能够进行会话恢复。


每个页面都指向了同一个会话和登入状态

4.控制与服务器的数据交换

在万维网中,客户端和服务器端的数据交换一般限于已下几种形式:

  1. 点击连接,GET获取了新的页面,然后渲染这个页面;
  2. 通过POST或GET提交表单,然后渲染新页面;
  3. 异步装入一个图像或对象,然后渲染它。

其中,上述第二种方式最容易出问题。从性能角度来看,不断触发新页面来发送数据是个效率极差的做法。例如下面这个曾经令人抓狂的错误:


现在网络上有丰富的APIs(如XMLHttpRequest,EventSource)不但能帮助我们很好地控制数据流向,同时能帮助增强用户体验,如表单的填写、发送。

如前述的状态协调,如果程序检测到连接中断后,把数据暂存起来将能帮助日后的会话恢复。服务工作器(Serviceworker)的引入在这时就变得非常重要了。它能够让JavaScriptWeb应用在后台运行。即使程序没有开启,我们仍然能够在后台同步用户数据。

5.增强历史记录处理

一般来说,页面状态的过渡依赖于URL的变更;这给我们带来了增强历史记录管控的机会。


当浏览历史页面时,评论的折叠状态应该得到保留

例如,我们通过手机应用查看商品时,发现了心仪物品,一般情况下如果这时候进行购物车操作都会中止当前界面的访问;购物完毕后点击返回,如果先前已经翻看了很多页并滚动到某个位置,如果这时能根据历史记录准确地返回之前的位置,用户会对此非常赞赏的。再譬如,我们填写了某个表单,如果发送失败,点击返回后能自动帮助用户把已经填好的数据进行恢复,这也是能极大增强用户体验的。

6. 推进代码变更

如果程序的代码发生变更,采用什么方法来使客户端对此做出正确响应是很重要的。

一个好的代码更新推送机制是如果发现有新的版本,能够及时提醒客户端对此进行选择处理。又或者是在HTTP请求的头部信息中附加版本号信息,让服务器针对版本号作出正确处理。

更好的一个处理方法是进行热代码重载(hot codereloading)。它的意思是不需要对整个页面进行刷新,而只是对变更关联部分或模块进行在线更新。这需要对全局影响进行全面评估,防止部分模块更新后出现其它异常。

7. 预先感知

一个丰富的JavaScript应用能够有效识别用户输入并做出预感反馈。

典型的例子是当鼠标悬停在某个链接时,服务器已经开始着手准备数据,这将极大地减少渲染新页面用时。还有就是能针对鼠标动作做出交互反馈,如移动,碰撞,移出/入等。


这是一个用jQuery实现的感知鼠标动作的例子

写在最后:

Web仍然是当前信息传播的最重要媒介之一。当我们不断为页面添加动态交互的同时,我们必须确保新技术能很好地做好承上启下的角色。JavaScript是开拓新局面的当头先锋,随着其使用得更为广泛更为深入,用户体验也会迈进新的台阶。

原文链接:Rauchg

磊友创始人赵霏:关于HTML5与Flash争执之我见 国际混乱C语言代码大赛优胜作品详解之“A clock in one line” 揭秘程序员大脑编程的七大“误区” 从Java到ObjC语言的桥梁:谷歌J2ObjC 0.7版本亮相 数据库管理系统ParElastic:打破常规 扩展云端MySQL 谷歌苹果专利纠纷意在战略无意和解 美法官为其苦恼 Facebook收购神秘移动软件创业公司Osmeta 修改驱动,使用Erlang+VoltDB实现每秒87.7万事务 横评美国IaaS“8匹狼”:AWS、GCE、Azure、Rackspace、SoftLayer、Dell、HP、Joyent 独立游戏精神释放的舞台:IGF China 2013作品火热征集中 三款热门入门级在线编程教程对比 微软modern.IE:网站兼容性测试利器 Localytics:AngularJS代替Backbone 代码减少一半 史上增长最快的SaaS服务Optimizely:13亿访客,10万次测试 IDF上的云计算故事 移动周报:百万年薪、微信疑云,老罗小马本周很忙 一个创业失败者的自述:我是如何搞砸一款产品 收入百万美元:一个放弃上大学的程序员 Cocos2D配Box2D:逆天小白程序员作iOS游戏 招聘移动开发,老板必问的10个问题 黑客用智能手机劫持和控制民航飞机 几小时即可使互联网瘫痪的黑客 现已加入谷歌 Tsar开源:淘宝内部大量使用的系统监控工具 五款超实用的开源SVG工具 微信收费事件背后被广泛忽略的技术细节 UIDesigner 3.0架构设计总结 黑客怒了:政府花930万美金仅做一款App Email服务迎来“第二春” 未来将更加个性化 贯穿应用开发始终的八大陷阱 微评微软也推智能手表:是追求未来,还只是跟随? Firefox OS今年6月在5国首发 不含美国市场 关于控制动态产生Checkbox,并进行动态控问题 BCB中使用MSComm控件,无法定义动态数组变量,该怎么办?--急啊!在线等待 战神----巴蒂 两个问题! 用ADO访问DBASE数据库 百分求救:关于COM方法的reference参数不返回值的问题 请教各位高手 如何将程序中不同的查询结果写入报表? 怎样自编程序监控icmp包,应该截获什么消息,还是用别的方法? java本地化的问题(各位帮帮我!) 一个关于类型转换的菜鸟问题!! 招聘 Jpeg中FFd9可以有几个? ?????不同窗口中多个参数传递的问题,在线等待中........ 关于 EmbeddedWb 的Mshtml_tlb, SHDocVw_tlb 问题! 各位大虾 帮我翻译一下 急 悲... DBGrid为什么没有数据集记录失去焦点事件? 怎样手动和在程序中更改SEQUENCE的当前值? 怎么结贴子,什么叫FAQ? 关于“软件蓝领”的3个疑惑。 在函数中以引用方式调用结构的问题?给我能给的最高分100 怎样实现随机打印一个数据表的几个子段? 大家看看,这个功能如何实现? 怎样编一个程序读取服务器上的时间? VC工程不能正常打开? Jpeg中FFd9可以有几个? datawidgets简介!简单的问题---“送大伙一点小分” 新人到!!有问题想要问!!! 有谁知道sybase12.5中定义的所有保留字keywords? 为什么我的Tomcat突然找不到Serverlet了 关于报考程序员的问题 请问:一个应用程序发布时需要为每个发布的实例建立一个唯一标识用GUID好不好? 介绍些ActiveX/COM的好书吧! 图片的名字是中文就不能显示,怎么办 奇怪的问题关于NULL! 高分求助:pb中数据传输的问题 请教,在窗体改变大小时,有没有通用的办法,改变窗体内控件的大小,位置 如何用VB在CMOS中获取指定信息? ??低级问题,如何得到一个hdc(最好多几个方法) !!!!!!!!!急急急!!!!!!!!!!!!! 如何在頁面引用outlook的收件人地址控件,使得輸入的mail帳號會自動加上下划线,请给代码,并解释,非常感谢! 有名的ehlib控件,2.3版,功能多多,本人在其基础上又增加了很多属性,不能错过! 不是高手莫进来!:) 这是小雨田子第N次给大家送分了,请进吧!!! 如何打包 一个百思不得其解的问题,使用SetSQLSelect()语句重置数据窗体的SQL语句,SQL语句无错,但存在部分机器不能成功执行。不知何故。 关于排列组合的问题 ACL能容纳多少个项目? 怎样在pb里面去取Excel表中的数据?????? 假设在表达式中只有加、减、乘、除及小括号运算,试利用栈来实现对表达式的求值运算? 汽车电路中,50线的作用是什么? 声音的响度跟人与声源的什么有关?急 如何用原子运动的角度来解释声音的传播速度及响度变化?用原子碰撞或能量消耗来解释 检查汽车电路应注意哪些事项 温度传感器的种类 多波段收音机音量逐渐变小的原因是什么?一台21波段的集成电路的收音机(凯隆KK-210B),用了5年后,搁置10年后再收听,发现刚开始收听声音洪亮,收听到40分钟后音量逐渐变小,更换新电池后还 汽车电路怎么查线 温度传感器的种类有哪些 朱自清的《春》给我们展示了五幅图,分别是什么图,给五幅图配上相应的古诗五幅,不要四幅 将玻璃罩罩住两根蜡烛,为什么长蜡烛会先灭? 某同学设计了如图实验:将一支充满CO2的试管倒扣在盛有澄清石灰水的水槽中,过一段时间可以观察到试管内的水面开始___________,因为______.试管内液体变_________. 某体积为V的密闭绝热环境内有p0,ρ0,T0的理想气体,现充入m质量,温度T的理想气体,如何计算平衡后的压强p 为什么2HI=H2+I2这个反应中反应前后气体的物质的量不变 两根蜡烛一根长,一根短,问如果将两根蜡烛点燃后,用一个封闭的玻璃罩罩住后,问哪个先灭? 如图,充满二氧化碳、氧气的试管,倒置于盛有澄清石灰水的水槽中,则最后在试管内收集到的气?E如图,充满二氧化碳、氧气的试管,倒置于盛有澄清石灰水的水槽中,则最后在试管内收集到的气 可逆反应2HI(g)=H2(g)+I2(g),达到平衡,增大HI的物质的量,HI的分解率和体积分数不变,为什么呢?,能不能解释清楚啊 在一个玻璃罩中有两只长短蜡烛那只先灭?为什么 将一充满二氧化碳气体的试管倒扣于盛有澄清石灰水的水槽中,观察到的现象有( ),(),原因有( ). door除了门还有什么意思新概念英语初阶第27课 响度跟距离发声体的__有关,响度的单位是__ 如何殺死蚊子 在水平桌面上,放上两只蜡烛,罩上玻璃罩,哪只蜡烛先灭? 冰熔化过程的特点是_______. 蚊子死蚊子 在桌上放1高1低蜡烛,点燃后罩上玻璃罩,问哪只蜡烛先灭为什么说出来 响度跟发声体的什么有关 蚊子为什么会死 在水平桌面上放两支蜡烛,罩上玻璃罩,哪个蜡烛先灭? 响度与发声体的什么及距发声体的什么有关?急. 如题,声音的响度与声音的材料有无关系音调呢? 在平桌面上放两根高低不同的蜡烛,罩上玻璃罩,哪根先灭可是我做实验的时候是长的先灭的,有什么原因使他们不同时间灭? 汽车常用检测设备有哪些? 声音传播的距离与音调和响度有关.那么哪个更重要,有没有什么公式? 放两根蜡烛,一根长一根短,同时罩上玻璃罩那根先息,为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么?为什么? 汽车钢材检测项目有哪些?所涉及到的检测设备有哪些?公司筹建汽车钢材检测实验室, 在同样距离内固体和气体传播的声音哪个响度大?RT,最好同时说明理由,那土地呢? door是什么意思 溶质对溶液的熔沸点有何影响 钠钾泵把葡萄糖从细胞膜外送到细胞膜外的能量是从哪来的? 声音的响度越大,传播的越远,这句话对吗? 为什么 溶质加入水后,溶液的熔沸点发生上什么变化? 细胞膜上的钠钾泵会机能逆转吗钠钾泵会通过水解ATP,使钠排出,钾进入细胞,这是它正常的机理.是否会出现钠钾泵把钠再泵回细胞内,把钾泵出细胞,同时合成ATP?如果细胞出现问题,比方说,细胞 声音传播距离与响度无关,为什么越远越听不清不懂 常用的化学溶剂有哪些?他们的熔沸点是多少? 细胞膜上钠钾泵所需能量主要来自哪个途径啊?选择题a葡萄糖的有氧氧化.b糖原异生c糖酵解d蛋白质分解e脂质氧化红细胞膜和普通细胞膜上钠钾泵能量来源有区别吗 音调越大声音传的越远,还是响度越大声音传播的越远.警报声之所以能传播很远的距离,是因为它的( )A.音调高 B.响度大 C.音色美 D.节奏快 一长一短两支蜡烛放在同一玻璃罩中燃烧,哪个先灭? 用盐酸除去铁钉上的铁锈,溶液变成黄色,不一会又观察到什么? 如果把长短不一的两支蜡烛点燃后用玻璃罩罩上,请问哪支先熄灭呢? 一长一短两支蜡烛在同一玻璃罩中燃烧,哪个先灭?答案是;条件改变,均有可能熄灭,为什么? 声音的高低称为_________,是由________决定的. 用玻璃罩罩住一支长蜡烛与一支短蜡烛,哪一支会先熄灭?玻璃罩小的话,玻璃罩大的话,(老师没有说明玻璃罩的大小)如何写实验报告?(第一分实验报告,希望能写的准确些)求达人解答请写 响度还与距离声源的什么有关 声音的高低由什么决定 如果不慎将油汤洒到衣服上,可以用什么方法除去?说一下你的依据得原理 响度还与声源的什么有关? 声音的高低和强弱由什么决定RT声音的高低叫什么?由发声体的什么决定,声音的强弱叫什么?它与发声体的什么有关 door什么意思 声音的响度不仅跟声源的——有关,还跟声源的——有关. 是不是声音的传播速度越快,响度就越大?为什么?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘