Craig Shoemaker

Podcast: Architecting Ajax Applications

• Get the show here

Sample Code & PowerPoint Deck

Get the sample code & PowerPoint deck here. Please note the code requires Visual Studio 2005 or Visual Web Developer 2005.

What is Ajax?

• Not always AJAX (the acronym)
• XML not always involved
• Method instead of a technology
• Simulate desktop interaction
• Continuous feel
• Real-time updates
• Rich UI interaction
• More of an open term
• Web remoting + design patterns and guidleines

What is Ajax NOT?

• Proprietary
• A plug-in
• Browser specific

What’s to Dislike?

• Easy to architect poorly
• Excludes some browsers
• Change in mindset
• Challenges search engines
• Poor JavaScript debuggers
• ActiveX control in IE

Ajax Application vs Ajax Website

An Ajax website would be a website that is from top to bottom built with Ajax. This type of website would have all navigation, content management, advertisements and the like managed through an Ajax engine. The URL would never change and the website would be confusing to the user.

A Ajax application is an implementation where a user would have no expectation to be able to copy URLs and interact with the applicatoin using many of the web conventions. GMail is an excellent example of this. Should you choose to forward an email to a friend, you wouldn't copy the URL.

The point is to use Ajax where its appropriate and sprinkle small Ajax applications or design patterns around your site where necessary that way you preserve the established usability standards on the web. You don't want to loose your users.

If Building A Website...

Problems arise when you

• Break the Back button
• Break URL conventions
• Break History functionality
• Use Ajax for micro-apps

Examples of Ajax Applications

• Gmail
• Google Maps
• BaseCamp / BackPackit / Tada List / WriteBoards
• Writely
• Growing daily...

What is Development Like?

Frameworks for Each of These Languages Exist

• ASP.NET
• ASP Classic
• Java
• PHP
• Ruby
• C++
• ColdFusion
• Perl
• Python
• ActionScript (Flash)

Specialized Frameworks

• Yellow fade technique
• Logging
• XML interaction
• Drag N Drop
• Giant Image Viewer

What Can Ajax NOT Do?

• Change browser behavior
• Capture browser events
  • Ex: Close button
• Add/Remove menu items
• Add/Remove icons
• Communicate outside HTTP
• Access local machine
  • File system
  • Hardware
  • Operating System
• Support Rich Media
  • Play sound
  • Rich graphics

Does Ajax Scale?

• Does your application scale?
• Do you use a lot of Session state?
• Do you keep a lot of data in Application state?
• Do you have a Caching model?
• Are your databases properly indexed?
• When do you talk to the server?
  • Each key stroke?
  • What events initiate requests?
  • Each request for information?
• Is data cached client-side?

Scaling Ajax

• Minimizing data transfers
• More requests with less data?

Is Ajax Secure?

• Is your application secure?
• Ajax method might use
  • IP Tracking
  • Ticket authorization
• Remove secure data from Ajax stream - users are trained to look for a specific secure experience

Is An Ajax User Secure?

Myth: Spying is easier with Ajax You could always spy on your user

Be responsible

Ajax Architecture

Design Patterns

• Common language among developers
• Codified and tested approach

Ajax Design Patterns

• There are 60+ cataloged at http://ajaxpatterns.org/
• Patterns range from
  • Display manipulation
  • Performance optimizations
  • Code generation
  • more...

Server-Side Code Generation

• Write a template once
• Server-side advantages
• Debugging
• Unit testing
• Abstraction
• Support varying consumers
• Frees you of plumbing code
• Frees you of presentation code
• Emergence of server controls, Atlas anyone?

Ajax Stub

• Allows client scripts to invoke server-side operations
• Simplicity by abstraction

JSON Message

• Standard serialization method
• Reduces XML parsing
• Parsers for many languages

Will You Implement These Patterns?

Hopefully you will not spend too much time implementing these patterns as a good Ajax framework will have already done the heavy lifting for you.

An Example with the Ajax.NET Framework

• Attributes decorate methods
• System creates JavaScript proxy (Server Side Code Generation)
• Same-name client side method (Ajax Stub)
• Proxy is JSON object (JSON Message)

Multi-Stage Download

• Quickly loads page navigation and core content
• Background process loads larger portions of page

Predictive Fetch

• Anticipate user action
• Pre-load data for quick response

Periodic Refresh

• Browser queries server to fetch new information
• Uses a timer to schedule events
• Suggests using Event Scheduling pattern

Microcontent

• Allow in-line editing of element on the page
• Saves a round-trip to server just to render edit controls

Microcontent Issues

• Undo?
• How does user know what is editable?
• Is modality enforced?

Display Morphing

• Change UI consistent with user interaction
• May challenge usability guidelines

Submission Throttling

• Retain user input in a buffer and submit in intervals
• Doesn’t require an explict “submit” action (Explicit Submission Pattern)
• Take care to maintain privacy

Explicit Submission

• Require user to explicitly request submission to server
• Doesn’t submit data in the background (Submission Throttling Pattern)

Resoures

Podcasts

• Polymorphic Podcast
• Software As She’s Developed
• ASP.NET Podcast
• Ajaxian

Websites

• Ajax Patterns
• Ajaxify
• Ajax Matters
• Fifty Four Eleven

posted on Friday, February 10, 2006 9:37 AM by drazz75

---