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

富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

比预想晚几年!IBM x86服务器或终将卖给联想 App推广的节操呢? iMessage垃圾短信产业链暗访 Apkudo CEO访谈:免费为Android开发者提供测试 Web API核查表:设计、测试、发布API时需思考的43件事 开源Android构建工具Buck 速度超Ant两倍 从史上八大MySQL事故中学到的经验 OpenStack Heat向应用市场更近一步 初创公司Ionic Security:云安全必须与时俱进 谷歌董事长:一年后消费者才能用上Goolge Glass Windows 8.1重新推出的“开始按钮”毫无意义 手眼并用 代码泄露三种Google Glass手势操作 Google新论文 CPI&#178;:基于Linux的世界级跨数据中心服务器CPU监控 20款非常实用的Web工具和资源列表 数据库界大事件 随机写性能巨好的TokuDB开源了 CMDN Club 26期:数字渠道营销主题沙龙 暴强:用iOS设备控制的HTML5“小蜜蜂”游戏 Leap Motion:500元体感,精确到0.01毫米 大事件:三大运营商将发布融合计费SDK 再培养一个扎克伯克:六款适合儿童上手编程的App 首届中国软件工程标准高峰论坛:软件开发的新机遇与挑战 Verizon研究显示:中国成为2012年度网络间谍攻击的主要来源 Clang宣布全面支持C++11标准 北大陈钟:SEMAT—中国软件工程发展的新机遇 超华尔街预期:苹果第二财季营收为436亿美元 跨平台游戏引擎Spaceport已被Facebook收购 文科生开发GPU数据库 性能超传统数据库70倍 开发者赚了90亿:从苹果Q2财报,看iOS生态 备受开发者青睐的13款热门开源项目 Netflix赌赢《纸牌屋》背后的秘密武器:大数据分析 为什么:Google Glass只能运行Web应用? 对话Rackspace高级副总裁Jim Curry:我们没有&amp;quot;辜负&amp;quot;营销炒作 列表框中有多列,怎样让记录按列对齐? 求助capboy等网络视频播放高手-MPEG-1流的实时网络播放(2) the System V IPC机制是怎么一回事? 无组件上传图片,但我不能控制上传文件只为jpg or gif,请问怎样实现.急,在线等待!谢谢! 关于tomcat 的问题(急) help about windows printer 有关SDK的问题,高手请进! 高分寻求一个例子! dataset更新。100分 请您支招 通配符 有爱国心的高手快去黑了这个网站 这样的字符串比较怎么做?? 怎样在VB中加入动画? 费时操作是如何估计所花费时间的? 为什么我新装的机器在播放声音和视频文件时速度比原速度快了好多? 怎么样清楚Cookies 如何通过一个链接弹出一个没有标题栏,没有菜单栏,没有地址栏等的新页面? 配置问题,在线等待?分不够再加! MFC基础, 如何实现在CScrollView上, 把某一文本文件显示出来(不用file - new)? 求救:请问哪儿有《Beginning Visual Basic.Net》英文书下载??? 高分100 label 控件刷新问题 如何通过一个链接弹出一个没有标题栏,没有菜单栏,没有地址栏等的新页面? 实现这样一个报表??????? 求救。。。。。Access2000的数据库密码忘了,该怎么办呀!!! 动态产生的列表框,如何让记录按列对齐? 为什么有时自动打开网页,有时却不能? 在JDBTable中如何选中行? 我想让进度条竖着从下往上显示,应该怎么做? 可否知道数据表即将产生记录的标识键值???? 怎样让程序启动时最大化,但又不允许用户再还原或者改变窗口大小,谢谢! 紧急求救!关于ADSL下的固定IP地址访问问题,相关IP地址转发技术 谁见过这种编译错误,怎么办啊? 我的RH7.2不能Telnet ,请帮忙. GPRS 有无条件等待指令吗? 简单的问题_50分。 在vba的编写过程中无法在excel中调用word等其他对象,怎么办?(顶者有分) 事实证明,weblogic会对注释行报错! 一个让人困惑的问题 bcp 的问题 请问:有没有UNIX下的测试工具? 请问一个关于BCB消息MAP的问题... 系统2000,用installshield6.0包了程序,有问题 请问我用VC++做的数据库程序怎样打包在线等待急用, 在控制面斑-- >删除/添加程序 选项中 Win2000和Win98怎么不一样啊 改写了8254后如何得到正确的系统时钟 在别人机子上生成报表时提示出错,除打包安装外有无其他办法? ★ 懂 ORACLE 和 DB2 的高手请进... ★ 求助!!! 100分求小软件 消化产物 水解产物 氧化分解产物 有什么区别? 为什么利率降低会加剧通货膨胀啊? google搜索词之间“和”与“或”的使用怎么不能得到满意的结果呢?我在google.com上搜索关键词“cocktail and juice”的时候,结果43400000条;关键词“cocktail or juice”,结果43400000条,而且前几页结果 新制度经济学派对企业概念的理解 我认为那样做是毫无意义 的.I think doing( )that is ( ). 手提式二氧化碳灭火器是怎么换药的?因为我公司的几个灭火器换完药后瓶口的生料带还是原来那样脏脏的,要是换药的话是不是生料带也要换过?还是二氧化碳的灭火器换药只要把原来的气体 有ab两个圆柱体容器,原来,a容器里装2毫升的水,b容器是空的.现在往两个容器中以每分钟0.4毫升的速度注入水,4min后,两个容器的水面高度相等,已知b容器的底面半径为5厘米,a容器的底面直径是 已知一个铁原子的质量是一个碳原子质量的4.66倍,求铁的相对原子质量 遵守公共生活规则包括哪些 叫佳纯的女孩子应该取什么样的英文名呢我觉得最好是用佳开头sen结尾 或者是用卡开头森结尾之类要好听有意义一点的 风幕机型号如何确定选择 生活中最基本的社会规范有哪些? He went to the cafe yesterday?改否定句 经济过热和通货膨胀有什么区别? 基督徒应该遵守的生活规范和饮食规范应该是哪些?我不太懂,希望能够具体些. 用经济学解释政府如何采取措施控制房价 经济过热和通货膨胀有区别吗? board怎么读 we went to the ming tombs yesterday改为一般疑问句 煤粉细度R200是什么意思 求《吕氏春秋》的简介 i went to the parlc yesterday.变一般疑问句 请问关于煤粉细度的R90是什么意思啊?而R90为18%~请说得通俗点 《三豕涉河》道理这个是文言文,这个故事的道理是什么 为什么要装风幕机(风帘机,空气幕)? 粉末细度 《吕氏春秋》共有几篇?《吕氏春秋》共有几览?《吕氏春秋》共有几纪? 风幕机,空气幕 熟料煅烧为什么要控制煤粉的细度 生物中水解产物是什么意思? 如果一个经济出现过热(通货膨胀),政府应当如何进行宏观调控 风幕机一般多少W 关于糖类的生物题,我知道最终水解产物都是单糖,求具体的名称.3Q二糖:蔗糖水解最终产物是?麦芽糖水解最终产物是?乳糖水解最终产物是?多糖:淀粉的最终水解产物是?糖原的最终水解产物 利息=( )税后利息=( )利息税=( ) 煤粉细度R90=0.25的含义 化纤布料有哪些分类 (1)宏观调控 (2)通货膨胀 (3)投资减少 (4)物价回落 (5)经济过热A. 2-5-1-3-4 B. 3-5-2-1-4 C. 4-3-2-5-1 D. 5-2-1-3-4 答案是哪个呀 三豕涉河的字面解释一定要完整,不要害人哦! 化学纤维的布料都包含什么? 洋葱表皮实验 要是出现出现汽泡,怎么办 三豕涉河中 晋师已亥涉河也 涉 结合所学政治生活知识说明我国为什么坚持走和平发展道路 已知一个碳-12的原子的质量为1.99乘10的负26kg.镁的相对原子质量为24.035,求一个镁原子的质量 当经济出现通货膨胀时应采取什么样的政策? 不议价是什么意思 风幕机有什么作用 风幕机工作原理 关于天气的知识夏季的黄昏,一阵雷雨过后,你开始观察当时的天气现象.假如你随着时间的推移观察到了彩虹、晚霞、月亮周围的色彩光环,清说一说天气的趋势将如何发展?这是我们的思考题.. 议价粮油什么意思 They went to the zoo yesterday,_ _(反意疑问句) 风幕机什么作用 运用所学的经济生活知识,说明我国为什么要稳定房价 They went ti the zoo yesterday.改一般疑问句 松下风幕机FY-35ELC1单价多少钱? 运用所学经济生活知识,说明我们为什么能富起来 运用所学政治生活知识说明我们为什么能够站起来运用所学经济生活知识,说明我们为什么能富起来(11分)运用所学政治生活知识说明我们 羊毛衫的成分是什么? 经济增长和经济波动之间有什么区别?经济波动与通货膨胀、失业率和利率之间有怎样的关系? c4h8的同分异构体CH2=CHCH2CH3 CH3CH=CHCH3 CH3=C(CH3)2 还有别的么? 如何识别羊毛衫的标签成分? 通货膨胀会使利率升高还是降低?为什么? 食品添加剂甘油跟护肤品甘油一样吗
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘