Hybrid Apps: The Art of Being in Two Places at Once

Like any other winner-take-all industry, the digital music world is not immune to trendy tech solutions that come and go. Hybrid apps, however, are one trend that’s here to stay. Software developers in almost every industry have been meeting their customers’ needs for years with early versions of hybrid app technology and in the next few years, hybrids will reign on tablets and mobile phones.

I’ve spent a significant amount of time investigating what exactly a hybrid app is, and the best technologies to build one. The requirements for the nascent digital music service that LimeWire is currently building are driving a deep understanding of what it means to be a hybrid.

‘Real’ Hybrid Apps

It means that your service must be available both when you are connected and disconnected. It has to be deeply integrated into both the local file system and a set of cloud-based Web services. A pure-desktop app with a sprinkling of Web features just won’t do. A pure-Web app with Ajax feature won’t cut it either. Consumers are just too demanding.

And for a digital music service, a real hybrid app means that it has to search for and play music immediately — music lovers don’t want to wait a few hundred milliseconds to hear their favorite tracks.

The truth is that just about all applications, except for the ubiquitous Calculator apps, are hybrid to some degree. Your word processor checks in with the servers in Silicon Valley for updates and to post bug reports. Your online banking Web app uses cookies (files local to your hard drive) to track which computers you are using to log in from.

What we are starting to see with today’s hybrid apps is an architecture where speedy local desktop UIs are deeply married to dynamic online content and services. It’s not an afterthought or clever trick. It’s the starting assumption. Technically, that means a fully functional Web browser embedded inside a local application shell. Content is served up fresh from the standard Web servers and stored locally in standard files.

This has been termed “interoperability.” Software developers have been chasing interoperability for ages. All sorts of standards have come and gone promising true interoperability. The benefit of interoperability for consumers is long-term access to content. A hybrid application based on existing Web standards and existing operating system services means that downloads won’t be lost as technology continues to evolve.

The Options

There are many technical options for implementing a hybrid app, and you can build prototypes with almost all of them. A few of the leading contenders include Nokia’s OT with WebKit, Appcelerator’s Titanium, and Oracle’s Java Platform integrated with Gecko.

Nokia’s QT with WebKit is an excellent starting point for a hybrid application stack. QT itself is a cross-platform C++ framework that provides a great set of tools for building client applications with a native look and feel. The folks at Nokia have been busy integrating WebKit, the technology that powers Google Chrome and Apple’s Safari, into QT to make creating a hybrid app simple. We found QT with WebKit to be very powerful but a little slow on rendering HTML and executing JavaScript functions.

Appcelerator’s Titanium is another hybrid app framework that is focused on mobile as well as desktops. Titanium is a rapid development tool that conserves a lot of complexity for the engineer — it lets you write native apps using Web dev techniques. It’s also a newer framework that is maturing rapidly. I like Titanium a lot, but feel that it needs to mature a little more. Writing a native app with Web tools is fast, but sometimes you need to wrestle directly with the complexity of the OS, especially if your product demands deep integration and performance.

Oracle’s Java Platform integrated with Gekco — Java is the original cross-platform solution (well, not the original but certainly well-tested by now). Gekco is the Mozilla foundation’s technology that powers Firefox. Technically this is not a “product” like QT and WebKit or Titanium, so you have to know a thing or two about both to integrate them. We found that Gekco was not as HTML5 complaint as WebKit nor as fast at rendering and parsing. However, through testing we have found that Gekco supports the mature parts of HTML5 with both speed and reliability.

Of course, you can go completely native and use the .Net or Coco frameworks as the basis for your hybrid app. You’ll have less shared code, which can be difficult to manage, but you’ll have native UIs. However, if you want to provide a consistent user experience on all operating systems and devices, a single cross-platform framework, like QT, Titanium or Java, is the best way to achieve it.

The Server Side

Once you have the client side of your hybrid app, you’re not finished. You also need to build the server side. Luckily, if you’ve based your hybrid on a standard Web client, you can use almost any HTTP stack on the server side. For example, we’re using a variety of Web technologies, including Java, Hadoop, PHP, Python and Riak, all communicating via Apache Thrift. This architecture lets us use the right tool for the job and was pioneered by Facebook (among others).

Another important point for anyone using hybrid apps to learn is that Web designers and software developers are not synonyms. Almost all good Web designers can put together an excellent Web application using JavaScript, HTML and CSS. But their focus is on the skin, not the code underneath it. On the other hand, all good software developers can put together a good client app using a GUI framework like Java Swing. But their focus is on the nuts and bolts (classes and objects) — not the skin. These guys are bound to clash! There are two more frameworks that can help.

More Options: JQuery and SproutCore

JQuery has been around for a few years and has matured into a very powerful but lightweight DOM manipulation tool. The software developers like it because it’s fast and uses a functional programming paradigm — you pass a function to an object (a chunk of HTML) to change it. High five from the Comp Science department! The Web designers love JQuery because it’s written in JavaScript and lets them directly manipulate HTML tags.

SproutCore is similar to JQuery as a DOM manipulation tool but adds an additional layer of abstraction to provide views, controllers, models and observers. Software developers love these abstractions because they have grown up using them to write client-side applications. SproutCore uses the scripting language Ruby to automate the creation of a JavaScript Web UI based on it’s abstraction layer. Web designers can then tweak the resulting JavaScript and HTML to perfect the user experience.

In our prototyping and development efforts we found both JQuery and SproutCore to be very useful. Apple is a big supporter of SproutCore, and just about everyone in the industry is using JQuery.

The Hybrid Rule

Overall, hybrid isn’t the exception anymore — it’s the rule.

We’re building a hybrid app not because it’s trendy, but because it’s the only way to provide our savvy music consumers with the features and services they have come to expect from a world-class product. Our users don’t just use a single computing device: They hop off their laptops and on to their mobile phones and expect a seamless transition. Our music service has to be deeply integrated into both devices and the cloud simultaneously because our users have deeply integrated technology into their lives.

A hybrid application based on existing Web standards and existing operating system services means users won’t miss a beat.