Download Real-World Ajax Design Patterns Survey - SYS

Real-World Ajax
Design Patterns Survey
Dion Hinchcliffe
mailto:[email protected]
Sphere of Influence, CTO
http://sphereofinfluence.com
Web 2.0 Journal, Editor-in-Chief
http://web2journal.com
Brief Background on Ajax







Coined as a term in February, 2005 by Jesse James
Garrett of Adaptive Path.
However, really a technique used as far back as 1998.
But came into vogue particularly with the power of new
browsers, Javascript and XmlHttpRequest().
The Web page hosts entire Javascript programs
The UI is manipulated programatically and in real-time
by changing the Document Object Model
The Web page isn’t reloaded unless completely new
functionality is needed.
Information is accessed in the background
(asynchronously) via Web services

XML, JSON, or anything HTTP(S) can transmit
Basic Elements of Ajax
More Sophisticated View of Ajax
Ajax, SOA/Client, and Mashups
Common Elements:
 Zero footprint
 No plug-ins or admin rights
 Use Web services
 Dynamic GUI
 JavaScript
 Can be made secure
 With a little work, can
communicate and combine
data from Web services
anywhere in the world
 Easier with widgets,
frameworks and Web
service stacks pre-built
Sophisticated Ajax Frameworks
Lightweight Frameworks
Ajax Frameworks vs. Widgets
Full Context of Ajax:
Web 2.0 and Global SOA
Constraints on Ajax
What’s a Design Pattern?

Definiton: A standard solution to a common, recurring
problem in computer science.




Aren’t necessarily finished designs that can be transformed
directly into code.
It is usually a description or template for how to solve a problem
that can be used in many different situations.
Are now a key learning and knowledge transmission technique in
software development.
Background: Patterns originated as an architectural
concept by Christopher Alexander.

Design patterns gained mass popularity in computer science
after the book Design Patterns: Elements of Reusable ObjectOriented Software was published in 1994.
Foundational Ajax Design
Patterns





Basic design patterns frequently found in your
garden variety Ajax application
More reference models than true design
patterns
There are 66 common Ajax Design Patterns in
14 loosely organized groups
More info at http://ajaxpatterns.org
Addresses serious issues surrounding the
design of Ajax software

Partially addresses the problem of the loss of GUI
conventions
Foundational Patterns Cont’d
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 browserserver 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.
Ajax Programming Patterns Pt. 1
Web Services – Ways to feed your Ajax app









REST Service - Expose web services according to RESTful principles.
RPC Service - Expose web services as Remote Procedural Calls
(RPCs).
HTML Response -Have the server generate HTML snippets to be
displayed in the browser.
Semantic Response - Have the server respond with abstract, semantic,
data.
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.
RSS Message – Pass messags between server and browser in Really
Simple Syndication format.
SOAP Message – Pass messags between server and browser in SOAP.
Ajax Programming Patterns Pt. 2
Performance Optimisation – Making Ajax Fast







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.
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.
Ajax Programming Patterns Pt. 3
Extension – Remixing and Mashing


Cross-Domain Proxy – Crucial to allow the browser to communicate with other domains by
server-based mediation.
Richer Plugin - Make your application "more Ajax than Ajax" with a Richer Plugin.
Code Generation and Reuse – Extensibility and Simplicity



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.
Server-Side - Code Generation Automatically generate HTML and Javascript from serverside code.
Cross-Browser Component - Create cross-browser components, allowing programmers to
reuse them without regard for browser compatibility.
Content Widgets – Reusable Informational Elements





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.
Ajax Programming Patterns Pt. 4
Form Widgets – Reusable Visual Controls








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 –Interactively, as the user refines their search query, continuously show
the current results.
Data Grid – Visually display some data in a rich table layout, and support common
sorting and searching functions.
Progress Indicator - Hint that processing is occurring.
Rich Text Editor – Lets users edit complex, formatted documents with markup
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 – Organizing the Overall Ajax Application




Drag-And-Drop - Provide a drag-and-drop mechanism to let users visually rearrange
elements around the page.
Sprite – Decorate the user interface 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.
Ajax Programming Patterns Pt. 5
Visual Effects – Making Ajax Sizzle...




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.
Functionality – Adding Depth and Power to Ajax Apps







Periodic Refresh - The browser refreshs volatile information by periodically polling the
server.
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 descrypting 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.
Ajax Programming Patterns Pt. 6
(and final)
Diagnosis – Figuring Out Ajax Applications





Logging - Instrument your Javascript with log messages (use Log4Ajax).
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 services messages.
Feature Use – Tracking which application features are used and how often
Testing – Fixing Ajax Applications




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.
Questions and Feedback?