Kevin Lynch Archives

contact: contact

November 15, 2004

Making Rich Internet Apps Web-Friendly


exampleAs rich internet applications proliferate, they are moving more processing to the client rather than relying completely on the server for application logic. This is a much more efficient architecture for applications on the web, as it distributes the computing load better and provides a more responsive experience for users.

One of the side effects is that the current state of an application is not displayed in the browser's location URL, since RIAs don't need to make server requests for every user interaction like traditional HTML applications would. For example, selecting a book at Amazon.com currently displays a URL with a lot of application state information:

http://www.amazon.com/exec/obidos/tg/detail/-/0262620952/qid=7556/
sr=1-1/ref=sr_1_1/102-5500034374543/102-0044014-6974543?v=glance&s=books

This is referred to as a REST (representational state transfer) architecture. A lot of this information is not very human readable, but embedded in there is the ISBN number for the book: 0262620952. Placing the state in the URL is useful in a couple ways: other internet applications can integrate with Amazon using a book's ISBN number to show books, and people can get the ISBN number from the current Amazon URL and do other things with it such as Jon Udell's Library Lookup bookmarklets which show whether the book is available at your local library. Recently Jon posed a question: can rich internet apps can be web-friendly in this way?

I believe the answer is yes -- this weekend I created an example showing how rich internet applications can display their current state in the URL as the user interacts locally. This enables a user to bookmark a particular state in the local application, and also enables rich internet applications to be composed with others through REST.

I've also posted the source code for the example, so you can see how it works. If you're developing applications in Flash or Flex I encourage you to display useful state information in this way so others can easily integrate and leverage your application with theirs across the internet.

15 Nov 04 09:26 AM

Comments

Kenny Bunch says:

Kevin,

Nice work. It gets me thinking again on how to create some workable solution to some of these problems.

There are two things to point out on your implementation.

1. In your flash embed code, you are passing the variables into the swf via a search string technique. This will cause the swf to be reloaded each time a new variable is embeded. To avoid pulling a fresh swf and use a cached version instead, you can update the code to use FlashVars.

2. In browsers like Mozilla, there is an unnecessary history trail created. This is the one thing that is somewhat of a usability issue. I'm wondering if there is a trick to solve this. I'll try and figure it out if I can.

Thanks for the contribution!

-Kenny

Posted by: Kenny Bunch on 15 Nov 04 12:00 PM

Igor Costa says:

That's a great example, like Daniel Dura had demonstrated on MAX, but the problem as Kenny said is the history that in Mozilla and sometimes on IE contiue appear in the address field.
But the structure of your example is very organized, but just missed the comments on some part. By the way is very friendly version a tipical and started example, Thanks to help us.

Posted by: Igor Costa on 15 Nov 04 08:40 PM

Kevin Lynch says:

Thanks for the feedback -- I've updated the example to use FlashVars to pass initial variables into the SWF.

On the history trail, I think this is actually a feature. This is of course a natural effect of the state changes being visible to the web browser just like other web applications, and is more controllable in Flash since the application developer can decide what merits a significant enough state change to mark it with an URL update.

Posted by: Kevin Lynch on 15 Nov 04 10:36 PM

Tony Pimm says:

Great! I've been looking for a solution like this for ages.

I've played with the named anchors feature in Flash using the timeline, but that just doesn't work for most RIAs not using the timeline.

I love that you can control the browser state in this programmatical way, but it's a real shame that it doesn't allow you to use all of the browser's features like the Back button.

Posted by: Tony Pimm on 16 Nov 04 01:34 AM

Bruce Landon says:

Kevin,
You have done a great bit of work here with the simplicity that will make it fly. Could you please talk to the folks who are producing Contribute and get it bundled inside of that application. This would be a measurable step forward in usability for elearning standards compliant modules/objects because it would allow end users to gracefully handle the interuptions of real life elearning.
Thanks
Bruce

Posted by: Bruce Landon on 16 Nov 04 10:17 AM

Kenny Bunch says:

Kevin,

The history trail would be a feature if clicking the back and forward buttons would trigger state changes in the swf itself. Would that be possible? It's been a while since I messed with browsers, but is there an event thrown or would you have to set up a process to watch the url for changes? Also, is the newest player scriptable from all the browsers? I know that there were changes to make it more scriptable from JS, but not sure how many browsers it effected. My biggest issue that I'd like to get around is the browser nav buttons having a large amount of history items and when clicked they do nothing but change the url with no state change. Other than that, the solution is great.

Posted by: Kenny Bunch on 16 Nov 04 11:05 AM

Jon Udell says:

Can the Flex history manager be combined with this solution?

http://www.markme.com/cc/archives/004072.cfm

Posted by: Jon Udell on 16 Nov 04 10:09 PM

Tony MacDonell says:

Hey Kevin,

We have used this technique on teknision.com for a long time.

We use it for bookmarking and back button functionality. you can deep link into our site as well:

If i wanted to send you to the content section of our site that is about the chats we developer for Sammy Studios i would send you a link like this:

http://www.teknision.com/siteVersions/tek2/#Konsort%20Chats

We have done this for clients as well. On the Sony site we did, for the new walkmans, we added deep linking functionality as well. It was much harder though because the interface is a little more liberal and sections are not defined as simple.

I made it so you can pass a var and go straight through the site to the product:

http://www.walkman.ca/main.html?prod=DNS707F


The last place we use this is in our chat. Our chat on our site is a bit old now, but a few months after we made it one of our guys wanted a quick way to identify visitors that are coming from a place we are watching for:

click this link and take a look at your name in our chat system:


http://www.teknision.com?userref=KLBlog


we use it for thing like Google Ad words, bylines on other sites we have made, etc.


I really believe that many developers don't take the time to make Flash content browser freindly. When you really play with JS and hidden frames though, it is amazing what you can pull off.


Posted by: Tony MacDonell on 17 Nov 04 12:20 PM

Manish Jethani says:

Jon:

Yes, the Flex history manager can be combined with this solution. I've ported Kevin's example to Flex to use the Back and Forward buttons in IE to navigate between states.

http://mannu.livejournal.com/263246.html

Posted by: Manish Jethani on 17 Nov 04 04:52 PM

Kevin Lynch says:

Manish, thanks for the port to Flex! The source files now include this Flex version as well.
http://www.klynch.com/apps/flashlinking/flashlinking.zip

Kevin

Posted by: Kevin Lynch on 17 Nov 04 08:21 PM

Scott Hanselman says:

Actually, the REST link that contains no state information for your (or any) Amazon book is:

http://www.amazon.com/o/ASIN/0262620952

Posted by: Scott Hanselman on 30 Nov 04 01:11 PM

Comments on this entry are now closed

You can of course make comments in your own blog, and Trackback continues to be available to reference your post here.