| June 2006 |
| An emerging technique allows developers to create Web applications that act like desktop applications. Here’s how to master it. |
| By Mathew Schwartz |
Do you want to create Web pages with maps that scroll, or informational balloons that magically appear when needed? What about writing an online e-mail client for your business that acts just like Outlook on a PC, right down to the keyboard shortcuts?
To add more punch to Web pages, developers are increasingly turning to a technique called Ajax, which is shorthand for “asynchronous JavaScript and XML.” The term was coined by Jesse James Garrett, an information architect, in an essay he published last year titled “Ajax: A New Approach to Web Applications.” Today, Ajax applications are employed on sites as diverse as Amazon.com, Flickr, Netflix, Salesforce.com, and Yahoo, not to mention a number of companies’ internal Web sites.
The Ajax poster child, however, is arguably Google Maps. Online map aficionados may remember how map sites used to work: they’d display a static map image, and shifting the map’s focus, or zooming in or out, required clicking the relevant link, then waiting for the page to reload. With Google Maps, however, you can drag a map in any direction with your mouse cursor, or immediately zoom in or out.
While that fluid user experience is common for desktop applications, until recently it just wasn’t seen on Web pages. In short, Ajax creates all sorts of possibilities for developers, not to mention requests from companies demanding “more interactive” Web applications.
AJAX BUILDS ON WHAT DEVELOPERS KNOW
One reason for Ajax’s popularity is because it can create eye-popping Web sites with unforeseen levels of interactivity, including drag-and-drop capabilities and fluid zooming.
Another driver: Ajax plays to a Web developers’ skill-set. “The reason why Ajax is such a popular choice is that it leverages the native capabilities of the browser,” observes
Dave Crane, senior developer/architect at HistoricFutures.com, and co-author of “Ajax in Action” (Manning Publications, 2005). In other words, developers who’ve previously created Web applications can build Ajax applications using their “existing skills in HTML, CSS (cascading style sheets), and JavaScript.”
Note Ajax isn’t an all-or-nothing proposition. Rather, it’s often used to add just a splash of functionality. For example, take the Netflix Web site, where customers queue DVDs they want to rent by mail. “They have this really neat thing where if you’re looking at a movie title, you’ll see an image of the movie poster, and if you hover over that, it will give you a pop-up bubble — downloaded via Ajax — to tell you more about the movie,” notes Bret Taylor, a product manager for Google. “I have a feeling you probably would not look at as many movies, if they had not used these Ajax technologies to make this user experience more efficient.”
LEARNING AJAX: GET YOUR HANDS DIRTY
Who might use Ajax? “In the training courses that I run in the UK, I get people from a mixture of backgrounds, from designers to enterprise back-end programmers,” says Crane. “Ajax cuts across the entire stack — it even has implications for server-side design — so everybody has something new to learn.”
Beyond opting for an Ajax book, or training course, or studying sites devoted to Ajax, perhaps the best way to learn Ajax is simply to jump in. “Ajax is very much a set of technologies you learn by doing,” says Google’s Taylor. “There are lots of tutorials available, but until you get down and dirty and start implementing it, that’s really the way you start learning it.”
For more advanced efforts, however, you’ll probably want to devote time to mastering JavaScript. “The core skill behind Ajax is JavaScript programming, and for that to work, one has to get a solid grasp of the language,” says Crane, and move beyond using existing bits of JavaScript code, to writing your own. “Cut-and-pasting snippets of JavaScript from the Web only works up to a point.”
EASY AJAX DEVELOPMENT VIA GOOGLE
One easy way to initially learn Ajax, however, is by using the free Google Web Toolkit. “We launched it because one of the hardest parts of Ajax development is learning the potpourri of technologies required to implement a full-feature Ajax application, from JavaScript, to HTML, to CSS, and the idiosyncrasies of all those technologies in every different Web browser,” says Taylor.
Using Google Web Toolkit, developers can write something once in Java, then have it just work in multiple browsers. In other words, the toolkit eliminates a lot of the grunt work often involved in designing an Ajax application. “From a developer’s perspective, you just want to make a Web application, you don’t want to learn the idiosyncrasies of Internet Explorer,” says Taylor.
Thus the toolkit helps developers quickly acquire Ajax skills, says Taylor. “It’s a compelling way for people to add Ajax development skills to their resume, and to accurately claim knowledge of Ajax development without having to incur the really big burden of having to learn about all these different application quirks, and having to tweak their applications 20 different ways just to get it to work in three browsers.”
AJAX: PERILS AND PITFALLS
Despite Ajax’s many potential uses, remember it’s no application development silver bullet. “There are plenty of pitfalls, as with any kind of coding,” cautions Crane, especially because it blurs the traditional Web roles of client and server. Accordingly, “it’s necessary to rethink the entire workflow of a Web application with Ajax, and unlearn a lot of old habits about who’s responsible for what.”
That’s why experts advise starting small, learning as you go, and applying Ajax to specific problems. “Look for the parts of your application that are slow or require a lot of steps to complete,” recommends Taylor.
Also remember to vet whether Ajax will really help. “There’s a lot of power in Ajax, and it can be tempting to overdo it and have a screen that’s so dynamic it confuses people,” says Crane. “Nine out of 10 times there’s a good usability case for Ajax, in moderation, but it’s always worth asking the question first.”
A FEW GOOD AJAX TOOLS
What tools will you need to create full-blown Ajax applications? Dave Crane, co-author of “Ajax in Action,” suggests:
- A good debugger: “The most important tool for a programmer is a good debugger, in my opinion.” He recommends Firebug or Venkman, both for Mozilla’s Firefox browser.
- A DOM inspector to debug the user interface: “As well as debugging the code, it’s important in Ajax to be able to debug the user interface.” He recommends Firebug, or the Microsoft Internet Explorer Developer Toolbar.
- An HTTP traffic debugger: Building Ajax applications also means debugging HTTP traffic. Recommended tools include Firebug for Firefox, or Microsoft’s Fiddler, for both Internet Explorer and Firefox.
Mathew Schwartz is a freelance business and technology journalist based in Cambridge, Mass.
Comments on this article? Share your feedback on our discussion forum, Dice Discussions.
*Please note, you must be a registered job seeker in order to submit your question to Dice Discussions.
|
|
|
