Tiny Terrors – re-writing an iPhone App in HTML

What is it?

Around Christmas 2010, we released a free iPhone game called Tiny Terrors into the App Store. This was written as a native Objective-C, iOS App.

Since then we have rewritten the App using open web technologies i.e. HTML5, CSS3 and JavaScript, and with the aid of Adobe's PhoneGap, we have wrapped it up for distribution via the App Store.

In this post, I'll explain why we did this, how we built it and what our next steps are likely to be.

Where do I get it?

Tiny Terrors is available for iOS devices via the App Store.

You can also play a cut down version of Tiny Terrors directly in your web browser if you are a Chrome or Firefox user at http://www.tinyterrorsapp.com/play/. At the moment, the desktop version doesn't allow you to add yourself to the game and creating your own 'tiny terrors'.

Why do this?

The purpose was simply to prove that we could develop effective, cross-platform mobile Apps that could be distributed by the various App stores using open web technologies.

Throughout 2011, we investigated technologies that could help reduce the overall cost and time associated with developing cross-platform mobile applications. Building bespoke native Apps for each of the major platforms can be time consuming and expensive. We needed an alternative solution that would allow our clients to reach the maximum number of platforms and devices as quickly and as cost effective as possible.

There were a number of important considerations that we held in mind during this research:

  • It was crucial that the final results matched or exceeded what was expected from a typical native App user experience.
  • It would be great if we could harness our existing mobile web skills to help build mobile Apps. 2010 and 2011 was a busy period for Code, and mobile websites in general. The skills we refined when working on these sites -- covering technical, creative and user experience --would serve as invaluable tools when it came to mobile App development.
  • We understood that cross-platform technologies would not replace the need for native App development or remove the need to offer native App expertise from within the agency. As we understand the need to pick the best technology for the job, we know there will be times when true native Apps will be more suitable.

How did we do it?

We investigated a number of cross platform technologies in addition to the HTML/CSS/JavaScript stack, including Adobe's Flash, Appcelerator's Titanium Platform and Ansca Mobile's Corona.

These are fantastic products and each takes some of the strain out of developing cross-platform Apps in their own way. However, one major concern was that we would become tied in to yet another proprietary platform. We wanted something open, something we had control off, something forward thinking and something universal that would provide us with greater long-term flexibility.

During early 2011, we released the open source library PhotoSwipe. This library made it simple for Developers and Designers to integrate touch based image galleries into mobile websites. Written in HTML, CSS and JavaScript, PhotoSwipe was purposely designed to mimic, as closely as possible, the experience and functionality of the photo App that is bundled with iOS.

What we discovered when building PhotoSwipe was that, with well thought out and tightly written JavaScript and clever use of CSS3, we could effectively imitate the appearance of a native App. Subtle tricks to trigger hardware acceleration in animation helped massively, and we achieved impressive speeds even on older iOS devices like the iPhone 3G.

Enter PhoneGap

On the back of PhotoSwipe and other mobile web based prototypes that we developed (which included a touch based 3D product viewer), we set out to look at the best way of wrapping HTML based Apps in such a way that we could get them submitted and approved into the various mobile App stores. It's true that you can write mobile web Apps without the need of an App store presence; the Financial Times mobile web App is a fantastic example of this. The truth of the matter is, however, that you simply can't ignore that App stores are an important distribution channel for your Apps.

In addition, we also needed a way of allowing our HTML Apps to use device hardware and features; for example, camera and media access, push notifications, etc. Certainly, you can access a lot of features from mobile websites, and on iOS devices you can query geo-location data, touch events and even the accelerometer. However, what you can access at the current time of writing is relatively limited compared to a native App.

To help with this we selected the open source project PhoneGap. PhoneGap makes it incredibly simple to package up our HTML based mobile Apps into a native wrapper that then allows us to distribute our Apps successfully into the various App stores. PhoneGap also comes with a number of features that makes it simple for our Apps to access various hardware features of a mobile device in a uniform way. For instance, the camera is made accessible via a JavaScript interface that is identical for iOS and Android devices. Additionally, the open nature of the project meant it fitted in perfectly with our research objectives.

However, the major plus point for PhoneGap is the ease at which it can be extended if a feature does not exist out of the box. Using both native language and JavaScript skills, it's very simple to build your own plugins to access any feature of the device that your HTML based apps require. We successfully developed a number of plugins, including overlaying a web App with native user interface components that blurred the line as to what was and wasn't web platform based. We've developed other plugins to undertake work behind the scenes on behalf of a HTML based App, such as requesting content from another website or RSS feed. We also successfully developed a push notification plugin that allow our HTML based apps to respond intelligently to push notifications sent to a device.

What we discovered by joining HTML/CSS and JavaScript with PhoneGap was that we could write 80-90% (if not more) of an App using open web technologies and then using PhoneGap, filling in the remaining functionality by using it's built in features and developing our own plugins.

Other frameworks and libraries we used

In addition to PhoneGap, the Tiny Terrors App was built on a number of existing frameworks and libraries, including our own bespoke JavaScript App platform.

JavaScript libraries used

Tiny Terrors is based on a JavaScript framework built by ourselves. The framework was initially designed as a rapid prototyping tool for mobile Apps and grew out of the work undertaken with PhotoSwipe, etc. It wasn't long, however, before it quickly grew into a production ready framework. This library is heavily events driven, extendable and out of the box, making it simple to handle transitions, page states and effectively 'knits' an Apps components together.

Our framework is also built on a solid stack of proven third party open source libraries including Underscore.js, Backbone.js, Lawnchair and Zepto.js. As well as Zepto.js, the framework works equally as well with jQuery for supporting non WebKit / Mozilla based browsers.

We did investigate using existing mobile web frameworks such as jQuery Mobile and Sencha Touch and, while we highly rate these, we found both frameworks a bit too large for our needs; in the case of jQuery Mobile, the fact that it is tightly coupled to jQuery would have provided us with less flexibility than we required.

iOS libraries used

In addition to PhoneGap, Tiny Terrors also uses the Facebook iOS SDK, the excellent ObjectAL library for audio, and MBProgressHUD for displaying a native 'loader / progress' indicator.

Conclusion

Currently, Tiny Terrors works on the desktop (Chrome and Firefox ) and iOS devices. Our next steps will be to integrate this into Android and Windows Phone 7 Mango devices.

If anything, rewriting Tiny Terrors has demonstrated that it is possible to write an App using open web technologies to maximise device and platform reach. It also shows that you can obtain a near native-like experience. But, as with any approach, you need to think carefully about whether the technology is right for your solution and be open and flexible to both native and 'non-native' approaches. At the end of the day, if the end user receives an App experience that is on par with or exceeds what they expect from a device, then that's the decisive factor.


Code on the panel for Mobile Monday Manchester