Building Richly Interactive Web Apps with Ajax

FalsePositives writes "Ajax: A New Approach to Web Applications (from Adaptive Path and via Jeffery Veen) introduces their experiences with what they are calling 'Ajax' as in 'Asynchronous JavaScript + XML' aka the XmlHttpRequest Object. It is used by Google (Google Maps, Google Suggest, Gmail), in Amazon's A9, and a few others (like the map of Switzerland spotted by Simon Willison). ... Is this 'The rise of the Weblication'?"

Comments

Weblication?

[Neil Blender]

No more cutesy terms, please.

Re:Weblication?

[stupidfoo]

I thought JSON was the new hotness?

Re:Weblication?

[Quixote]

You misunderestimate their utility...

Re:Weblication?

[PopeAlien]

.. aw c'mon. you're just jealenvious that you didnt inventrify such a fabutabulous e-term.

right?

think of the infotainment value!

Re:Weblication?

[Anonymous Coward]

You're right. Once people start usaging a word, it becomes standardified. In fact, I'm feeling a bit creatific now-wise, and I'd like to objection at all the granitypes who don't grok "I fornet a dozen emails about verbification". Don't you enpensate it? Can't you disconstruct the affixatives? Wouldn't you rather stragmatize?

- Tom Phoenix

Re:Weblication?

[sqlgeek]

Is that you President Bush?

Compatibility?

[nizo]

Is Ajax compatible with the Odysseus web security tool or will it just cause Ajax to die a horrible death?

new acronym

[Anonymous Coward]

old technology, noob developers

remote scripting has been around since 1998 with Dan Steinmans DynAPI, then Brent Ashley published his remote scripting and a plethora of remote scripting projects popped up on sourceforge

the only thing new here are the developers/kids calling it Ajax when its nothing new or original at all, not to mention MS has had remote data binding on elemnts since IE4 !

sheesh

Greeaaaat

[Nathonix]

Even more stuff to learn. As if high school wasnt mind numbing enough.

Wow

[aristus]

an "oldskool" web developer grumbling about newskool kids who don't know what it was like back in the Real Days. Why, all we had were radio buttons! And they could only tune in AM! And we liked it that way!

Re:Wow

[theshowmecanuck]

Old Developer: ...and we could only use ones and zero's!
Dilbert: You had ones? We had to use lower case L's.

Java app

[dfj225]

Maybe I'm missing the point somewhere, but if you really want something on the web to feel like an app, why not make it a Java app that runs in the browser? With all the different browsers and how they each handle Javascript differently, I much rather write something in Java and know it will almost always work on different platforms. Anytime I have to do something in Javascript, it almost always feels like a hack. I can't imagine writing something like the stuff Google does in Javascript. Is there really an advantage to doing stuff this way over the Java way?

Re:Java app

[MyIS]

First of all, almost any PC will have a semi-recent IE installed (or Firefox for the more enlightened), and that is already enough to run Google's stuff.

Compare that to the Java plugin requirement, which, sad to say, is pretty far behind in availability on most PCs.

Also, Javascript-based stuff is easier to program, trust me on this. Layout of elements is much easier - and it can be done in any decent HTML editor. Finally, there's no thread-related insanity that AWT/Swing bring to the table.

Re:Java app

[TedTschopp]

I bet someone else will post the exact same thing, but instead they will replace Java with Flash...

I think the point is that you don't need to insert an object or rely on a 3rd party enviroment. You can do it in Javascript.

Also, the reason this is so very cool is that it doesn't tie your applicaiton into a backend of any kind, you can scale your backend as long as it spits out XML. I think this is the reason so many of the big companies are going to it. They require a bit more flexibility on that end.

Re:Java app

[redheaded_stepchild]

I've got it!

Flash + Java = Flava!

And we can get Flava Flav to promote it!

YES! Bow before the mighty marketing droid!

Re:Java app

[misleb]

Java GUIs are traditionally slow and ugly. Also there are often problems with Java runtime versions. It is difficult to write a non-trivial Java application that will run on various different version of the Java runtime. Some people are going to have 1.2, some 1.3, some 1.4, etc. Using standard DHTML or even Mozilla's XUL provides a much more elegant application that looks and feels better than most Java GUI's. DHTML and XUL also integrate with the browser better.

-matthew

Re:Java app

[Hamfist]

Our company is arriving a bit late to the 'intranet' party, and I'm developing our Intranet in this style. Where you really notice the difference is:

1. Speed - It f'ing fast
2. Startup time - Instant
3. Footprint - small
4. Browser support - surprisingly consistent. Event models need some work, including Firefox.

Did I mention that it's fast? Check out google suggest, realize that there's a round trip to the server going on in the background, and you'll get the picture.

It also maintains suprisingly light code. You just register an event handler of some DOM element, and let the teensy bits of javascript pull up some fresh XHTML. This technique fits very well with simple event driven programming.

Another nice thing is that you can use most whatever as a callback. I'm using good old PHP, as PHP snippets are fast and lightweight.

I suspect we will be seeing alot much more of this.

Re:Java app

[temojen]

function getDataDOM(url){
data = (!window.XMLHttpRequest)? (new ActiveXObject("Microsoft.XMLHTTP")):(new XMLHttpRequest());
data.onreadystatechange = readyStateChangeFunction;
data.open("GET",url,true);
data.send(null);
return data;
};

You were saying?

Re:Java app

[GeckoX]

Bullshit Bullshit Bullshit.

Can I say it again?

Bullshit Bullshit Bullshit.

I write these kinds of apps. I have been doing so for years now. I haven't written a browser-fork in code in AGES. I don't even use the hacks in CSS for chrissakes. They aren't needed.

Remind me never to hire you mmm kay?

Re:Java app

[GeckoX]

We finally managed to officially drop NS4 and pre IE5 support about a year and a half ago or so on our worst hanger-on clients. We did replace all of our web applications with standards compliant support only close to 4 years ago now. We also left the old NS4/preIE5 supported web applications online to meet our requirements. It wasn't until we could show our clients the logs for the legacy sites, that were pretty much entirely empty, that it'd be acceptable to drop that support.

Our stance with new contracts is that we write to standards only for web apps. We will NOT enter into ANY contracts that specify explicitly what browsers will be supported. Pick a standard or pick someone else is our current motto ;)

Re:Also Check out Bits of News

[pe1rxq]

Ajax isn't a technology... its a cute name for a bunch of existing technologies.

Basicly they found that you could make webpages update themself without completly reloading if you trow a lot of buzzwords at it.

You could do this a long time ago without xml....
I did it a while ago for a database app.. The page contained a piece of javascript that was started when a input field changed. This triggered the loading of a external .js file that just happened to be a cgi script. This cgi script would do some database queries and generated some javascript code that would update all the other fields on the client.

Jeroen

Sounds a lot like JPSpan

[misleb]

Does anyone know how Ajax compares with JPSpan? I've been using JPSpan in a Firefox plugin that I am working on and it is really nice. Basically it takes a PHP class and presents it to your JavaScript as a JavaScript object (after you create an isntance of it). As far as your web application is concerned, the object exists in the local context, but actually, the code is running on a remote server. JPSpan takes care of the XmlRequest stuff for you.

-matthew

Re:Too skimpy?

[TedTschopp]

Check out Apples site and their example

Very cool stuff.

Re:Is this the rise of

[sfjoe]

I think what we need is an RFC on buzzwords to introduce some standards to the whole marketing process. Of course, then the new hyp could be labeled as buzzword-compliant.

web content developer toting new web design?

[iamhassi]

" "Ajax: A New Approach to Web Applications" (from Adaptive Path..."

Adaptive Path Services: "We evaluate your site and offer detailed recommendations."

wait wait, this is rich, let me get this straight: a web design company wrote a article saying what you're using now is the "old" sucky way and their new stuff is the way to go??

hold on! this is revolutionary! ;)

Not that AJAX isn't great, i'm sure it is, but this is like reading a article on how great a new car is that was written by the manufacture. Perhaps a more unbiased article needs to be submitted before I believe it.

oh and mod me +5 flamebait cuz i have so much karma i'm sniffing clouds.

Re:JavaScript ? I'm out.

[cabra771]

Dude. Seriously. It's 2005. Time to put down the Netscape 4.7 and walk away.

Re:AJAX?

[Adhemar]

Isn't that a cleaning powder?

Yes, it is

• a cleaning powder

It is also

• an ancient Greek king in Homer's Iliad. Well actually two:
  • Ajax the lesser of Locrian Ajax, son of Oileus, king of Locris
  • Ajax the Great or Telamonian Ajax, son of Telamon, king of Salamis
• a Dutch football (in the soccer sense) team of Amsterdam, already mentioned
• several ships of the Royal Navy
• as already mentioned, a place in Ontario, Canada, named after one ot these ships
• a character on the animated televion series Duckman
• a car (actually several models)
• several companies: a Californian boiler company, a Dutch fire security company.
• a buzzword for a combination of technologies, see this Slashdot story.

Outperforming Desktop apps

[davetrainer]

Here is an article by John Udell that I found fascinating when it was published a few months ago. It discusses the quasi-rich-client architecture that Google cobbled together to bring us GMail. The really incredible part is that interfaces built on this architecture, consumed in the browser, outperform commercial desktop apps:

"One of my favorite acid tests is address completion. When you begin typing an e-mail address, your mail program should immediately show you the matching addresses and then dynamically constrain the list as you continue to type. Outlook does poorly on this test; you have to type CTRL-K to invoke the address book in a separate window. OS X's Mail does address completion in situ, just as I expect. So does Gmail. And here's the shocker: Gmail does it faster."

I appreciate AP's efforts to assign some greater precision and clarity to this architecture. Up until now, realistically, I figured I had to be tethered to .net/XAML, Mozilla/XUL, or something like Macromedia Flex.

bad photos

[clmensch]

Why do tech writers feel the narcissistic need to display photos of themselves next to their writings? That is probably the largest photo I've ever seen on one of these articles...and it's an awful photo at that. They obviously cut the baldness of his head off for a reason, and half the photo is of his black on black outfit.

Their whole site reeks of late 90's marketspeak. Slightly interesting article, though.

Re:JavaScript ? I'm out.

[Cap'n Steve]

"Thanks anyway. You kids have fun. My browser will ignore your site(s) until I'm literally forced to use them."

I guess you won't be responding again, once I point out that there are three sections of Javascript in this very page.

I Call Marketing Bull$hit

[Jesus IS the Devil]

Am I missing something, or is this company coming in late to the party and trying to coin the term "Ajax" as if they started the party themselves? Sounds like marketing BS to me. Just take a look at some of their wording. It's as if Google used Adaptive Path to create their client-rich interfaces:

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year -- Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps -- are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon's A9.com search engine applies similar techniques.

Re:Wrong

[zootm]

Never mind "put up or shut up", your asking for a browser/httpd example is retarded. If you think that google maps could not be done better using a custom protocol and dedicated network client... well...

It couldn't. Its major advantage is that it works in a webbrowser. There's no need to develop a network client when a browser-embedded one will work. This is zero-install software at its finest - providing rich, feature-heavy applications that work using only that which is available in a cross-platform web-browser.

If one wants to look up addresses every single day, and requires advanced features of some form to do so, I'm sure your solution would be a "better" one. But since I just need to find directions now and again, Google Maps is the perfect solution - minimal, yet extremely user friendly and intuitive.

As for "custom protocol" and "dedicated network client"... Why? We have technologies like XML so that we don't need to write a new format or parser for every task we have. Who knows, though, if you're quick developing such a system the hardware developments in the meantime might not make your efficiency gains negligable. But I doubt it.

There are things that custom client/server models are good for. This is unlikely to be one of them for its user-base. And the people who need a faster network map system probably already have one.

XmlHttpRequest The Easy Way

[coldcanofbeer]

For an easy to understand tutorial of XmlHttpRequest, check out http://www.webpasties.com/xmlHttpRequest/

There you will be guided with baby steps on how to implement a city, state lookup based on zip.

Re:Give it a name

[JimDabell]

On innovation: Google's use of "ajax" (if we must use that name) is novel (and hence an innovation) because it strings together a number of existing technologies to greatly increase the usability of their offering.

Which existing technologies? Google's use of remote scripting (that's the name it's had for years, I don't see the need to change it) uses HTML, CSS, Javascript and XMLHttpRequest.

Given that XMLHttpRequest has been used in relation to these technologies for just under six years, and that before that, invisible inline frames were used to do similar things, I fail to see how this is a novel combination of technologies. In fact it's hard to conceive of a use of XMLHttpRequest that didn't use these technologies.

GMail is the most complex example of it I have seen. GMail is the most popular example of it I have seen. But "complex and popular" does not mean "innovative" unless you are looking in a Microsoft dictionary.

First, "Ajax" would be impossible to pull off in Netscape 4.x or a text browser. Netscape is too broken, and Ajax is a GUI technology. So asking for graceful degradation in this context is asking too much.

Please go back and read what I wrote. I know this is impossible in those browsers. That's the whole basis for graceful degradation.

It is certainly possible to build a webmail application that works in Lynx and Netscape 4. It won't be very fancy, but it will work.

You can make it much more user-friendly for more advanced browsers in one of two ways.

1. Do it the Google way, and construct a Javascript behemoth that fails to function at all in browsers that don't support every feature Google wants.

2. Do it so that it degrades gracefully, so if a browser doesn't happen to have all the features you use, it falls back to less onerous requirements.

Quite frankly, I'm surprised that Google don't understand this better. If pages didn't degrade gracefully, the Google search engine itself would not be possible.

I should also note that we don't have to go back to browsers like Netscape 4 and Lynx when talking about this stuff - the latest releases of Konqueror, Opera and Safari have all had problems dealing with the GMail code.