Building Sideline: Lessons in YUI + Adobe AIR
About the Author: Chad Auld is a Front-end Engineer working with the Yahoo! Buzz Marketing team. A long-time open-source contributor, he recently helped start the MiaCMS project, a next-generation fork of Mambo built using YUI. In this article, he walks us through the process of developing a desktop application with YUI on the Adobe Air platform.
Ever wonder what people are saying right now about your company, brand, service, product, etc? Sideline, inspired by a recent internal hack project at Yahoo!, goes beyond the standard customer survey process to let you listen in real-time to people talking about your products and then use that feedback to enhance your service or help users with their problems.
Briefly stated, the goals of our project were to
- Create a desktop application that allows for the creation, grouping, and auto-execution of advanced search queries against Twitter
- Leverage existing skill-sets and tools
- Target the Windows, Mac OS X, and Linux operating systems and minimize the amount of platform specific code that must be written
- Open source the code so that others can learn from, contribute to, and/or extend the product as they see fit
YUI Grids in AIR
YUI Components in AIR
In addition to Grids, Sideline also utilizes the Dom, Event, Drag and Drop, JSON, Selector, Container, Button, Menu, Slider, and TabView components. I am happy to report that all the YUI components performed extremely well in the AIR environment and required no modifications. Sideline does implement a fairly customized design and thus some customized skinning of the YUI components was required, but no core modifications. Most AIR applications tend to have a rich desktop application feel to them. For this level of customization, the YUI skinning article is a great reference to get started.
Beyond the Browser
A major enhancement of the Adobe AIR platform over the traditional web environment is access to a local SQLite database and the user's file system. Local database access is becoming more available in traditional web environments through technology such as Gears and HTML 5 client side storage, but for now these solutions are not ubiquitous. For those interested in AIR development, Sideline has tackled many of the common tasks that a typical AIR application might require, e.g., fetching external data, handling application updates, interacting with the local database, working with the local filesystem, launching native browser windows, displaying desktop notifications, etc. It should prove to be a useful reference in that respect.
Tips for AIR Development
- Know your environment. AIR uses the WebKit open source browser engine under the hood. Traditional web development is aimed at making an application or site work across as many browsers/operating systems as possible. Which browsers to support typically comes down to a cost versus usage factor. However, coding for a single rendering engine reduces the need to prepare for and test against the slue of potential combinations in the market. That being said, it still makes sense to develop in a cross-browser manner where possible since there may come a time when the application needs to find its way back into a more traditional browser environment. Using a framework like YUI will make that process relatively painless. It is simple to see the browsers and platforms currently supported by YUI via the Graded Browser Support chart. Developers should be fairly safe to take some basic shortcuts when building AIR application (using
-webkit-border-radiusmakes rounded corners a breeze), but use them sparingly and document them so they are easy to spot later.
The Road Ahead
Now go forth and fork it!