What is it?
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?
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.
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.
Other frameworks and libraries we used
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
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.