From Ajax Patterns

Contents 1 Foundational Technology Patterns (9) 1.1 Ajax Architecture 1.2 Display Manipulation 1.3 Web Remoting 1.4 Dynamic Behaviour 1.5 Extension 2 Programming Patterns (25) 2.1 Web Services 2.2 Browser-Server Dialogue 2.3 DOM Population 2.4 Performance Optimisation 2.5 Code Generation and Reuse 3 Functionality and Usability Patterns (28) 3.1 Content Widgets 3.2 Form Widgets 3.3 Page Architecture 3.4 Visual Effects 3.5 Functionality 4 Development Practices (8) 4.1 Diagnosis 4.2 Testing

Foundational Technology Patterns (9)

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 Architecture

• Ajax App Cre can be deployed remotely into any modern web browser.

......So Anyone can actually edit the contents of this web page??? How cool... but how annoying

Display Manipulation

• 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 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.
• On-Demand Javascript Downloads Javascript as and when required, instead of downloading it all on page load.

Dynamic Behaviour

• User Action Use Javascript event handlers to respond to user actions.
• Scheduling Use Javascript timers to schedule actions.

Extension

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

Programming Patterns (25)

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.

Browser-Server Dialogue

• 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.
• 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 Optimisation

• 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

• 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 (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.

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 (8)

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.