Architechting Ajax Applications
Sample Code & PowerPoint Deck
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?
- A plug-in
- Browser specific
What’s to Dislike?
- Easy to architect poorly
- Excludes some browsers
- Change in mindset
- Challenges search engines
- 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 not 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 do not 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
- Google Maps
- BaseCamp / BackPackit / Tada List / WriteBoards
- Growing daily...
What is Development Like?
Frameworks for Each of These Languages Exist
- ASP Classic
- ActionScript (Flash)
- Yellow fade technique
- 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
- 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?
- 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
- 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
Server-Side Code Generation
- Write a template once
- Server-side advantages
- Unit testing
- Support varying consumers
- Frees you of plumbing code
- Frees you of presentation code
- Emergence of server controls, Atlas anyone?
- Allows client scripts to invoke server-side operations
- Simplicity by abstraction
- 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
- Same-name client side method (Ajax Stub)
- Proxy is JSON object (JSON Message)
- Quickly loads page navigation and core content
- Background process loads larger portions of page
- Anticipate user action
- Pre-load data for quick response
- Browser queries server to fetch new information
- Uses a timer to schedule events
- Suggests using Event Scheduling pattern
- Allow in-line editing of element on the page
- Saves a round-trip to server just to render edit controls
- How does user know what is editable?
- Is modality enforced?
- Change UI consistent with user interaction
- May challenge usability guidelines
- 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
- Require user to explicitly request submission to server
- Doesn’t submit data in the background (Submission Throttling Pattern)