New Frameworks Give Mobile-Web Apps a Boost
Apple’s campaign to make native mobile apps seem sexier than the temperamental world of the mobile browser has been very successful. Tens of thousands of developers have been lured to the company’s App Store as a result.
Since these frameworks deliver content through the browser, there are no bizarre App Store approval processes or installer packages to contend with, and you really can “write once, run anywhere.” Any mobile operating system with a modern browser is game — iOS, Android, WebOS, it doesn’t matter.
Sure, for most games and animation-heavy apps, native is still the way to go. But for all other kinds of content, even complex stuff like maps and videos, the mobile web may be the better choice.
The latest entry into the mobile-framework field is Sencha Touch, brought to you by the same people that created Ext JS, jQTouch and Raphael, all of which have been combined under the name Sencha.
Sencha Touch, released this week, bills itself as “the first HTML5 framework for mobile devices,” which isn’t quite true. Several other mobile frameworks make use of HTML5 APIs like offline storage, or companion APIs like geolocation. But Sencha is nevertheless well worth a look if you’re thinking of building a cross-platform mobile app.
Sencha offers built-in support for the geolocation API and the offline storage API, and takes advantage of CSS 3 for smaller, image-less design elements. Because all the major mobile platforms — iOS, Android and WebOS — use similar WebKit-based browsers, there’s little to worry about when it comes to support for cutting edge features like HTML5 and CSS 3. Even when Firefox arrives on mobiles, you should expect support to be on par.
Sencha has some demos available if you’d like to see what’s possible. The GeoCongress demo makes use of the geolocation API to find out where you are and then show a list of your senators and representative. There’s also a very slick Solitaire demo that shows how to preserve an app’s state using the HTML5 local storage API.
The Sencha Touch code is available under a GPLv3 license. If you’d like to experiment with the code, head over to the new Sencha Touch site and grab a copy.
If Sencha Touch doesn’t cover all your bases, there are several other frameworks out there that do similar things. Although not specifically geared to mobile-web apps, SproutCore can be used to create lightning-fast mobile-web apps.
SproutCore is written in Ruby. You can grab a copy from the SproutCore site, or install it as Ruby “gem.”
Another possibility is iWebKit, which offers many of the same features you’ll find in other frameworks, but puts more emphasis on Apple’s mobile devices. Unfortunately, while most iWebKit apps will work just fine in Android, the built-in UI elements are clearly iPhone-specific.
Like the others iWebKit is customizable. You can always dive into the CSS files and tweak things to your liking (though doing so may call in to question the benefit of using a framework in the first place).
Another framework worth noting is Apple’s own PastryKit. Although PastryKit’s UI isn’t cross-platform, it does have some nice tools for iPhone-specific web apps. Keep in mind, though, that PastryKit is not officially documented. Daring Fireball has a nice video overview, and developer David Calhoun has dug a bit deeper into how PastryKit works.
Before you rush off to develop a mobile-web app, it’s worth pointing out that there are definitely some significant advantages to native apps — whether its on iOS or Android. Native apps have access to lower-level system tools (in the iPhone’s case, that means stuff like the accelerometer, gyroscope and more). If your apps need those tools, then by all means, use native code.
If you’re not writing an app that makes heavy use of platform tools, the web is a viable option. And, thanks to frameworks like Sencha Touch, SproutCore and iWebKit, building a cross-platform mobile-web app doesn’t have to be a Herculean task.