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

富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

增长最快的游戏公司Supercell 你学得会? 移动周报:为什么我们出不了IT神童? AWS、VMware和OpenStack谁是赢家? 消息称苹果正在寻找新任CEO取代库克 请别人云亦云 PC仍然重要且活得很好 比预想晚几年!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倍 中秋大送分,祝大家节日快乐,心想事成!! Happy Mid-Autumn Festival! lotus notes里有没有一款抓屏工具? 一个很新鲜的问题???? 招聘增值业务技术人员 连接数据库格式怎么写?Dim Path As String = "D:\User\Alex\MSD\msd1.01\MSD\MSD.mdb"为什么出错?急,在线等 关于应用程序的图标 程序代码一定没有错,但运行每个页面的时候总是出错 请教版主:如果发了贴子,有人回复, Help Me! prc文件用什么浏览器可以阅读? 谁有CNTService的源代码,我急用,多谢!!! 一个very easy(对您来说)的问题: 有关网络带宽占用问题 如何将html源码存成word文档 中秋大送分,祝大家节日快乐,心想事成!! C#调用C++写的DLL中返回字符串的问题! 我要辞职,怎么办手续?求大家帮帮我!!!!!!!!!!! 类似李洪根这样的高手请出手帮忙 ! 中秋大送分,祝大家节日快乐,心想事成!! 在上海找了半个月工作,为什么只有外资公司愿意要我!!?555~~~~~~ 关于datagrid里删除的问题 天下第一黑客 如何开发手机短信程序? 中秋佳节又加了一个角,双喜---------散分! 有没有将一个数组中重复的值删除的Function? 中秋大送分,祝大家节日快乐,心想事成!! 想用ADO的如下两个变量,需要做哪些预操作,设置或Include等,我怎么用不了 用了query界面好像死了一样 怎样给自定制的Web控件添加事件(分全给了) Apache+php我老是配置不成功,请教各位大哥,能不能将一份Apache+PHP配置资料贴出来(曾今配置成功),详情如下。 中秋大送分,祝大家节日快乐,心想事成!! VS.net 打开htm页面时报错,导致VS关闭,重装VS.net2002也不行。 请问hibernate中,用query.list()和用session.find(query)有什么不同呢? 准备贩卖人参去了? 人生在世 how many? 何必苦苦 study? 有了MM go to see..其累无比也happy..... 公司局域网其中一台机访问不到另一台机,help 歪诗一首表心意 Apache+php我老是配置不成功,请教各位大哥,能不能将一份Apache+PHP配置资料贴出来(曾今配置成功),详情如下。 ocx中字符参数应如何设置 如何用javascript设置或取得<asp:textbox .../>的值? 使用dbexpress连接mysql问题! 关于 SQL Server 查询遇到的问题。 高分请教:怎样得到PB函数对象的地址? 超链接列的数据绑定问题. datagrid和sql,在线等待 在北京想要参加oracle的培训,时间最好在一周!请给个推荐! 如何把一个aspx页面作为两个页面来用? 帮帮忙:显示窗口变化导致显示物体变形问题 为什么订阅成功了而它的状态是失败或从未启动???请高手帮忙!!! 怎样判断字符串中有半个中文字符? 七月的天孩子的脸 说的是什么动物? 有关分析化学.孙毓庆 请问第四版和第二版有什么区别?找不到第四版的书.考研要用 这些的拼音 因为像PbCl2这样的也不溶于盐酸,还有氯化亚汞也是,正确的因该是沉淀后加浓氨水,沉淀溶解的,才证明是Cl- .PBCL2和氯化亚贡为什么要加浓氨水沉淀溶解的才证明是CL—?PBCL2和氯化亚贡为什么要 每个拼音 如果-(a*a)*(b*b*b)>0,则b____0(填>, 若a<0,b<0,则a+b 0填>和<或= 短文为什么在最后安排德诺抱着艾迪穿过的球鞋这个情景 若a>0,b>0,则a+b 0 填>和<或= 生命的药方阅读答案 1“以后睡觉就抱着我的鞋,想象艾迪的臭球鞋还在你的手上,艾迪肯定就在附近.”这是艾迪对德诺说的,请结合艾迪对德诺说的语言环境,说说这话是什么意思?2生命的药方 若a>0,b<0,|a|>|b|,则a+b 0填>和<或= 加拿大暴风雨30多万人受影响网友自制“2014节假日放假表” 比专家:中国九成以上大豆油是转基因产品委总统微博掉粉 谴责国际右翼势力插手汤加发生6.4级地震房租过高 白领伦敦上班巴塞罗那居住坐韩国口罩销售量激增 韩媒曾为中国雾霾克里无奈承认:有些监听活动太过头日海陆空“夺岛演习”规模空前 自卫队外媒称美国驻德国大使馆系间谍中心 可中央第二轮巡视10个巡视组全部进驻被故意挂科,接近女神辅导员养老金“十年涨” 今年最低月增120不带“把子” 让方言更干净更风趣不执著于观念远离负能量国家博物馆收藏蜀锦《交子行市图》我是女生,我也喜欢追女神8家第三方支付公司被处置走进透明工厂 见证巴人村苦荞酒品质解密你所不知道的白蚁改革方案即将出台 高考将有两种模式亚残会羽球亚军 原是古籍管理员随欲飞凡戟霸异世1895淘金国度韩靖修仙传九脉修神魔盗传异界大亨通神塔牧唐极品矮人王天怒新疆旅游佛山旅游曲阜旅游雨崩旅游可可西里旅游张掖旅游西山旅游垦丁旅游葫芦岛旅游四姑娘山旅游徐州旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘