Smuttygirl.info

From Ajax Patterns

We are uncovering new ways to weave the world wide web.

Ajax In General: Whats AJAX? | AJAXPrinciples | AJAXFrameworks

Ajax Patterns:' Why AJAX Patterns? | BrainDump | Incoming | Credits

Subscribe to Feeds: New Pages (Recommended)     Recent Changes (Noisy)

Contents 1 Background 2 Foundational Technology Patterns 2.1 Changing Browser Content with the DOM 2.2 Remote Scripting 2.3 Events and Scheduling 3 Programming Patterns 3.1 Browser-Server Dialogue 3.2 Browser-Server Messages 3.3 XMLHttpRequest Scripting 3.4 UI Scripting 3.5 Server-Side Programming 3.6 Development and Deployment Practices 4 Functionality and Usability Patterns 4.1 Browser Widgets 4.2 Widget Interaction Idioms 4.3 Performance Optimisation 4.4 Functionality 4.5 Transactions 4.6 Display Patterns 5 System Archetypes

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

Background

AjaxPatterns.org is an in-progress collection of AJAX patterns being collected and discovered by Michael Mahemoff, building on an initial draft published on my blog about a month ago. Contributions and comments are very welcome. For the next few weeks, the main pages are read-only as I am aiming to keep the language structure as cohesive as possible. Meanwhile, you can now edit the Discussion area and I'm watching the RSS feed closely, so any comments will be incorporated into the main pages ASAP. What's here is CC-licensed, so please feel free to pull any content into your own work.

News:

• June 15, 2005 - Added about 20 new patterns and completely restructured the pattern language.
• June 13, 2005 - Reinstalled the wiki today to fix editing and broken links on special pages. Ongoing, the pattern URLs will be neat, ie ajaxpatterns.org/PatternName.

Foundational Technology Patterns

These patterns cover the basic building blocks of Ajax applications. They are more "reference patterns" than true "design patterns" as they are intended to introduce the types of technologies that are used, provide a common vocabulary used throughout, and facilitate a discussion of pros and cons.

Changing Browser Content with the DOM

• Display Morphing Alter styles and values in the DOM to change display information such as replacing text and altering background colour.
• Control Redefinition Alter event handlers in the DOM to redefine what happens when certain events occur.
• Page Rearrangement Restructure the DOM to change the page's structure - moving, adding, and removing elements.

Remote Scripting

Not presently included because of portability concerns: Live Scripting, Java Applets.

• XMLHttpRequest Remoting Recruit XMLHttpRequest objcets to issue requests from browser to server.
• Frame-Driven Remoting Recruit a hidden Frame, or an IFrame, to issue requests from browser to server.
• Persistent Connection Remoting Allow immediate notification to the browser by keeping the HTTP connection open.
• Javascript Syndication Incorporate content and basic scripting from an external site by including some Javascript it is serving. Tutorial e.g. Google Adsense.

Events and Scheduling

• User Event Monitoring DHTML.
• Page Lifecyle Monitoring DHTML. Avoiding onload conflicts.
• Event Scheduling Javascript timer functions.

Programming Patterns

Browser-Server Dialogue

• Modeless Dialogue Use asynchronous calls and a parallel interaction style to ensure the user can continue working while server calls are in progress.
• RESTful Services Expose server-side information using RESTful services.
• Heartbeat Establish a heartbeat protocol to ensure the browser and the server are aware of each other's activation status.
• Middleware Messaging Adaptors Combine a Javascript adaptor with an HTTP adaptor to hook into a middleware messaging framework. (e.g. ActiveMQ Ajax Support.)
• No-Cache Directives When server responses to the same query are volatile (the request is not idempotent), they should direct the browser against caching.
• Generic Services Where several client applications access the server, make the server independent of application logic by exposing generic (non-application-specific) services on the server.
• Specialised Services Where only one client application access the server, consider offering application-specific operations.
• HTML-Generating Services Where complex DOM updates are required, have the server-side generate the required HTML.
• Cross-Domain Mediator [Speculative] Allow the browser to communicate with other domains by server-based mediation.

Browser-Server Messages

Messaging between the browser and the server. In particular, what sort of messages will XMLHttpRequest receive?

• Value Text Response A simple value can be returned as plain-text response, e.g. "true", "Yarraville", "42".
• Value-List Text Response A list of simple values can be returned a list in plain-text, e.g. "larry moe curly" (use split).
• Simple Structure Text Response A simple structure can be returned as a list of key-value pairs, e.g. "Japan=Tokyo,New Zealand=Wellington".
• Structured XML Response More complex data structures can be returned as xml.

XMLHttpRequest Scripting

• XMLHttpRequest Factory Function Encapsulate creation of the XMLHttpRequest object into a portable factory function.
• Call Tracking Accommodate busy user behaviour by allocating a new XMLHtpRequest object for each request. See Richard Schwartz's blog entry.
• Javascript XML Parser To read XML in Javascript, reuse a portable library like Sarissa
• Browser-Side XSLT Use XSLT to transform XML responses into HTML and Javascript. Performed by Google Maps.
• DOM Data Store Manage browser-side state with custom DOM objects.

UI Scripting

• Rich CSS Lean heavily on CSS to give a rich, graphical, appearance, without having to download images.
• Drag-And-Drop See http://www.walterzorn.com/dragdrop/dragdrop_e.htm.
• Animation e.g. Prototype.js
• Richer Plugin Make your application "more AJAX than AJAX" by offering an application-specific browser plugin.

Server-Side Programming

• Browser-Agnostic Components Encapsulate units of DHTML activity into browser-agnostic components.
• Server-Side Code Generation Use a server-side framework to generate the HTML and associated Javascript.

Development and Deployment Practices

• Javascript Debugging Diagnose problems with a Javascript debugging tool.
• DOM Visualising Diagnose problems with a DOM visualisation tool.
• Traffic Sniffing Diagnose problems with a sniffer of browser-server traffic, in particular XMLHttpRequest messages.
• Logging Diagnose problems with logging on both browser-side and server-side.
• Server-Side Simluation Stubs Introduce stubs to simulate fully-functional services.
• Service Unit Tests Using a programmatic HTTP client (robot), unit-test the server-side services.
• Automated System Tests Using a programmatic HTTP or GUI client, create automated tests to simulate user activity.
• Incremental Ajaxifying Incrementally incorporate Ajaxian features into extant systems.

Functionality and Usability Patterns

Browser Widgets

All of these widget patterns will be familiar to end-users, having been available in desktop GUIs and some in non-AJAX DHTML too. They are included here to catalogue the interaction styles that are becoming common in AJAX applications and can benefit from XMLHttpRequest-driven interaction.

• Popup Data Input
• Popup Information See http://www.javarss.com/ajax/j2ee-ajax.html
• Form Validation
• Drilldown See http://betfair.com sidebar.
• Auto-Completion See http://www.google.com/webhp?complete=1
• Live Search See AjaxPatterns Live Search Demo, Amazon Diamonds Search.
• Live Command-Line See Ajaxifying the Address-Bar Interface.
• Virtual Workspace Browser presents a portal into a larger workspace.
• Never-Ending Page [Speculative] Page keeps adding results as you scroll further down.
• Interactive Portlet Introduce blocks of interactive content that users can move around, resize, remove from a Portal Application See Backbase demo.
• Query-Report Application
• Status Area
• Dynamic List A list of items which may change externally, and can be restructured with drag-and-drop.
• Tabs Tabtastic
• Sort-And-Filter See http://www.deltavacations.com/destination.aspx?code=MONTEGOBAY (thanks to Christian Romney for this pattern and example).

Widget Interaction Idioms

• Outline Selection See http://www.baekdal.com/x/xmlhttprequest/
• Highlighting Selection See http://www.baekdal.com, http://a9.com/-/search/moreColumns.jsp
• Fading Technique See http://www.37signals.com/svn/archives/000558.php
• Panning And Zooming e.g. http://maps.google.com.

Performance Optimisation

• Browser-Side Interaction Ensure most events are handled locally, resorting to server-side interaction only when there is no local facility.
• Browser-Side Cache Maintain a local cache of information.
• Submission Throttling Instead of submitting upon each Javascript event, retain the data in a local buffer and upload it periodically.
• Explicit Submission Instead of submitting upon each Javascript event, require the user to explicitly request it, e.g. submit upon clicking a button
• Multi-stage Download Quickly download the page structure with a standard request, then populate it with further requests.
• Predictive Fetch Anticipate likely user actions and pre-load the required data.
• Cross-Domain Portlet Introduce Interactive Portlets to facilitate a conversation between the user and a third-party, e.g. for services or "advertising as conversation".

Functionality

• Periodic Refresh The browser should refresh any volatile information by periodically polling the server.
• Server-Side Encryption Where the server-side data store is untrusted, encrypt it and have the browser descrypt it on the fly.
• Lazy Registration Tahpot

Transactions

• Short Transaction Services Use short-lived transactions for any services which manipulate persistent data. Incorporating enabling and disabling of controls.
• Optimistic Locking Services can incorporate optimistic locking validation,

and provide cues to help user decide if an upcoming transaction will be feasible.

• Pessimistic Locking Services can incorporate pessimistic locking validation, providing visual cues about current locks, and using heartbeat techniques to control timeouts.

Display Patterns

• Embedded Text Integrate text into graphics, and rely on Rich CSS to show text when fancy styling is desirable.
• Age Display Indicate the age of any critical information. Vary background brightness, for instance.
• Synchronisation Status Provide hints that indicate what's synchronised and what's pending.
• Progress Indicator Hint that processing is occurring.
• Multi-User Awareness Provide cues about presence and activities of other users.
• Unique URLs Use a URL-based scheme or write distinct URLs whenever the input will cause a fresh new browser state, one that does not depend on previous interaction.

System Archetypes

A bit experimental. Maybe not patterns in the usual sense, but nonetheless useful because we can consider how the smaller patterns are weaved to form a particular type of system.

• Portal Application Backbase Example My Google?
• Data Entry Application
• Collaborative Application e.g. Wiki
• Literature Application brief mention
• Legacy Application Port old applications, such as console applications, to a web front-end. [1].

---

"AJAX patterns wiki - 100% buzzword compliant" -- RevGeorge