Successful Deployment of Ajax and OpenAjax

http://www.openajax.org/whitepapers/Successful Deployment of Ajax an...

Successful Deployment of Ajax and OpenAjax
Abstract The OpenAjax Alliance has assembled a set of white papers as a guide to help Web developers and IT managers understand and evaluate Ajax, define a successful Ajax strategy, and become familiar the important role OpenAjax plays in the development of the Ajax market. The white papers are: Introducing Ajax and OpenAjax When Does Ajax Make Business Sense Next-Generation Applications Using Ajax and OpenAjax Successful Deployment of Ajax and OpenAjax (this document) Ajax and Mashup Security Introduction to Mobile Ajax for Developers Good News for Ajax - The Browser Wars Are Back Introducing OpenAjax Hub 2.0 and Secure Mashups OpenAjax Hub 2.0 and Mashup Assembly Applications

Contents 1 Multiple architecture options 2 Client-side vs. server-side 2.1 Client-side Ajax transformations 2.2 Server-side transformations 3 Single-DOM vs. Dual-DOM (client-side and server-side) 3.1 Single-DOM 3.2 Dual-DOM (client-side) 3.3 Dual-DOM (server-side) 4 Procedural vs. declarative client-side frameworks 5 Conclusion

1 Multiple architecture options
The Ajax community provides a rich and diverse set of product offerings from hundreds of suppliers. The various options reflect the diversity and innovation within the arena of Ajax products and services, with strong competitive product offerings across multiple market segments. This diversity provides IT managers and Web developers with the ability to choose the optimal architectural approach and best products among multiple vendors in order to meet their particular requirements and fit in with their existing practices. The following are some of the ways to categorize Ajax toolkits and frameworks.

2 Client-side vs. server-side
Most Ajax technologies transform a platform-independent definition of the application (usually consisting of a combination of markup and logic) into the appropriate HTML and JavaScript content that is then processed by the browser to deliver a rich user experience. Some Ajax designs perform most of their transformations on the client. Others perform transformations on the server. 2 1 Client-side Ajax transformations

1 of 6

3/30/2011 1:10 PM

Successful Deployment of Ajax and OpenAjax http://www.g..g.2 Server-side transformations Server-side Ajax sometimes follows the model shown below: 2 of 6 3/30/2011 1:10 PM . The server delivers Web content (HTML.. manage client-server data communications and update user interface elements to reflect new data) One advantage of this option is the independence from the server side technology...html.org/whitepapers/Successful Deployment of Ajax an. The browser renders the revised HTML/etc. the application development team typically provides the following server-side components: Web pages (e. such as event handlers for UI events client-side data management (e. JavaScript. This way either side can be swapped with another implementation approach. 2. CSS.) which is processed by the client-side Ajax engine into revised Web content..g. Java) data management (e. *. *. via a SQL database and/or Web Services) and the following client-side components: client-side user interface logic. *..openajax. content that comes out of the Ajax engine. the Ajax engine runs on the client. etc. With this architecture.asp) application logic (e. *.. The diagram below shows a common approach to client-side Ajax. With client-side Ajax.php.g. The server code creates and serves the page and responds to the client's asynchronous requests.jsp.

the development and debugging phase handles all events on the server. CSS. On the other side of the spectrum. The implementation strategies of server-based Ajax frameworks vary. These frameworks typically hide all the JavaScript that runs in the browser inside widgets. With this architecture. an Ajax server component performs most or all of the Ajax transformations.. For some frameworks.g. Java or RoR). For server-side Ajax. If pre-built capabilities don't suffice. The following example illustrates the Single-DOM Approach (same processing model as described for Client-side Ajax transformations): The figure below shows a detailed view of how an Ajax runtime library might manipulate the HTML DOM: 3 of 6 3/30/2011 1:10 PM . many events are handled on the client.1 Single-DOM Some Ajax runtime toolkits use a Single-DOM approach where the toolkit uses the browser's DOM for both any original source markup and any HTML+JavaScript that results from the toolkit's Ajax-to-HTML transformation logic. the server handles all the application events. the application development team typically only provides server-side components (Web pages. however.. etc. but in production mode many events are handled on the client. application logic.Successful Deployment of Ajax and OpenAjax http://www. At one side of the spectrum. 3 Single-DOM vs. and data management) and entrusts client-side logic to the Ajax toolkit.openajax. server-side Ajax frameworks expect application code to be written in the server-side language (e. the server-side Ajax toolkit downloads its own client-side Ajax library which communicates directly with the toolkit's server-side Ajax component. editing. new component development exposes the programmer to JavaScript. Dual-DOM (client-side and server-side) 3. and refactoring tools with which developers are already familiar. The main benefit of this approach is that it allows the use of server-side languages for debugging. The server component generates the necessary Web content (HTML. including their events.org/whitepapers/Successful Deployment of Ajax an. JavaScript. but at the price of dependence on a particular server-side technology. As a general rule. Often.) to deliver the desired user experience.

The image below illustrates the Dual-DOM (client-side) approach: 4 of 6 3/30/2011 1:10 PM .. and elements. In this example. Typically. as the programming model matches the traditional approach used in DHTML applications. The Single-DOM approach is particularly well-suited for situations where the developer is adding islands of Ajax capability within an otherwise non-Ajax DHTML application. adding child elements to various rendering constructs such as an existing element). you see both the original HTML markup (unshaded) and the additional HTML markup inserted by the Ajax toolkit (shaded). inline within the original HTML markup (e. thereby providing the various graphics and text necessary to produce the desired visual representation for the tree widgets. the developer is using tree widgets from an Ajax runtime library. where JavaScript/DOM objects from unshaded objects the HTML markup (e.Successful Deployment of Ajax and OpenAjax http://www. the Ajax toolkit inserts . On the left. you see the DOM objects that correspond to the elements in element)..org/whitepapers/Successful Deployment of Ajax an. .. The shaded sections on the right reflect the private data that Ajax libraries typically add to various DOM and JavaScript objects in order to store private data. 3.g.. the DOM object that represents a particular correspond to original HTML markup and shaded objects are ones that have been inserted by the Ajax toolkit. such as run-time state information. On the right.2 Dual-DOM (client-side) Other Ajax runtime toolkits adopt a Dual-DOM approach that separates the data for the Ajax-related markup into an "Ajax DOM" tree that is kept separate from the original "Browser DOM" tree.g.openajax.

which contains the user interface definition for the tree widgets.e. In either case. the HTML DOM and the XML DOM corresponding to the Ajax-specific XML markup for the user interface elements): The above example shows a separate file. in model view controller (MVC) terms.org/whitepapers/Successful Deployment of Ajax an. the Browser DOM as the generated view. which in this case are to be placed into the HTML tree inside the <div> element with id="abctarget". and the Ajax runtime toolkit as the controller. such as full support for XML Namespaces.Successful Deployment of Ajax and OpenAjax http://www. some Dual-DOM Ajax runtime libraries support inline XML. "myapp.openajax. With this approach. The figure below shows a detailed view of how the two DOMs might work (i. It is usually necessary to establish bidirectional event listeners between the Ajax DOM and the Browser DOM in order to maintain synchronization. The Dual-DOM approach has two flavors: Client-side Dual-DOM and Server-side Dual-DOM.. 3. than is possible in the Browser DOM. With Server-side Dual-DOM. With Client-side Dual-DOM.. the second DOM tree is stored on the server. a Dual-DOM Ajax runtime library builds a separate DOM tree. Sometimes (as shown in the example) the separate DOM tree is attached to the 'window' or 'document' objects. the second DOM tree typically consists of a separate tree of JavaScript objects. The following section describes Server-side Dual-DOM. the Ajax DOM can be thought of as the model.3 Dual-DOM (server-side) Some Ajax technologies combine server-side Ajax transformations with a Dual-DOM approach: 5 of 6 3/30/2011 1:10 PM . Sometimes having a separate Ajax DOM enables a more complete set of XML and DOM support..abc". Even though the example shows the use of a separate file. typically using its own XML parser rather than relying on the browser's HTML parser.

with Server-side Dual-DOM. both of which lead to increased customer benefit. With the procedural approach. the application developer directs the toolkit almost exclusively via HTML or XML markup to define the components on the page and the relationships between them. With the declarative approach.org/whitepapers/Successful Deployment of Ajax an. The architectural diversity provides IT managers and Web developers with the ability to choose the optimal architectural approach and best products in order to meet their particular requirements and fit in with their existing practices.. OpenAjax Alliance embraces this diversity because it promotes more efficient application development and speeds delivery of innovative new products and services. JavaScript code may be required in some circumstances..openajax. 4 Procedural vs. The key difference between Server-side Dual-DOM and Client-side Dual-DOM is that. 5 Conclusion Ajax provides several architectural approaches. In this scenario. the application developer directs the toolkit almost exclusively using JavaScript APIs to handle all the events and manipulate widgets. the Ajax DOM and most user interface logic is managed on the server. 6 of 6 3/30/2011 1:10 PM . The Alliance's role is to foster Ajax interoperability within this environment of innovation and choice such that customers realize the benefits in a way that lowers costs and fits within the strategic objective of using open technologies. deferring data handling. Server-side Dual-DOM enables tight application integration with server-side development technologies such as Java Server Faces (JSF). UI state management and UI update logic to the server. the primary job of the client Ajax engine is to reflect back to the server any interaction state changes. Custom XML tags are often defined in the framework's namespace. and each approach is supported by various commercial software products and/or open source projects. but one of the framework's goals is to minimize the need for procedural logic. declarative client-side frameworks Most Ajax runtime toolkits combine procedural and declarative approaches.Successful Deployment of Ajax and OpenAjax http://www.

Sign up to vote on this title
UsefulNot useful