Ajax Patterns

Foundational Technology Pattern

These pattern(s) are the building blocks of Ajax applications. patterns are included to introduce the types of technologies that are used, provide a common vocabulary used throughout the language, and facilitate a discussion of pros and cons.

Ajax Architecture:
(Ajax App) Create a rich application in a modern web browser.

Display Manipulation:
(Page Rearrangement) Restructure the DOM to change the page's structure - moving, adding, and removing elements.

Web Remoting
* Web Service Expose server-side functionality with an HTTP API.
* XMLHttpRequest Call Use XMLHttpRequest objects for browser-server communication.
* IFrame Call Use IFrames for browser-server communication. * HTTP Streaming Stream server data in the response of a long-lived HTTP connection.

Dynamic Behaviour
* User Action Use Javascript event handlers to respond to user actions.
* Scheduling Use Javascript timers to schedule actions.

Javascript OOP patterns
* Lazy Inheritance An approach intended to simplify writing OOP and provides support of prototype-based classes hierarchies, automatic resolving and optimizing classes dependencies.

Extension
* Richer Plugin Make your application "more Ajax than Ajax" with a Richer Plugin.

Programming Patterns

Web Services
* RESTful Service: Expose web services according to RESTful principles.
* RPC Service :Expose web services as Remote Procedural Calls (RPCs).
* Ajax Stub: Use an "Ajax Stub" framework which allows browser scripts to directly invoke server-side operations, without having to worry about the details of XMLHttpRequest and HTTP transfer.
* HTML Message: Have the server generate HTML snippets to be displayed in the browser.
* Plain-Text: Message Pass simple messages between server and browser in plain-text format.
* XML Message: Pass messages between server and browser in XML format.
* JSON Message: Pass messages between server and browser in Javascript Object Notation (JSON) format.
* UED Format: Send message from the browser to the server using the UED Data exchange format.

Browser-Server Dialogue
* Call Tracking :Accommodate busy user behaviour by allocating a new XMLHttpRequest object for each request.
* Periodic Refresh: The browser refreshes volatile information by periodically polling the server.
* 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.
* Distributed Events: Keep objects synchronised with an event mechanism.
* Cross-Domain Proxy: Allow the browser to communicate with other domains by server-based mediation.

DOM Population
* XML Data Island: Retain XML responses as "XML Data Islands", nodes within the HTML DOM.
* Browser-Side XSLT: Apply XSLT to convert XML Messages into XHTML.
* Browser-Side Templating: Produce browser-side templates and call on a suitable browser-side framework to render them as HTML.

Performance Optimization
* Fat Client: Create a rich, browser-based, client by performing remote calls only when there is no way to achieve the same effect in the browser.
* Object Persistence: Persisting JavaScript objects into a server or local persistent storage area
* Browser-Side Cache: Maintain a local cache of information.
* Guesstimate: Instead of grabbing real data from the server, make a guesstimate that's good enough for most user's needs. ITunes Download Counter, GMail Storage Counter.
* 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.
* Pseudo-Threading: Use a timer and a worker queue to process jobs without the blocking application flow.
* Code Compression: Compress code on the server, preferably not on the fly.
* On-Demand Javascript: Downloads Javascript as and when required, instead of downloading it all on page load.

Code Generation and Reuse
* Server-Side Code: Generation Automatically generate HTML and Javascript from server-side code.
* Cross-Browser Component: Create cross-browser components, allowing programmers to reuse them without regard for browser compatibility.

Functionality and Usability Patterns

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.

Content Widgets
* Drilldown: To let the user locate an item within a hierarchy, provide a dynamic drilldown.
* Microcontent: Compose the page of "Microcontent" blocks - small chunks of content that can be edited in-page.
* Microlink: Provide Microlinks that open up new content on the existing page rather than loading a new page.
* Popup: Support quick tasks and lookups with transient Popups, blocks of content that appear "in front of" the standard content.
* Portlet: Introduce "Portlets" - isolated blocks of content with independent conversational state.

Form Widgets
* Live Command-Line: In command-line interfaces, monitor the command being composed and dynamically modifying the interface to support the interaction.
* Live Form: Validate and modify a form throughout the entire interaction, instead of waiting for an explicit submission.
* Live Search: As the user refines their search query, continuously show all valid results.
* Data Grid: Report on some data in a rich table, and support common querying functions.
* Progress Indicator: Hint that processing is occurring.
* Rich Text Editor e.g. http://dojotoolkit.org/docs/rich_text.html
* Slider: Provide a Slider to let the user choose a value within a range.
* Suggestion: Suggest words or phrases which are likely to complete what the user's typing.

Page Architecture
* Drag-And-Drop: Provide a drag-and-drop mechanism to let users directly rearrange elements around the page.
* Sprite: Augment the display with "sprites": small, flexible, blocks of content.
* Status: Area Include a read-only status area to report on current and past activity.
* Virtual Workspace: Provide a browser-side view into a server-side workspace, allowing users to navigate the entire workspace as if it were held locally.

Visual Effects
* One-Second Spotlight: When a page element undergoes a value change or some other significant event, dynamically manipulate its brightness for a second or so.Responded
* One-Second Mutation: When a page element undergoes a value change or some other significant event, dynamically mutate its shape for a second or so.
* One-Second Motion: Incrementally move an element from point-to-point, or temporarily displace it, to communicate an event has occurred.
* Highlight: Highlight elements by rendering them in a consistent, attention-grabbing, format.
* Blinkieblinkpattern: When an element is blinking

Functionality
* Lazy Registration: Accumulate bits of information about the user as they interact, with formal registration occurring later on.
* Direct Login: Authenticate the user with an XMLHttpRequest Call instead of form-based submission, hashing in the browser for improved security.
* Host-Proof: Hosting Server-side data is stored in encrypted form for increased security, with the browser decrypting it on the fly.
* Timeout: Implement a timeout mechanism to track which clients are currently active.
* Heartbeat: Have the browser periodically upload heartbeat messages to indicate the application is still loaded in the browser and the user is still active.
* 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.

Development Practices

Diagnosis
* Logging: Instrument your Javascript with log messages.
* Debugging: Diagnose problems with a Javascript debugger.
* DOM Inspection: Use a DOM Inspection Tool to explore the dynamic DOM state.
* Traffic Sniffing: Diagnose problems by sniffing Web Remoting traffic.
* Data Dictionary: Visualize DOM tags in a table format, with a row for each attribute. (Contributed pattern)

Testing
* Simulation Service: Develop the browser application against "fake" web services that simulate the actual services used in production.
* Browser-Side Test: Create automated tests of browser-side Javascript components.
* Service Test: Build up automated tests of web services, using HTTP clients to interact with the server as the browser normally would.
* System Test: Build automated tests to simulate user behaviour and verify the results.