Ajax Lite Versus Ajax Deluxe

Harry Fuecks suggests there are two types of Ajax apps: HTML++ and Client/SOA. This is something I’ve noticed too, and it cuts right across the Ajax architecture, impacting on the user-interface, the physical architecture (browser-server separation) and the abilities of the developers involved.

The “Ajax App” pattern addresses this as a decision. It’s the root pattern for the entire Ajax Patterns language (Ajax App is not yet on the AjaxPatterns wiki). As you might know, each pattern has a “Decisions” section, identifying the decisions you’ll have to make if you go with the pattern. In the case of Ajax App, a big decision is how far along the spectrum you go. I’ve termed them differently to Harry, but the distinction is essentially the same (there’s now a footnote to his article). Extract from the “Ajax Design Patterns” draft:

Will your application be “Ajax Deluxe” or “Ajax Lite”?

There are two archetypal architectures for Ajax, and all applications lie somewhere along the spectrum between these extremities:

Ajax Deluxe

Ajax Deluxe uses Ajax to the max: applications feel similar to a desktop in that the browser is driving the interaction – it mediates all interaction between the user and server, so there are no – or few – direct page refreshes. Similarly, there’s no – or little – session tracking in the server, because all relevant state can be managed inside the browser. The server may not know about HTML at all, and just offer generic web services. An example is the Ajax word processor, Writely.

Ajax Lite

An Ajax Lite App feels more like a conventional web app overall, but one that’s been sprinkled with Ajax here and there. For instance, Ajax might be used to validate a form before it’s submitted using standard form submission, or to reveal some instructions on the page when a user requests help. An example is Delicious, which works fine on legacy browsers, but offers Ajax Suggestions for the many browsers that support it.

Which will you use? The Deluxe approach suits a development team with more advanced web programming knowledge and access to relevant tools and cross-browser libraries, and it will generally lead to a nicer, more effective, user-interface. It also facilitates a well-partitioned architecture, since the presentation logic can be isolated inside the browser and the business logic isolated in the server. However, Deluxe applications may place a strain on the browser and network capabilities, and might not even be possible if the browser is outdated. Ajax Lite is a better answer for older browsers, since the Ajax features can usually be “turned off” to support graceful degradation.

Epilogue:Another nice way to say this: “Ajax Deluxe” (or Client/SOA) == “Ajax Application”, “Ajax Lite” (or HTML++) == “Ajax Website”. The “Application” versus “Website” terminology was mentioned by Craig in the latest Polymorphic Podcast, Architecting Ajax Applications. If you want to hear more about the Ajax patterns (and since I’m so slow to complete my own podcasts on the topic, but I promise it will happen eventually!), check out this podcast, which is mostly about Craig’s take on Ajax Patterns. He’s not just regurgitating the patterns either, as he offers many fresh ideas and examples.

4 thoughts on Ajax Lite Versus Ajax Deluxe

  1. hey michael. this is a great way to look at the decisions required to design a site or app using ajax. It you thought of this on a horizontal axis you could put ajax lite on the left and then push towards more of an app style interaction on the right. I was wondering if you would just keepp pushing right or add a vertical axis for richness of functionality? for example loading new content into a website, i.e. weather update, without a refresh may be a good ajax website, but you could go further and insert more information into the page based on a user action such as a mouse over, this may push ajax up along the “y axis of richness”. On the app side for example you could have a grid that does paging without a refresh/postback but you could go further and have live scrolling through all records, inline editing, keyboard navigation, etc. which would make the app richer. Or you could keep everything on the x axis. thoughts?

  2. Pingback: Ajaxian » Screencast: Data Grid as Example of Rich Ajax

  3. Pingback: Joining Google

Leave a Reply