Adobe AIR and HTML

Adobe AIR is currently in beta (with a second beta version rumoured to be released in October) and I thought it a good time to take a deeper look into things and see how easy it would be to develop an application with it. To do so, I decided to build Snitter.

Building for the web and desktop

My original goal was to build an application that could work well on the web and as a desktop application. I wondered how much overlap in functionality could exist between an AIR app and a web app and surprisingly, quite a bit. Much of the initial interface, in fact, was built as a web app first before moving to AIR. Once I got into the AIR environment, I found that some features weren't needed anymore, like the sound engine.

While I think I could have pulled it off, it turned out it wasn't as simple as that. The design approach is different and what is usable on the web becomes awkward in a desktop application (and vice versa), at least for this type of application.

In the end, I ended up dropping the web application side of things to focus on just the AIR application. From the limited people I surveyed, nobody said they'd use the web app version anyway (since, you know, Twitter is already a web site...do you need to go to a web site to use another web site?)

HTML by Webkit

Adobe AIR is essentially a Flash-based runtime that can load in different types of controls including PDF and HTML documents. HTML documents are powered by Webkit, the same engine that powers Safari. This means that you have a respectable rendering engine at hand. From what I can tell, it's a little better than Safari 2 but not as good as Safari 3, whether this will change by the time Adobe AIR hits 1.0 remains to be seen.

On top of that is an additional layer of operability that can be manipulated via JavaScript such as opening new windows, working with the local filesystem, sound and local database access.

From web app to AIR app, you can be pretty confident that the HTML will render as expected on both Windows and OSX...and one would assume Linux as well. (The Linux version of AIR is expected to launch a little while after the Windows and OSX versions.)

CSS Support

The CSS support, being Webkit, is good but being within a strict environment like this, I think they need to make it easier for developers to style elements and controls, much like Apple did with the version of Safari on the iPhone. Being able to easily render rounded corners and gradients would avoid having to load up the UI with multiple graphic files and would make applications more difficult to style.

The other interesting thing I ran into was creating a UI that automatically took up 100% of the application canvas. This goes back to my whole app vs. the web issue. On the web, you start from the top and work your way down. If the page is done half way down, it's done. But in a desktop application, elements (like the custom chrome) have to stretch the full height of the window. I stumbled with this until I remembered something I read recently (which, for some reason I can't find now): use position:fixed but set the top and bottom to 0. And just like that, everything started coming together.

All-in-all, the CSS support is what you'd expect and not having to deal with cross-browser rendering issues has been a real plesure!

UI Concerns

Adobe offers up lots of flexibility including the ability to wire up your own resize, maximize, minimize and close buttons while at the same time, choosing to turn the default application chrome off.

By turning off the default browser chrome, you instantly run up into a cross-OS dilemma: where do you place the controls? When I build Snitter, I used my Windows bias and placed the close button on the right. I may add in OS detection and place the controls accordingly. But it's just one more UI hurdle to handle.

Some are concerned that AIR this design flexibility opens the door for inconsistent UI with other desktop applications. While I think that most applications built in AIR will have a custom UI, the popular applications will be those that do it well.

I do think the widget movement has already moved people away from the default OS interface. AIR-based apps will do well to fit a niche between widget and full-blown desktop application.

My largest concern and probably the most common complaints about Snitter have been about how the UI currently behaves. The scrollbar doesn't interact with the mouse wheel, text selection is difficult, and speak nothing of how hideous some of the controls look. At this point, I feel like much of the focus has been on getting the API nailed down and Adobe has indicated that this will be addressed in the next beta release due out in October.

Development Environment

Adobe currently provides a few tools. The SDK comes with a debug application that can launch the application, allowing you to play with your application before having to package it. There's also an AIR extension for Dreamweaver, although I haven't tried it so I have no opinion on how well it works.

What I did do, is give Aptana a try. It has support for AIR and made developing my application a pretty painless process. I wanted to try Aptana to see if it might be a good solution for my day-to-day PHP and JavaScript development and while I haven't decided if that's the case, I'll continue to use it while developing AIR applications.

There's currently a lack of quality debugging tools, leaving you with trace and alert calls to access information. I anticipate new tools will be made available, making development for Adobe AIR an easier proposition.

Is it worth it?

Considering that October is just around the corner, the current UI shortcomings — the unattractive scrollbars, lack of proper text selection, and lack of wheel scroll — should be resolved. Once those issues are fixed, building AIR applications using HTML may be an easy way for many web developers to build desktop applications.

Published September 06, 2007
Categorized as Adobe AIR
Short URL: https://snook.ca/s/842

Conversation

17 Comments · RSS feed
Jeff Croft said on September 06, 2007

Thanks for writing this, Jonathan. Hopefully it will help to educate many Web Standards-oriented developers and designers. Most of the people in our community I've mentiioned AIR to seem to be under the impression that it is somehow only for Flash developers -- and this couldn't be farther from the truth. As you've said, it actually has a very decent HTML/CSS/JS rendering engine built right in.

Tom Sieron said on September 06, 2007

I wonder if you'll switch to developing everything in Eclipse (Aptana) after fiddling with AIR. I used to write all my code - JS, HTML, CSS, .. for about 6 years using Notepad++(win) or Textmate/Coda (osx) but after two months of developing a Flex app in the Eclipse IDE I couldn't go back to a plain text environment and I'm stuck with Aptana (it has it's pitfalls :/)

Have you tried GoogleGears or WPF or Laszlo? If you would in future, could you write up a short comparison? Seems like there are more RIA dev enviroments nowadays than there are decent RIA's ;)

Zachary Biles said on September 06, 2007

I think the web development community is still trying to figure out just what exactly to use AIR for. The concept is easy to understand, but when does it become more than just an alternate to launching your browser?

Right now, it seems as though it's more noise than signal. I suppose we're all waiting for that killer app to open the flood gates. =P

Chris Harrison said on September 06, 2007

The more I read about AIR and see what people are building with it, the more interested I am in fiddling with it myself.

Jonathan Snook said on September 06, 2007

@Jeff Croft: currently, Adobe AIR currently heavily favours Flash/Flex developers but there is definitely potential here to do some cool stuff.

@Tom Sieron: Aptana definitely has some pitfalls and I already feel lost without things like column selection. However, I can set up Ultraedit as an external tool and easily switch between the two if I need to. We'll see if it sticks.

@Zachary Biles: I think there will be a few key apps that will have some popularity but the general public is likely to wait until the 1.0 release of AIR before really putting it through its paces.

Georges said on September 06, 2007

Nice overview Jonathan.
I read the free AIR Book from O'Reilly a few weeks ago and was quite impressed about the functionality the Runtime provides. It sure ain't much compared to a real desktop app, but still enough to develop rich applications for intranets or small tools like Snitter :)

I believe that currently most developers are still waiting for a final release of the runtime to start developing real applications. Even though I believe that the current beta is almost sufficent for full grown apps.

Lewis said on September 07, 2007

Thanks for the review, told me exactly what I wanted to know :) I think I'll wait until the next release until I start playing around with it.

James Constable said on September 07, 2007

I've used the HTML/CSS capabilities of Air, teamed up with jQuery to build some small data collection apps for clients who often attend exhibitions where they have no network connection.

The built in database means that data can be collected offline and synced with an online system when an internet connection is detected.

I'm really liking toying with it at the moment and hope i get the opportunity to implement some other stuff in the near future.

Goulven said on September 08, 2007

use position:fixed but set the top and bottom to 0.

You've probably read that in Conflicting absolute positions on A List Apart.
I've tested the same kind of magic using negative margins, which quite incredibly seems to work reliably cross-browser.

Marko Mihelcic said on September 10, 2007

I'm looking forward to the new UI of snitter,
I did play around a bit and I hope it'll turn out something like this http://flickr.com/photos/markomihelcic/1351609360/

Cheers!

Jonathan Snook said on September 10, 2007

@Gouven: Thank you! Yes, that is the article I was thinking of.

@Marko: thanks Marko for chipping in. :)

reza said on September 18, 2007

rrrrrrr

Kjell Bublitz said on September 22, 2007

Thanks - This article finally made me surf over to the Adobe website. Like it was mentioned before, i was always like: What the hell is AIR, what's Apollo,.. Adobe?? Framework? Ajax? Can't be any good :D

I just installed it and checked out some videos. If it really turns out to be as "cool" as it looks, i think i gonna stick with it this fall and join the band :).

Kjell Bublitz said on September 22, 2007

Okay.. couple hours later - i checked out the AIR update for Flash CS3: No code-hinting yet! Installed Aptana then: No debugging, but easier editing (top notch JS support)

Can't have both for now, so it seems. If the update would be more complete (hinting for newbs included) i would start right away and definetly recommend the beta.

Conclusion so far: HTML sounds tempting but at the longe range just makes no sense (its just a standalone html window after all). Flash/AS3 sounds much more like it! Hope they release a new update soon.

stef said on October 18, 2007

thanks for the article jonathan! all the best - stef

Ajai said on January 17, 2009

Thanks

Could you please let me know wether which is good to use in adobe air development flex or html?

Jonathan Snook said on January 18, 2009

Ajai: I think you can go either way and really depends on what you're comfortable with. With Flex, there are more resources out there simply because more people are developing with it.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.