Those of you that have followed our platform for some time might remember the Tweetanium project.  As we discussed during last week’s webinars we are breathing new life into this project.  A mobile version of the application is being developed to demonstrate some best practices for cross platform mobile development with Titanium (i.e.) iPhone & Android.  The desktop version of Tweetanium has also been redesigned and rebuilt from the ground up.  Today we are releasing both versions of Tweetanium.  The rest of this post will cover the desktop version in detail.  A follow-up post will be coming out soon focused on Tweetanium mobile.  Both versions are being released under the Apache 2.0 license and the code will be made available on Github later on this afternoon.  Installable versions of Tweetanium Desktop will also be made available for download at that time.

Behind the Scenes

Application Structure

Developing a desktop application with Titanium is very much like building a standard web application.  Many of the same best practices and performance techniques you’ve learned while building web applications can be directly applied to building out powerful desktop applications.  In other words if you’ve spend some time building web apps you will feel right at home.  The Resources directory holds the bulk of the files we are most concerned with; items like the application’s HTML, CSS, JavaScript, images, etc.  Tweetanium consists of 2 windows; a login window and the main application window.  These are defined in tiapp.xml and have corresponding HTML files.  We’ve also added a utils directory with this particular application which houses a Python script we use to assit with packing the application.  That will be covered in more detail later on in this post.

JavaScript

The bulk of the custom JavaScript code for Tweetanium can be found in 3 JavaScript files.  The main JavaScript file is tweetanium.js.  The core code makes use of the module pattern and is namespaced behind the Tweetanium variable to avoid polluting the global namespace.  The module pattern, popularized by Yahoo!, enables us to create private variables & methods and helps keeps the code fairly consistent.  The Tweetanium object exposes a number of sub-properties and methods that make interacting with the object pretty simple.  Here is the basic outline of the Tweetanium object:

More complex/specific portions of the Tweetanium code are placed in separate files, but a similar pattern is followed and the code is added into the appropriate namespace under the pre-existing Tweetanium object (e.g.) tweet overlays, scrollers, etc.  Lastly, there are also files whose names correspond with the window that are utilized in (e.g.) index.js & login.js.  These files mostly contain some initialization code and window specific event handlers.

External Libraries

In addition to the application’s custom JavaScript code Tweetanium also makes use of a couple external open source libraries; jQuery and SpazCore.  jQuery is used to assist with basic DOM manipulation, traversal, etc and SpazCore is used to ease communication with the Twitter API.  Neither of these are required.  Developers are free to pull in whatever libraries they feel most comfortable with or simply stick with basic JavaScript.  As is true with many of the popular mobile development environments on the market today, Titanium Desktop bundles the Webkit browser.  Developers should find that most 3rd party JavaScript libraries will work well in this environment.

xAuth

In order to interact the Twitter API beyond simple searches (e.g.) tweet, reply, retweet, follow/unfollow, etc an application will need to utilize OAuth/xAuth.  Tweetanium utilizes xAuth and does it’s integration via SpazCore.  Below are the basic set of methods created in Tweetanium to deal with Authentication (Note: these are taken out of context so review the full source for the actual implementation).

Taking Advantage of CSS3 & Webkit

Targeting a single (modern) browser virtually eliminates the need to worry about browser compatibility issues and also has the added bonus of allowing developers to take advantage of newer browser technologies like enhanced support for CSS3 features.  CSS3 makes doing common tasks like adding box shadows and rounded corners a breeze.  Below are a few examples taken directly from Tweetanium.  The main tweet input box in Tweetanium uses a box shadow effect.  The code to achieve this effect is simple:

-webkit-box-shadow: 3px 3px #888;

The search input box combines box shadow and border radius:

-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 2px 2px #888;

Often an important element of cross platform desktop development is the ability to keep our UI consistent while also allowing the app to blend in with the environment it is running on.  Titanium Desktop allows us to do this quite nicely.  The application can pickup system chrome, uses standard system installers and generally blends very well.  Below are a few screenshots of Tweetanium running on Mac OS X, Windows 7, and Ubuntu 10.10.

However, in some cases this can make our design less appealing so it is possible to turn of chrome and/or override certain UI elements such as scrollbars.  Webkit supports custom scrollbars and can be used to help us build a really refined UI.  Tweetanium takes advantage of this feature and recreates the Bespin style scrollbars outlined here.

System Notifications

Another common task required in many desktop applications is posting system notifications.  Titanium Desktop makes creating system notifications simple and they look great across the various environments.  They integrate nicely with Growl, Snarl, etc and generally have basic fallbacks in place for when these more advanced notification systems are not available.  Tweetanium uses system notifications to indicate when new tweets have been found and creates a menu item that allows for the notifications to be enabled or disabled at will.  Here is the basic code used to create & display the notification:

The resulting notifications look like:

Optimizing/Juicing

As I mentioned earlier many of the same optimization techniques used in standard browser development can be applied to Titanium Desktop development.  In Tweetanium we’re using PNGCRUSH to help with image optimizations and Juicier to assist with minification & concatenation of the application’s CSS & JavaScript files.  Juicer is a nice utility that allows us to keep the code organized in a way that is easier for development, but also simple to optimize for production.  Juicer allows us to create dependencies between various CSS files and JavaScript files.  For example the main index window includes only a minified index.js file.  That file defines the set of dependencies it needs like jQuery, Tweetanium, etc.  When we run juicer on this file it pulls in dependencies in the right order, concatenates the scripts, minifies them (via the YUI Compressor or Google Closure Compiler), obfuscates the code if desired and verifies the syntax via jslint if we want.

Some additional notes on this:

• In our case jslint is disabled when running via juicer because some of the external libraries fail to lint.  The Tweetanium files themselves are linted separately.
• Spazcore is included separately and not pulled into the juicer dependencies because it defines it’s own set of dependencies and we are using a prebuilt version of SpazCore for Titanium.
• To help automates juicer runs we’ve created a simple little Python script called juicerize.  After changing any of the projects CSS or JavaScript simply run this script and then test or package to see the changes.

In Closing

Our goal with Tweetanium is to provide a useful set of projects that developers can learn and pull from as needed. Tweetanium is not necessarily a full blown Twitter client although it does implement much of the functionality found in a number of popular clients.  We’ll continue to refine & improve the application over time and use it to show off other platform features. Below is a short video of the application in action.  Source code and downloads coming shortly…

• 

This entry was posted on Friday, January 14th, 2011 at 9:58 am and is filed under Desktop. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.