The "Tech. Arch."

Architecting Forward ::>

A Breath of Fresh AIR in Rich Client Development

AIR-Sh-m-AIR

Last year with several colleagues we were discussing the various new rich web technologies such as SilverLight, Javafx, and Adobe AIR. At the time I was not too interested in Adobe AIR because my work technical platform is primarily Microsoft-centric. But then we were primarily discussing features like rich presentation and the ability to call web services, all within the browser. Then a few months later as user adoption for Twitter was sharply accelerating, some interesting Twitter client started to appear such as TweetDeck.
TweetDeck (on AIR)
The idea being that, simularly to an instant messaging client (like Trillian), users want to stay connected at all times to Twitter and get frequent updates and the ability to quickly toggle over and tweet-back.
So what’s special about the TweetDeck client? Well, it has a very rich and fluid visual interface and communicates with web services exposed by Twitter. It is built on top of the Adobe AIR platform, which encompasses Flex as well as as additional APIs allowing interaction with the desktop (e.g. via drag and drop – something that web clients cannot do due to their sandbox). It even allows for the application to run completely on the desktop.

Pump AIR Into Rich Web-Aware Apps

Since I was more interested in the Silverlight (see other posts), I had dismissed the AIR approach as being another attempt at building a proprietary and competing platform. But I was actually missing a part of the AIR attraction: the fact that you could actually built an application using HTML and Javascript, and call the AIR APIs from your regular Javascript code. So you could limit the need for proprietary features to only what makes AIR special such as:

  • providing an application update mechanism letting you publish a new version and have your users know about its availability including the ability to update it. This is a bit like Microsoft ClickOnce but for the Web.
  • fluid (non-rectangular) window shape capabilities including transparency
  • access to local storage either using files or the SQLite database
  • online/offline awareness
  • user notification from the system tray

So how does this compare with Microsoft? Well, although I think Silverlight is great in the sense I can leverage .NET languages – either static ones like C# or dynamic ones like IronRuby – the catch is that XAML and the Silverlight framework are proprietary and present a learning curve. Silverlight 3 will offer the out-of-browser experience as well but will still be somewhat hamstrug by the web sandbox. This is can be a benefit and a downside as well.

But with AIR, I can actually include all my favorite Javascript frameworks (e.g. jQuery and its plugins, ActiveJS, etc.) to add fade-in effects, dialog panels, etc.
In the end, what the big deal with AIR?
Well, the big thing for me is that you can leverage web design and development skills and build rich but web-aware client apps.

Breathing It In

So I decided to take a breath of fresh AIR and started on my first project, an app allowing the user to drag and drop media files, organize/tag them, and finally compress and upload them to a web site. I soon realized this was a bit ambitious for a first project so I decided to only focus on a subset of the desktop features such as:

  • drag and drop of files
  • table display with editing of classification information
  • local persistence beyond a user session (stop and pick-up later where you left off)
  • auto-update

myfirstairapp2

For my second app, I decided to tackle how to call SOAP web services such as the one offering detail weather data provided by NOAA‘s National Weather Service. For that project I leveraged the jqSOAPclient jQuery plugin which allowed me to easily construct SOAP request and automatically convert SOAP responses into JSON object for easier handling in Javascript.

weathercenter

Now Inhale!

I built my apps using the Aptana IDE, which allows you to step through your Javascript code. Plus, AIR gives you “Introspector” a tool similar to FireBug which allows you to inspect your DOM tree and evaluate Javascript statement (useful to test jQuery fragments). And to troubleshoot and visualize my local database I used Lita, which is actually a well-written and fun to use AIR SQLite administration tool. I have to say I had a great amount of fun!
Look for future blog posts covering these 2 apps!
Hopefully you will inhale AIR too and give it a try when building your web-aware rich client!

References and Resources

  1. Adobe AIR Developer Center for HTML and Ajax
  2. AIR CheatSheet
  3. AIR Pocket Guide
  4. AIR Update Framework
  5. “Tips for building AIR applications that can be easily updated” by David Deraedt
  6. Aptana (IDE) AIR Plug-In
  7. “Lita: AIR-based SQLite Administration Tool” by by David Deraedt – *** MUST HAVE! ***

July 2nd, 2009 Posted by | AIR, Ajax | no comments