Ajax Frameworks

45 pages
Date: 05.04.2007

Version: 1.0

AJAX FRAMEWORKS

Table of Contents
1. 1.1 1.2 1.3 2. 2.1 2.2 2.3 2.4 3. 4. 5. 5.1 History .................................................................................................................................................... 3 Revision History..................................................................................................................................... 3 Review History....................................................................................................................................... 3 Approval History .................................................................................................................................... 3 Introduction............................................................................................................................................. 4 Purpose.................................................................................................................................................. 4 Summary ............................................................................................................................................... 4 Scope..................................................................................................................................................... 6 Definitions, Acronyms and Abbreviations ............................................................................................ 6 Introduction to Ajax Frameworks........................................................................................................... 7 Customer Needs.................................................................................................................................... 8 Ajax Frameworks Description................................................................................................................ 9 Direct Javascript Frameworks .............................................................................................................. 9 Prototype 1.5.0................................................................................................................................. 9 Apache XAP (0.3.0) tar.gz............................................................................................................ 10 DWR ............................................................................................................................................... 12

5.1.1 5.1.2 5.1.3 5.2

Component Frameworks .................................................................................................................... 13 Dojo 0.4.2 ....................................................................................................................................... 13 Script.aculo.us 1.7.0 ..................................................................................................................... 15 Yahoo! UI (YUI) 2.2.0a .................................................................................................................. 16 Open Rico 1.1.2 ............................................................................................................................. 18 Tibco General Interface 3.3 Professional ..................................................................................... 20

5.2.1 5.2.2 5.2.3 5.2.4 5.2.5 5.3

Server-drive Frameworks ................................................................................................................... 21 GWT (Google Web Toolkit ) 1.3.................................................................................................... 21 jMaki ............................................................................................................................................... 23 ICEFaces 1.5.3 .............................................................................................................................. 25 JBoss RichFaces 3.0..................................................................................................................... 26
I

5.3.1 5.3.2 5.3.3 5.3.4

AJAX FRAMEWORKS

5.3.5 5.3.6 5.3.7 5.3.8 5.4

Echo2 2.0.0 .................................................................................................................................... 28 ThinWire 1.2 RC1 .......................................................................................................................... 30 ASP.NET Ajax (codename Atlas) ................................................................................................. 33 Ajax.NET Professional................................................................................................................... 36

Comparison Matrix.............................................................................................................................. 38

Appendix. Comparison Matrix..................................................................................................................... 39

II

AJAX FRAMEWORKS

1. History
1.1 Revision History
Version 0.1 0.2 Date Description of Changes Created All sections are drafted Reason Customer request for research Made by E.Gomonova O. Moroz, A. Syagaylo, I. Anisimov D. Zernov A. Nesmiyanov 0.3 Summary is created O. Moroz

1.2 Review History

Version 0.4 0.5 Date 04.04.2007 04.04.2007 Reviewer E. Gomonova A.Ignatov Reference

1.3 Approval History

Version 0.6 Date 05.04.2007 Approved by E.Povalyaev Signature or reference

AJAX FRAMEWORKS

2. Introduction
2.1 Purpose
The main purpose of this document is to present the results of the research established by Luxoft to compare several Ajax Frameworks and find out the most appropriate solution, which is eminently suitable to business and technical Customer requirements.

2.2 Summary
The spectrum of tools for creating Ajax web applications is really wide from simple multipurpose JavaScript libraries (Prototype) to client-side widget sets (Dojo, Yahoo! UI) to full client-side presentation machine (TIBCO GI) to server-side framework integrated libraries (Wicket) to complete server-side-driven UI toolkits (GWT, Echo2, ThinWire). Accordingly, we will select the tools appropriate for specific cases and then evaluate and compare them (if there are more than one). We identified the following main cases: JSF-based web application Adding or implementing Ajax support in JSF application calls for one of Ajax-JSF frameworks, the best two being RichFaces/ajax4jsf and ICEfaces. We recommend using ajax4jsf or RichFaces (which adds more components and data binding support) when adding Ajax support to an existing JSF application. If Ajax capabilities are planned from the start, ICEfaces might be a better choice because of better integration with different IDEs and more powerful architecture; though as ICEfaces has its own quirks and issues choosing between the two should be done on project basis, taking into account the application server environment, browser-to-server traffic, etc. Rich-client interface to existing web application or web services The best tools for rich-client interface implementation (where the significant part of processing is performed on the client side and the server-side application is used as a set of HTTP-based services called from the client as needed) are GWT and TIBCO General Interface. The main development difference between them is that GWT UI is programmed in the subset of Java and later automatically translated to JavaScript, while TIBCO GI UI is built in the GI IDE and programmed directly in JavaScript (using high-level library), requiring dedicated JavaScript developers. On the other hand, GWT tool support for interactive UI building is much worse than TIBCOs, GWT UI usually programmed by hand (like Swing programming in early days). Introducing a little Ajax into existing application Another specific case is when we have a web site or web application, probably built on action-oriented framework (such as Struts or Spring MVC), and we need to ajaxify a couple of pages e.g. for better response time or enhanced user experience. In this case, it is often easier to use some of direct or component Ajax frameworks such as Prototype or script.aculo.us / Dojo / Yahoo! UI, requiring small changes in the view (adding JS library and JS components or handlers to the page) and action (creating or modifying an action for answering Ajax requests) layers. This approach does not scale well to big UI-heavy applications but is very appropriate in the small.
4

AJAX FRAMEWORKS

We recommend using Prototype when there is no need for custom widgets and visual effects (though effects such as fading highlighting of changed fields or hiding controls can be easily added by using script.aculo.us extensions). For rich client UI we recommend using Yahoo! UI toolkit, which provides the most useful and functional set of custom widgets. Sometimes it is convenient to expose Java object interfaces at the server side for direct invocation from the client side. This is easily achieved with DWR toolkit that can integrate well with Spring (and other frameworks), automatically generate JavaScript proxies from Java interfaces. JavaScript proxies then may be imported into HTML page as a library and then used by the client-side code. Full-stack frameworks Several frameworks under consideration, including Echo2, ThinWire, and in part GWT, are completely server-side driven. Developer writes the Java code that instantiates the UI component hierarchy, wires the appropriate event handlers, and then passes the resulting page / application tree to the framework, where it is used to automagically generate the client-side presentation and code. Usually such frameworks promote development patterns that are more suitable for standard GUI applications than to the Web, and in our opinion make poor match for the J2EE architecture, dont play well with other enterprise development frameworks (such as Spring), and dont scale well. While these can be used for quick prototyping, we do not recommend using these frameworks for production application development. ASP.NET application There are significantly less Ajax frameworks and toolkits in the .NET world, probably because there is really only one .NET web framework (ASP.NET) vs tens of Java web frameworks, or because .NET developers tend to use Microsoft products. The best choice here is Microsoft ASP.NET AJAX framework (codename Atlas) recently released as open-source.

Interesting Finds Two frameworks out of sixteen evaluated caught our particular attention, both of them for not trying to be everything and the kitchen sink, but doing just one thing and doing it well. The first is Direct Web Remoting (DWR) framework that covers transparent client-server communication, and easily integrates with various client-side and server-side frameworks. The second if TIBCO General Interface that concentrates on the client-side application implementation and consumption of server-side web services and web applications. See the "Ajax Frameworks Description" section for detailed information about each tool.

AJAX FRAMEWORKS

2.3 Scope
The scope of this analysis is limited by the explicit list of Ajax frameworks for evaluation, including the following products:
!

Direct javascript frameworks:

! ! !

Prototype Apache XAP DWR

Component frameworks:
! ! ! ! !

Dojo Script.aculo.us Yahoo! UI TIBCO GI Open Rico

Server-drive frameworks:
! ! ! ! ! ! ! !

GWT jMaki ICEfaces RichFaces Echo2 ThinWire. ASP.NET Ajax (codename Atlas) Ajax.NET Professional

For general description of Ajax Frameworks and each group of frameworks see the "Introduction to Ajax Frameworks" section. Reviewed Ajax Frameworks were evaluated basing on the list of requirement specified by the customer and listed in section "Customer Needs".

2.4 Definitions, Acronyms and Abbreviations

AJAX Asynchronous JavaScript and XML

AJAX FRAMEWORKS

3. Introduction to Ajax Frameworks

AJAX (Asynchronous JavaScript and XML) is a technology to build dynamic web pages on the client side, where the data is read from the server or sent to the server by JavaScript requests. A framework eases the work of the Ajax programmer at two levels: on the client side, it offers JavaScript functions to send requests to the server and generally managing document tree and other browser functionality. On the server side, it processes the requests, looks up or calculates the necessary data, and transmits them to the browser. Some frameworks are very sophisticated and provide a complete library to build web applications. Ajax frameworks can be loosely grouped into categories according to the features they offer and the skills required of the developer:
!

Direct Ajax frameworks require HTML, CSS and Ajax expertise. A developer is expected to author pages directly in HTML, and framework APIs deal directly with HTML elements. Cross-browser APIs are provided for a variety of purposes, commonly including communications, DOM manipulation, event handling, and sizing/moving/animating HTML elements. Ajax component frameworks offer pre-built components, such as tabbed panes, which automatically create and manage their own HTML. Components are generally created via JavaScript or XML tags, or by adding special attributes to normal HTML elements. These frameworks are generally larger, and intended for web applications rather than web sites. Server-driven Ajax frameworks offer a server-side component-based development model with some degree of Ajax support. Components are generally created and manipulated on the server using a server-side programming language. Pages are then rendered by a combination of server-side and client-side HTML generation and manipulation. User actions are communicated to the server via Ajax techniques, serverside code manipulates a server-side component model, and changes to the server component model are reflected on the client automatically.

AJAX FRAMEWORKS

4. Customer Needs
During the review of Customer project it was discovered that standard approach, based on synchronous communication to the server with full page refresh sometimes is not acceptable. Customer needs to use new technology where Unit of work is a component and only parts of pages are updated at a time. The Ajax technology is a good candidate, but there are still some problems with development process. For example, it is difficult to test and debug client applications for different browsers. The time of development dramatically increased. Therefore, Customer needs a good framework and good reliable libraries for development Ajax applications. The set of criteria for such frameworks includes the following features:
! ! !

Visual Design Environment. Easy integration with existed IDE (Eclipse, etc) Page Flow Designer, RAD framework, plenty of libraries (Advanced Controls, Visual Effects, Drag & Drop forms, Data View / Grids) Logging functionality with providing convenient errors handling and debugging. Cross platform compatibility and tools to develop cross platform applications

! !

A product used as Ajax Framework may be Open Source based.

AJAX FRAMEWORKS

5. Ajax Frameworks Description

5.1 Direct Javascript Frameworks 5.1.1 Prototype 1.5.0
http://www.prototypejs.org/ Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and one of the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere. Prototype provide developer independence from browser-specific behavior and implementation issues, while not isolating him from the browser DOM completely. It provides handy objects, methods, shortcut functions, and extensions for such useful operations as:
! ! ! ! ! ! ! ! !

Navigating document tree Selecting elements based on ID, name, or CSS properties Getting and setting element value Manipulating document tree Converting between collection types String substitution and templates AJAX support JSON support Declarative behaviours.

Prototype is not integrated with any particular server framework, but it is designed to be easily interfaced with almost anything on the server side from Perl to Java to Ruby on Rails. Prototype framework also does not include advanced DHTML controls and visual effects but serves as the base for several user-interface JavaScript frameworks such as script.aculo.us.

AJAX FRAMEWORKS

5.1.2 Apache XAP (0.3.0) tar.gz

http://incubator.apache.org/xap/ Download: http://incubator.apache.org/xap/index.php@cid=1056.html XAP is an XML-based declarative framework for building, deploying and maintaining rich, interactive Ajax powered web applications. It aims to reduce the need for scripting and help solve the development and maintenance challenges associated with large scale JavaScript programming. XAP provides:
! ! ! !

Declarative rich user interface via XML; Data binding for connecting UI to data. Incremental update of web pages, declaratively and programmatically. A "plugin architecture" allowing developers to define their own XML tags to provide behavior and UI or even use a completely different XML syntax.

Declarative approach simplifies development. Rather than writing many lines of JavaScript to build a user interface XAP uses simple XML to create rich, complex user interface. XML is also easy to parse, enabling supporting tools for visual creation and management of XAP UI. XAP is not about "XML for everything" - XML is clumsy for expressing sophisticated logic. XAP provides the plumbing and uses XML to describe the user interface, link controls to data objects and form a foundation for building applications; it then allows developers to place the right amount of code where it is needed. XAP separates presentation from behavior. XAP defines presentation and data binding in XML along with client side event handling that works well with encapsulated and packaged JavaScript objects. This clear separation between user interface and logic allows to create larger, more maintainable applications and fosters team development. XAP works with any web server. XAP is a client side offering that you can use with any web server - PHP, .NET, etc. It does not have any specific server requirements. Event handling can take place at the client, using managed code objects (MCOs) written in JavaScript, or on the server with event handlers written in any language supported by the server environment. The MCO mechanism provides life cycle management and object orientation for future development of business and user interface logic - another step to simplifying development. XAP uses any UI toolkit. XAP architecture is based on a "plugin architecture" that leverages a component bridges concept, XML UI markup can be connected to virtually any user interface toolkit. Initial XAP releases will support integration with toolkits such as Kabuki and Dojo. Future releases will focus on other full-featured, high-performance UI toolkits. Extensible Application Platform (XAP) user interface and data binding are described by Extensible Application Language (XAL) files containing an XML-based markup language designed to support application development - rather than document markup. XAP maps XAL markup to specific UI widgets. An XAP DOM, separate from the HTML DOM, maintains the UI state.

10

AJAX FRAMEWORKS

XAP Architecture (simplified workflow) The following diagram provides a high level overview of the XAP architecture with a workflow of XML input to the UI output. `"A" is the XAP application, which is an XML file that consists of XAL markup and instructions. Subsequent changes to the DOM can be made either via additional XAP XML documents containing declarative modification instructions or programmatically via object oriented interfaces.

XAP Workflow The above diagram demonstrates how XAL XML is fed into XAP to build the user interface. Events generated by user interaction are fed back into the XAP application. The simplified workflow of XAP architecture consists of the following steps:
1)

XML Parser processes the markup; markup consists of UI elements and instructions to operate on the UI DOM or other DOMs Processed markup builds the UI DOM. The XAP DOM manages user interface state for the XAP portions of the application; listeners allow hooking into DOM changes. Component bridges map XML tags to user interface UI Toolkits provide implementation of user interface components and make the relevant changes to the HTML DOM Actual browser DOM representing the web browsers user interface Events are fired when the user interacts with the UI; these events are handled by the XAP application.

2)

3) 4)

5) 6)

11

AJAX FRAMEWORKS

5.1.3 DWR
http://getahead.org/dwr DWR is a Java open source library for writing Ajax web sites. It allows code in a browser to use Java functions running on a web server just as if it was in the browser. DWR consists of two main parts:
!

Java Servlet running on the server that processes requests and sends responses back to the browser. JavaScript running in the browser that sends requests and can dynamically update the webpage.

DWR works by dynamically generating Javascript based on Java classes. The code does some Ajax magic to make it feel like the execution is happening on the browser, but in reality the server is executing the code and DWR is marshalling the data back and forwards. This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web-browser plug-ins. The diagram below shows how DWR can alter the contents of a selection list as a result of some Javascript event like onclick.

DWR dynamically generates an AjaxService class in Javascript to match some server-side code. It is called by the eventHandler. DWR then handles all the remoting details, including converting all the parameters and return values between Javascript and Java. It then executes the supplied callback function (populateList) in the example below which uses a DWR utility function to alter the web page. DWR also helps to produce highly interactive web-sites by providing some Javascript libraries to help with DHTML and by giving the developer a set of examples to copy from.

12

AJAX FRAMEWORKS

5.2 Component Frameworks 5.2.1 Dojo 0.4.2

http://dojotoolkit.org/ Dojo is an Open Source DHTML toolkit written in JavaScript. Dojo aims to solve some longstanding historical problems with DHTML, which prevented mass adoption of dynamic web application development. Dojo allows the developer to easily build dynamic capabilities into web pages and any other environment that supports JavaScript. It provides components that can be used to make web sites and applications more useable, responsive, and functional. Using Dojo, developers can build degradable user interfaces more easily, quickly prototype interactive widgets, and animate transitions. They can use the lower-level APIs and compatibility layers from Dojo to write portable JavaScript and simplify complex scripts. Dojo's event system, I/O APIs, and generic language enhancement form the basis of a powerful programming environment. Dojo build tools can be used to write command-line unit-tests for JavaScript code. The Dojo build process helps to optimize the JavaScript code for deployment by grouping sets of files together and reuse those groups through "profiles". Dojo does all of these things by layering capabilities onto a very small core providing just the package system and little else. When writing scripts with Dojo, the developer can include either little or many of the available APIs depending on the needs. Dojo provides the following features:
!

Multiple Points of Entry - to make sure that users should be able to start using Dojo at the level they are most comfortable with. For example, expert JavaScript programmers should find a set of capable foundation capabilities that allow them to be more productive quickly, while web designers and developers should find a set of easy to use, modify, and extend components that make their applications more responsive without requiring them to learn a large JavaScript API. Interpreter Independence - Dojo is a JavaScript toolkit, but within the realm of JavaScript interpreters and environments, not everything was created equal. Dojo tries very hard to ensure that it is possible to support at least the very core of the system on as many JavaScript enabled platforms as possible. This will allow Dojo to serve as a "standard library" for JavaScript programmers as they move between client-side, serverside, and desktop programming environments. Forward Looking APIs - No one has a crystal ball when it comes to what technologies will be broadly available or used in 5 years, but Dojo attempts to provide APIs that are generic enough to be (directly) useful with today's capabilities while still building in room for future improvement. Reducing Barriers to Adoption - This core philosophy behind Dojo's design acknowledges the fact that tools that are hard to use just will not get used, no matter how good they are.

13

AJAX FRAMEWORKS

On top of the packaging system, Dojo provides:

! ! ! ! ! ! ! ! !

Big UI widget library Rich layout capabilities Visual effects and animations library Browser-independent graphics Event system for connecting parts together Data storage and data binding system AJAX capabilities Internationalization and accessibility framework JavaScript utilities for various tasks.

Example of user interface implemented in Dojo is represented on the picture below:

While being useful by itself, Dojo also serves as the foundation for several JavaScript frameworks as well as server-side frameworks integration.

14

AJAX FRAMEWORKS

5.2.2 Script.aculo.us 1.7.0

http://script.aculo.us/ Script.aculo.us (Scriptaculous) toolkit provides a developer with easy-to-use, cross-browser user interface JavaScript libraries. Scriptaculous can be used to create usable and responsive web interfaces, including AJAX capabilities, slider control, drag-and-drop, and visual effects. Slider control allows user to visually choose the value in the specified range or from the specified list of values.

Script.aculo.us slider control AJAX capabilities are based on Prototype library adding support for auto-completion and inplace editing.

Script.aculo.us autocompletion support The Drag-and-drop library enables easy-to-do dragging and dropping of elements in the web application and implementation of sortable lists and floats.
15

AJAX FRAMEWORKS

The Visual Effects library animations are time-based, not frame-based, allowing the animation to run in exactly the time span given by developer. They are also style/CSS-based and so are for most part independent from the underlying HTML control (different browsers may apply different restrictions on style properties for some controls though). The library includes 5 basic and 16 composite effects and supports chaining and compositing effects and animations. Scriptaculous framework also adds support for unit-testing JavaScript code.

5.2.3 Yahoo! UI (YUI) 2.2.0a

http://developer.yahoo.com/yui/ The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses. YUI components fall into three groups: Utilities, UI Controls, and CSS resources. The YUI Utilities simplify in-browser devolvement that relies on cross-browser DOM scripting, as do all web applications with DHTML and AJAX characteristics, including:
!

Animation: Create "cinematic effects" on web pages by animating the position, size, opacity or other characteristics of page elements. Connection Manager: This utility library helps manage XMLHttpRequest (commonly referred to as AJAX) transactions in a cross-browser fashion, including integrated support for form posts, error handling and callbacks. Connection Manager also supports file uploading. DataSource Utility: DataSource provides an interface for retrieving data from arrays, XHR services, and custom functions with integrated caching and Connection Manager support. Dom Collection:The DOM Utility is an umbrella object comprising a variety of convenience methods for common DOM-scripting tasks, including element positioning and CSS style management. Drag & Drop: Create draggable objects that can be picked up and dropped elsewhere on the page. Event: This sophisticated manager class gives an easy and safe access to browser events (such as clicks and key presses). The Event package also includes the Custom Event object, a mechanism for publishing and subscribing to interesting moments in your own application flow.

16

AJAX FRAMEWORKS

The YUI Library Controls provide highly interactive visual design elements for web pages. These elements are created and managed entirely on the client side and never require a page refresh. Library Control set includes:
!

AutoComplete: Provides suggestion lists and type-ahead functionality based on a variety of data-source formats and supports server-side data-sources via XMLHttpRequest. Button Control: The Button Control provides checkbox, radio button, submit and menubutton UI elements that are more impactful visually and more powerful programmatically than the browser's built-in form widgets. Calendar: The Calendar Control is a graphical, dynamic control used for date selection.

Container: The Container family of controls supports a variety of DHTML windowing patterns including Tooltip, Panel, Dialog and SimpleDialog. The Module and Overlay controls provide a platform for implementing additional, customized DHTML windowing patterns. DataTable Control: DataTable leverages the semantic markup of the HTML table and enhances it with sorting, column-resizing, inline editing of data fields, and more. Menu: Application-style fly-out menus require just a few lines of code with the Menu Control. Menus can be generated entirely in JavaScript or can be layered on top of semantic unordered lists.

Slider: This control provides a generic slider element that enables the user to choose within a finite range of values on one or two axes. TabView: Implements a rich tabbed-navigation control.

17

AJAX FRAMEWORKS

TreeView: The TreeView control produces a content tree whose nodes can be expanded and contracted by user interaction (and by script, where necessary). The nodes can contain links or custom properties and can be loaded dynamically.

YUI CSS Resources are the basic building blocks for creating clean, flexible layouts that play well across browsers, including preset grid layouts, standardized cross-browser font families and size rendering, and utility for resetting CSS information at the start of the page.

5.2.4 Open Rico 1.1.2

http://www.openrico.org/ Open Rico is an open source JavaScript library for creating rich internet applications. Rico provides full Ajax support, drag-and-drop management, and a cinematic effects library. Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request. Rico provides one of the simplest interfaces for enabling your web application to support drag and drop. Just register any HTML element or JavaScript object as a draggable and any other HTML element or JavaScript object as a drop zone and Rico handles the rest. Rico provides several cinematic effects as well as some simple visual style effects in a very simple interface.

18

AJAX FRAMEWORKS

You can get an Accordion component like those found in Macromedia Flex and Laszlo. Just nest some DIVs and with one line of JavaScript turn your div panels into an accordion:

Rico.Accordion Example And the latest behavior is the LiveGrid. LiveGrid allows you to connect an Html table up to a stream of Ajax responses. Ajax requests are automatically called during table scrolling. The result is - now Html tables can hold an unlimited amount of data scrolled into view on the fly as needed.

LiveGrid Example

19

AJAX FRAMEWORKS

5.2.5 Tibco General Interface 3.3 Professional

http://www.tibco.com/devnet/gi/default.jsp The TIBCO General Interface application framework enables enterprises to deliver rich internet applications (RIAs) that look, feel, and perform like desktop installed software but run in a standard web browser. With General Interface, enterprises can have the best of both options: rich, highly productive, service-differentiating GUI functionality with the low-cost profile of web development, instant distribution, and accessibility. The TIBCO General Interface application framework leverages AJAX (asynchronous communications, JavaScript, and XML), event, and rendering capabilities of the web browser to instantly create a powerful, object-based enterprise-grade application environment into which your General Interface applications can be deployed. By working with an object-based environment, as opposed to declarative markup languages, development time is shortened, and the business can easily distribute, manage, and deploy high performance solutions. TIBCO General Interface solves existing browser limitations by distributing many of the processes typically handled by a centralized web application server to the browser on the client machine. The application framework does this by first wrapping, then extending, browser APIs with functionality more suitable to object-oriented application development. Rather than forcing the developer to model complex workflows with a series of flat HTML pages, the General Interface APIs enables to create stateful, interactive, object-based, client applications that look, feel, and perform as if launched from the local operating system. In addition to providing a powerful and efficient architecture, TIBCO General Interface makes it easy to develop and deploy applications. Industry-standard technology is used, so knowledge of existing technologies can be leveraged. GI features:
!

Ease of Deployment -- The General Interface application framework and all General Interface applications are composed of JavaScript, XML, and CSS files. To deploy the environment and applications, you simply include a reference to these files in an HTML page that can be accessed by an end user from any HTTP or HTTPS server. The end user types the URL into a browser and starts using the General Interface application. To restrict and secure access to your application, use your existing mechanism for securing web page access. Support for Industry Standards and Best Practices -- General Interface uses industry standard and widely accepted technologies in both its underlying code (JavaScript, XML, and CSS) and overall architecture (Model-View-Controller and multitier design). Best-practice, server-side tasks are migrated to the browser to deliver the same successful results, maintainable code, and scalable performance. General Interface takes best-practice approaches from the server and implements them in the browser. Scalable Architecture -- The fastest page server simply cannot compete with locally served data. Load balancing, additional processors, page pre-caching, and any number of server-side enhancements are all ultimately short-term solutions. Rather than attempting to scale the server to meet the needs of the nth end user, consider a paradigm where each end user provides the resources for their own processing needs.

20

AJAX FRAMEWORKS

Development Tools -- You can develop TIBCO General Interface client applications and components using General Interface Builder, a script authoring environment, or another IDE. Once the TIBCO General Interface runtime environment is loaded into an HTML page in the browser, the developer can directly interact with the General Interface GUI, data, and communication objects using JavaScript APIs. General Interface Builder, a rapid deployment environment, is a visual authoring environment optimized for creating General Interface applications and can run either as a standalone tool or within the embedded browser module of another IDE.

TIBCO General Interface Builder IDE

5.3 Server-drive Frameworks 5.3.1 GWT (Google Web Toolkit ) 1.3

http://code.google.com/webtoolkit/ Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile. GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.

21

AJAX FRAMEWORKS

The Demo Desktop App Clone Example Project is represented on the picture below:

Google Web Toolkit features includes the following:

!

Dynamic, reusable UI components. Create a Widget by compositing other Widgets. Lay out Widgets automatically in Panels. Send your Widget to other developers in a JAR file. Really simple RPC. To communicate from your web application to your web server, you just need to define serializable Java classes for your request and response. In production, GWT automatically serializes the request and deserializes the response from the server. GWT's RPC mechanism can even handle polymorphic class hierarchies, and you can throw exceptions across the wire. Browser history management. No, AJAX applications don't need to break the browser's back button. GWT lets you make your site more usable by easily adding state to the browser's back button history. Real debugging. In production, your code is compiled to JavaScript, but at development time it runs in the Java virtual machine. That means when your code performs an action like handling a mouse event, you get full-featured Java debugging, with exceptions and the advanced debugging features of IDEs like Eclipse. Browser compatible. Your GWT applications automatically support IE, Firefox, Mozilla, Safari, and Opera with no browser detection or special-casing within your code in most cases. JUnit integration. GWT's direct integration with JUnit lets you unit test both in a debugger and in a browser...and you can even unit test asynchronous RPCs.
22

AJAX FRAMEWORKS

! !

Internationalization. Easily create efficient internationalized applications and libraries. Interoperability and fine-grained control. If GWT's class library doesn't meet your needs, you can mix handwritten JavaScript in your Java source code using our JavaScript Native Interface (JSNI). Completely Open Source. All of the code for GWT is available under the Apache 2.0 license.

5.3.2 jMaki
https://ajax.dev.java.net/ The jMaki framework gives you a simple way to create JavaScript centric Web 2.0 applications. The framework provides CSS layout templates, access to widgets from popular toolkits and a client side communication bus for distributing events between JavaScript components. jMaki focuses on the delivering JavaScript to the client and allowing that JavaScript to communicate to various server-technologies including PHP, Java (JSP/JSF), and Phobos in a server-technology neutral way.

jMaki Client Side Components include:

!

jMaki Layouts. jMaki Layouts provide a standards based starting point for creating your web applications using HTML and CSS. The CSS is in plain view so it can be easily customized for your needs. jMaki Client Runtime. The jMaki Client Runtime is a JavaScript responsible for bootstrapping all widgets and passing parameters provided by a server-side runtime to the widgets. Parameters are unique to each widget, and the JavaScript runtime makes sure that each widget instance gets the correct parameters that were passed from the server-side runtime. In cases when parameters are not provided, the runtime uses default parameters that may then be customized for each widget.

23

AJAX FRAMEWORKS

jMaki Client Services. Services such as convenient APIs for performing XMLHttpRequest and publish/subscribe on the client are provided to all widgets as means of communication.
!

jMaki Glue is built on top of the publish/subscribe mechanism. It allows to define application behavior and tie widgets together using JavaScript actions when a specific event is published to a topic. jMaki Timers allow JavaScript action handlers to be called or events to be published at a set interval. jMaki Injector is a client service that allows to bring in an external page into any given div element. The Injector transfers scripts and CSS to the global page content and allows widgets to be loaded much like an iframe without the usability issues.

jMaki Widget Model. The jMaki widget model provides a component model for reusable JavaScript components. The structure is based on a HTML, JavaScript and CSS. You can use this structure to create your own widgets or wrap widgets from any given toolkit. jMaki provides default wrappers and a server tie-in for many commonly-used Dojo, Yahoo UI, Prototype, and some native widgets. jMaki also defines a widget.json format which is a common way of describing widgets so that they are accessible by tools.

jMaki Server Components include:

!

jMaki Server Runtime. The jMaki Server Runtime is responsible for tying the jMaki JavaScript Client Runtime to a server-side runtime such as Java, PHP, or the JavaScript-based Phobos runtime. The server runtime tracks and renders all script and CSS references based on library type being used making sure that the duplicate script and CSS links are not duplicated. The server-runtime also makes sure API keys (such as Google and Yahoo Map keys) are applied when necessary based on a configurable set of keys. The server runtime renders the HTML templates making and serializes data in JavaScript such that each widget instance is provided the proper data. XmlHttpProxy. The XmlHttpProxy module provides a means for widgets to access JSON or XML access RESTful XML-based services outside of the web application domain. Such services include RSS feeds, Yahoo services such as geocoding, Flickr image searches, and many more to come. The XmlHttpProxy allows widgets to access services in a uniform way by providing XSL-to-JSON transformations that can be easily customized.

24

AJAX FRAMEWORKS

5.3.3 ICEFaces 1.5.3

http://www.icefaces.org ICEfaces is the industry's first standards-compliant AJAX-based solution for rapidly creating pure-Java, rich web applications that are easily maintained, extended, and scaled, at very low cost. ICEfaces provides a rich web presentation environment for JavaServer Faces (JSF) applications that enhances the standard JSF framework and lifecycle with AJAX-based interactive features. ICEfaces replaces the standard HTML-based JSF renderers with Directto-DOM (D2D) renderers, and introduces a lightweight AJAX bridge to deliver presentation changes to the client browser and to communicate user interaction events back to the server-resident JSF application. Additionally, ICEfaces provides an extensive AJAX-enabled component suite that facilitates rapid development of rich interactive web-based applications. The basic architecture of an ICEfaces-enabled application is shown below.

ICEfaces-enabled JSF Application The rich web presentation environment enabled with ICEfaces provides the following features:
!

Smooth, incremental page updates that do not require a full page refresh to achieve presentation changes in the application. Only elements of the presentation that have changed are updated during the render phase. User context preservation during page update, including scroll position and input focus. Presentation updates do not interfere with the user's ongoing interaction with the application.

These enhanced presentation features of ICEfaces are completely transparent from the application development perspective. Any JSF application that is ICEfaces-enabled will benefit. ICEfaces also includes the ICEfaces Component Suite with enhanced implementations of the JSF standard components and additional custom components that fully leverage the ICEfaces Direct-to-DOM rendering technology and provide additional ICEfaces-specific features, such as automated partial submit, incremental page updates, and easily configurable component look-and-feel. Components can optionally be made draggable, drop targets, or both.

25

AJAX FRAMEWORKS

The Extended Standard Components in the ICEfaces Component Suite provide special attributes that can be used to invoke effects on the components, such as fade, highlight, pulsate, and move. Effects can either be server-initiated (Server) or client-initiated (Local). Server effects are invoked by dynamically changing the value of the 'effect' attribute on a component, usually by binding the attribute to a backing bean. Local effects are invoked by client-side browser events, such as "onMouseOver" or "onClick". Effects can be used to provide a richer user-interface experience to the user by dynamically manipulating components in interesting ways. ICEfaces supports JSF 1.1 and can be uses with JSP as well as Facelets (recommended) in the view layer. ICEfaces provides tight integration with various popular Java IDEs including Eclipse-based IDEs (BEA Workshop, IBM RAD, Eclipse WTP) as well as NetBeans.

5.3.4 JBoss RichFaces 3.0

http://labs.jboss.com/portal/jbossrichfaces RichFaces is a rich component library for JSF built on top of Ajax4jsf, an advanced framework for easily integrating AJAX capabilities into business application development. The RichFaces components come ready to use out-of-the-box, so developers can immediately save time in taking advantage of component features to create Web applications that provide a greatly improved user experience more reliably and more quickly. RichFaces also includes strong support for the skinnability of JSF applications. RichFaces is built on the foundation of Ajax4jsf framework that allows to:
! ! ! ! !

Leverage the whole set of JSF benefits while working with AJAX Add AJAX capability to existing JSF applications Take advantage of skins-based technology Create new custom rich components with built-in AJAX support Test the components, actions, listeners, and pages in the development process

Adding Ajax4jsf support to existing JSF application

26

AJAX FRAMEWORKS

The key features of RichFaces include:

!

Set of ready-made AJAX components and the ability to add AJAX capabilities to existing components - making possible to create Web applications that are as responsive as regular desktop applications without having to write a single line of JavaScript code Skinnable components - giving more flexibility in trying out different look-and-feel options within a serviceable off-the-shelf Web design when developing applications. This flexibility allows the delivery of projects focused on business goals more quickly. A large number of components - the component-based approach to Web development exemplified in JSF shows great promise for faster and more reliable development, but requires getting quality components to use that are powerful and can be used right outof-the box. RichFaces provides components that allow developers to speedily reap these benefits of component-based development.

<rich:datascroller> component example

<rich:tab> component example RichFaces was originally developed by Exadel as a commercial framework and is being currently open-sourced to JBoss along with its companion Exadel Studio IDE.
27

AJAX FRAMEWORKS

5.3.5 Echo2 2.0.0

http://www.nextapp.com/platform/echo2/echo/ Echo2 is the next-generation of the Echo Web Framework, a platform for developing webbased applications that approach the capabilities of rich clients. The 2.0 version holds true to the core concepts of Echo while providing dramatic performance, capability, and userexperience enhancements made possible by its new Ajax-based rendering engine. Echo2 removes the developer from having to think in terms of "page-based" applications and enables him/her to develop applications using the conventional object-oriented and eventdriven paradigm for user interface development. Knowledge of HTML, HTTP, and JavaScript is not required. Applications may be hosted using any Java servlet container. Echo2, like its predecessor, is open-source software distributed under the terms of the Mozilla Public License (or, if preferred, the GNU LGPL License). Module Divisions The Echo2 framework is divided into three distinct modules: the Application Framework, the Web Rendering Engine, and the Web Application Container. Coupling between the modules are kept to a minimum. The only dependency relationship amongst the modules is that the Web Application Container is dependent upon both the Application Framework and Web Rendering Engine modules. This dependency is NOT reciprocated.

Application Framework The "Application Framework" module provides an API used to represent and manage the state of an application and its user interface. Nearly all of an Echo application developer's interaction with the framework will be through the Application Framework API - the ApplicationInstance, Components, property objects, and event/listener APIs used in developing an application are found within this module.

28

AJAX FRAMEWORKS

One of the most defining characteristics about the Application Framework is actually in what it DOES NOT provide: it specifically does not provide any capability for rendering a user interface to HTML or any capabilities for communicating with Web browsers. Further, it has no dependency on any such code. The Application Framework is designed such that it could theoretically be used in a scenario where a user interface were instead being rendered to Swing, SWT, Flash or any other local or remote environment. Update Manager While the Application Framework does not provide any rendering capabilities of its own, it does provide infrastructure for a rendering agent to interface with it. The Update Manager is used to track updates to the displayed hierarchy of Component objects that make up the user interface of an Echo application, and to process input received from the rendering agent and communicate it to an application and its Components. Web Rendering Engine The "Web Rendering Engine" module is a set of tools which form the foundation of the client/server interaction facilities of the framework. The engine consists of a server-side portion (written in Java and utilizing the Java servlet API) and a client-side portion (written in JavaScript and making extensive use of the XMLHttpRequest object). The Web Rendering Engine is written as a base/utilitarian layer that is entirely independent of / decoupled from any other module. The Web Rendering Engine is built as a somewhat generic API for synchronizing a web browser with a server-side application, and as such it has no direct connection to the Application Framework module. Server Engine The server-side portion of the Web Rendering Engine provides an HttpServlet at its core that is used to process requests from the client. When the servlet receives an HTTP request, it will delegate it to an appropriate Service object based on a service identifier provided in the request. Echo provides numerous Service implementations that perform tasks such as rendering the initial state of a user interface as an HTML document, providing JavaScript modules, providing binary images, and rendering XML messages containing directives to perform frational DOM updates on the client. Client Engine The client-side portion of the Web Rendering Engine is a JavaScript application, which runs in the client web browser and interacts with the server engine to provide a remote user interface to the server-side application. The Client Engine is responsible for initiating connections (via XMLHttpRequeset) to the Server Engine to synchronize client/server state when user operations warrant. It additionally provides a set of utilitarian APIs for interacting with web browsers in a platform-agnostic manner.

29

AJAX FRAMEWORKS

Web Application Container The Web Application Container is an extension of the Web Rendering Engine that serves to render and synchronize the state of a user interface built with the Application Framework with remote web clients. As an extension of the Web Rendering Engine, it provides extensions to both the Server Engine and Client Engine, i.e., it contains server-side Java and client-side JavaScript code.

Demo application. Window Pane.

5.3.6 ThinWire 1.2 RC1

http://www.thinwire.com/ ThinWire is an open source, free for commercial use, development framework that allows to easily build applications for the web that have responsive, expressive and interactive user interfaces without the complexity of the alternatives. While virtually any web application can be built with ThinWire, when it comes to enterprise applications, the framework excels with its highly interactive and rich user interface components. Using ThinWire to handle the viewlayer of Java EE (J2EE) application allows one to provide an unparalleled user experience, while at the same time completing the project in less time. ThinWire takes a completely new and refreshing approach to the problems of web application development. The first thing ThinWire does is accept that HTML and HTTP were designed to deliver static content pages in the form that we see on news and magazine web sites. They are not intended to be used as is, for business process data centric application development. Of course, there is the basic data capture capability using HTML forms useful for filling out an order form or sending an email. However, when talking about your typical business process application, there are often complex business rules driving data entry. Further, it's necessary to have more expressive user interface elements in order to accurately capture and report information to the user. While many of the Ajax techniques that have become popular as of recent address aspects of these problems, the issue with all of them is that they simply add another layer of complexity to an already over-burdened approach to web application programming.
30

AJAX FRAMEWORKS

ThinWire gives a clean and simple approach to solving these issues, which offers a compelling alternative to current practices.

Example e-mail application built using ThinWire An example of building a simple ThinWire application is illustrated on the picture below:

31

AJAX FRAMEWORKS

The main features of the framework are as follows:

!

Development framework for architecting Rich Internet Applications (RIA) that utilize Ajax techniques Familiar event-driven GUI programming model Reconnects the flow of logic, no request response Maintains state naturally via variables, not via session Develop exclusively in server-side language only
! ! !

! ! ! !

Never use HTML, CSS, or JavaScript again Program exclusively in Java Server-Side execution of all application logic.

Rich Set of Complex Widget Components

! ! ! ! ! ! ! !

Menu with image & shortcut-key support Grid with multiple sortable columns TextField & DropDown with real-time edit masking Editable DropDown with multiple sortable columns Tree control with image support TabFolder with image support Push buttons with images Many other cool features.

! ! ! ! !

Optimized for rapidly building productivity apps Completely Dynamic, single page for entire application Content is sent incrementally and only when needed Zero Footprint Client, no browser plug-ins Change Application Look and Feel with Global Style.

32

AJAX FRAMEWORKS

5.3.7 ASP.NET Ajax (codename Atlas)

http://ajax.asp.net/ Microsoft ASP.NET AJAX enables you to quickly create Web pages that include a rich user experience with responsive and familiar user interface (UI) elements. ASP.NET AJAX provides client-script libraries that incorporate cross-browser ECMAScript (JavaScript) and dynamic HTML (DHTML) technologies, and it integrates them with the ASP.NET 2.0 serverbased development platform. By using ASP.NET AJAX, you can improve the user experience and the efficiency of your Web applications. ASP.NET AJAX enables you to build rich Web applications that have many advantages over Web applications that are completely server-based. ASP.NET AJAX applications offer:
!

Improved efficiency by performing significant parts of a Web page's processing in the browser. Familiar UI elements such as progress indicators, tooltips, and pop-up windows. Partial-page updates that refresh only the parts of the Web page that have changed. Client integration with ASP.NET application services for forms authentication and user profiles. Integration of data from different sources through calls to Web services. A framework that simplifies customization of server controls to include client capabilities. Support for the most popular and generally used browsers, which includes Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari.

! ! !

! ! !

Architecture ASP.NET AJAX consists of client-script libraries and of server components that are integrated to provide a robust development framework. In addition to ASP.NET AJAX, you can use the ASP.NET AJAX Control Toolkit and the features in the ASP.NET AJAX Futures releases, which are both community supported.

33

AJAX FRAMEWORKS

The following illustration shows the functionality that is included in the client-script libraries and server components.

ASP.NET AJAX server and client architecture The illustration shows the functionality of the client-based Microsoft AJAX Library, which includes support for creating client components, browser compatibility, and networking and core services. The illustration also shows functionality of server-based ASP.NET 2.0 AJAX Extensions, which includes script support, Web services, application services, and server controls. Server Architecture The ASP.NET AJAX server components consist of ASP.NET Web server controls and components to manage the UI and flow of an application, and to manage serialization, validation, control extensibility, and so on. There are also ASP.NET Web services that enable you to access ASP.NET application services for forms authentication and user profiles. Server Controls The ASP.NET AJAX server controls consist of server and client code that integrate to produce AJAX-like behavior. The following list describes the most frequently used ASP.NET AJAX server controls.
!

ScriptManager. Manages script resources for client components, partial-page rendering, localization, globalization, and custom user scripts. The ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls. UpdatePanel. Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback.

34

AJAX FRAMEWORKS

UpdateProgress. Provides status information about partial-page updates in UpdatePanel controls. Timer. Performs postbacks at defined intervals. You can use the Timer control to post the whole page, or use it together with the UpdatePanel control to perform partialpage updates at a defined interval.

Client Architecture The ASP.NET AJAX client-script libraries consist of JavaScript (.js) files that provide features for object-oriented development. The object-oriented features included in the ASP.NET AJAX client-script libraries enable a high level of consistency and modularity in client scripting. The following layers are included in the ASP.NET AJAX script libraries:
!

Browser compatibility layer. This provides compatibility across the most frequently used browsers (including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari) for your ASP.NET AJAX scripts. ASP.NET AJAX core services, which include extensions to JavaScript, such as classes, namespaces, event handling, inheritance, data types, and object serialization. ASP.NET AJAX base class library, which includes components such as string builders and extended error handling. A networking layer that handles communication with Web-based services and applications, and that manages asynchronous remote method calls. Support for JavaScript libraries that are either embedded in an assembly or are provided as standalone JavaScript (.js) files. Embedding JavaScript libraries in an assembly can make it easier to deploy applications and can solve versioning issues. Support for accessing server-based forms authentication and profile information in client script. This support is also available to Web applications that are not created by using ASP.NET, as long as the application has access to the Microsoft AJAX Library. Support for release and debug modes and localization support for both assembly-embedded and standalone JavaScript files. For more information, see the ASP.NET AJAX Debugging and Tracing Overview and Localizing Resources for Component Libraries Overview.

Control Toolkit The ASP.NET AJAX Control Toolkit is a collection of samples and components that show you some of the experiences you can create with rich client ASP.NET AJAX controls and extenders. The Control Toolkit provides samples and a powerful SDK to make it simple to create and reuse custom controls and extenders. You can download the ASP.NET AJAX Control Toolkit from the ASP.NET Ajax Web site. The ASP.NET AJAX Control Toolkit is community supported.

35

AJAX FRAMEWORKS

5.3.8 Ajax.NET Professional

http://www.ajaxpro.info/ Ajax.NET Professional (AjaxPro) is one of the first AJAX frameworks available for Microsoft ASP.NET and is working with .NET 1.1 and 2.0. Ajax.NET Professional enables you to build rich Web applications that have many advantages over Web applications that are completely server-based. The key benefits of Ajax.NET Professional are as follows:
!

Methods only get attribute, no need to implement interface or inherit from class [AjaxMethod] public int GetAge(string username){:}.

Source-code doesn't change if you want to use the method in server-side code DemoMethods dm = new DemoMethods(); int age = dm.GetAge("michael");

WebServices can be used without code change: <script type= "text/javascript" src="servie1.asmx?AJAX"></script>

Client-side JavaScript will get "real" objects from Ajax.NET calls using JSON <script type="text/javascript"> function test_callback(res) { alert(res.value.FirstName + ' ' + res.value.FamilyName); } </script>

! ! ! ! ! ! !

DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan Create your own IAjaxObjectConverters Cache requests (CacheDurationTimeSpan) Access SessionState objects using HttpContext.Current.Session[] Context support for callback method Unicode support without use of XML parser Use Ajax.NET to retreive events instead of polling

36

AJAX FRAMEWORKS

How it works AJAX relies on a broker to dispatch and process requests to and from the server. For this task, the .Net wrapper relies on the client-side XmlHttpRequest object. The XmlHttpRequest object is well supported by most browsers, making it the solution of choice. The wrapper itself works by marking .Net functions as AJAX methods. Once marked, AJAX creates corresponding JavaScript functions which can be called client-side (liky any JavaScript functions) and that serve as proxies, using XmlHttpRequest. These proxies map back to the server-side function. The necessary common steps to utilize Ajax.NET Professional are as follows:
1) 2)

Add reference ajax.dll to your project Modify your web.config to configure IHttpHandler for Ajax.NET requests <?xml version="1.0" encoding="utf-8" ?> <configuration> <system.web> <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/> </httpHandlers> [...] </system.web></configuration>

3)

Write your methods in C#/VB.NET and add the attribute [AjaxMethod] [AjaxPro.AjaxMethod] public DateTime GetServerTime() { return DateTime.Now; }

4)

To use the .NET method on the client-side JavaScript you have to register the methods, this will be done to register a complete class to Ajax.NET namespace MyDemo { public class _Default { protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); } [AjaxPro.AjaxMethod] public DateTime GetServerTime() { return DateTime.Now; } } }
37

AJAX FRAMEWORKS

5) 6)

If you start the web page two JavaScript includes are rendered to the HTML source. To call a .NET method form the client-side JavaScript code you can use following syntax: function getServerTime() { MyDemo._Default.GetServerTime(getServerTime_callback); asynchronous call }

//

// This method will be called after the method has been executed // and the result has been sent to the client. function getServerTime_callback(res) { alert(res.value); }

5.4 Comparison Matrix

We compared the products according to the requirements (specified in section "Customer Needs") and created the comparison matrix (see Appendix) to facilitate the analysis.

38

AJAX FRAMEWORKS

Appendix. Comparison Matrix

Criteria Direct Javascript Frameworks Prototype Apache DWR XAP IE 6+, Firefox 1+, Safari 1.2+ IE, Firefox , etc. IE 6+, FireFo x 1+, Opera 8+, Safari 1.3+ Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI IE 6+, Firefox 1+, Safari 1.2+, Opera 8+ IE 5.5, IE 6, Firefox 1.0x/Win, Camino/M ac, Firefox 1.5x/Mac Currently, the Drag And Drop is not supported on Safari and the Ajax API requires Safari 2.0.3 jMaki ICE faces Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire IE 5.5+, FireFo x 1+, Opera 8+, Safari 2+, Nokia 770 Tablet ASP.NET Ajax Microsoft Internet Explorer 6.0 or later versions. Mozilla Firefox version 1.5 or later versions. Opera version 9.0 or later versions. Apple Safari version 2.0 or later versions. Ajax.NET Professional Microsoft Internet Explorer 5.0 or later versions. Mozilla Firefox version 1.5 or later versions. Opera version 9.0 or later versions. Apple Safari version 2.0 or later versions. Yes

Browsers supported

IE 6+,Fire Fox 1+, Opera 9+, Safari 2+, Konqu eror 3.5+

IE 6+, FireFox 1.5+, Opera 9+, Safari 2+

IE 6+, FireF ox 1.5+

IE, Firef ox, Mozil la, Safar i, and Oper a

IE6, IE7, Firefox 1.5, Firefox 2.0, Safari 2.x and Firefox 1.5 on Mac OS X Some technologi es experience problems with the Firefox 1.0, Safari, and Mozilla browsers

IE 6+, FireFox 1+, Safari 1.3+

IE 5+, FireFox 1+, Opera 8+, Safari 2+

IE 6, Oper a 9, Firef ox 2

Browser isolation (single code for all browsers)

Mostly

Yes

Mostly

Mostly

Yes

Yes

yes

Yes

Yes

Yes

yes

Yes

Yes

Yes

Yes
39

AJAX FRAMEWORKS

Criteria

Direct Javascript Frameworks Prototype Apache DWR XAP No Yes

Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI No ? jMaki ICE faces

Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire Yes ASP.NET Ajax Need to write JavaScript only for custom scripts Ajax.NET Professional Need to write JavaScript

Developer isolation (no need to write JavaScript)

No

No

No (autog enerat es clientserver code)

Visual design environment No No No No ?

yes No DO M mani pulat ion; buis ness layer is in Java Scrip t

Yes

Yes

yes

No

No

Tibc no o Gene ral Inter face Buil der

Yes

Yes

Ech oStu dio 2 for Ecli pse

No (webbased form builder in the works)

Yes

No

40

AJAX FRAMEWORKS

Criteria

Direct Javascript Frameworks Prototype Apache DWR XAP JSEclips e, Eclipse ATF, others No

Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI JSEcli pse, Eclipse ATF, others ? jMaki ICE faces

Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire No ASP.NET Ajax Microsoft Visual Studio 2005 or Visual Web Developer Express Edition Ajax.NET Professional Microsoft Visual Studio 2003/2005 (VS template)

Supported IDEs

JSEcli pse, Eclipse ATF, others

No

Eclip se, Intelli J

NetBeans, Eclipse 3.2

No
Server-side language/fra mework support Not included (support ed by Ruby on Rails, ajaxtags, wicket, DWR, and others) It does not have any specifi c server require ments. Not include d (suppo rted by many) Not include d (suppo rted by Ruby on Rails, ajaxtag s, wicket, DWR, and others) Yes N/A, only visual library?

No Not include d (suppor ted by many)

Java Java, PHP, JavaScript, Phobos? JSP, JSF

BEA Worksh op, Eclipse WTP, IBM RAD, NetBea ns Java / JSF

Exadel Studio (to be RedHat Develop ment Studio)

Ecli pse

Java / JSF

Java

Java / Java EE

ASP.NET 2.0 / Microsoft .NET Framework 2.0+

ASP.NET 1.0 / Microsoft .NET Framework 1.1+

Java 1.3+
Standard HTML controls supported Extends standard DOM Yes Yes

Web servi ces, HTT P requ ests

yes ?

Yes

No

Extend s DOM, CSS utilities

Yes (skinna ble)

Yes (skinnab le)

yes

Yes

Yes

No

Yes
41

AJAX FRAMEWORKS

Criteria

Direct Javascript Frameworks Prototype Apache DWR XAP No Yes

Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI Slider Accordeon, LiveGrid jMaki ICE faces

Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire Menu, Grid, Tree, TabFol der, others ASP.NET Ajax Yes Ajax.NET Professional No

Advanced controls

Accord ion, Chart, DatePi cker, RichText Editor, Menu, Popup, Slider, Table/ Grid, Toolba r, Tree

Autoco mplete, Button, Calend ar, Panel, Dialog, DataTa ble, Logger, Menu, Slider, TabVie w, TreeVi ew

No

Pane l, Dial og, Split ter, Tabb ed Pane , Colo r Pick er, Date Pick er, Slide r, Grid, Men u, Tool bar, Tree, Soun d, Char t

Men uBar, Tree, TabB ar, Dialo gBox , Popu pPan el, Stac kPan el, som e Pane ls

Dojo, Scriptaculu s, and Yahoo UI Widgets

Chart, Grid / Table, Menu, Tree, Date Picker, Panel

Data Grid, Slider, Spinner, Panel, Tab Panel, Toolbar, Tree, Google Map

yes

42

AJAX FRAMEWORKS

Criteria

Direct Javascript Frameworks Prototype Apache DWR XAP No Yes/?

Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI 5 basic and 16 combin ation effects color, size, position jMaki ICE faces

Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire Animat ions frame work ASP.NET Ajax color, size, position Ajax.NET Professional No

Visual effects

No
Drag and drop No ?

11 effects and chainin g suppor t Yes, with sorting suppor t and effects Yes

Animat ion framew ork, CSS effects Yes

yes

18 effects

No

yes

CSS
no Yes

Yes, with sorting suppor t No

Yes

Yes

Yes

no

Yes

Yes

No

No
Grids, data binding No Yes

Yes
LiveGrid

Yes (beta) Yes

Tabl e

Yes

Yes

yes

Yes

No
Advanced features (page flow designer, RAD framework) No No No No ?

Standard ASP.NET 2.0 data controls/bin ding Standard ASP.NET 2.0 features.

No

No

No

no Inbrow ser RAD tool (GI Buil der)

RAD tool

RAD tool

no

RAD frame work in Java

No

43

AJAX FRAMEWORKS

Criteria

Direct Javascript Frameworks Prototype Apache DWR XAP Failure handlers, debuggin g utils Yes

Component Frameworks Dojo script.ac Open Rico Yahoo! UI Tibco GWT ulo.us (YUI) GI Failure handle rs, debug ging utils, unit testing using Firebug or other tools? jMaki ICE faces

Server-drive frameworks JBoss Rich Faces Echo2 Thin Wire Java excepti ons / debug ging ASP.NET Ajax Yes Ajax.NET Professional No

Error handling and debugging features

JS error handle rs, except ion propag ation from/t o Java

Debug ging utils

Failure case in Connec tion support Error hand lers, debu gger

Java debu g, JUnit

? via NetBeans ?

Java/JS F excepti ons / debuggi ng

Java/JS F exceptio ns / debuggi ng

Java

Documentatio n quality

Medium

Good

Good

Mediu m

Mediu m
Maturity Medium ?

there are online demos and tutorials ?

Mediu m Goo d Mediu m Free / opensource Goo d Free / open sour ce

norm al

there are online demos and tutorials ?

Excelle nt

Good

medi um

Mediu m

Very good (online + offline)

Poor

Mediu m
License and support price Free / opensource Apach e Licens e

Mediu m Free / opensource

Mediu m Free / opensource

norm al free

Good

Good

medi um free

Low

Enough (First release) Itself free (but works only with ASP.NET 2.0+)

Enough

Free / opensource

free and opensource Apache 2.0 License

free, open source

Free / opensource

Free / opensource

Free / opensource

Itself free (but works only with ASP.NET 1.1/2.0)

44