Patterns - Ajax Patterns

Patterns

From Ajax Patterns

Contents

[edit]

Programming Patterns (25)

[edit]

Web Services

  • RESTful Service Expose web services according to RESTful principles.
  • RPC Service Deepak 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.
[edit]

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 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.
  • Distributed Events Keep objects synchronised with an event mechanism.
  • Cross-Domain Proxy Allow the browser to communicate with other domains by server-based mediation.
  • Flash-enabled XHR A client-side proxy pattern for cross-domain Ajax, using invisible flash to bridge the domain communication gap.
[edit]

DOM Population

[edit]

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.
  • 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.
[edit]

Code Generation and Reuse

[edit]

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.

[edit]

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.
[edit]

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
  • 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.
[edit]

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.
[edit]

Visual Effects

  • Highlight Highlight elements by rendering them in a consistent, attention-grabbing, format.
[edit]

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.
  • Autosave Autosave un-validated forms to a staging table on the server to avoid users losing their work when their session expires if they get called away from their desk while filling out a long form.
  • 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.
[edit]

Development Practices (8)

[edit]

Diagnosis

Retrieved from "http://ajaxpatterns.org/Patterns"