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

富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

自动记录应用软件工作时间 -VB资料 自动卷动TextBox -VB资料 自动开始上次关机时关闭的应用 -VB资料 自动装入注册设置 -VB资料 自己编程模拟 MouseEnter,MouseExit 事件 -VB资料 走进VB6啃一块骨头 做成一个时间限制的测试版 -VB资料 PHP中利用jQuery实现SWF图像上传和裁剪 VB.NET或C#将DataSet快速导出到Excel中 HashSet的equals和hashCode重写问题 PendingIntent实现原理和代码 IntentService实现原理及内部代码 AsyncTask实现原理和内部代码 Neither user nor current process错误 ListView的右边滚动滑块启用方法 Live Wallpaper动态壁纸开发 控制软键盘显示和隐藏 设置Activity大小不再全屏原理 Android面试题,看看你基础如何? Android Canvas绘图抗锯齿解决方法 Android xliff和字符串资源 android.hardware.USB类介绍 Android开发经验谈之应用间数据共享 android_asset这个URL详细使用方法 Android 2.3系统自带高清UI图标下载 设置ScrollView滚动条的颜色 WakeLock使用方法示例代码 Concurrent并发库常见问题总结 Android数据库SQLite性能优化技巧 Android开发之Java设计模式基础篇 Android开发之Java设计模式入门篇 关于在 Win2000 Server IIS 下安装 PHP的问题。 请问win32api中如何通过同时点击左右键来实现模拟鼠标中键? 关于vbscript的一个问题,狂急!!!!!! 运行服务器程序,无法绑定,问题在那?请各位指教!! 工作站安装win2000专业版(Professional)是否会引起局域网地址分配混乱而导致瘫痪? 在XP下好象没必要费这个劲吧? 关于 数据表的问题。 在OCX控件中,如何设定数据库连接,怎么做才能更方便??? 谁能给初学者指条路,谢谢! 有没有人会有JAVAMAIL直接发送图片??? 大家的计算机都什么配置??想起我得升级经历是在~~~~ 数据库存取JPG的问题 vc++6.0 中,多个线程利用 ADO 如何同时访问数据库access2000 ,并进行更改记录操作。 向各位大哥紧急求助:哪位大侠知道安徽可以领高程证书了吗? 请指教,3KS!!! 关于报表中字段问题? 删除Linux 关于求最大列的问题!!! 要用java开发snmp网管软件,用哪种软件包比较方便?(急急急) 不足3平方厘米电路板的CAD软件的设计该如何实现? 请问如何在java 中读写Excel文件中数据,并将其写入SQL Server数据库中 oLE连接对象的操作………… 有誰在WinXp下装过Jbuilder6? 如何用Tprint把DBGrid上显示的网格和数据打印出来?谢谢! 请大侠帮我解决一个数据库的问题 请问如何操作分布在两个数据库中的表数据? 寻求合作(有关车间数据采集):谁要MONEY? 请问哪里有有关COM原理的Ebook可以下载???? 有谁能够告诉我有关网站发展历史的资料么?世界上第一个网站是怎样建成的?以后的发展脉络呢?如果有谁能够相告不胜感激啊。 讨论:可视化开发XSLT的工具!! 如何使用VC进行“毫秒级”以下的 定时器。即(xx uS 的定时器)。。。。。。。。。。。。 看电视(转载) jsp比asp,php等好么?(在线等候) 怎样实现图像的自动拼接? 报表输出问题 我用ActionManage做出的菜单为何汉字显示总是最后一个字少半边? c#里如何使用shbrowseforfolder?那位兄弟给个例子 如何实现MAC和IP绑定。 帮帮我啊,老大们我真的很急谢了 session问题?????? 报表输出问题 你愿意吗? 关于PB中做VFP的ODBC的一个问题 我为什么不能提问? 在PASCAL语言中的"集合"概念,转化到C语言中,该怎么实现? 帮我看一下这个程序. 谁人发个QB的编辑器给我? 如何改变应用程序的图标 网吧管理 帮我看一下这个程序. 谁看谁头疼的问题!你除外! 当杆的一端固定的时候,杆的受力该如何分析?一个例题,帮忙分析下,AO和BO是两个固定在墙上的杆,O点绑有一轻绳坠着一个重物,请问O点如何的受力? 顺便问一下,像这种一端固定的杆,一般要怎样 高中物理题求详解人与绳子的受力分析质量为50kg的某人沿一竖直悬绳匀速向上爬,m的过程中,手与绳子之间均无相对滑动,重力加速度g取10m/s2,则下列说法正确的是 ( ) A.绳子对人的静摩擦 二氧化碳的相对分子质量,快 质量为m的物体悬挂在轻质支架上,斜梁OB与竖直方向的夹角为θ.设水平横梁OA和斜梁OB作用于O点的弹力分别为F1和F2,以下结果正确的是( )A. F1=mgsinθ B.F1=mg/sinθ C.F2=mgcosθ D.F2=mg/cosθ 怎样算平均相对分子质量 1个CO2 分子的质量是(), 关于牛顿,伽利略,爱因斯坦的科学故事, 计算平均相对分子质量若将12.8克铜跟一定量的浓硝酸反应,铜耗完时,共产生气体5.6升(标准状况),则所得气体的平均相对分子质量为____答案是41.2怎么算? 生活中,增大或减小摩擦力的例子有哪些? 水平面光滑,AB间存在摩擦力,当力F很小的时候A受到向左的静摩擦力,那么B就会受到向右的与A的静摩擦力等大反向的力吗?力F很小的时候A不会动而B自己往前运动吗? 为什么两个不同的东西重同一高空会同时落下weishenme 有大、小两个圆,它们的面积相差62.8平方分米,且大圆半径是小圆半径的1.5倍,那么两个圆的面积各是多少? 质量为m的小木块放在质量M、倾角为θ的光滑斜面上,斜面在水平推力F作用下,在光滑水平面上运动,木块与斜面保持相对静止,斜面对木块的支持力是:A.mg/cosθB.mgcosθC. mgcosθ+FsinθD. mgcosθ+(mF/(m+M 所有的长度单位,最大有多大最小有多小我都要,如果有符号更好 有大、小、两个圆,它们的面积相差62.8平方分米,且大圆的半径是小圆半径的1.5倍,那么两圆的面积各是多少 空气在标准情况下得密度为293g/L,计算空气的评价相对分子质量数据是 1.293 空气的相对分子质量为29怎么算出来的? 已知两圆的半径比是4:3,大圆和小圆的面积之和是250平方厘米,小圆的面积是多少? 谁知道歇后语——“猴子屁股——”后面是什么 生活中,哪些地方需要摩擦力?怎样增大摩擦力? 问 已知大、小两圆的半径比是4:3 大圆与小圆的面积之和是250平方厘米 小圆的面积是多少 我知道算式:4²:3²=16:9 16+9+25 250÷25×9=90(cm²) 我想知道250÷25×9的意思 如图,一枚直径为d的硬币沿着直线滚动一圈,圆心经过的距离为多少? 歇后语:猴子屁股--( )歇后语:猴子屁股-( ) 1公斤的物体从10M的高空自由落体到地面的重量是多少? 一枚直径为d的硬币沿着直线滚动一圈,圆心经过的距离是_____.知道的说下,谢谢.(要有详细的过程) 猴子屁股象什么?拜托了各位 谢谢 空气中平均相对分子质量是29是如何得出的 一枚硬币直径为d沿着直线滚动一圈,圆心经过的距离是多少? 屁股上长了猴子 有什么说法老人家都说猴子长在身体前面有多富多贵之说长在屁股上就是背着猴子 ! 请你找找在生活中哪些地方需要增大摩擦力,哪些地方需要减小摩擦力.并说明理由. 将一个一公斤重物体从1000米落下,落地时冲击力是多少公斤. 关于猴子的歇后语 100米自由落体到下面的速度是多少? 50公斤铁球在5米高空自由落地冲击力是多大50公斤铁球在5米高空自由落地砸到铁板上冲击力是多大,我也不知道落地时间是指啥呀更不要说时间是多少了能给我算算吗冲击力是多少冲击力是多 一道高中物理题、受力分析、谢谢啦、、一个倾角为θ(90°>θ>0°)的光滑斜面靠在竖直的光滑墙壁上,一铁球在一水平推力F作用下静止于墙壁与斜面之间,与斜面间的接触点为A,如图所示, 一只熊从100米自由落体掉下来用和10秒..这只熊是啥颜色`?想想 血液进入肾脏后,血浆中一部分水、无机盐、_______和_______,及尿素通过_____而形成原尿. 如图所示,匀质球被一轻质细绳斜拉着靠在墙上保持静止,则关于墙对球的摩擦力的正确说法是(A)没有摩擦力 (B)有向上的摩擦力 (C)有向下的摩擦力 (D)不能确定 我要详细、容易看的 在“百度知道”复制的给我滚我说了 复制都给我滚 ...... 血液中含有多少血细胞、蛋白质、水、无机盐、葡萄糖、尿素? 【高中物理】一道受力分析的题目》》》》如图所示:人曲膝下蹲时,膝关节弯曲的角度为x,设此时大,小腿部的肌群对膝关节的作用力F的方向水平向后,且大腿骨,小腿骨对膝关节的作用力大致 感冒发烧可以吃面食吗,例如馒头,面条·· 伽利略和牛顿的科学研究方法的特点是什么 AB山谷之间d有长为2d的绳子,A点下方P处(3/4d)吊一人m(绳子拉紧),吊点处有人水平左拉力F使绳竖直.答案说绳子PA PB 受力一样,为什么?不是PB和F合力等于PA吗? 联系生活说出增大和减小摩擦力的做法各三例 人体血浆,原尿,尿液,组织液中哪个不含葡萄糖? 在不使用牛顿力学的情况下,如何证明日心说RT从日常生活经验进行归纳,地心说似乎很正确,而托勒密的理论虽繁琐但看上去没什么错误(以相对运动的角度来看,托勒密的归纳有合理性)以个 联系生活说出增大和减小摩擦力的做法三例 尿液与血浆相比,尿液中不含的成分是 1 血细胞,大分子蛋白质2,葡萄糖,血细胞 歇后语:大象屁股-( ) 小圆的半径是大圆半径的1/2,小圆的面积是大圆面积的( ) 一质量为1kg物体从100米的高空落下,阻力为重力的0.5倍,求落地时的速度 带“大象”词语的歇后语要4个 “派”是3.1415926的那个派圆的半径为r,半径增加2,得到一个大圆;半径减少1得到一个小圆.大圆的比小圆的面积大?5派 3派 (6r+3)派 (2r+5)派 一块石头质量为1kg,落地是速度10米每秒,求瞬间对地面的力! 大象喝水 歇后语快 CO2分子质量 这个题是求地面对斜劈的压力,如果用整体法,施加的F并没有竖直方向的分力,算出N=(M+m)g,但为啥如果分开算我就算得F对地面产生了压力,和前面求的不一样,这是为什么, 高中物理力的合成 为什么 绳子的拉力为100n CO2的相对分子质量
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘