Wednesday, February 14, 2007

WK5 - Summary on the third party libraries for AJAX.

The library has wrapped up common functionality, and been reused across projects, and it can reduce the amount of custom coding needed for a project and increases productivity. Furthermore, since, the library code has already been tested in previous projects, the quality can be expected to be high.

Cross-browser libraries


It is to help to resolve the inconsistencies between different browser. some focus on functionality, some focus on programming environment.

x library

Its general-purpose library is for writing DHTML application. It provides cross-browser functions for manipulating and styling DOM elements, working with browser event model, and includes out-of-box support libraries for animation and drag and drop. It doesn't contain any code for the creating network requests, but is a useful library for constructing the user interfaces for AJAX application. written in a clear, understandable style.

Sarissa

More targeted library than x, and is concerned chiefly with XML manipulation in JavaScript. The most important piece of functionality for AJAX developers is cross-browser support for the XMLHttpRequest object. It supports IE's MSXML ActiveX components (version 3+), Mozilla, Opera, Konqueror, Safari for basic functionality, some of advanced feature such as XPath and XSLT are supported by a smaller range of browsers.

Sarissa also provides a number of generic support mechanisms for working with XML documents, such as serialize arbitrary JavaScript objects to XML. If we use XML as the markup for response data, these mechanisms can be useful in processing the XML documents returned from an AJAX request to the server.

Prototype


Prototype is a general-purpose helper library for JavaScript programming, with an emphasis on extending the JavaScript language itself to support a more object-oriented programming style. Prototype code itself can be difficult to read, most developers are more likely to use the libraries built on top of Prototype than to use Prototype itself.

Feature:
  1. Allow one object to "extend" another by copying all of the parent object's properties and methods to the child.
  2. Prototype also provides AJAX support in the form of an AJAX object that can resolve a cross-browser XMLHttpRequest object. AJAX is extended by the Ajax.Request type, which can make requests to the server using XMLHttpRequest, like so: var req=new Ajax.Request('myData.xml'); An associate array as an optional argument allows a wide range of options to be configured, such as post data, request parameters, HTTP method, and callback handlers to be defined.
Widgets and widget suites

With these tools constructing functional UIs and application logic is certainly simplified.

Scriptaculous

It is built on top of Prototype library. It provide 2 major pieces of functionality.

  1. The effect library defines a range of animated visual effects that can be applied to DOM elements ( change size, position, and transparency); A number of predefined secondary effects such as Puff() makes an element grow larger and more transparent until it fades away completely. Another core effect is called Parallel(), enable simultaneous execution of multiple effects.
  2. Provide a drag-and-drop library, through Sortable class. This class takes a parent DOM element as an argument and enables drag-and-drop functionality for all its children.
Rico

  • It is built on Prototype library too. Not only provide some highly customizable effects and drag-and-drop effects functionality. In addition, it provides a concept of a Behavior object, a piece of code that can be applied to part of a DOM tree to add interactive functionality to it.
  • Last feature of Rico to mention is that it provides very good support for AJAX-style requests to the server, through a global Rico Ajax Engine object. It defines an XML response format that consists of a number of elements. The engine will automatically decode these, and it has built-in support for two types of response: 1) direct update DOM elements and 2) update JavaScript objects.
Gaia Ajax Web Widgets - to its Homepage

Gaia Ajax Web Widgets is an Ajax library for developing Ajax applications for ASP.NET. (2.0 and higher) It is a commercial library but has a stripped down free .zip download. It has a different approach than most of the other Ajax widgets libraries that mostly do update the complete HTML and sends HTML over the net. Instead Gaia has chosen to mirror the control class hierarchy on the client side and post JavaScript updates to concrete objects. It relies heavily on Prototype.js and Scriptaculous in its core and consists of fairly advanced JavaScript code like prototype inheritance and JavaScript "polymorphism". Though all JavaScript is abstracted away so the developer can mostly develop in the language he's used to developing in like C# or VB.NET.

Microsoft AJAX Library - to Microsoft AJAX Library

The Microsoft AJAX Library is a standalone collection of the standards-based JavaScript classes included in ASP.NET AJAX. It is supported by most popular browsers and can be used to build client-centric web applications that integrate with any back end data provider.

Reference:

WK5 - Model-View-Controller (MVC) applying to AJAX;

Model-View-Controller (MVC) is a way of describing a good separation between the part of a program that interacts with a user and the part that does the heavy lifting, number crunching, or other "business end" of the application.

The MVC pattern identifies three roles that a component in the system can fulfill.

The Model is the representation of the application's problem domain, the thing that it is there to work with. For example, a word processor would model a document; a mapping application would model points on a grid, contour lines, and so on.

The View is the part of the program that presents things to the user- input forms, pictures, text or widgets. The view need not be graphical. In a voice-driven program, for example, the spoken prompts are the View.

The golden rule of MVC is that the View and the Model shouldn't talk to each other. Taken at face value, that might sound like a pretty dysfunctional program, but this is where the Controller comes in. When the user presses a button or fills in a form, the View tells the Controller. The Controller then manipulates the Model and decides whether the changes in the Model require an update of the View, it tells the View how to change itself.

The advantage of this is that the Model and View remain loosely coupled, that is, neither has a deep understanding of the other. Obviously they need to enough to get the job done, but the View knows about the Model only in very general terms.

Come back to AJAX and look at Figure 3.8. The Model is our collection of domain objects, persisted to the database automatically using our ORM (Object Relational Mapping). The View is the template defining the XML format. The Controller is to glue the Model and the View together. In web server tier of AJAX application which serves XML documents.

Although different design pattern we work with, the principle is the same. For some instances, J2EE enterprise beans abstract the Model and Controller to the point where they can reside on different servers. .NET "code-behind" classes delegate the Controller role to page-specific objects, whereas frameworks such as Struts define a "front controller" that intercepts and routes all request to the application. Framework such as Apache Struts have works this down to a fine art, refining the role of the Controller to route the user between pages, as well as applying at the single-page level. (In an AJAX application, we might do this in the JavaScript.) But in all cases, the mapping is basically the same, and this is how MVC is generally understood in the web application world.

Describing our web architecture using MVC is useful approach, and it will continue to serve us well as we move from classic to AJAX-style application. But it isn't the only use to which we can put MVC in AJAX.

Reference: