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

富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

软件开发就像炒股,关键看你怎么选股票! iOS 7.1正式版:新增CarPlay连接功能、完美支持iPhone 4 【OSTC讲师专访】马全一:Docker,Hadoop的竞争者来了! 福布斯:全球那些富可敌国的科技大佬们 抢工作、争资源,如此聪明的AI你拿什么阻止? iUI:移动Web应用开发必备的开源框架 支持iOS 7.1!苹果发布Xcode 5.1更新 视频云将成为2014年乐视新的发力点 3月12日:万维网迎来理念诞生25周年 《近匠》云适配CEO陈本峰:跨屏移动,曲线一样救国 Intel陈荣坤:赢取移动市场的几个先决条件 而立之年,开发者在害怕什么? 首席工程师揭秘:LinkedIn大数据后台是如何运作的 年交易额1800亿美元,揭秘PayPal成功背后的三大热门技术 微软妥协Android?向该平台推开源Office 365 SDK 中国云计算大会PPT集萃(一):众多名家分享技术挑战与行业趋势 速度是现在的10000倍,出自物理学家之手的新型电脑 逗你玩?淘宝开放平台从4月1起开始全面收费 出现编程疲劳?千万别纠结 “编程竞赛界王子”教你更好的招聘程序员 SA:三星全球智能电视市场份额达26% Cocos2d-x 3.0分语言包发布 最新进展即将披露 友盟:社会化分享成为APP开发“标准配置” 从“简单”的封面设计剖析Netflix背后的数据哲学 与Linus Torvalds“并列”,虚拟化天才程序员法布里斯贝拉 让超级计算机和数据中心“飞”,Intel推800Gbps神器MXC 【OSTC讲师专访】Debian开发者李道兵:平静地理解开源 红帽推出开源业务流程管理套件:JBoss BPM Suite 6 科学研究证明:程序员快乐才能更好的工作 ChocolateChip-UI:能“逆转”的跨平台应用开发框架 分享12款最佳的Bootstrap设计工具 真的很是问题 如何保留rtf的文本格式啊? 哪有免费论坛程序? GetFieldValue( nIndex, varValue, nFieldType )函数出错 请问Updata和Refresh有什么区别? DBNull问题,高手指教! 怎么样用xml做树形目录菜单,如csdn的左边的目录菜单,up者有分 关于菜单项的问题 是用outlook到如数据的问题 test7777 求救!!!!! 随机从表中抽出N条记如何写? 如何用脚本动态的生成一个新网页? 如何做出象DELPHI中的菜单在ControlBar1中的样子? 急·!!怎样能把磁盘上的文件删出一行 有关多字段排序的问题? 什么是发布与订阅? 1、五一节快到了,大家打算怎么过啊?:P 我从网上Down下一个VB的事例,但是窗体上控件的位置没法移动??? 如何在访问不同域的COM+服务,如何配置? 求购CRM源码(delphi) 我写了一个exif读取的程序,欢迎大家热心测试,给出好的建议的赠送代码 2、五一散分帖,收集一些东东。 问个弱弱的问题! 帮忙了,谁有XP的序列号? 一个很菜的问题,求助!!! 超时已过期错误提示问题 河北保定,转让大量C++世界经典。 关于控件堆叠的问题 session的问题 今天发工资,太少不爽,大散分,谁要是能帮我找一个挣钱的私活,我给他200分(令给) 请教数据库! 请教有关对话框的问题? 3.五一散分帖,我一个朋友说。。。。。。。。 高分相求:JBUILDER8 Enterprise 版,或下载地址。 怎么才能获得editbox的值 请问rasWinGod 这个控件如何用!(在线等待) 请问如何用CB生成可以在集成到网页上的activeX控件?急阿........ 如何把用逗号隔开的字符串赋给一个数组? FileView下的External Dependencies里面的.h文件是什么?! 请问如何在数据窗口中显示记录序号 怎么看自动生成的Makefile到底做了什么?紧急总动员,满分,在线等待 回答我问题 今天打开邮箱,竟然没有lj邮件,感动ing,散分ing 4、五一散分帖,问问题。:) 单击一个TreeView发生一个事件!我想显示? informix小问题 求一个存储过程,sql server 2000 大家好,请高手赐教,有关在应用程序中如何打开并编辑Word 文档??急需 如何在文本文件中查找一个串 100分,如何安装sturts?解决马上送分 什么是农村劳动密集型产业 在三角形abc中,∠BAC的平分线AD交BC于点D,DE//AC,DE交AB于点E,求证三角形EAD是等腰三角形 我和他是网友见面,因为是夏天,我带了帽子还有口罩,见面聊了有两分钟,我帽子口罩都没摘,我就去上班了,可能是我总体看上去还挺好,之后他就天天给我打电话,让我做他女朋友,我说我脸长得 劳动密集型产业英文怎么讲 三角形ABC,AD是BC边上的高,AE是角平分线,问∠EAD和∠B∠C的关系,为什么 化学试剂"新美蓝"的别名 哪些产业属于劳动密集型产业? 小浪底水电站在什么地方啊? 芬顿法中.芬顿试剂的量怎么确定?与COD有什么关系吗? 海绵肾是什么?该如何治疗?日常生活中要注意些什么? 口罩的绳子应该怎么绑、详细点、要有图更好 跟气象有关的农谚 坐标系一定建立在参考系上吗 2A悠悠球绳子怎么系啊?最好有图! 有其它别名吗 太空托盘那力买 两带电物体接触为何电荷会平衡?为何负电荷会移动? 葡萄糖为什么不可以与小苏打溶液反应产生气体 论述我国发展劳动密集型产业的利弊 用三线式热电阻传感器,数显温控仪显示500度,温度升高时也会变化,但就不准确,要怎么设置?接两线时,屏上ON亮,数字一直跳动:接三线式,屏上OFF亮,数字不变化,但不准确! 冰变成水再变成汽体现了否定之否定规律么?马克思主义哲学 对祖国有贡献的人急 200分求一道物理题 转动惯量神马的.一个圆形的旋转木马,半径为2米,从静止开始,一个学生以500N的拉力在边缘转动旋转木马(正切)..10秒后速度达到2.0 rad/s ,旋转木马的转动惯量是多少?0 x 10^3 谁有关于气象的农谚?30条以上多多益善,高分! 名人成功之前的失败最后从失败中走向成功的实例,急 关于转动惯量的两个圆环 质量 大小一样 一个实心 一个空心 从同一高度的斜坡下滑 为什么实心的圆环先着地?这是为什么?这与质量的分布有关系? 什么牌子的耳机最牛逼!最吊! 脱霉剂的作用机理是什么啊? 烘箱显示实际温度比设置温度低怎么处理? 浩瀚星空中,世界暂时能测到的最远距离是?我想看看21世纪世界的科学技术怎样 脱霉剂哪种好 烤箱 下加热 怎么调节温度 2.地面上较近距离,可以用()或()直接测得. 一个关于杆的转动惯量的问题在以长杆的一端为轴旋转时所得转动惯量为ml^2/3,将l 缩短一半得转动惯量为ml^2/12,而以杆的中点为轴转动惯量为ml^2/12,也就是说,在轴的另一边增加l/2的长度,效果 关于脱霉剂的几点疑问?1目前我没带脱霉剂以吸附功能为主的具有特异性吸附功能吗?2以分解为主脱霉剂能分解哪些?对营养成分有影响吗?3如果脱霉剂对营养成分有影响,那么影响的那部分与 小浪底黄河三峡的点评 找一篇有关保护生物多样性的论文 您正在使用脱霉剂吗? 油炸后的油怎么变清 NO matter what you do,you should put your____into it.是填heart还是mind,答案为什么是mind? 进口脱霉剂 婴儿每千克体重每天需多少8%糖牛奶?现在所有练习题都是需要110ML,第7版儿科学上是100ML,到底选哪个?知道答案的请加627320131, 我国烟草制造业分布在哪里?有哪几个主要的烟草制造区?以及分布在那里的原因? 129事件的作文, 体重6Kg的婴儿,每天需要牛奶和水量是多少?要怎么计算? 儿童出生率怎么算我乡有22866人口,今年出生280人,出生率是百分之几 129事件是在那一年发生的?总在广播上听见 有什么人与人之间相互关爱的事情 具体的事例 是要写作文的 不要出现具体的人名 一定是生活中的小事哦 生物多样性对我们人类有哪些意义?根据你的看法,写一篇200字的小文章 某农户2006年承包荒山若干亩,改造后,种果树2000棵.今年水果总产量为18000千克,此水果在市场上每千克售a元,在果园每千克售b元(b 塑料打包带要求拉力2000N,相当于承受多少公斤的物品? 22.4LCO与N2混合气体中所含电子数?气体还能求电子数? 衣服为什么会长霉 一个直角三角形沿着一条直角边旋转一周得到( )请快速回答 I put my anchor into your 为什么我的橡胶会长霉? 一个直角三角形绕它的一条直角旋转一周得到( ) 浙江省的劳动密集型产业有哪些 大学转动惯量问题将一质量为m的圆筒上绕上几圈后置于水平地面上,如图所示,用水平力F拉绳使圆筒在地面上滚动(存在摩擦力),圆筒加速度为a.请用m和a表示F的大小,class="ikqb_img" src="http://c.hipho 表情图猜成语图l,耳朵图2门,图3高楼,图4一个圆脸带个口罩,求答案谢. 韩媒:朝鲜出台相关法律 欲吸引外国投东京股市日经股指上涨1.23%离婚率高达40%!挪威政府坐立不安敦浙江地方政府探索干部权力分化防一把手三大巨变预示A股将崛起 两主线成反弹通讯:“让我们侧耳倾听鲸的呼吸”《步步惊心》小承欢转眼出落变成小美女日本女性无法原谅丈夫说什么话?印度东北部炸弹爆炸致3人死亡几内亚:80%以上女性遭受家庭暴力温州房价跌无人接盘 法院变身淘宝掌柜“万人计划”首批名单出炉记:包括3个九旬老人做十余年裸模 曾参加抗美援朝日本女人认为的治愈系男生必备10大特日本“治愈系”萌兔甜点 你舍得吃吗埃及宣布发现巨型天然气田到瓦尔德斯半岛观鲸温州房价下跌无人接盘 法院变身淘宝掌南方泵业为\"甘泉泽校\"捐赠深水泵美媒称白宫叫停监听默克尔 美监听丑闻暴风雪席卷英国罢工雪上加霜 英首相:以总理下令停止与巴方的高层接触林毅夫:2030年前人民币或成全球储第六次中印战略对话将于4月14日在京大陆赴台个人游16日起调高为每日40北京:百种世界名花绽放百年中山公园福建:教师“县管校用”均衡义务教育资韩国青瓦台安保高官9日访美 协商韩美高交会明天开幕有啥亮点 记者带你提前李克强在欢迎仪式现场向澳大利亚总理了“霸王银行”评选:工商银行收费名目多来自星星的男人 金秀贤私房帅照萌照集三亚财政局发布公告提醒市民警惕电话诈日本学者呼吁美在安倍历史认识问题上采省旅游委主任为潭门旅游咨询服务中心揭海南红明三江两国营农场场长因贪污受贿“2013全国十大考古新发现”揭晓 李克强同澳大利亚总理举行中澳总理年度海南公共外交添\"新名片\" 促亚洲张德江会见以色列总统佩雷斯中组部发出通知要求全国组织系统认真学国务院出台支持福建深入实施生态省战略
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘