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

XUL apps

[OmniVector]

it's a shame we don't have a standard web-app framework yet, because i've seen some pretty cool stuff done with XUL. i keep thinking "man, it would be awesome to have an XUL based webmail client. or an XUL based search engine" .. etc etc. hopefully what-wg will change things, but it's a shame to see all these competing web app libraries now because it really makes universality impossible

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

[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

[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

Mozilla?

[ceswiedler]

Can Mozilla integrate these apps better? From what I understand there's a lot of JavaScript going on to talk to the server, parse the results, etc. Could some of that be moved into custom reusable libraries in Mozilla / Firefox which the Javascript (Ajax engine) utilizes? I've noticed that Google Maps can take a heck of a lot of processor overhead. I imagine a lot of that is Javascript parsing which could easily be moved into compiled libraries.

It would be very interesting to have these applications work better (faster, more smoothly) on Mozilla based platforms, and degrade into a portable Javascript-only implementation on other browsers such as IE.

Flash for Rich Web Applications

[Anonymous Coward]

I don't understand why developers still look at HTML fix ups to make web applications rich. Especially when a tool like Macromedia's Flash allows a developer to build a rich web application with a clean interface that truly mimics a desktop application's. It offers a small foot print, interactivitey, mantains state, and can work with eneterprise backend logic (Web Services, J2EE, ASP.Net, and Coldfusion). Better solution hand down.

If your interested I wrote a short white paper on why its the future of web applications at http://www.jasonmperry.com/.

Give it a name

[lal]

The cynic in me says that this guy took a good look at Google's innovation and gave it a name:

At Adaptive Path, we've been doing our own work with Ajax over the last several months, and we're realizing we've only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide.

In this quote, read "doing our own work" as "invoking view source".

So basically what you're telling me...

[La Camiseta]

Isn't he describing something like the Echo Framework?

Hey look, a web framework that uses javascript to dynamically update itself! It's only been around at that website since 2002.

Will this worry M$?

[linuxwrangler]

Not only do Google mail, Google maps and several of the other examples feature pretty impressive interactive user interfaces, they also work just fine on FireFox. And on Linux. And the servers aren't tied to any particular OS either.

The ability to deploy full featured apps hosted on AnyServer(tm) and usable on AnyBrowser(tm) can't make Microsoft very happy.

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.

Re:Weblication?

[dcrocha]

Weblication is better then Ajax, at least for me. I say that because I worked for a company and there I had a co-worker whose nickname was? AJAX. He developed a *ridiculous* web application development framework; so ridiculous that we made the expression "Ajax Development Framework for Web Applications" a synonymous for "crappy web development framework". So if everybody starts calling XmlHTTPRequest-based development "Ajax", one enterprise-wide inner joke previously bound to last forever will now be lost.

Ps.: One of the features of *our* Ajax development was constant refactoring. So constant that we bet he was writing a book called "Refactoring Forever", where he taught how to keep refactoring the same system for years without never ever finish it.

Re:Sounds a lot like JPSpan

[Anonymous Coward]

This looks like an awesome tool, check out the examples here: http://jpspan.sourceforge.net/wiki/doku.php?id=exa mples

It looks like anyone with some PHP and basic Javascript can build nice, functional applications that use xml http requests.

Re:new acronym

[ReadParse]

Why am I replying to an Anonymous Coward? Not sure.

This is not really old technology. Pieces of it are old. What's new is the ability to really do it in the real world, thanks to some pretty decent standards support by all the major browsers, including the XMLHTTP object, which is what makes it possible to send a request dynamically.

The name Ajax? Well that's just what this guy is calling it, and it's not an altogether bad name. Call it whatever you want, but he's absolutely not wrong that this is a new way of doing web applications. I took notice of this not long after I started using Gmail and saw what they were doing, and I've played around with this type of development recently, and it's really great.

So don't go around anonymously claiming to be an old, experienced hand surrounded by morons when you don't seem to know what you're talking about.

RP

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.

I've been doing this for a while...

[venomkid]

..and it really is beautiful. XML backend, Javascript frontend... deliciously platform independent, fast, and dynamic as you wanna be. Once you overcome some of the cross browser weirdness, it's a breath of fresh air.

(...but if someone says the word "Weblication" to my face I'll have to smack them.)

vk.

Re:I used it for a state wide web app.

[davegust]

Also check Professional ASP XML - Chapter 12: Client-side Data Binding with XML. Copyright 2000.

You don't need ActiveX objects

[Quantum Jim]

You don't even need to use ActiveX objects in IE. You can use document.createElement("xml") and use Internet Explorer's built-in XML islands extention to load content, which seems to work even if ActiveX is disabled (at least for me) in IE6-SP2. Pimping my own stuff: I wrote a few journal entries on this topic a while ago. Check out the original article and its update.

Re:XmlHttpRequest The Easy Way

[adamfranco]

That's a great tutorial there! The simplicity of the examples was key to figuring out what the minimum important parts to using this system is without being confused by the many cool things you can do with the system, but are extra.

For those reading, I recommend that you follow that tutorial with this one which then goes into more depth on generic request/responce scripts and XML handling.

Oh yeah, it took me a while to find these, so I'll add this list of pages that explained how to do the things that I wanted to do while going through the tutorial. There are just so many crap sites that repeat the same rubbish tutorials about javascript that it can be really hard to find good info.

• General Javascript documentation: http://www.devguru.com/Technologies/ecmascript/qui ckref/javascript_intro.html
  
• Writing to <div> tags from Javascript: http://www.howtocreate.co.uk/tutorials/index.php?t ut=0&part=14#dhtmlCONT
  
• Accessing XML Nodes from Javascript: http://www.mozilla.org/xmlextras/xmldataislands/
  Every other tutorial I found says to use something like node.firstChild.text for getting the value of an element, but I couldn't get that working on Firefox or Safari. This just mentions to use node.firstChild.nodeValue which did the trick for me.