如何开发又炫又高效web程序

willyomg

转自http://www.javaeye.com/topic/843630

随着个人电脑性能的不断提升, 各个浏览器厂商的不断努力, 让我们可以在客户端运行越来越庞大,复杂的javascript程序,当然结果也是可喜的,目前的web程序悦来也炫,能实现的特效也悦来越多. 其中给我们带来很大方便的一款web rich UI技术, 也不能称作新技术, 应该叫JS&CSS类库:Extjs...接下来我介绍一整套 自认为比较优越web的开发模式,前端就是基于Extjs的,跟大家一起分享和讨论.希望大家集思广益, 共同提高.

主体:
   前端基于Extjs
   Server交互使用Dwr-spring 或 Ext.Ajax.Request + Servlet
   Java的后台.(jawr,smartsprite,gson,dwr-spring)

这看上去并没有什么特别, 可能大多数人也都这么用.接下来从炫 和 高效角度 加以补充.

  说起旋的话, Extjs 官方提供了n多UI组件,能满足大多数的功能需求, 也可以自己集成已有的Extjs 组件进行扩展, 让以前较难实现的特效变的容易了许多, 例如Drag&drop等.Ext开放式的CSS样式模板(E:\ext-3.3.1\resources\css\yourtheme.css)可以方便容易的自定义样式.这些都为你搭建一个炫丽的web程序提供了极大的帮助,当然Jquery-UI也是不错的选择,本人用Extjs较多,在这里就不介绍JQUI. 当然为了实现炫丽和强大的前端功能,我们的web程序中需要大量的JS和CSS以及资源文件(image,swf,etc), 俗话说 鱼跟熊掌不能兼得么.

官方提供的组件demo: http://dev.sencha.com/deploy/dev/examples/
基于Extjs的桌面仿真web程序: http://qwikioffice.com/desktop-demo/

  高效,相对高效,尽量高效. 为了实现高效的web应用, 可以提升Web Server的性能,应用负载均衡器(在华为时候普遍用F5),做集群,提升网络带宽(大些的公司使用Akamai资源服务器),买更牛的个人电脑,用更牛的浏览器. 但是这些可能都不是我们应该考虑的解决方案.开发人员更多的要从程序上提高:

  1,)让你的后台服务程序更加高效,通常不做大量的IO操作,不执行愚蠢的sql,后台服务所消耗的时间应该不是web项目性能的瓶颈(注: 如果要使用集群web server,在做程序时也需要考虑, 尤其用Spring IOC).

  2,)让web程序需要的资源文件尽可能的简洁干净,提高server响应和传输效率.使用AJAX. 控制每次请求的数据传输量均衡与浏览器处理能力.我介绍的这个模式着重优化了这部分,尤其适用于大量JS,CSS和资源文件的web项目.
首先介绍2个小东西,这些是优化的关键.

  @SmartSprite(http://csssprites.org/):通过给已有的CSS加注释, SS可以把零散的小图片(图标)压缩成若干张相对大的图片,以减少对web server的请求次数, 同时生成可以正确引用到这些小图片的CSS.

  @JAWR(https://jawr.dev.java.net/): 可以压缩捆绑JS和CSS,并对压缩的JS,CSS以及图片资源文件提供缓存, 这样可以提高web server对这类请求的相应,由于压缩,可以减少此类请求在网络的传输时间.

通过使用以上两个小东西,可以让JS,CSS和资源文件尽可能快速地传输到浏览器,建议按需索取,尽量只get必须的,不是马上用到的,再使用前一刻再下载(按程序需要设计下载策略,$JIT是很好的即取即用工具).其他的请求,保证没有问题的情况下, 尽量多的使用Ajax, 尽可能的按需索取数据,按需更新.大数据量时,应考虑分页或者更高效的UI组件,例如: EJS treegrid: (http://www.treegrid.com/treegrid/www/). 如果逻辑允许, 尽量少的做页面跳转,尤其每个页面都引用大量JS的时候, 尽量考虑使用静态页面(适用本模式).
  
  3,) 让HTML,JS和CSS运行更高效稳定,这个不是三言两语就能说清楚的,同时大多数人都知道其中的规则,我也就不多说了.

高效,就要提高后台程序的性能, 提高server响应的性能, 提高传输性能, 提高浏览器中程序的性能.

以上是我的一点浅薄之见,希望大家多给意见,有什么好的模式和技术请一起分享.

最近读了一下qwikioffice的源代码,在那基础上也做了个小东东.如附图. 如果有兴趣可以一起讨论.