10. Other mobile frameworks

I will be perfectly honest: As cool as it is, the NimbleKit Objective-C framework may not be the right design or development tool for your particular app projects. I wrote this book because my mobile app design story is based on using NimbleKit, and the framework has worked extremely well for my projects and my collaborators’ projects. I also know that I haven’t even tried all of its features yet (and new features continue to be added), so I am confident that it will remain a robust platform for some time to come.

To me, this meant it was an important opportunity to tell other standards-based web designers about.

But you may have project requirements that NimbleKit doesn’t meet or you may not wish to design only for iOS devices. And I’m not here to talk you into using NimbleKit exclusively—you definitely need to be savvy about using the right tool for the right task.

If this is the case, or if you’re curious about exploring some additional options now that you’re familiar with iOS app design, the mobile user experience, and the big picture of app design and planning from beginning to end, this chapter is for you.

Emulating the iOS experience with PhoneGap and jQTouch

Another framework option that I think is particularly compelling is PhoneGap, especially when used in conjunction with a styling and behavior plug-in such as jQTouch. This approach has some similarities to NimbleKit, but it also has some key differences.

Considering PhoneGap

PhoneGap is an open source framework that is free to download from its developer, Nitobi, Inc. (Figure 10.1).

10.1 The PhoneGap website.

This framework has a number of important things going for it. To start with, the fact that it is open source is a win for people who gravitate toward open source solutions. Open source solutions offer some distinct advantages:

• Downloading and upgrading is usually free.

• The continued development of the solution is less centralized, more organic, and tied to real-world needs as they crop up “in the wild,” so this can make open source solutions feel more responsive to community needs.

• Some people just prefer to avoid corporate and proprietary solutions.

Remember that open source solutions can have down sides as well:

• Some argue that open source options are “free like a free puppy”—the solution itself may be free, but the ongoing support may have hidden costs, whether out-of-pocket or in terms of time spent finding free support.

• The development of open source solutions is dispersed throughout a community, but so is the responsibility for maintaining the tool and keeping it going (and decentralized responsibility can result in its own political challenges).

Another strength of PhoneGap is multiplatform support. It currently supports iPhone, Android, BlackBerry, Symbian, and Palm mobile operating systems. But the support and access to native features varies from platform to platform, and you still need to install (and learn how to use) the individual development environments for these platforms in order to use PhoneGap in that capacity.

So, what about the native iOS user experience? This aspect of PhoneGap is a mixed blessing, as the framework does not include native user interface library items such as a title bar, tab bar navigation, audio and video players, and other familiar iOS elements like NimbleKit does. From an interface design perspective, it is much more of a blank canvas.

But there are ways to emulate, or build, your own iOS interface, with CSS and JavaScript in PhoneGap. One way is by using it with the jQTouch plug-in.

Considering jQTouch

jQTouch is a jQuery plug-in for mobile web design on iOS devices, and can work in tandem with development frameworks such as PhoneGap to create native iOS applications. It can also be used for web apps that reside on servers and are delivered live to mobile browsers, on any mobile device (Figure 10.2).

10.2 The jQTouch website.

This jQuery plug-in has been optimized to run on mobile devices, and has native-looking styles that can help make your iOS app feel familiar to users of iOS apps. jQTouch accomplishes this by emulating native iOS interface elements and behaviors, such as page transitions, with convincing graphic files and CSS transitions.

How is this different from NimbleKit’s library items? Because the NimbleKit framework is designed to serve only iOS devices, it includes prewritten Objective-C modules that call native iOS interface elements and behaviors. This is great if you want to design an iOS app that’s as native as possible; the only emulation of iOS elements are those that you choose to add yourself. (An example is making buttons that are styled with CSS to be native-looking, which you explored earlier in this book.)

On the other hand, using jQTouch can lead to some pretty convincing results, too, even if the styles are only native-looking. Plus, if you want to design a less-native interface or behavior, using jQTouch with PhoneGap should afford you a wider range of possibilities to do so. Again, it’s more of a blank canvas, just as an empty browser window is for a new website design.

In fact, to make this clear, jQTouch includes two predesigned styles for the plug-in. One is called apple, and the other is called jqt. The apple style does what you would expect, and the jqt style has a bit more of an Android feel to it.

For example, here’s a version of the Bill of Rights app demo that you explored in Chapter 5, designed using PhoneGap and jQTouch with the style set to apple (Figure 10.3).

10.3 The Bill of Rights table view example using PhoneGap, jQTouch, and jQTouch’s apple theme.

If you refer back to Figure 5.3, you will scarcely notice a difference in the graphic presentation between this native-looking example and the native interface of the NimbleKit example.

Here’s the same screen using PhoneGap and jQTouch, but with the style set to the jqt theme instead (Figure 10.4 on the next page).

10.4 The Bill of Rights table view example using PhoneGap, jQTouch, and jQTouch’s jqt theme.

This is certainly a cool look. Is it a native iOS user interface? No, not entirely. But not all iOS apps need to stick to a strictly native user interface to be successful.

To give you an idea of how the HTML syntax differs from NimbleKit when using PhoneGap, here’s the file for the apple-themed example shown in Figure 10.3:

In addition to the slightly different HTML syntax (all of the screens are in one file), the highlighted links to CSS and JavaScript files show the most significant difference between NimbleKit and PhoneGap. But when using jQTouch with PhoneGap, as this example does, most of those files are provided for you in their respective downloads.

Developing native apps with Titanium Mobile

Another framework that supports both iOS and Android is Appcelerator’s Titanium Mobile, and it’s free to download from www.appcelerator.com (Figure 10.5).

10.5 Appcelerator’s Titanium Mobile.

Titanium Mobile is a bit of an odd duck: It is an open source development framework with a very robust and glitzy marketing campaign behind it. So it is similar to PhoneGap in that it is a company product, but it has also been open-sourced. In this case, however, the presentation feels very corporate to me (but I guess it’s because Appcelerator also sells support and training for Titanium Mobile).

I recommend that you check out Titanium not because I’ve used it (I have not), but because colleagues of mine have and they confirm that it is a good option. Here are some of the things they’ve said about Titanium Mobile:

• Although it has a large number of APIs (the website claims over 300), they are all accessible to the developer via web standards. But Titanium Mobile requires almost everything to be written in JavaScript. So on a spectrum of tools for designer-types versus tools for programmer-types, this one falls more firmly into the programmer camp.

• Titanium Mobile out-of-the-box comes with more corporate branding than PhoneGap or NimbleKit, which do not force any company branding into the interface. But some swapping out of images can get you around this (though I can’t vouch for whether doing so voids any end-user license agreement clauses that you tacitly agree to when downloading the tool).

Another key difference with Titanium Mobile is that the download comes with its own Mac OS desktop application, Titanium Developer (Figure 10.6).

10.6 Titanium Developer.

Titanium Developer manages, compiles, and packages project files. It effectively bypasses Xcode as your development environment, which means that you write all of your JavaScript in the editor of your choice. Once you’re done writing the code and designing any other assets, you import the project files and compile, after which Titanium Developer launches Simulator (rather than Xcode) to show you the results (Figure 10.7).

10.7 Titanium Mobile’s Kitchen Sink demo app in Simulator.²

If you are an experienced JavaScript programmer and are interested in developing native apps for both iOS and Android, I would encourage you to investigate Titanium Mobile when evaluating tools for your app projects.

Designing web apps with Sencha Touch

Are native apps, designed for specific platforms and installed to run on devices, better than web apps? Or are web apps, which are more universally designed and run on servers just like websites, better than native apps?

Yes.

Although my focus in the mobile space has been on native apps for the iOS platform, I certainly would not discourage you from considering web apps to meet your app design needs or those of your clients. In fact, many of the ideas and skills you’ve learned in this book apply to designing web apps as well as designing native iOS apps.

When considering ways of designing effective mobile interfaces for universal web apps, you already have one option to consider: the jQTouch plug-in. Another option is Sencha Touch, which is free to download from www.sencha.com (Figure 10.8).

10.8 The Sencha Touch mobile app framework.

Here are some highlights of Sencha Touch:

• It prides itself on being the first app framework built specifically to leverage HTML5, CSS3, and JavaScript to maximize power, flexibility, and optimization. Web standards FTW!

• Sencha’s beta version is compatible with both iOS and Android, with themes designed for both platforms. This is not technically a device platform limitation, however, but rather a WebKit rendering engine limitation. Other mobile browsers based on WebKit should support Sencha Touch quite well.

• Because the mobile web is evolving on most platforms to be touch-based, Sencha Touch has developed a robust range of touch interactions: tap, double-tap, swipe, tap-and-hold, pinch, and rotate. Such interactions that were initially only available in the native iPhone platform could eventually become ubiquitous on all mobile devices, with Sencha leading the way with its Touch web platform.

Remember that we are still very much in the Wild West of mobile app design, with these devices still being very new and the range of good design and development tools still growing. And when considering an app project for yourself, your employer, or a client, the NimbleKit Objective-C framework is a strong, solid option—but consider the full range of issues that go into selecting the right tool for the right job. Table 10.1 shows how some of these issues compare across the tools mentioned in this chapter. It is by no means comprehensive, but serves as an example of how they can differ in both stark and subtle ways.

Table 10.1 Comparing NimbleKit to other mobile framework options

Finally, note that VolnaTech, the developer of NimbleKit for iOS, released NimbleKit for Android in the fall of 2010. It promises to deliver a similar opportunity to web designers who want to design native Android apps by using web standards, for distribution in the Android App Store, without needing to learn Java programming or the Android SDK.³ NimbleKit for Android is a separate license from NimbleKit for iOS.

Summary

In this chapter, you learned about three alternative methods for designing or developing mobile apps for iOS devices as well as other platforms:

• PhoneGap (with jQTouch) provides a web standards–based alternative that is similar to NimbleKit. It comes with fewer APIs than NimbleKit and emulates rather than calls native user controls, but also affords a wider range of UI styling options.

• Titanium Mobile is another web standards–based alternative, though it relies heavily on JavaScript programming and is thus more of a development framework than a design one. It comes with more APIs than NimbleKit, but uses its own desktop application for compiling and packaging the app binary.

• Sencha Touch is an HTML5, CSS3, and JavaScript web application framework that allows you to more quickly design mobile apps that run on web servers instead of being distributed or sold via the App Store. The product is not a native iOS app and lacks an iOS user experience, but still has a robust touch interface that is designed to work beautifully in WebKit-based mobile browsers on iOS, Android, and other mobile operating systems.