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

   随着个人电脑性能的不断提升, 各个浏览器厂商的不断努力, 让我们可以在客户端运行越来越庞大,复杂的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的源代码,在那基础上也做了个小东东.如附图. 如果有兴趣可以一起讨论.

评论

45 楼 cscs31 2010-12-17  

ExtJs的性能问题，之前没有什么体会，但是在项目中还是遇到了这样的场景，在一个大的编辑页面，大概有100+个字段，当然有些字段是自动填充的数据，还有几个Grid做为子表的编辑，这些控件在一个界面里，这个时候加载显示的时候会很慢，最后还是屈服了，使用了JSP来代替之前的代码，我始终觉得这个是控件数量太大的问题，ExtJs很多都是在运行时来render的，那么这个时间可能会很长，很难避免，就像有位仁兄说的，毕竟出效果要付出代价，时间换效果，空间换时间这些东西可能都是我们要把握的东西吧。

44 楼 云和山的彼端 2010-12-17  

LoriSun 写道

smallsnake 写道

何必那么多的插件
简单一点：Flex + Ejb3

你不需要用Life Cycle(for flex3) 或 FDS(for flex2) ?

在你研发新框架的时候世界上出现了个东西叫Blazeds...
而且flex的DataGrid给1000条数据不分页是一点问题都没有的。
ExtJS的速度不在可接受范围内。

43 楼 ycy198168 2010-12-17  

从YUI用到EXT目前的版本，说实话有过辛酸，总的来说比目前最新版本的EXTJS还是满意的。

42 楼 LoriSun 2010-12-17  

bitray 写道

如果数据量真的很大，又不是外网访问，用applet嵌入吧。呵呵
java作为重量级解释器能够缓解很大压力。外网会比较辛苦

Java web start? 有这样的项目,其实就是swing(或者引入其他ui). 看上去不是那么美观, 可以应用的组件也太少..这种方式不合适当前的web项目. Reverse Ajax出现之前, 有个ServZone的产品, 用这种方式做Push, 曾经很流行.

41 楼 LoriSun 2010-12-17  

smallsnake 写道

何必那么多的插件
简单一点：Flex + Ejb3

你不需要用Life Cycle(for flex3) 或 FDS(for flex2) ?

40 楼 LoriSun 2010-12-17  

    开发稍微复杂的项目Flex还是存在性能问题的, 之所以这段时间一直用Extjs, 就是为了重写之前的一套Flex+Weblogic Portal的系统. Look&Feel(自己定制,有专门web designer设计)看上去并不输于Flex, 性能要优于Flex 内嵌其他的东西也比较灵活(例如EJS TreeGrid处理大数据量), 但是你提到的支持多浏览器的问题, 还是很让人头疼的, Extjs官方称是跨浏览器的, 虽然大部分是没问题, 在有些细微的地方还是有所不同, 为了这些细微的差异,费了不少的周折, 跨浏览器方面不如Flex. Flex在影音处理方面是无与伦比的, 再做复杂逻辑的web项目性能方面有待提高.

skyfen 写道

开发又炫又高效web程序，哪就用flex
我们以前也考虑过用EXT，项目组中最终决定用了Flex,项目成员中有些人曾经用Ext做了些项目，Ext有些功能在各个浏览器中有些功能也会有表现不一致。而且出了问题比较难调试，代码可读性不是很好。用flex易用性，代码可读性强，特别哪些学过java的，更容易上手不说，对于程序员来说，做出的项目既炫又高效程序，flex是不错选择。
我们在做国家食品安全备案系统，这个系统是全国所有城市、县级、乡政级都用的一个系统也是用flex开发，数据库Oracal,开发语言python.一天访问量大得惊人。效果表现力，用户体验方面反应比较好。
最近发现一款，国产的js框架，类似于Ext,这个框架longboo,用了一段时间，还不是很成熟，在IE上表现有点小问题，新版本肯定会修复的；在firefox表现很好，不过总体感觉还好。最重要的是界面要漂亮。对程序员来说要简单易用,速度快。也确实比Ext容易上手些。
JS框架总的来说，表现上还是没有flex哪么帅。JS框架受限于各种浏览器兼容Javascript版本的支持程度，所以也会有表现不一的情况。JS框架的官方也只会对几种主流浏览器测试兼容性，也难针对它们做到非常全面的测试，或多或少表现出差异也是情有可原的。用flex就不会出现浏览器兼容的问题，但是要求安装flash player插件。目前来说95%的电脑都装有这种插件。sliver light也在电脑安装率非常低。
现在adodb flash,sliver light html5 竞争很激烈，html5传说很好，也是趋势，但是要到2022年才能出标准。时间哪么长，现阶段最实用的莫过于flex。html5即使标准出来，flash也不一定就会退出市场的，flash,sliver light 只会更加丰富互联网，要说谁取代谁，哪还很难说。

39 楼 smallsnake 2010-12-17  

何必那么多的插件
简单一点：Flex + Ejb3

38 楼 archerfrank 2010-12-17  

skyfen 写道

开发又炫又高效web程序，哪就用flex
我们以前也考虑过用EXT，项目组中最终决定用了Flex,项目成员中有些人曾经用Ext做了些项目，Ext有些功能在各个浏览器中有些功能也会有表现不一致。而且出了问题比较难调试，代码可读性不是很好。用flex易用性，代码可读性强，特别哪些学过java的，更容易上手不说，对于程序员来说，做出的项目既炫又高效程序，flex是不错选择。
我们在做国家食品安全备案系统，这个系统是全国所有城市、县级、乡政级都用的一个系统也是用flex开发，数据库Oracal,开发语言python.一天访问量大得惊人。效果表现力，用户体验方面反应比较好。
最近发现一款，国产的js框架，类似于Ext,这个框架longboo,用了一段时间，还不是很成熟，在IE上表现有点小问题，新版本肯定会修复的；在firefox表现很好，不过总体感觉还好。最重要的是界面要漂亮。对程序员来说要简单易用,速度快。也确实比Ext容易上手些。
JS框架总的来说，表现上还是没有flex哪么帅。JS框架受限于各种浏览器兼容Javascript版本的支持程度，所以也会有表现不一的情况。JS框架的官方也只会对几种主流浏览器测试兼容性，也难针对它们做到非常全面的测试，或多或少表现出差异也是情有可原的。用flex就不会出现浏览器兼容的问题，但是要求安装flash player插件。目前来说95%的电脑都装有这种插件。sliver light也在电脑安装率非常低。
现在adodb flash,sliver light html5 竞争很激烈，html5传说很好，也是趋势，但是要到2022年才能出标准。时间哪么长，现阶段最实用的莫过于flex。html5即使标准出来，flash也不一定就会退出市场的，flash,sliver light 只会更加丰富互联网，要说谁取代谁，哪还很难说。

炫确实很炫，就是在上面操作总觉得有点笨重。

37 楼 EldonReturn 2010-12-17  

Flex太笨重，普通Ajax网页很快就能打开的东西Flex得等半天。

skyfen 写道

开发又炫又高效web程序，哪就用flex
我们以前也考虑过用EXT，项目组中最终决定用了Flex,项目成员中有些人曾经用Ext做了些项目，Ext有些功能在各个浏览器中有些功能也会有表现不一致。而且出了问题比较难调试，代码可读性不是很好。用flex易用性，代码可读性强，特别哪些学过java的，更容易上手不说，对于程序员来说，做出的项目既炫又高效程序，flex是不错选择。
我们在做国家食品安全备案系统，这个系统是全国所有城市、县级、乡政级都用的一个系统也是用flex开发，数据库Oracal,开发语言python.一天访问量大得惊人。效果表现力，用户体验方面反应比较好。
最近发现一款，国产的js框架，类似于Ext,这个框架longboo,用了一段时间，还不是很成熟，在IE上表现有点小问题，新版本肯定会修复的；在firefox表现很好，不过总体感觉还好。最重要的是界面要漂亮。对程序员来说要简单易用,速度快。也确实比Ext容易上手些。
JS框架总的来说，表现上还是没有flex哪么帅。JS框架受限于各种浏览器兼容Javascript版本的支持程度，所以也会有表现不一的情况。JS框架的官方也只会对几种主流浏览器测试兼容性，也难针对它们做到非常全面的测试，或多或少表现出差异也是情有可原的。用flex就不会出现浏览器兼容的问题，但是要求安装flash player插件。目前来说95%的电脑都装有这种插件。sliver light也在电脑安装率非常低。
现在adodb flash,sliver light html5 竞争很激烈，html5传说很好，也是趋势，但是要到2022年才能出标准。时间哪么长，现阶段最实用的莫过于flex。html5即使标准出来，flash也不一定就会退出市场的，flash,sliver light 只会更加丰富互联网，要说谁取代谁，哪还很难说。

36 楼 whaosoft 2010-12-17  

好久没用ext了 不是太喜欢那个

35 楼 skyfen 2010-12-17  

开发又炫又高效web程序，哪就用flex
我们以前也考虑过用EXT，项目组中最终决定用了Flex,项目成员中有些人曾经用Ext做了些项目，Ext有些功能在各个浏览器中有些功能也会有表现不一致。而且出了问题比较难调试，代码可读性不是很好。用flex易用性，代码可读性强，特别哪些学过java的，更容易上手不说，对于程序员来说，做出的项目既炫又高效程序，flex是不错选择。
我们在做国家食品安全备案系统，这个系统是全国所有城市、县级、乡政级都用的一个系统也是用flex开发，数据库Oracal,开发语言python.一天访问量大得惊人。效果表现力，用户体验方面反应比较好。
最近发现一款，国产的js框架，类似于Ext,这个框架longboo,用了一段时间，还不是很成熟，在IE上表现有点小问题，新版本肯定会修复的；在firefox表现很好，不过总体感觉还好。最重要的是界面要漂亮。对程序员来说要简单易用,速度快。也确实比Ext容易上手些。
JS框架总的来说，表现上还是没有flex哪么帅。JS框架受限于各种浏览器兼容Javascript版本的支持程度，所以也会有表现不一的情况。JS框架的官方也只会对几种主流浏览器测试兼容性，也难针对它们做到非常全面的测试，或多或少表现出差异也是情有可原的。用flex就不会出现浏览器兼容的问题，但是要求安装flash player插件。目前来说95%的电脑都装有这种插件。sliver light也在电脑安装率非常低。
现在adodb flash,sliver light html5 竞争很激烈，html5传说很好，也是趋势，但是要到2022年才能出标准。时间哪么长，现阶段最实用的莫过于flex。html5即使标准出来，flash也不一定就会退出市场的，flash,sliver light 只会更加丰富互联网，要说谁取代谁，哪还很难说。

34 楼 bitray 2010-12-17  

如果数据量真的很大，又不是外网访问，用applet嵌入吧。呵呵
java作为重量级解释器能够缓解很大压力。外网会比较辛苦

33 楼 archerfrank 2010-12-17  

Ext是不错，性能也还可以，当然分页是必须的，基本上现在的系统用起来很流畅，现在的系统opoa，是不错的选择。

32 楼 LoriSun 2010-12-17  

181054867 写道

extjs太重量级了，不适合开发大众化的界面，用来做某些内部管理人员使用的系统最适合，不需要考虑太多性能问题，JQuery是最好的javascript类库

其实重量级是相对的, 可能你还没有遇到功能需求适合用到Extjs的地方,不可否认Jquery是非常方便的.

31 楼 LoriSun 2010-12-17  

ivyshark 写道

很多客户看到ext就头疼 太多人用了
没有一点界面设计的思想
还觉得自己又炫又酷...

在源码中有这个自定制样式模板, 你可以研究研究再说.
resources\css\yourtheme.css

你也许只看到它默认的样子, 你说它没有界面设计思想;
如果你能设计出好的UI, 利用ExtJs都能帮你实现, 但是要考虑适合与否.
例如:没有什么功能需求, 只是图片的堆积, 那不适合用Extjs.

30 楼 LoriSun 2010-12-17  

witcheryne 写道

只要响应快，少出错... 就行..

要炫~ 很简单, Don't make them think... 多研究研究用户体验...

这帖子有点标题党的感觉。。。。

呵呵, 出错是写代码水平问题, 与此题无关.

去看看这个: http://qwikioffice.com/desktop-demo/
要炫,你说很简单, 不用Extjs或类似的东西, 你自己实现起来看看.

29 楼 181054867 2010-12-17  

extjs太重量级了，不适合开发大众化的界面，用来做某些内部管理人员使用的系统最适合，不需要考虑太多性能问题，JQuery是最好的javascript类库

28 楼 ivyshark 2010-12-17  

很多客户看到ext就头疼 太多人用了
没有一点界面设计的思想
还觉得自己又炫又酷...

27 楼 witcheryne 2010-12-17  

只要响应快，少出错... 就行..

要炫~ 很简单, Don't make them think... 多研究研究用户体验...

这帖子有点标题党的感觉。。。。

26 楼 skzr.org 2010-12-17  

depravedangel 写道

lkj107 写道

extjs 有license的问题，小公司无所谓，大公司有问题，如果有extjs无法实现到功能，需要在其基础上扩展

为什么总要抓住其license不放呢？说白了人家也是一家软件开发公司，其开发人员也是需要付工资的，是人都是需要吃饭的。

你总不能让客户跟你说：喂，你做的项目是要收费的，网上好多免费的呢 

如果你觉得其做的东西会给你带来回报（想想人家一个license多少钱，你自己开发成本多少），比我自己开发一套这样的东西成本来的低，效果来得好，这就够了。

:-)，邪恶的想，你开发出来后开源于ExtJS相关的，甚至产品免费的
收产品的培训和咨询费用，应该不用购买商业的ExtJS License了吧？？？！！！

ExtJS其实性能还是不错的