brentashley

I’ve spent a lot of time over the years playing with different methods of having a web page get data from the server without refreshing the page. One of my major criteria has been to find a method that works across all browsers. A few different methods have cropped up over time, following an evolutionary path.

In 1998, I used Microsoft Remote Scripting, which used a Java applet for its transport layer. Java later became a problem, since it’s blocked by firewalls and no longer automatically supported by all of the main browsers.

In 1999 I started experimenting with frames, then a hidden Iframe, which I used in my JSRS library in 2000. Iframes have become deprecated as of the XHTML specification, and browser history can be affected by their use, making this workable but suboptimal.

In 2000 I wrote RSLite which uses a client-side image object and a cookie. This works across pretty well all browsers but has limited value due to url and cookie length limits.

I started to use and promote Microsoft’s XMLHttp object fairly early on, but its limitation to IE and at that time only beta Mozilla made it not-ready-for-primetime. It has since come into its own in the form of Ajax, however there are still cross-domain scripting limitations, which are an impediment to the kind of Web 2.0 mashups that are some of the most compelling new uses of browser technology.

Danne Lundqvist was amongst the first to talk about the idea of using dynamically-generated script tags to send and receive data. In conjunction with Douglas Crockford‘s JSON JavaScript Object Notation, this method has recently been promoted by Yahoo in their Javascript Developer Center as a way to perform cross-domain data transmission.

Full coverage of the method can be seen on Dan Theurer‘s blog.

I am beginning to think that the combination of JSON and On-Demand-Javascript holds a great deal of promise:

• Great cross-browser compatibility
• It is not a hack. Cross-domain script tags are a designed-in browser feature. DOM manipulation is central to modern browsers
• JSON is a great compact object notation, native to JavaScript yet already implemented in many server-side languages and easy to do for others

It may be just another crayon in the box, but I think it’s going to get a lot of sharpening now that Yahoo is actively promoting JSON.

Well, not really three bears, but it makes a good title.

I’ve been thinking about the history of Web Application Development…

From my perspective, web UI development has traditionally been split into three camps:

• Process: Those who develop the user experience and map business process to web application flow
• Plumbing: Those who develop the elements that store, query and communicate data to and from the application
• Presentation: Those who design the visual elements that comprise the user interface

(Hmmm… they all start with P. Maybe it should have been the three little pigs.)

Each of these camps has a set of requirements and a set of constraints. The constraints of one camp are often offset against the needs of another, causing compromises to have to be reached before an application can be built.

In the beginning, the Plumbing group formatted data into html designed by the Presentation folks and passed it to the browser. Browser interaction was limited to basic population and submission of form elements, much to the chagrin of the Presentation and Process folks.

Porridge 1.0. Yum yum, ho hum.

Along came early (pre-DOM) DHTML. Once the page was rendered, layers could be moved, resized, hidden and displayed. Layer content was difficult-to-impossible to change once rendered. Javascript allowed some form content manipulation. The Presentation people could do some nice animation and acrobatics, but the Process group was left with the constraint that in order to advance through their flow models, it was necessary to refresh the page.

This porridge was too gloopy and didn’t flow nicely.

Some Remote Procedure Call (RPC) capability was introduced in the form of Remote Scripting. This allowed the Presentation group to interact with the Plumbing group to get information from the server and remove the page-refresh constraint from a data perspective, but they still didn’t have enough control of re-rendering the page in place to do much without forcing a visit to the server to rebuild a new page. This caused the Process folks to have to change their single-page flow designs to stretch over multiple wizard-style pages, a necessary but bletcherous compromise.

This porridge was better but still a bit lumpy.

Once DOM-based browsers came along, the elements were in place to satisfy the Presentation group (full manipulation of the rendered page) and the Process group (RPC + UI control). The plumbing guys weren’t happy though, because Remote Scripting either required a client-side Java applet, a non-standard XMLHTTP ActiveX object, or some acrobatic cross-browser hacks using iframes or cookies.

Many people started to build very useful apps based on these elements. These were the people who decided they could live with a browser-specific implementation. Many enterprise apps fell into this scenario, but not many public applications.

This porridge was fairly tasty and getting warm but didn’t have full confidence among the groups.

When IE built XMLHTTP into IE (rather than as an external control) and Mozilla baked its XMLHTTP implementation into its browser, the time was ripe. It wasn’t long until development groups started building rich applications that used it all together.

When Jesse came along and gave it all a name, everyone decided this porridge was ready for eating.

Now we have a zillion flavours of porridge.

With Ajax, the Process, Plumbing and Presentation groups are able to work together with much less friction. Each group’s needs can be met while imposing less constraints on the other groups than before. Many rich applications are being developed which serve as testament to this new ability for the three groups to interact smoothly.

I think some of the most significant advances we will continue to see from here are in the building of abstraction layers that allow modular building of highly interactive apps. The marshaling of complex object data from client to server and back via various serlialization techniques (XML, JSON, etc) has been by and large limited to corporate intranet applications due to performance considerations. With demonstrated tools and techniques that overcome these concerns, newly unified multi-dimensional development groups are already starting to make some very compelling apps that are spilling out of the intranet into the wider Web.

I think weather.com needs to rethink their popup ad campaign strategy this week.

Robert Scoble tells a story about running into Aaron Boodman:

Then Nick introduced us and said “he wrote Greasemonkey.” I answered “I’m not worthy.”

This reminded me of the time I first met Aaron, at the dinner thrown by Adaptive Path and O’Reilly at the end of the first day of their Ajax Summit back in May. I saw him across the room and went over to say hello, since we had had some online interaction in Remote Scripting circles some years ago.

Later, after having dinner seated beside Brendan Eich, creator of the Javascript language and Chief Architect at Mozilla, I saw Aaron coming our way and took the opportunity to introduce the two of them. “Aaron, this is Brendan Eich; Brendan, this is Aaron Boodman”. They reach across me to shake hands, and Brendan says “Wow, Hi Aaron, I love your work!”.

Humble as they come, Aaron was dumbstruck. He managed to stammer “…I think you have that the wrong way around!”, and then they fell into a rich conversation and I slipped away to mingle.

Tim Aiello has built a network monitoring app using Google Maps and JSRS to make Ajax calls.

Much of the stuff I do day-to-day lately has to do with network monitoring and configuration management for a Canada-wide network of 802.11x wireless sites. This type of map integration could be very useful.

I’m not usually too keen on stealth startups, but with Adam Michela being involved in this SixtySpots project, I’m expecting some really nice development work. Having done some extensive travel-related web development with VFM Interactive‘s rich media offerings, I’m interested in seeing how SixtySpots uses web collaboration and community technology to make the travel planning game more fun and fulfilling.

I finally got the Ajax soccer team cap I ordered on April 20th.

I had hoped to wear it to the Ajax Summit for a bit of fun, but it took 6 weeks to arrive, so now I just have a nice sturdy well-made hat without any abstruse referential attachment unless I start hanging around at web development meetups.

Brett Stimmerman is kicking some major Ajax butt with his Lace chat app.

The real magic in this particular implementation is that it degrades right down as far as browsers that don’t even run Javascript – you’re left having to manually refresh with the Say button, but it still works like a charm. Here’s a screenshot from the Lynx text browser: