Lately we have been quite active around a mobile app, which you can find in multiple app stores for multiple platforms. The app runs on iPhone, Android, Palm’s WebOS, Blackberry, Windows Mobile, Nokia S60, Vodafone 360 phones and we are still adding to the list. But the most interesting fact is: it’s all the same code, just one and the same app. For making it work on all the platforms we just had to wrap, build, deploy and package it using the right combination of tools for the right platform. By adding a bit of UI sugar (mostly CSS) the app looks native and can reach a much wider audience for a much lower cost than ever possible before.

What is EventNinja?

EventNinja is our little ninja that goes out and collects events :-). Seriously: we had started uxebu with the high goal of playing with the best and knew from the beginning that we can reach out to the interested and passionate crowd just by meeting up with them personally, at the various real-life events. So we just needed to show up at the WebMondays and BarCamps around us. We started keeping track of them in a Google Calendar, which is publicly shared (you can find it here bit.ly/webdev-events), because we know that we are not the only ones interested in upcoming developer events. During a very busy phase during the summer of 2009, where a lot of dojo.beers took place around the world, the calendar already was of big use. We started to write a small web site widget to embed the calendar in our site. We had a very focused and content-oriented use case and after coming across W3C Widgets, we quickly decided to port the web site widget over to a W3C widget – the same night we had it also running on an iPhone. This got the ball rolling and we realized that we should start porting this widget to even more platforms. From thereon we felt confident that we are on the right track. And we shall be proofen to be right.

The base of it all: HTML (and W3C Widgets)

The web stack is the widest spread and most widely used technology stack. The number of developers using the web stack is just unbeaten. Now that the mobile phones are coming around the corner, we see that the diversity (others call it fragmentation) is just huge. The iPhone proved, that even a good browser on mobile phones done right, can be fun. So the web stack is coming to our phones. Browsers are a standard on the phone. And the potential is gigantic. “The mobile industry has now 4.6 Billion active subscriptions.” and “71% of all phones have a modern xTML web browser.” says Tomi Ahonen in The Big Picture “All the Stats” Total View to Mobile Industry, 2010 Edition. Enough to justify HTML as the future standard for mobile apps!

So we can surf the web. But what about app development? The iPhone requires you to learn Objective C, Android wants Java, Nokia S60 a flavour of C++, and so on. This sounds no fun. So just sum up one and one. Let’s use the web stack (HTML, CSS, JavaScript) that all the platforms bring along – since they all have a browser – and reuse this stack to build your native apps. It’s not as much magic as it sounds. There is even a specification for it, the family of W3C Widgets. W3C Widgets are self-contained mini-apps, consisting of HTML, CSS and JavaScript. Just as we know it from websites. If the widget requires no resources from the web it can even run offline. You have all the power at hand: JavaScript, AJAX, Canvas and depending on the platform you even get SVG.
But how many platforms do support W3C Widgets? In plain numbers: 4. But the number is growing. Vodafone360, Vodafone’s Nokia S60, the latest Blackberry and Windows Mobile. But that’s not all as I will explain later.
The biggest hype is made by Vodafone, definitely. They are also expressing strongly that they are supporting the open W3C Widgets standard. And it is true, take a real W3C Widget throw it on any of the newer Nokia S60 (Series 5) phones or the Vodafone360 phones and it just works. The next closest is Windows Mobile. For getting it onto a Blackberry you need to additionally sign the widget.

More devices: PhoneGap

Supporting just those four platforms would be a bit boring. But here comes the great open source project PhoneGap onto the stage. PhoneGap opens up all the other platforms. Among them, probably the one most people look for, is the iPhone. PhoneGap provides a web runtime which we just wrap around our widget and package it and we have a native app. PhoneGap even allows to access the native functionalities like Camera, Contacts, Acceleromter, GPS, etc. If there is something missing in the list, you are free to write the according adaptor. And the big advantage, since you are deploying the runtime with your app, you can even hook onto any kind of native interface available on the phone. This is very nicely shown in the ECG app @nonken has written in our uxebu labs. This app connects a heart rate monitoring device to your iPhone, all done through PhoneGap.

Porting EventNinja

So we ported EventNinja to the iPhone using PhoneGap. It was a pleasure to use all the features one of the most modern browsers support, stuff like CSS transitions and alike. And since a lot of people asked, I will answer the question before it comes up: “Yes, you need the iPhone SDK and therefore a Mac OS X machine”. But we will see what the future brings.

With EventNinja, we have also proven that such an app can be ported to the Android platform. We have tested it on Android version 1.6 through 2.1, among them HTC Magic, Motorola Droid, Nexus One. Android was the easiest platform to port it to, we “threw” the iPhone version onto an Android phone and it just worked, first as a simple website. Later, thanks to Manfred Weber as a native app and finally, as you can find it now in the Android Market, as a PhoneGap-based app.
For the Palm Pre we adjusted the style to look as native as possible. To our surprise Palm’s operating system WebOS, which itself is web technology based, has some very strange, proprietary touches which made it less fun than expected (read more in Mobile Cross-Platform Development: Palm Pre). From a bird eyes’ view it looks like porting to WebOS would not require anything, no PhoneGap, just wrapping the widget properly. Unfortunately it was more work than that. The proprietary concept of stages and scenes requires some workarounds to finally get the app running.

Cross Platform Advantages

Besides the simple obvious reasons, like easy porting, lower development costs, and that the web stack technologies are our core business at uxebu, there are other reasons that make cross platform attractive. Let me scratch the surface by mentioning some of them.

Easy prototyping. Using HTML, JavaScript and CSS a prototype can be created in no time, iterations, reconsidering various issues is way cheaper and quicker than doing it with other technologies. We can use the browser window, just size it down to match a phone’s screen size. We can debug and fix things without costly redeployment cycles and this entire process can happen remotely, it all works over the web. Not to mention that this is the easiest way to distribute your app, but that is a topic of it’s own.

Largest Reach, synchronously. We can reach multiple types of mobile handsets virtually at the same time. By reducing the need to redevelop the app for multiple devices, we can roll out to multiple stores and devices at the same time. We are basically limitted by the time that it takes the stores to run the app through their internal QA.
As the numbers in the December 2009 Mobile Metrics Report show we are covering the biggest smartphone platforms well. The iPhone is definitely the leading one (on admob) but we all know that Android is picking up speed, as shown in the Metrics Update: Android.

Multi Channel Distribution. A very interesting though still underestimated channel of distribution is what taptu called the mobile touch web. The app works natively in the browser, so there is no need to even install it locally (if no access to native phone ressources is required). This opens up the opportunity for other apps or (mobile) web sites to directly link to and still allow for a (close to) native experience for the user. If you have an iPhone, Android or just a WebKit-based browser (even on your desktop) you can try out the EventNinja web app at eventninja.net/webkit.

The App Store Experience

Above I listed some cross platform advantages. And I would like to pick yet another one and focus a bit on it. The various App Stores. They do not only bring the burden to have separate upload and QA processes for each (which to solve could imho serve as a business model itself) but they also allow the user on the various device to find the app. What do I mean by that? Well, simple: The app store is a very prominent way to find very focused, use-case-centered information, services, in short: apps, for your phone. It could also be seen as the pre-installed search engine and payment gateway on your phone. All the handset manufacturers, operators and a lot of service providers are setting up or already running their own App Store, their portal into the world of apps. And deploying your app to many of them, allows to create multiple ways to retreive your app, across multiple networks, stores and devices.

Sounds crazy? Yes, it is. I am not a fan of all the App Stores, but that is the current trend. Let’s ride the wave, and be prepared for the next one, which will hopefully be the pure web apps, running in the browser without the App Stores inbetween. We are prepared. And a little band aid, to make it easier to put up with the multiple stores: there are services that will leverage this problem and aggregate the statistics from the various stores.

Conclusion

With this article we are showing very important aspects of the mobile web and that all this is no dream but reality. Go to your store and download EventNinja to see it yourself!

If you want to bring your product or website to several mobile platforms to gain most possible reach, feel free to contact us to discuss your specific needs.

Disclaimer: We are working for Vodafone in their Widgets Department.