AjaxDesignPatterns
From MashupCamp
Contents |
Discuss this topic online
Topics
Scott Isaac (Msft) delivers the download
Composition
a useful map from the Mix06 talk NGW020 - Lessons from the Trenches: Engineering Great AJAX Experiences
Server Composed Pages
- components directly embedded as page loads
- ie, reloading components reloads page
- initially easier to implement (content written into document)
- intelligent caching is more difficult - page size grows quickly
- all components impact page load
Client Composed Pages
- components dynamically included on the page
- client frameworks to deploy and inject components on th epage
- highly leverages caching of static resources, aids scalability
- page load can be staged and prioritized
- easier mashup integration, harder to develop
Scenario, not technology, should drive the choices
Security
- dont indiscriminately use scripts from other sites, - copy to the site, or trusted only
- anytime you have an API outside your firewall, its a massive security hole
- Publicly Exposed services may be abused: DOS attacks, unexpected harmful uses of the service
- XSS opens security holes, for example usernames, double escaping
- unintended consquesnces, like bad loop calling APIs (need to throttle stuff)
- XML HTTP Sandbox rules - basically no way to call out of a domain. Could use an IE trusted domain, or some tricks to call a raw IP address. otherwise, needs a proxy. One primary reason the sandbox rules have not changed, is to make sure that intranet URLs remain secure.
- HTTPS/SSL: no good way to allow a single component to make secure requests. Right now, either you are completely HTTPS, or not.
JSON
Parsing XML over and over again on the browser is resource consuming, and SLOW. It is much faster to just read JSON strings. The browser is typically single threaded, which adds to the bottleneck.
Some JSON tips
- Douglas Crawford RegEx for cleaning (recommend) - http://www.json.org/json.js
- General JSON info
- incoming scripts
grep all your code, if there is an eval(), remove it. basically, do not serve personal data in the script tag
Proxies
you become the funnel for all the data that is requested. If it is not unique data, seriously considering caching it. For example, what if your users massivley subscribe to Slashdot? Your server is reloading Slashdot RSS a zillion times. If you cache that data for a short time period, things look a lot better.
Ajax can end up being very chatty.
Missing Pieces
- Ajax will not necessarily make your site run faster, scale better, or even make a better user experience.
- Ajax is simply an architectural pattern, to be used where appropriate.
- the AJAX experience is breaking down, because some basic Browser constructs, like History and Action, are subtantially different
- Ajax sites have a a hard time updating URLs,they have a hard time generating URLS
SO a search engine cant find a location. Pages are good, they raise search engine rank, they make you exist as a site. Ajax does not make pages.
ex. shoppinng/cameras/digital is a human parsable URL. But Ajax wont create such a thing
- Consider creating a degraded version of the site for the search engine. Tech. Workaroud - create a site map for the engine, then allow another, unique URl to get to that 'place'
- a bunch of Libs that do iFrame hacks to use the Back Button. A lot of users depend on it. No browsers today will work completely with the Back Button.
- iFrames use a significant amount of memory, and it is very hard to make libraries work well across them. iFrames can be used to isolate un-trusted code. Industry challenge to make light-weight iFrames.
Worse User Experience
If you make an Ajax 'BuyIt' button, since it is asynch, if it fails, no feedback. Bunch of ways it can fail. Also, user experience is that an old page, you wait for the result. Ajax, user might jump away fast. (solution - the wait cursor or feedback status bar)
Good Example
Patterns
Typically, More Interactivity = More Code = Slower Site. Building a portal, a site with loaded components, presents new design challenges.
Understand How the browser works: Scrips included on the page block and load one at a time. So, dont use multiple script tags. It stops the loading of the streams. Combine the streams. Large numbers of script blocks can greatly stall the loading of a page.
btw, the hash sign never reaches the server, it is client side. This can be manipulated to communicate "places" on an Ajax page.
In the Browser, you get two connections per domain Tip: put your images, css, code, srcs in seperate domains.
scripts, Images, css no expiration dates. Change them buy changing the URLs code . Tutorial on this w/ PHP at http://www.thinkvitamin.com/
Another... one script tag, use document.write to write them
Put your scripts at the bottom of the page!
Load features on demand. OnClick, load the script
Dynamic Loading of Scripts
- add Script element dynamically
- add to document
- set onload()/onreadystatechange() some browsers have an error handler
- set src
- when the handler returns, the code is available
- Another technique - add a callback at the end of the loaded script. When the callback executes, you are notified that the script is available. Currently, there is no good way to get notification otherwise under Safari.
What about load on mouseover() ? add somekind of time interval, like a tooltip
Cross Browser Development
Separate business logic from display code. Abstract and centralize API differences. Minimize CSS hacks.
Closures = Nested Functions + Scope
Some techniques involving closures
a) What is a closure? Simply a nested function definition.
basic construct of deferred function execution
func() { ... } settimeout()
Q. How do you pass a parameter to the deferred function? Q. What was scott trying to get at with this example?!?
func( obj) { return Func1( o ) } settimeout ( func, o )
everyone writes code like this, defining funcs as it is defined --
funcD( a, e) {
var e;
e.onclick = funcX a( ) {
}
}
- alternative here, define funcX outside of funcD. Just watch scoping.
Circular references between the DOM and script elements leak memory!! For every site visited for ever afterwards!! Make sure to un-ref any circular references on dispose. In fact, explicitly NULL out any variables after use in completely done.
Advanced Network Patterns
a useful map from the Mix06 talk NGW020 - Lessons from the Trenches: Engineering Great AJAX Experiences
Before Ajax
- Web Page model offers default connection management
- connections served as you navigate
- failures indicated by 404
- Requests were all equal, order not important
- typically limited amount of script. (script optional -ed)
After Ajax
- must be aware of unrealibale network in new ways
- some requests are relevant to specific contexts
- some requests are more important than others
- delete mail more important than an image preload
- potentially, extensively more script
New network bandwidth and failure management is needed. Network is not actually "reliable". No access to network protocol stack by browser. Most all apps assume success over and over.
Since you only have two connections active, a user switch can be stalled by loading of big request objects in a previous screen. How to abandon active loads on switch? How to prioritize stream feeds?
Gadget Patterns
a useful map from the Mix06 talk NGW020 - Lessons from the Trenches: Engineering Great AJAX Experiences
(if you are going to mashup on a page, and you have loadable components handling the streams, then you may need some way of managing those gadgets)
Minimal Requirements
- Encapsulation Patterns (Windows Live uses Javascript Closures)
- Patterns to manage object lifecycle (leaks are bad)
- Separate semantics, presentation and behavior
Advanced Requirements
- patterns to enable asynch deployment
- patterns to enable asynch communication
- patterns to "infect" components with an appropriate theme
- patterns to scope CSS layout to components
- patterns to provide process isolation
Libraries
Note: some recommendations for completion routines for Asynch calls - use a library that supports the calls and completions. See code refs on Intro101
Dojo http://dojotoolkit.org http://developer.iamalpha.com/dojo-intro
Q. What about Atlas?
