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

富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

Google的“机器人情结”:两次合计36亿美元的人工智能收购 挑战谷歌、抢占新兴市场,百度进军泰国、巴西和埃及市场 《近匠》第8期:Unity——不再仅仅是游戏引擎 Colours:移动应用的开源“美颜相机” 微信红包活动:用户疯狂中的腾讯“阴谋” 预测2014年最热门的IT职位及年薪 智能手机有隐私?Facebook可阅读Android用户的短信内容 苹果2014年Q1财报:iPhone、iPad 销量创纪录 3D打印:鞋垫也玩私人订制 与Google Glass抗衡,三星将推Galaxy Glass 进军移动?任天堂欲推iOS、Android版超级玛丽 回顾2013:云计算的夏天 微软最终加入OCP阵营,开源其云服务器设计 Docker:集装箱式“运输”在软件上的实现 《近匠》第09期:ShareSDK——专注社交分享工具 苹果车载iOS系统iOS in the Car界面被曝光 支撑过万亿音乐事件的数据分析系统 Facebook运维内幕曝光:一人管理2万台服务器 《近匠》第10期:友盟——开发服务平台化 LinkedIn耗资1.2亿收购数据驱动招聘服务公司Bright 谷歌推视频会议硬件产品Chromebox 基于Chrome OS 文件上传组件导致Apache DoS安全漏洞 EA,你是来拉仇恨的吗? Beep:前Google员工打造的流媒体音乐控制器 有利于开发App的5款天气预测API 七问微软新CEO,你准备好了吗? Hadoop虽然强大,但不是万能的 Flappy Bird:萌贱游戏日进斗金的烦恼 IT技术支持:索契冬奥会背后的无名英雄 简单10招,让你的云计算事业锦上添花 微软、谷歌及苹果从哪赚钱? jin_shan(DOS)请进来看看,谢谢!! 大家平时玩什么网络游戏?请留下ID和擅长的游戏(玉笛书生有偿调查) 请帮一个忙? 怎么样在程序里注册OCX控件件? 奇怪,为什么我的电脑在死机后重起就不能浏览我写的asp页面了 各位,我現在到這一步了,下一步要做什麼 怎样把一个 Frame 窗体放进一个Penal 中??? 我编了4年程序,可是我在这里的提问没有一个人的回答让我满意!!!! 搞张jbuilder6破解? 特殊字符串查找 请问Win2k pro的Inetinfo.exe进程怎么占用CPU达99%呀?怎么解决呢? 自由自在的人,你在吗? 后缀是nlc的电子图书那里找? 请问vc里缺省参数的函数是怎么定义的?(70分) 救救我!!!数据库管理的几个基础问题?? 急需控件 请教一个关于CListCtrl的问题??? c语言实现"智力游戏" --? Redhat下设置环境变量 我的帐号被盗了啦!!!!!!! select max(count(*)) from table group by aa这个意思的语句该怎么样写? 在SQL SERVER7.0中如何实现类似于ORACLE中的CONNECT BY实现的树型查询? 这里都是些菜尿,吗的没有一次我的提问有人给我解决的! 为什么我的问题没人响应???????? 隐藏FORM的API,谁能提供? 谁知道 jdbc-odbc数据库连接是否要装jdbc程序 哪位大峡知道MetaTools公司的Photo Soap下载网址??? 数据库打开问题? 为什么会出现 Capability not suported???? 请教高手们一个在天极网没人能回答的问题,认真做答者有分 jsp的中文问题求救 何為數據流? 为什么在保存Word文档时总是提示Word内存不足,不能保存? 谁有开发支付网关的经历,请介绍一下经验,或提供些资料给我参考,谢啦。 求救!关于怎样提交表单???? 怎样写入txt文件里 alphagx送分了 求教: delphi中 JPG图片怎样存入数据库中的BLOB字段?怎么进行VCD文件分割或存入BLOB字段? 有关ICMP重定向报文的疑问!!! 在C++Builder中调用计算机内置扬声器,声音太轻了,怎样提高音量? 一个头痛的问题!大家指教! lujun,icevi……快来看看这个数据库怎么设计 请问怎么才能让DataSource.SaveToContainer不使用GUID作为邮件名称 怎么拒绝MM。 请教:为什么对话框的背景色没改变? 请问CDO中有什么方法可以不用邮件url而使用DAV:id来获得制定的邮件 FALSH问题?来者有分!(300) 一个关于头文件的问题. 简单问题001 有人在windows下写过数控程序吗? 有关sqlserver2000数据倒入问题 评论为什么要抄这篇作文(优点是什么)50字-80字人人都在渴望幸福,人人都在感受幸福.幸福有时很抽象,有时很具体.幸福有时很遥远,有时近在咫尺.奉献是幸福,给予是幸福,获得是幸福,享受 月光下的遐想 作文600字 求一篇作文题目是“成长,需要快乐”的作文,500字,不要太好的 写一处景色作文300个字 校服的好处 英文作文 50字 月光下的遐想 作文800字语言优美 要关于中秋的 要自己写的快 写一处风景的作文短一些 作文200字+评价50字+仿写随便 月光下的遐想 不少于500字的作文 定点描写一处春天景物的作文急用 .600字最好 认识自己作文50~100字把有趣的事情写出来由外到内 就是长着什么样子 我与老师的故事作文500字 关于写语文一处风景的作文 手机的看法(好处)1000字作文 求关于月球之谜:月亮是从哪来的?上面有什么东西?他跟地球一样吗?月球上的尘土有杀菌的本领吗?月球的请在清明节之前回答.谢啦~~~ 月球为什么会慢慢的离开地球?为什么?慢慢离开,最终与地球分手! 爱在身边作文400字 世界上第四大长河是什么 母亲作文的评语 我们可不可以这样想像一下地球和月球在很久以前 地球是本身并不在现在的位置,它的表面很均匀的覆盖一层厚厚的冰层,直到有一天,月球出现了,它朝着地球飞快的撞了过来,但是因为各自的 世界四大长河中径流量季节变化最小的是?(尼罗河、亚马孙河、长江、密西西比河)请问此四条河分别处于什么气候丫?尼罗河、长江、密西西比河为什么径流量季节变化大呢?. 写母亲的作文600字加100字评语 600字作文 要带评语的内容不限 写景免谈 世界四大长河中(尼罗河、亚马孙河、长江、密西西比河)径流量季节变化最小的是 写一篇关于母亲的作文 另外还有对这篇文章的评语 让世界充满爱作文600字 带评语 世界上四大长河是指哪四条? 感恩 母亲 作文 评语 50字 少点 要一篇关于成长的作文,要带评语的!大约500~600字 问一下世界四大长河的顺序及长度 世界“三大著名建筑”是? 600字关于温暖的作文带评语 跪求一篇300字的记事好作文饿- -拜托大家了 真的很急 必须是记事作文哦 今天晚上就要饿- - 让我感动的一个人作文200至400字! 月球的重力是地球的%60,有一个人那着一个东西在地球上重10斤,说月球上重多少斤? 求一篇记事作文,300字左右 读书使我快乐 作文500字急! 文明礼仪作文~400~500字的!急RT 求!寒假叙事作文300字!啊!要够300字啊!各位求求了!谢谢各位! 写读书带来的乐趣,600字 文明礼仪作文(公共场所里的)400字的 急需三篇450字作文内容任意,块! 月球上的东西能飘起来吗 世界上的未解之谜最怪异的,最恐怖的. 冬天里的故事作文500字 如过把月球上的碎石带回地球会飘起来吗? 大千世界未解之谜哪儿有这样的电子书? 我家的教育故事作文500字, 白兰地 伏特加 金酒 兰姆酒 龙舌兰 威士忌~这六种就哪个好喝! 世界四大未解之谜 求世界四大姓! 葡萄酒 威士忌 伏特加 白兰地 朗姆酒 龙舌兰 那个好喝还有 香槟 世界四大未解之谜是指那四大 世界四大水果是哪几种? 洋酒中的六大烈酒:威士忌,白兰的,伏特加,朗姆酒,金酒,龙舌兰.哪些比较适合加软饮? 世界上还有哪些是未解之谜不是说地震这样抬杠的。要像百慕大呀,外星人那样。 世界四大特务组织 威士忌,伏特加,金酒,龙舌兰,白兰地,中国白酒,日本清酒,朗姆酒各推荐一个牌子,价钱100左右 月光下的遐想 作文500字 成长中的快乐作文450字不许转载,嘻嘻……
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn