前台展现方式Ajax框架研究报告
2010-10-13 08:30:12 阿炯

1       引言
1.1    编写目的
形成一个针对AJAX框架优劣分析的报告。

1.2    参考网站
http://developer.yahoo.com/yui/ 雅虎AJAX框架
http://code.google.com/webtoolkit/ GOOGLE推出的框架
http://www.gwt-ext.com/
http://www.dhtmlx.com/ 白俄罗斯公司提出的框架
http://getahead.org/dwr DWR基于JAVA的AJAX框架
http://extjs.com/ 开源EXTJS框架
http://ajaxjs.com/ 开源EXTJS框架本地化组织
http://jackslocum.com/blog/ EXTJS框架核心人员博客
http://tof2k.com/ext/formbuilder/ EXTJS开源页面设计器
http://www.dojocn.cn/ DOJO本地化组织
http://dojotoolkit.org/ DOJO官方网站
http://json-lib.sourceforge.net/  JSON协议的相关网站

1.3    目标
通过对现有主流AJAX的分析提出一套基于配置开发的框架。分析出各个框架的优缺点,提出框架的应用方式和选择。

2       不同AJAX框架的研究
2.1    研究的框架

2.1.1   Dojo
相对其它Ajax库,Dojo拥有特有超越对手的深度&广度,质量,性能和社区。他还指出:Dojo用于创建高级的,日流量高的网站。 Dojo的创建工具是其关键。Dojo的Package系统使管理大型的UI开发项目变得轻松,它顶级的系统组件层使得你的应用让人尖叫不已;而这不需要更改代码。

我曾经大量使用Dojo以前的版本0.3和0.4,当时还没有很多的选择,而Dojo领先于其它库。不过现在我的Dojo经验和Alex说的完全相反。Dojo的确有其广度和深度,但多数使用过的人说他们发现Dojo变的臃肿,这就是一个(不使用Dojo)的合理原因。当你开始创建任何一个比其示例大型的应用,Dojo应用就迅速变得相当迟钝。由于Dojo模板加载的同步特性导致正常浏览器“僵住”,这已经被某些Dojo提交者公开承认。Dojo组件框架中存在漏洞特别是Tab和Dialog,他们确实不知道其原因何在。

Dojo社区变得越来越大,也许是因为Dojo曾领先于其它库或者因为用户已经在Dojo上投入很多,不管怎样都不值得乐观。多数用户对Dojo的差劲性能和文档匮乏感到不满和挫败。2007年7月3日,Dojo 0.9提前一年发布。它很大一部分被重写别且现在声称“极快”(译者注,巧合的是jQuery新版本同样声称速度提高800%,我的天…)。我很欣赏他们为新版本发布所做的辛勤工作以及Dojo新的改进,但让人厌倦的是在Dojo 0.9 beta 发布不到一周,作者就开始大谈Dojo有多快;如何在一些高级的网站上应用以及为何用户应该选用Dojo而不是其它。我相信Alex有他正确的理由,但我们能否让社区用户率先使用并验证其之前声称的成就吗?我们与其总是听作者讲Dojo有多好,倒不如多从用户那里倾听一些。

2.1.2   Ext
Ext针对一个典型的RIA标准,有着下列的解决方案:

良好的用户体验, 响应速度快 运行时快速高效

Ext参考合理的设计模式(例如,Grid的设计灵感来自Swing),对于大量使用浏览器控件的应用场合,JavaScript引擎亦不会胸襟见爪。以下是对EXT的效率分析:

基于互联网的开放标准进行数据传输

Ext以W3C的XHTML+CSS作为MakeUp语言,可解析Array,JSON和XML的数据源

丰富的组件,基于事件驱动,能进行快速开发

Ext的设计初衷就是,尽可能完善UI组件库而不需要其他库的帮忙;所有的UI组件都属于基于观察者(Observer)模式的事件驱动型设计。

Ext对页面的要求本身就是unobtrusive的,有利于做到HTML脚本之间的分离

良好的兼容性,能在多种平台下运行

兼容四大浏览器;服务端方面,Ext是一种与服务器中立的语言,使得其它特定语言的库亦可用于Ext处理Ajax服务。只要能返回EXT能处理的数据,任何一种类型的服务端是无要求的

当感觉到Ext的强大的同时,也发现JavaScript这门语言发掘潜力仍然不俗,遗憾的是,无论是市面上的书籍,和网上的介绍 JavaScript的文章,都是浮光掠影,蜻蜓点水,较少深入JavaScirpt作为另类OOP语言的本质,因此对于国内已经起步的Ajax程序员,我们觉得应该提供一个学习的场所,认识、了解Ext和JavaScript。在这个动机下,本人自去年10月份开始建造EXT中文站 (www.Ajaxjs.com),通过该网站认识一些朋友,大多数来自Javaeye论坛(当中介绍Eex的帖子分页达16页,25,000多浏览量),而且都是网龄较长,经验丰富的玩家,他们一直都对Ext都保持关注,甚至投入到实际项目中去,反映较好---但亦存在手头资料不足的问题。

2.1.3   Google gwt
Google Web Toolkit-用Java编写AJAX。

开发人员可以利用熟知的 Java 技术设计用户界面(UI)和事件模型,而 GWT 会完成使代码对所有主流浏览器友好的繁重工作。创建一个 Asynchronous JavaScript + XML(Ajax)应用程序,依然在 Java 语言中编写代码的。

2.1.4   Yahoo-yui
Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序。yui也包含几个核心的CSS文件。yui中的所有组件已经以开源的形式发布,它们遵循BSD协议并且可以免费使用。可以从Sourceforge站点下载完整的项目文件,同时包含相关文档和示例。

2.1.5   Dhtmlx系列(http://www.dhtmlx.com)
Our creativity, deep knowledge and years of experience in IT area allow us to develop our own high-quality products and bring them to the top of the market.

Since our main specialization area is development of Web-based applications with advanced UI and functionality, most of ideas for our products we got in this direction. DHTMLX Toolkit products is the embodiment of our innovative ideas, wide experience and professionalism. This comprehensive set of Ajax-enabled DHTML UI components can be a great help for developers who want to create rich-featured web applications with high interactivity and performance.

Being offshore we heavily reduce costs of IT development, not only for projects that we do for our clients, but also for development of own products, what makes our products highly competitive.

dhtmlxGrid 是跨浏览器的 JavaScript 表格控制组件(Grid Control),它可将数据呈现在一个 DHTML 的可排序表格中,此组件的特性如下:

基于开源 GPL 许可协议;
允许你自行设计舒适的用户界面;
可使用不同的单元格类型;
可在客户端进行排序操作;
可调整列的宽度;
提供强大的 API;
双击可修改单元格数据;
拥有缓存及动态加载等等。
最为方便的是数据的更新保存都是基于 AJAX 的,不用重新加载页面。

2.2    构件选择

2.2.1   选择依据
从框架的功能、性能外,掌握难度和相关的文档、范例、效率、可扩展性、版本的可持续性等方面入手。

2.2.2   优缺点分析

AJAX框架

运营方式

技术特点

掌握难度

用户体验

可扩展性

缺点

dojo

开源,有强大的企业背景

扩展了DHTML的功能Dojo拥有特有超越对手的深度与广度

比较容易,特别是前台验证

演示的例子比较杂乱

基于JS包的开发思路,扩展性好。对于JS包的开发是需要研究的

API都没有定型,升级没有连贯性,而且很多Widget不稳定,性能较差页面粉饰的方式增加了DOM操作过程,应用不好会产生相当大的性能问题

Yahooyui

开源,有强大的企业背景

构件在JSCSS基础上,每个功能点都有多个案例。

每个功能api明确,比较容易

页面的样式设计等感觉效果比较差。

基于JS包的开发思路,扩展性好

YUI涉及覆盖功能点比较全,但是感觉不到明显亮点。页面的丑陋注定需要下大力气改造才能和项目结合。

YUI-EXT

开源,无企业背景,面临被收购的风险

YUI-Ext从一个YUI扩展开始成长为一个全面的库,它有简洁、强大的API,支持不同数据交互协议

需要一定的JS技术功底

得到了用户的普遍认可

JS代码提供了按功能下载的功能(Build your own Ext http:://extjs.com/download/build)采用了传统的JS开发思路,扩展性不错

javascript构筑页面,页面维护性差。开发、CSS的控制等的程序调整比较麻烦

Google gwt

开源,有强大的企业背景,开发工具有LICENCE

页面实现几乎完全采用了YUI-EXT的开发库。基于JAVA驱动,把JS的工作转嫁到java层,对JAVA的要求比较高

针对JAVA程序员容易上手

YUI-EXT做了一些功能上的扩展,案例做的比较多

基于YUI-EXT做的实现,扩展性需要进一步研究,担心的是开发包,或者YUI-EXT的同步问题。

存在与YUI-EXT相同的特点,开发过程需要发布前编译生成JS等相关系统资源。

Dhtmlx系列www.dhtmlx.com

部分开源,有企业背景,非开源部分付费

构件在JSCSS基础上,案例清晰,它有简洁、强大的API

容易上手

用户体验强,特别是在它的GRID构架中体现的最好。

实现基于JS的构造和原型方式,代码分工明确,可扩展性强,针对每个动作都有自己的API函数接口

有些功能需要付钱,而且在非XML协议的数据协议支持不够,特别是没有看到它对JSON的支持。XML协议也做的有些死板

Gwt

开源

基于JAVA驱动,把JS的工作转嫁到java层。

很好掌握

只是基于JAVA开发的方面考虑,不是一个页面级的应用框架

 

2.2.3 结论

建议选择YUI-EXT作为AJAX框架的首选。

建议抽取DOJOYahooyuiDhtmlx的部分功能作为AJAX框架的补充。

开源框架

选择功能

备注

YUI-EXT

列表构件

 

树型构件

 

弹出式对话框

 

进度条

 

自动增加的标签页

 

DOJO

数据有效性验证

 

地图上面滑动展示

 

Dhtmlx

页面上方滑动菜单

 

列表构件

可以作为被选方案

右键菜单

 

文件系统的管理功能

 

Yahooyui

页面的统计图表的展示

 

右键菜单

 

http://demos.mootools.net/ 实际效果不理想

http://www.prototypejs.org/

http://script.aculo.us/ 底层用的prototypejs

http://wiki.script.aculo.us/scriptaculous/show/Demos 实际效果不理想

http://docs.jquery.com/UI/Dialog

采集页面的生成建议采用HTML DOJO的方式实现,采用EXT的实现,需要扩展实现的方式。

本文源自:http://passingbird.blog.sohu.com/81719945.html