If You Build It In Ajax, They Will Come

Ben Galbraith and Dion Almaer are the darlings of the Ajax community. In their irreverent way, the two co-founders of the Ajax community site Ajaxian.com have led the community charge against those naysayers who downplay the web's ability to be cool. Wildly popular speakers on the techie conference circuit, Galbraith and Almaer are JavaOne Conference rock stars (see [link]http://java.sun.com/javaone/sf/rockstar_awards.jsp[end link]). In fact, they were the top-rated speakers at the 2006 JavaOne Conference, awarded that distinction for their session "Introduction to Ajax."

At this year's JavaOne Conference, Galbraith and Almaer did a session titled "Creating Amazing Web Interfaces With Ajax" in which they showed how Ajax can be used to improve the functionality of web applications. In fact, amazing web interfaces is really what Ajax is about. Almaer made the point that Ajax is not really about the acronym, (which, by the way, stands for Asynchronous JavaScript and XML), "it's really about creating killer web apps."

Actually, Galbraith and Almaer did more in this session than demonstrate Ajax techniques. They also highlighted some of the lessons learned from the first highly successful Ajax-driven sites -- what Galbraith and Almaer call "Ajax innovators" and they examined what's new and cool in the Ajax area.

Google Maps is probably the site most people think of as an Ajax innovator. Galbraith and Almaer pointed out that Google Maps broke down many of the mental barriers restricting what's possible on the web. Google Maps also showed a lot of folks that Ajax isn't all that difficult to use. What's really interesting -- and surprising -- is that Google Maps doesn't actually use Ajax for map scrolling. The map scrolling is really driven by simple caching. Every time the application fetches a set of grid tiles to display a map location, it also fetches and caches surrounding tiles. Scrolling to surrounding locations on the map just displays the surrounding tiles from the cache.

Galbraith named as a second Ajax innovator HousingMaps.com, a site that mashes up real estate information from the craigslist site with Google Maps. The key lesson here is that web developers will mashup their web applications with other applications if they like them, and Galbraith added "if you're lucky." Interestingly, HousingMaps does not use a server. The lesson here: you can create some excellent web applications without a server.

The "we'll-complete-your-entry" search tool, Google Suggest, and the to-do-list site, Ta-da list, were cited as two other Ajax innovators. Both showed that you could bring some of the best desktop input paradigms to the web. Galbraith added that the input paradigm for Ta-da list saves users from a lot of the tedious checkbox checking that a more traditional approach would entail.

Galbraith and Almaer cited a number of trends that have made Ajax development better, easier, and faster.

Perhaps the most important recent trend in Ajax is the rise of client-side JavaScript frameworks. Why code all the client-side JavaScript you need for an Ajax application, when a client-side framework can provide a lot of that code for you? To the delight of Ajax developers, a lot of client-side JavaScript frameworks have hit the Ajax scene. But Almaer said that he sees the list eventually narrowing down to a small number of frameworks, the most popular of which are Prototype, script.aculo.us, and Dojo.

Galbraith spent a bit of time highlighting some of the pros and cons of Dojo. "Dojo is like the equivalent of the Java Platform for Ajax. There are bunch of frameworks out there that try and solve particular problems. Dojo's goal is to become the standard JavaScript library period." That objective has given Dojo a well-earned reputation for being a bit bloated. However, Galbraith said that folks are working to address that problem.

What some see as bloat others see as functional richness. The package set that Dojo provides gives developers a lot of capabilities. For instance, Almaer highlighted the fact that the Dojo's support for data binding "gives us a way of bringing in components that can tie into any data source." Galbraith then showed a coding example that demonstrated how easy it is in Dojo to bind a table component to a data source.

Almaer also trumpeted some of the cool features of Ext JS, a new client-side JavaScript library that sits on top of the Yahoo! user interface library. You're not limited to Yahoo! however -- you also have the option of choosing another underlying framework. Ext JS offers what Almaer calls "a beautiful set of widgets" that includes support for drag and drop as well as data binding.

Being able to run web applications offline, that is, not connected to the Internet, has been a long-time goal for some. Galbraith said that "we wanted to go offline for a really long time." Galbraith went on to say that offline capability has been around for a while, however developers were forced to use browser-specific APIs, such as the Mozilla Azul API, to implement it. Galbraith said that about a year ago offline got a big boost when he and others realized that they could use Adobe Flash to store about 500 KB of data locally in the browser. Flash is available on just about all browsers. Furthermore the Dojo framework provides an offline storage API that accesses the Flash runtime. So all the ingredients for creating offline web applications that could run cross-browser were there. Recently things got even better. The Dojo folks enhanced their offline support by releasing an early version of what Almaer termed an offline toolkit. The toolkit adds features such as synchronization and online/offline status notification. Galbraith then showed off a sample demo called Moxie that the Dojo people created with the offline toolkit. He underscored the fact that the toolkit is still not ready for prime time -- it's an alpha release. But he said to "keep this on your radar because offline is almost here."

Another recent advance adds better graphics support to the web. To demonstrate this, Galbraith ran an Ajax application called Yahoo! Pipes. The application enables users to take web services available on the Internet and link them together in interesting ways. To link the services, a user drags a line from a box representing one service to another a box representing another service. What a user winds up with is a page with curvy lines connecting boxes. What's enabling the curvy lines in Yahoo Pipes is a new browser feature called canvas. This feature provides the ability to render arbitrary 2D graphics inside a browser. The feature is available in Safari, Firefox, and Opera browsers.

Firefox and Opera (and soon Safari) also support a vector model, SVG, for graphics. A related technology, VML, a precursor to SVG, is also offered in Internet Explorer. Dojo also provides a wrapper library that bridges these technologies so that developers can take advantage of a full range of graphics capabilities across browsers.

The final act in Galbraith and Almaer's show was to take some of the things they discussed and apply them to a web site. And the site they applied them to was their very own -- Ajaxian.com. It's rather surprising to think that Ajaxian.com doesn't currently use Ajax to do things like immediately show comments that a user posts. Right now, after a user posts a comment, he has to do a page refresh to see it added to the page. Galbraith demonstrated how easy it would be to add that capability using a client-side framework using Prototype. He also also showed how easy it would be, using the script.aculo.us framework, to add a visual effect to the page that alerts users about the addition of a new comment.

Almaer said that he and Galbraith also felt the need to thank users for posting comments, "especially after hearing yesterday's JavaOne Conference keynote about humanity and Java saving the world." So using a JavaScript sound API, Galbraith showed how to add some warm, fuzzy vocal responses to the application. Galbraith submitting a test comment. To the great amusement of the audience, the application responded "Each comment you make improves the world we live in."

This was an entertaining and educational performance. Then again, what else would you expect from two darlings of the Ajax community?