From Ajax Patterns
Foundational Technology Patterns
These pattern(s) are the building blocks of Ajax applications. They are more "reference patterns" than true "design patterns", at least from the perspective of a modern Ajax developer, who will take these technologies as a given. The 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 App Cre can be deployed remotely into any modern web browser.
- Display Morphing Alter styles and values in the DOM to change display information such as replacing text and altering background colour.
- Page Rearrangement Restructure the DOM to change the page's structure - moving, adding, and removing elements.
- 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.
- Richer Plugin Make your application "more Ajax than Ajax" with a Richer Plugin.
Programming Patterns (25)
- 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.
- Call Tracking Accommodate busy user behaviour by allocating a new XMLHttpRequest object for each request. See Richard Schwartz's blog entry.Note: Pending some rewrite to take into account request-locking etc.
- Periodic Refresh The browser refreshs volatile information by periodically polling the server.
- Distributed Events Keep objects synchronised with an event mechanism.
- Cross-Domain Proxy Allow the browser to communicate with other domains by server-based mediation.
- 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.
- Fat Client Create a rich, browser-based, client by peforming remote calls only when there is no way to achieve the same effect in the browser.
- 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.
Code Generation and Reuse
- Cross-Browser Component Create cross-browser components, allowing programmers to reuse them without regard for browser compatibility.
Functionality and Usability Patterns (28)
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.
- 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.
- 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.
- 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.
- 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
- 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 (8)
- 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)
- Simulation Service Develop the browser application against "fake" web services that simulate the actual services used in production.
- 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.