B/S项目中的RIA：YUI-ext和Flex孰优孰劣？

2007年新年刚过，又收到了一个B/S项目的任务，需求文档写了6页纸，时间却只有一个月。项目说起来不大，但同大多数的B/S项目一样，麻雀虽小，五脏俱全。

 

和以往一样，项目的框架问题再一次摆到面前。在上一个项目中，UI界面采用的是xslt+xml，通讯方式则全盘采用的是Ajax。为此自己专门写了一个ajax的库，用来和服务器通讯并结合xslt动态构造客户端的界面。由于整个项目过多的依赖于Ajax，造成了客户端的js脚本过于复杂，把原本很多应该由业务逻辑完成的功能，也全部转移到了View层来解决。现在看来，这是一个很糟糕的设计方案。

 

前些日子发现了DWR框架，立即如获至宝。DWR的设计思路优雅的利用Javascript对象来调用后台的java对象。这样一来，通讯的难题解决了，UI的设计被独立出来：固然可以同上一个项目一样，继续采用xslt+xml的方案，但这个方案依然要写大量的HTML代码，依然要自定义大量的CSS风格，界面的设计问题，如同鸡肋，令人无奈。

 

于是继续寻找，研究了一些比较流行的UI框架，包括：Yahoo-UI、Google Web Kit。。。Yahoo-UI总体不错，但只是一个粗结构的框架，所有的UI必须经过包装之后才可以使用。GWT则让人有点晕，完全通过java来构造客户端界面，然后编译成静态的脚本，似乎很先进，但不合咱的胃口。最后发现了YUI-Ext。

 

YUI-ext是对Yahoo UI的封装。对YUI-Ext的兴趣，完全来源于对其演示界面的惊叹。利用它做出来的B/S界面，完全可以同C/S媲美。YUI-Ext也提供了对Ajax的封装，许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree控件、动态拖拽效果等等。1.0 beta版开始同jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

 

YUI-Ext的缺点也很明显：

1、太过复杂，而且缺少文档。

2、整个界面的构造，完全通过手工的javascript编程来完成，缺少设计器的支持，使得很多习惯于拖拽式开发的程序员们望而却步。

3、苦涩难懂的对象构造方式，你必须深刻理解它背后的运行方式。

4、缺少清晰的MVC界限

 

基于对YUI-Ext的钻研，我又发现了Flex 2.0—Adobe公司推出的基于Flash的全新B/S设计概念。记得年初时，《程序员》杂志曾经大篇幅的介绍过Flex技术，当时也只是走马观花，并没有引起太多的重视。现在突然重新的审视这项新技术，突然有一种相见恨晚的感觉。

 

Flex的整体思路，完全超越了Ajax的思想。其基于MXML的界面设计，非常类似于微软.net 3.0中提出的Windows Presentation Foundation （WPF）概念。Flex2.0中的AS 3.0，加入了更多的OO思想，使得其用起来更像java。而界面方面，在充分利用了Flash原有技术的优势，使得多种转换效果更加具有震撼力。Flex经过编译后，只有一个简单的SWF文件，使得项目的部署更加的方便。

 

Flex提供了强大的设计器支持，其最新的Flex Builder2，完全基于Eclipse项目，提供了代码动态提示，所见即所得的拖拽式设计方式，把界面的设计变得更加轻松。

 

更加值得称赞的是Flex中组件同数据源绑定的方式。后台数据既可以以XML的方式提供，也可以通过WebServices和远端对象调用。这种数据绑定的方式非常的先进，再加上结合AS中丰富的集合类型的绑定，数据的呈现几乎不需要用户写一行代码。

 

当然，Flex也有一些局限。例如不支持内嵌的网页显示。目前在互联网上已经有了比较“优雅”的解决方案：http://www.bitscn.com/school/Flash/skill/200609/59547.html，虽然有些别扭，但至少在用户看来几乎没有什么区别。

 

无论是YUI-Ext还是Flex，都给我们的B/S项目提供了可选的架构方案。二者各有所长，随着项目的不同，两者的优劣也各不相同。例如，同YUI-Ext相比，Flex中的Tree并不支持动态的加载数据，当然这可以通过AS编程来得到解决。同样，YUI-Ext如果能推出自己的设计器，简化复杂的JS脚本的开发，则将更加的完美。