Welcome!

Kurt Cagle

Subscribe to Kurt Cagle: eMailAlertsEmail Alerts
Get Kurt Cagle via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal, Enterprise Mashups, AJAX World RIA Conference

RIA & Ajax: Article

Real-World AJAX Book Preview: The Effects of AJAX

Real-World AJAX Book Preview: The Effects of AJAX

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Every so often a new way of developing software comes along, a different approach in design methodology that takes advantage of recent advances in technology to more effectively create applications. Typically, the first efforts to use the technology is to try to build things that are similar to older technologies. But over time, the possibilities opened up by that technology open up new design methodologies and a new understanding of what the technology is capable of doing.

AJAX is now at that phase where people are realizing that you can do an incredible amount with the technology, though at the same time they are also discovering places where AJAX is either unsuitable or forces changes into the infrastructure that have broad (and sometimes expensive) ramifications. The goal of this chapter is to look at some of the emerging design patterns and methodologies that are arising around AJAX, explore several of the more useful libraries, and look at the effects that AJAX is having and will have on software development in the next few years.

The Effects of AJAX
Imagine, for the moment, what the world would be like if the laws of the universe were "AJAXable." You wake up in the morning, look out the window, and see that it is raining. Concerned - you were planning on taking a walk to work for the exercise - you press your ever-present transmogrifier (shaped, of course, like a TV remote) and dial up a sunny day. The drizzle stops, then fades into a sunny day. As you walk out of the house, you lock the door behind you, and the entire house collapses so that only the door is visible.

As you walk down the sidewalk to work - it's too nice a day to take the car (which incidentally happens to be in the now collapsed garage) - you speak words into your transmogrifier and the top news stories of relevance to you appear on panels around you, to be plucked and digested at your leisure.

After some time, you decide that you've had enough of walking and change your context to your work environment, your casual jogging clothes now transmuted into the requisite business suit and power tie. A quick query brings up avatars of your coworkers - presented in your idiom as ancient celtic warriors, though when you query your boss's view you see syncophantic yes men, and your art director Tina's view is ... well, that was interesting.

Mopping the sweat surreptitiously from your brow (and promising yourself that you will never, ever say an unkind word around Tina in the future), you bring up the latest community-based collective entertainment piece that you are working on, with the stats about usage coming up as animated bar charts and a scrolling commentary from users playing off in one corner.

Just as you wrap the presentation up, a small red package materializes in front of you - the trivid that you had requested be made from the collection of video clips, story ideas, and relational mappings. You push it into a virtual pocket that you can access again later, then go to get some lunch.

Changing context again, you find yourself in a lovely French bistro overlooking the Himalayas. However, just as you are about to dig into a delicate meat pastry, your connection dies, and you find yourself with a fork of nothing. Leaving the fork suspended in mid-air, you go to the balcony and take in the spectacular view and cool air off Mt. Everest, then when your meal comes back online you sit down, grab your form, and dig in.

Okay, while it would be a rather intriguing exercise to continue with for a while, this snippet points to both the interesting potential and some of the pitfalls of the AJAX experience. AJAX uses Web tools and technologies, but it is as far from, static Web pages as a Ferrari is from a refrigerator.

Characteristics of AJAX Design
Once you step away from the notion that AJAX is a "supplemental" technology and start to play with the potential that the medium offers, you will likely find that there are certain common aspects that define most AJAX user experiences.

Malleable: Within the context of AJAX, nothing is fixed and solid - the placement of objects, the visual presentation, the specific content, even whether a given expression of information is a paragraph or a pie chart is ultimately under your hands as an AJAX designer.

Syndicated: Chances are very good that not all of the information within your Web applications will be provided by you, but will instead come from syndicated content due to outside agents.

Asynchronous: There is no guarantee that one event will occur before (or after) another. AJAX systems need to be responsive to events, which may take seconds, minutes, or even weeks later.

Configurable: Your users are going to come to appreciate, expect, then eventually demand the ability to configure your Web applications to their needs.

Cross-Platform: While expectations of stylistic interpretations may vary from one platform or browser to the next, the expectation is that the functional aspects of your application will roughly be comparable from one system to another. Moreover, don't forget that AJAX applications may very well jump out of the Web page and into the browser.

Data-Distributed: AJAX applications keep their data all over the place - remote storage directories, distributed databases, local file stores, browser caches, USB keys, the possibilities just keep growing. This means that your applications will need to be able to handle data in as abstract a manner as possible.

Declarative; XML will be the bones of your applications, the life-blood that runs through it, and its memory and its perception. The frameworks that you work with may be Ruby or PHP or JavaScript or Python, but they will increasingly be largely declarative entities that can be modeled in XML, with procedural code increasingly hidden beneath an XML surface.

Communal: Chances are, your AJAX application will be communicating with other people, either directly in some kind of chat modality or indirectly across scheduling and resource allocation applications. In that respect, your application is a client against a shared server.

Locally Stateful: While not true in all cases, AJAX applications have the potential to retain more state on the client and to service applications, which permits state to be assembled more readily there. This actually has a huge implication for enterprise applications especially.

Multiform: The Web has long been the new face of multimedia, but this has been tempered by the need for specialized plug-ins and related browser-specific extensions such as Flash. AJAX, on the other hand, is bringing such media out of the <object> box, rewiring the way multimedia applications are built in the process.

Given all of this, it's perhaps not surprising that the design requirements for an AJAX-based application are beginning to differ considerably from their more sedate, server-side cousins.

Back to the Drawing Board
Before plunging into the code again, it's worth stepping back for a bit and thinking through the design of the application. For traditional application developers, such design needs to take into account the asynchronous and highly fluid characteristics of dealing with the Web; while for traditional Web designers, one of the biggest changes comes from the necessity of thinking of even the simplest of pages as being an application. For this reason, it helps to set up a few basic ground rules and design principles up front.

  1. Balance Context and Mutability: With AJAX, you can conceivably change the entire application from moment to moment. However, doing so will make your application unusable. Identify the various contexts - the smallest portions of the application that still have relevance to the user as a functional unit - and when a change is needed in the application, modify only the relevant context.
  2. Encapsulate Contexts as Components: It is generally far better, when dealing with AJAX, to take contexts and bind them as some collection of code and object. You can use various binding libraries (a number of which will be covered in this chapter) or write your own, but the end goal is to be able to work with the functional units as having a separate identity from their constituent components.
  3. Build a Conceptual DOM: Big components have little components, in order to complete them. Little components have littler components, and so on ad infinitum (with apologies to Ogden Nash). A mashup consists of taking two or more Web components, with conceptual roots on both sides of the client/server divide, and combining them to make something bigger than the sum of the whole. If you can, however, design the components so that they in turn follow at least a conceptual object model. It makes it much easier to ensure that they can work together with other components.
  4. Know Your Audience: While AJAX is not hard, it is not trivial to implement, and it adds a dimension of developing and testing that can have a major impact on any project. Adding AJAX simply to add AJAX may also (badly) impact that small but frequently vocal minority who turn off JavaScript for security reasons, as well as that not so small nor insignificant slice who are still working with "legacy" browsers.
  5. Jettison HTML: The key to AJAX is interoperability, and not jumping to XHTML means that you are sacrificing the ability to work with schemas, transformations, multiple namespace documents, and significant DOM benefits, such as the use of XPath. All browsers will render an XHTML document (even if it does so somewhat accidentally in Internet Explorer) so long as you keep the mime-type text/html for now, and it is likely that IE will support true XHTML soon.
  6. CSS Is Your Friend: The more you impose presentation into your XML (or your JavaScript), the less portable your code will be. CSS is a very good language for both coarse and fine-grain layout, has become reasonably solidly supported at the CSS 2.1 level in most browsers, and if you have the chance to work with advanced browsers exclusively, CSS 3.0 support gives you some incredible options (such as multi-column support). CSS is also used quite effectively as the binding layer for Mozilla Firefox and Internet Explorer (in different ways), and will likely be the preferred vehicle of choice for other binding languages in the future.
  7. Hide Your Code: The most effective AJAX Web applications are, ironically enough, the ones where you don't see a line of JavaScript code. External scripts, XML-based binding languages, or minimal JavaScript bindings in the preface to the page make it easier to maintain applications, make it easier to test, and tend to force a component-oriented methodology. Sometimes you just can't avoid it, but if you design with the idea that you will push until you have no choice but to write a line of JavaScript in the XHTML document (as opposed to external libraries or bindings), you will thank yourself six months later.
  8. Keep the Troops Entertained. A good GUI designer is a lot like a master prestidigitator - producing flashy effects with one hand to keep the audience distracted while slipping the second ace or dollar coin up the sleeve with the other. AJAX doesn't make latency go away ... it simply makes it easier for the GUI designer to handle the process of retrieving or sending data or making a particularly complex transformation less onerous on the user by doing it in the background. Take advantage of asynchronicity to make sure that buttons push down and pop up, start loading content into tables and lists even as the data is still coming from the Web, run low bandwidth animations (perhaps even hoary GIF images so that aren't on the same application thread as the download process) while downloading content, and so forth.
  9. Reinvent the Wheel, but Only When You Have To: AJAX still has a major cool gee-whiz factor to it, largely because the standardization process hasn't really taken off yet. Be willing to experiment and play with AJAX, because you may be solving a problem no one else has dealt with yet, but keep abreast of the many emerging AJAX tools and frameworks that are coming online. At the same point, scrutinize the tools closely, because more than a few were someone's weekend doodle project that caught fire because it solved a need, even if it wasn't fully debugged yet.
  10. Remember the Server: GUI Engineering has a high gratification factor - you can put together a reasonably sophisticated interface very quickly, especially as you see more AJAX frameworks emerge. However, you are still dealing with content from the server, and the way that this information is accessed, retrieved, and submitted is likely to change pretty dramatically in AJAX situations. In putting together your application, think carefully about your data flows.
These are all understandably high-level or conceptual thoughts about the nature of AJAX design, and no doubt others can come up with many more of these rules, but ultimately they boil down to ensuring that you are using the best technology for the right task at the right time.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Kurt Cagle

Kurt Cagle is a developer and author, with nearly 20 books to his name and several dozen articles. He writes about Web technologies, open source, Java, and .NET programming issues. He has also worked with Microsoft and others to develop white papers on these technologies. He is the owner of Cagle Communications and a co-author of Real-World AJAX: Secrets of the Masters (SYS-CON books, 2006).

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.