[原创]总结三年使用Extjs开发One Page One Application的SSH架构经验

我已经实践互联网OPOA的SSH架构足足三年了，总结一下以下经验，欢迎各位讨论和拍砖：
优点：
1. 用单页面只加载一次Extjs类库，加载页面速度快，即使放互联网，部署产品阶段时，用GZIP压缩类库，把其他js统一打包，容量也不会很大，可以接受。
2. 提高开发效率1，我前端使用了3.0的Direct的js类库，后台使用网上找的Direct开源后台，js就可以直接访问后台service方法，action的代码量几乎等于0，业务都在service实现，request中的session对象通过在方法增加Map对象补充。
3. 提高开发效率2，在使用Direct技术的同时，编写service公共类用于继承，特别是实现查询的方法，在脚本上定义查询哪个Java对象，SQL条件等，使用Direct技术直接访问service的公共类方法，减少编写多个查询方法，如果更完善点，增删改都可以用这种方式实现，现阶段只实现的了grid的增删改。
4. 提高开发效率3，store的JsonReader不用手工写，在第一次加载Action的时候除了映射Service方法给前台Direct，还可以把需要的reader从java对象动态生成给前台。
4. 提高开发效率4，在开发阶段，使用动态加载脚本的方式调试脚本，如用Jsloader，为了避免修改脚本后浏览器缓存没有加载脚本，编写一个action转发到指定的脚本，action.do?id=XXXX(随机数)，强制每次访问脚本都重新加载，这样，我调试脚本就不用刷新页面，关了tab，重新打开即可加载最新脚本，通过动态加载脚本，就可轻易把功能界面分割成多个子脚本，通过主功能脚本动态调用和调试子脚本，非常方便。

缺点：
1. 开发人员培训周期长，根据具体开发人员的水平，快的二、三周左右，慢的三个月也有，这个时间是以整个架构熟悉包括前后台技术，能够单独实现一个功能模块计算。因此，对新的开发人员必须有一定的培训机制和培训环境，特别注意代码管理。
2. 代码维护困难，即使使用了编写子脚本的开发模式，维护复杂功能的代码还是非常头痛，所以代码管理和详细设计文档是必须的。
3. 开发太灵活，工作量翻倍增加。使用了Extjs以后，其实你B/S模式的开发已经非常接近C/S模式开发，每增加一个按钮、窗口、Tab或一些交互的功能，都会使你开发工作量翻倍增加，即使脚本开发经验丰富的我，也头痛不已，有时用jsp开发一两天实现的功能，你会花一个星期实现，当然实现了非常好看和实用，操作都一个界面完成，但你要考虑每增加一个小功能，因为交互性可能会影响其他功能，这样有很一部分时间就花在调试和完善代码的阶段。
4. IE浏览器的死穴。由于IE浏览器占用内存只增无减，我想尽办法也没能解决，如果你一个功能界面很庞大，再用多个Tab动态加载子脚本，除了操作响应感觉越来越慢外，如果一次性关闭多个Tab，就会提示“javascript运行慢，是否终止”，如果简单的功能界面，交互性不强，就不会有太大影响，所以要用Extjs做大系统，不能不考虑这方面，使用chome浏览器可以解决内存问题，但你能强制互联网上的用户用chome吗？现在我解决关闭Tab的问题，是通过加入延迟关闭机制，逐一关闭，但也不能100%解决，更解决不了IE内存不断膨胀的问题，最后用的慢了，让用户Reload页面吧。
5. 安全性。前台脚本实现了大部分操作功能，安全性就很成问题，不管你实用什么手段，脚本代码都是要暴露的，reader和后台方法就更暴露无疑了，也不是不可以解决，转换的时候改名吧，所以这都是影响Extjs开发的MS系统一直不能占据互联网市场的主要原因。

    现在我在考虑新的架构，其实也不是新了，就是使用Yahoo UI，简单看了一下，发现YUI对性能方面考虑更完善点，新架构将恢复以前开发jsp页面的模式，页面使用多少YUI控件就加载多少，减少界面交互功能的开发，按实际需要设计开发，不追求C/S模式的操作方便性了。

    以上是我见到大家讨论热烈，总结了之前几年的开发经验和挫折，欢迎大家讨论和拍砖。

评论

44 楼 xiaoqin_007 2011-06-26  

谢谢分享，看了这篇帖子以后，感觉获益匪浅！ 

有个问题想请教一下：
1.

引用

store的JsonReader不用手工写，在第一次加载Action的时候除了映射Service方法给前台Direct，还可以把需要的reader从java对象动态生成给前台。

“需要的reader从java对象动态生成给前台”——这个是如何做到的，能否解释的清楚一点？



另外 关于JS动态加载，我建议使用Ext.loader， 这个在Ext3.3.3中有了，相信已经有人用了　

ＰＳ：如果能和你聊聊最好，ＱＱ已经短消息你了

43 楼 rocker96 2011-05-11  

minlo 写道

rocker96 写道

4. 提高開發效率4，在開發階段，使用動態加載腳本的方式調試腳本，如用Jsloader，為了避免修改腳本後瀏覽器緩存沒有加載腳本，編寫一個action轉發到指定的腳本，action.do?id=XXXX(隨機數)，強制每次訪問腳本都重新加載，這樣，我調試腳本就不用刷新頁面，關了tab，重新打開即可加載最新腳本，通過動態加載腳本，就可輕易把功能界面分割成多個子腳本，通過主功能腳本動態調用和調試子腳本，非常方便。

請教一下...實際是如何操作的呢.

我現在是在 index.html 一次載入所有 js
現時約 60 個,  將來會最少加到 > 100 個
eg <script type="text/javascript" src="../doc/DocForm.js"></script>

頁面是用 border layout,
左面是 menu tree, 右面是 main TabPanel.

每次少量修改調試也用 F5 重新載入一次,
除了載入要時間...要找到剛才測試的Tab也click來click去.

請教大家...提供一些好方法及小弟吧..thx..

    其实就是设置Ajax同步访问，而Extjs只有异步访问，所以另外写一个脚本，见附件中代码的syn参数，syn=true设置同步访问后，可以访问js等多种格式文件，但由于浏览器缓存关系，开发中修改了js，必须刷新页面才能更新js脚本，为了实现同步访问js并实时调试，就通过编写action.do?id=XXX(随机数)，每次url都不同，避免浏览器缓存。同步加载多个脚本的方式，程序是一个挨着一个顺序执行，这样Extjs就可以动态加载各种控件，异步适合数据访问，灵活使用同步异步会解决你很多问题。

42 楼 minlo 2011-05-11  

rocker96 写道

4. 提高開發效率4，在開發階段，使用動態加載腳本的方式調試腳本，如用Jsloader，為了避免修改腳本後瀏覽器緩存沒有加載腳本，編寫一個action轉發到指定的腳本，action.do?id=XXXX(隨機數)，強制每次訪問腳本都重新加載，這樣，我調試腳本就不用刷新頁面，關了tab，重新打開即可加載最新腳本，通過動態加載腳本，就可輕易把功能界面分割成多個子腳本，通過主功能腳本動態調用和調試子腳本，非常方便。

請教一下...實際是如何操作的呢.

我現在是在 index.html 一次載入所有 js
現時約 60 個,  將來會最少加到 > 100 個
eg <script type="text/javascript" src="../doc/DocForm.js"></script>

頁面是用 border layout,
左面是 menu tree, 右面是 main TabPanel.

每次少量修改調試也用 F5 重新載入一次,
除了載入要時間...要找到剛才測試的Tab也click來click去.

請教大家...提供一些好方法及小弟吧..thx..

41 楼 maojin 2011-05-11  

学习中，看的茫然

40 楼 braig 2011-05-05  

受益匪浅，我也在搞类似的东西，不过的是jquery，自己写常用的ui,前后台也是全部用json。

39 楼 czpae86 2011-05-04  

用Extjs 3年了,最近还做了一个ERP,就一个人做前端,开始封装了一些基类,都不知道怎么开始的,到现在基本完成了,
还是多亏有Extjs

38 楼 key232323 2011-04-17  

KimHo 写道

rocker96 写道

jjx 写道

其实这种结构同c/s分布式程序没有区别

但如果用delphi+dataabstract这样的分布式框架，或是windows forms+wcf ,开发效率提高的可不是几倍，而且现在c/s的程序更新分发用自动更新或是潜入语言，已经同b/s没有区别了，人类总是为形式所累

我以前也是delphi出身，其实B/S再怎么强开发效率都不如C/S吧，为什么搞B/S，推B/S，就是为了好忽悠老板呀，混口饭吃而已，extjs的控件设计模式很像delphi，学delphi的时候没学会写控件，所以现在用extjs写控件，呵呵。

BS架构的最大优点在于：部署和系统升级……

当解释型语言流行的时候，c/s下的部署和升级也是很方便的——差别就是一个已经安装了默认的浏览器，一个绿色copy一份文件而已

37 楼 cucumber 2011-04-13  

看了楼主的帖子，感受颇多，一路走来大家都在做相似的事情，有兴趣可联系我，多多沟通。

msn：[e-mail]

36 楼 chinafather 2011-04-11  

4.0 这里我是这样试的：
  Ext.Loader.setConfig({
            enabled: true,
            basePath: './src'
        });
        Ext.Loader.setPath('Ext', './src');
这段是要的，另外 boot那里加载core；
测试的是grid部分的html，我随便选了个 binding.html;其实加载是可以的，问题是在于最后出了个错，一直不得要领：
[Ext.ClassManager] Cannot create an instance of unrecognized alias: reader.xml

不知道有人能协助下吗

35 楼 goodboy 2011-04-11  

chinafather 写道

让你笑了 写道

chinafather 写道

mygol 写道

chinafather 写道

楼上的哥们 ext目前还是太大，做ria可以用，而且界面风格统一不象jq的插件风格迥异，就是希望ext啥时候能真正实现小这个功能

ext4现在可以异步加载

目前beta版本ext4 怎么做到异步加载？目前ext4的版本中 提供的都是直接加载 all的，虽然表面上可以Ext.define()这样来做异步，但是你实现了吗？至少ext自己还没把他们的包都拆开

不知道你是怎么来试验异步加载的..不用非加载ALL...虽然BETA是用ALL..
你可以直接加载CORE...

我现在全部用define , create 加载各个功能类,OPOA..感觉到前所未有的方便..而且这样文件结构也很清楚...

哥们我就是用core全部加载，然后用define和create，但是似乎依旧失败，不知道你有例子吗？

打造Ext2.0模块化单页系统Demo 4.0没法用了

34 楼 chinafather 2011-04-11  

让你笑了 写道

chinafather 写道

mygol 写道

chinafather 写道

楼上的哥们 ext目前还是太大，做ria可以用，而且界面风格统一不象jq的插件风格迥异，就是希望ext啥时候能真正实现小这个功能

ext4现在可以异步加载

目前beta版本ext4 怎么做到异步加载？目前ext4的版本中 提供的都是直接加载 all的，虽然表面上可以Ext.define()这样来做异步，但是你实现了吗？至少ext自己还没把他们的包都拆开

不知道你是怎么来试验异步加载的..不用非加载ALL...虽然BETA是用ALL..
你可以直接加载CORE...

我现在全部用define , create 加载各个功能类,OPOA..感觉到前所未有的方便..而且这样文件结构也很清楚...

哥们我就是用core全部加载，然后用define和create，但是似乎依旧失败，不知道你有例子吗？

33 楼 rocker96 2011-04-10  

atian25 写道

KimHo 写道

racke 写道

IE下性能的问题可以考虑chromeframe
http://code.google.com/chrome/chromeframe/
可以在页面上提示用户安装，可以解决一部分问题，但毕竟选择权还是在用户。

象楼主这类application另可以考虑用gwt版的 gxt.
http://www.sencha.com/products/extgwt/
刚开始可能觉得开发速度不如js，但是随着开发的深入需求的变化，越来越能体会到java的好处。
js这样的语言很难做大型的设计。

GXT用的是后处理模式，性能不如js的，优点是方便调试而已。
js这样的语言很难做大型的设计？笑而不语

笑而不语,不知道GMAIL和WEBQQ是否算大

最近用了一下webQQ，靠，好他妈的强大，js+iframe的完美结合，no flash，just in one explorer，google阅读器给我扔在一边了，现在用webQQ里面的QQ阅读看博客，呵呵。

32 楼 rocker96 2011-04-10  

    首先要为楼上的回复热烈鼓掌，Extjs带给了我们很多很多，以前用delphi，简单呀，拖动控件、配置、执行就完了，但不知道到底控件里面做了什么，Extjs和其他的开源框架告诉了我们底层是怎样实现的，如何设计美观的控件和扩展，但留给我们的问题也很多，这是我们为了利用Extjs的优点而必须面对的，就是必须通过架构设计才能适合团队开发，提供开发效率。但对于新手，公司里成熟的架构一定是封装好的，他学到的有限，对于架构设计者，为了保护心血成果和团队的利益，必须封装和保护，不可能随便在网上开源，所以很多想接触Extjs的新手，只能小大小闹，发挥和创作的空间有限。

    从几年前自己在javaeye提出yui-ext以来，Ext在论坛里的讨论只能算过得去，不到热烈的程度，很多人都希望有成熟的基于Extjs的开源产品，减少学习的弯路，感受Extjs的强大，但至今没有出现，因为我们都为自己的团队和公司设计了架构，不能随便开源，有保密协议呀。要开源必须有人才、超前的意识、胆量和热衷，什么时候国内能出现团队、或者感兴趣的高手组织在一起，贡献自己的开发经验，设计一套基于Extjs的开源项目，类似SpringSide的开源，Extjs在国内的应用将更广泛更成熟。

    关于几位提到没用过Direct，其实和DWR的功能差不多，也是通过脚本调用action接口，只是我在action层把service的接口提供给前端js，能让前端js调用后台service层接口而已，每次调用也是js -> action -> service。

    再次感谢楼上的回复，让我获益良多，欢迎批评指导。

31 楼 ffychina 2011-04-10  

我做J2ee开发有9年了，玩Extjs有三年了，这三年里做了6个项目。关于楼主提出的优缺点，我也针对楼主的优缺点回复：
优点：
1:同意
2.没用过Direct，没想过直接调用Service层，因为我压根只有Action一层。（我是反SSH，有自己的后台开发框架）
3.因为用自己的框架，有自动生成的ORM查询类，那些普通的CRUD不花一行代码，不用配置一行XML，新手使用后台能快速上手，学习成本很低。
4.你搞个过滤器把action.do设为nocache就行了，不过你通过增加参数在浏览器端实现强制刷新也行。另外我在Tab加载的是Iframe，所以每次都要刷新。用iframe的优点把tab关掉内存就释放了，缺点是render慢，用FF大约是2.5秒。

缺点：
1.同意
2.同意
3.同意，我的解决办法是写了java2js编译器，用java生成js，这样可以用到eclipse对java语言的强类型优点，拥有自动完成，参数提示，错误提示，代码重构等好处，很大程度解决了js代码维护成本过高的问题，也降低了extjs的学习成本。
4.同意，我跟客户强调只支持IE8，FF，chrome，其他的IE6,7,Opera，safari都不支持。目前IE6虽然也能支持，但就是有点慢，css的原因导致版面有点问题，但也能用。不打算继续支持IE6了，如果客户一定要用IE6,那我宁可不用extjs.
5.这是后台的问题，或在后台能够解决，跟extjs前端框架关系不大。

补充：
1.我们团队也写了很多自定义的extjs组件，尽量减少extjs业务代码量，加快了开发效率和维护成本，但也提高了开发人员的要求。
2.KimHo认为JS能实现大型的项目，我同意，但我也认为目前JS的维护成本比JAVA高，我还是喜欢强类型的，方便在编译器报错的语言。目前写JS都是手写代码，听说intellj对js开发有优势，在观望中，不知道谁能给出更好的建议.
3.C/S的开发效率比B/S要高很多，也能做到自动升级和部署，双方优势都很明显，具体要看项目要求和开发团队所擅长的技术。我想最终的结果是你中有我，我中有你。

30 楼 jjx 2011-04-10  

KimHo 写道

rocker96 写道

jjx 写道

其实这种结构同c/s分布式程序没有区别

但如果用delphi+dataabstract这样的分布式框架，或是windows forms+wcf ,开发效率提高的可不是几倍，而且现在c/s的程序更新分发用自动更新或是潜入语言，已经同b/s没有区别了，人类总是为形式所累

我以前也是delphi出身，其实B/S再怎么强开发效率都不如C/S吧，为什么搞B/S，推B/S，就是为了好忽悠老板呀，混口饭吃而已，extjs的控件设计模式很像delphi，学delphi的时候没学会写控件，所以现在用extjs写控件，呵呵。

BS架构的最大优点在于：部署和系统升级……

现在的c/s 部署已经完全没有问题，除了自动更新的外，你还可以将系统设计为flash或silverlight这种模式，动态从服务器下载程序

其实b/s现在和c/s的最大不同还是在于c/s特别是本机win32程序默认的可能没有任何安全限制，能访问本机资源，但既然是企业应用，这种影响自然也可以忽略了

29 楼 让你笑了 2011-04-10  

chinafather 写道

mygol 写道

chinafather 写道

楼上的哥们 ext目前还是太大，做ria可以用，而且界面风格统一不象jq的插件风格迥异，就是希望ext啥时候能真正实现小这个功能

ext4现在可以异步加载

目前beta版本ext4 怎么做到异步加载？目前ext4的版本中 提供的都是直接加载 all的，虽然表面上可以Ext.define()这样来做异步，但是你实现了吗？至少ext自己还没把他们的包都拆开

不知道你是怎么来试验异步加载的..不用非加载ALL...虽然BETA是用ALL..
你可以直接加载CORE...

我现在全部用define , create 加载各个功能类,OPOA..感觉到前所未有的方便..而且这样文件结构也很清楚...

28 楼 skzr.org 2011-04-09  

<div class="quote_title"><span style="color: #ff0000; font-size: medium;">提到GMAIL不知道大家注意过没：实际上是用的iframe布局的</span></div>
<div class="quote_title"><span style="color: #ff0000; font-size: medium;">webqq里面也有iframe，我的神</span></div>
<div class="quote_title">racke 写道</div>
<div class="quote_div">
<div class="quote_title">atian25 写道</div>
<div class="quote_div">
<div class="quote_title">KimHo 写道</div>
<div class="quote_div">
<div class="quote_title">racke 写道</div>
<div class="quote_div">IE下性能的问题可以考虑chromeframe<br>http://code.google.com/chrome/chromeframe/<br>可以在页面上提示用户安装，可以解决一部分问题，但毕竟选择权还是在用户。<br><br>象楼主这类application另可以考虑用gwt版的 gxt.<br>http://www.sencha.com/products/extgwt/<br>刚开始可能觉得开发速度不如js，但是随着开发的深入需求的变化，越来越能体会到java的好处。<br>js这样的语言很难做大型的设计。<br>
</div>
<br><br>GXT用的是后处理模式，性能不如js的，优点是方便调试而已。<br>js这样的语言很难做大型的设计？笑而不语</div>
<br><br><br>笑而不语,不知道GMAIL和WEBQQ是否算大</div>
<br><br><br>理解你们说的意思。用JS做当然也能做，gmail也是例子，问题是很难找到有相应能力开发人员，除非是google，腾讯之类的公司，做大型的项目还是用比较健壮的语言为佳，很多问题编译时就能发现，组件的封装更加清晰。维护，重构，和单元测试都有相应的工具支持，人员也容易配备。否者团队开发中更容易出现问题。<br>至于运行效率，一群没有太多经验的程序员写出的代码还是和gwt编译出的没太大可比性。<br><br>这是我们项目中的经验和教训。楼上几位的笑而不语说得有点冲了。</div>
<p> </p>
<p> </p>

27 楼 atian25 2011-04-08  

用ext开发确实对开发人员要求很高,一旦人员流失,很难短时间找到接替的.
这就要求前期能对系统做好架构和封装.

26 楼 racke 2011-04-07  

atian25 写道

KimHo 写道

racke 写道

IE下性能的问题可以考虑chromeframe
http://code.google.com/chrome/chromeframe/
可以在页面上提示用户安装，可以解决一部分问题，但毕竟选择权还是在用户。

象楼主这类application另可以考虑用gwt版的 gxt.
http://www.sencha.com/products/extgwt/
刚开始可能觉得开发速度不如js，但是随着开发的深入需求的变化，越来越能体会到java的好处。
js这样的语言很难做大型的设计。

GXT用的是后处理模式，性能不如js的，优点是方便调试而已。
js这样的语言很难做大型的设计？笑而不语

笑而不语,不知道GMAIL和WEBQQ是否算大

理解你们说的意思。用JS做当然也能做，gmail也是例子，问题是很难找到有相应能力开发人员，除非是google，腾讯之类的公司，做大型的项目还是用比较健壮的语言为佳，很多问题编译时就能发现，组件的封装更加清晰。维护，重构，和单元测试都有相应的工具支持，人员也容易配备。否者团队开发中更容易出现问题。
至于运行效率，一群没有太多经验的程序员写出的代码还是和gwt编译出的没太大可比性。

这是我们项目中的经验和教训。楼上几位的笑而不语说得有点冲了。

25 楼 chinafather 2011-04-07  

mygol 写道

chinafather 写道

楼上的哥们 ext目前还是太大，做ria可以用，而且界面风格统一不象jq的插件风格迥异，就是希望ext啥时候能真正实现小这个功能

ext4现在可以异步加载

目前beta版本ext4 怎么做到异步加载？目前ext4的版本中 提供的都是直接加载 all的，虽然表面上可以Ext.define()这样来做异步，但是你实现了吗？至少ext自己还没把他们的包都拆开