Cross-Platform App Development for iPhone, Android & Co. — A Comparison I Presented at MobileTechCon 2010

Last month, I gave a presentation about cross-platform app development at MobileTechCon in Mainz, Germany. Several attendees asked for for the slides (now available on SlideShare) and since I promised to deliver links to the presented technologies and demos I hereby summarize the material. Also, you can find a video recording of this talk on my blog. I split the presentation into different parts where I tried to motivate the topic “cross-platform app development” at the very beginning.

Why Cross-Platform?

motivation

More than eight major platforms such as iOS, Android, Symbian OS, BlackBerry OS, Windows Phone 7, MeeGo, HP webOS, or bada with different programming languages and paradigms each currently struggle for predominance of the mobile market. Not even looking at the vast amount of different devices, the sheer number of app stores (currently 94) indicates a growing diversity of today’s market.

When producing mobile apps, the key problem arises in the conflict between market penetration on the one hand and cost of development on the other. If you want to address the majority of today’s mobile users you could either develop your app for each of these platforms independently, or try to follow a cross-platform strategy in order to cut the invest. While the former means running several parallel traditional software projects (with all their individual consequences) in parallel, the latter approach tries to reuse parts of the intellectual achievements (often source code) while accepting other drawbacks.

Mobile Web vs. Native Apps

mobile web vs. native apps

A wide range of software companies and clients choose mobile web applications as a proven way to address any mobile device that features a web browser. At my presentation I used the website of tageschau.de and SPIEGEL ONLINE (both German) to demonstrate the difference between classic and mobile-enabled websites. As a cliff-hanger I demonstrated an ordinary unit converter website on the iPad as well as an optimized web-based game for the iPhone to debilitate the misconception of a missing app store for mobile applications.

In contrast to the aforementioned web-based solutions I presented the gorgeous convert app by taptaptap. It implements the very same use-case “unit conversion” more elegant and efficient even on a smaller display. The Unreal Tech Demo finally proved that native applications offer certain capabilities that are currently out of reach for web-based alternatives.

Even though mobile apps made a big step forward of the last years, they still suffer from technical limitations including visibility on the market due to the absence of an “official” distribution channel. Also, native apps are superior regarding user experience – the foremost reason that made apps such a huge success in the first place.

Both aspects might change over the next years.

Mobile Web Apps

mobile web apps

Looking at the current state of the art of software development, I gave an overview of several available libraries including iWebKit, iUI and jQTouch. I think of these as a reasonable set of CSS and JS to let you express yourself with simple HTML. Sencha Touch on the other hand follows a programmatic approach where the developer leverages a rich API to express herself without HTML or CSS but with pure JavaScript code. The JQuery mobile framework is waiting in the wings to combine the best of both worlds. It is announced for 2010 Q4.

Using any of these libraries simplifies the development of a native-look-a-like web app but comes at a cost. One cannot reuse an existing set of HTML but has to produce properly redesigned documents suited for the given framework. Also, these frameworks are far-off from the idea of cross-platform. Only a limited set of mobile browsers are currently supported. If you need a fail-safe web-based solution you have to stick with an even more cut down feature set or implement platform-specific mobile websites.

Hybrid Apps

hybrid apps

One of the major drawbacks of mobile web applications is the lack of  the lack of direct access to individual features of the udnerlying hardware platform. Even though recent versions of mobile browsers propagate information such as screen orientation or geolocation they are still limited. There is neither a common way to read the accelerometer nor can one access the camera to upload a video.

This is where frameworks such as PhoneGap come into play. Basically, it’s a thin native application that is only little more than an embedded web browser. The user receives an ordinary native app that displays web content under the hood. With a simple technique called HTTP request interception (sorry, cannot find a suitable link) these frameworks bridge the gap between device and a web app. The developer can use a JavaScript-API to read additional data from the device and trigger actions such as vibration in a standardized way across the different native platforms.

Hybrid apps combine advantages of the native world such as distribution via the app store with common web technology as outlined above. But since the rendering and interaction relies on an embedded web browser they appear to me as the poor-mans native app. The user downloads and pays for a native app and therefore should not be disappointed. The developer is required to spend a considerable amount of time to make the included web app look and feel as a native counter part in order to match these expectations.

Interpreted Apps

interpreted apps

Interpreted apps use platform-specific native UI elements to interact with the user whereas the application logic is captured in a platform-independent way. This can be a set of commands in XML or another description language (ipfaces, JMango, ramp). Other technologies such as MonoTouch (.NET) or Rhodes (Ruby) implement full execution environments of existing programming languages. The most prominent competitor no doubt is Appcelerator Titanium. During my talk I illustrated how you can use a JavaScript-API to produce quasi-native apps for iOS and Android.

This approach offers a number of benefits but has an inherent drawback at the same time. Developers are tied to the feature set of the chosen framework whenever the demand exceeds the foreseen possibilities of the given technology or cannot catch up with new features of a platform (e.g. iPhone’s Retina Display). Even though some of these technologies are open-source and offer extension mechanisms, the developer has to stick with the paradigms of the chosen framework. Therefore, she cannot use a project-specific short-cut to deliver the unforeseen remaining 20% of the app without following the restrictions of the framework.

Generated Apps

generated apps

The common idea of this approach is to produce truly native apps for each targeted platform with its respective programming language from a single code-base. During my talk I presented xmlvm and APPlause as two examples of code generators.

The advantages of this approach are manifold and do not end with the extensibility of the produced apps. If needed the generated output can (be adjusted to) interact with every single aspect of the native platform. Even though the results of xmlvm are barely readable, other solutions such as APPlause based on a domain-specific language not only simplify the development process but produce code that conforms to the sample-code in any aspect (let me know if you want to read more about this technology on this blog).

These advantages come at a price of a relatively high upfront investment, though. None of the publicly available technologies is production-ready right now. Nevertheless, if you plan to produce a set of related apps or try to mobilize an enterprise application you should definitely have a look at this approach!

Where To Go?

Unfortunately, there is not one technology to bind them all. The right choice depends on the specific needs of your project and often turns out to be a combination of the aforementioned approaches. At the end of my talk at MTC 2010, I had a very lively Q&A session with the audience regarding this question. S&S allowed me to upload the video recoding of this talk on my blog.

As always: If you need further help with your current project, just let me know.

Also, if you happen to be at this year’s iPhoneDevCon in Cologne (01-02 December) you should attend my session about cross-platform mobile development. I will give a similar, refined presentation with a lot of live demos and more information on the audio track. You welcome to ask more questions over there – but this should not bar you from dropping a comment below.

Update

Meanwhile, S&S media gratefully allowed me to publish a (German) live recording of this talk.

Video recording of my talk about “cross-platform mobile development” courtesy of S&S media

Support my Work

Writing an article like the one you have just read takes me quite an amount of my personal time. Way too often, I invest this time in different interests and decide against another blog post. On the other hand, you can motivate me with your feedback, your thoughts and your ideas. Please leave a comment below or flattr this post if you think it's worth it.

Comments

  1. Kai Tödter says:

    Thanks Heiko, great summary!

  2. Galia says:

    Thanks for a great overview of the cross-platform landscape. Would love to speak with you regarding Particle Code’s upcoming talk for EclipseCon. Looking forward to connecting!

  3. Silvia says:

    thank you for this article. i’m planning on writing my thesis about this subject. One question: where would you integrate Adobe AIR in this classification?

  4. Hey Silvia,

    Adobe AIR comes with its own runtime for flash and falls into the category of interpreted apps similiar to MonoTouch. Goold luck with your thesis! Let me know when you finished your work. I am curious to read it.
    BTW, this paper outlines the generator approach http://portal.acm.org/citation.cfm?doid=1869542.1869562 let me know if you have trouble to obtain it from ACM.

  5. Mike says:

    Heiko,

    Great post! I am actually in the midst of writing a POV on the subject matter of development platforms for the mobile space and your article is really helpful. I was wondering if you would mind if I paraphrase some of your points in my document? I would like to be able to sum up some of your findings as a basis for my document. Please let me know.

    Thank You,
    Mike

  6. Thank you for the kudos, Mike. You are welcome to quote me and to re-use the slides as long as you give credits and put in a reference to my work. Also, did I mention that itemis offers consultancy services?

  7. Mike says:

    Thanks Heiko. I will be sure to reference your article. As far as your consultancy services, I will definitely keep this in mind.

    Mike

  8. Daniel Weiß says:

    Hallo Heiko,

    ich konnte leider nicht Deinem Vortrag am Montag im Zuge der beyondtellerand Konferenz lauschen, da ich unten auf dem anderen Vortrag war, und wollte Dich fragen, ob Du die Präsentation zur Verfügung stellen könntest.

    Schönen Gruß,
    Daniel

  9. Hey Daniel,

    die Folien von der beyond tellerrand stelle ich Marc heute zur Verfügung. Sie unterscheiden sich aber nur unwesentlich von denen, die in diesem Post verlinkt sind. Du kannst sie bei slideshare runterladen.

  10. [...] you might know, there are quite a few options to produce cross-platform native (and look-alikes) mobile applications from a single source. As itemis is specializing in model-driven approaches, we picked a [...]

  11. [...] S&S media gratefully allowed me to publish a (German) live recording of my talk about “Cross-Platform App Development for iPhone, Android & Co. — A Comparison” I presented at MobileTechCon 2010 back in [...]

  12. [...] store distribution. Addressing decision makers and non-developers I skipped technical details of cross-platform development but explained the different alternatives (including hybrid apps) in words one could use to make a [...]

  13. This is VERY interesting to me…. I am a web design student & we are working on a project where we are to design a conventional book for use on an iPad. In my wireframe presentation I proposed to design the book for multiple platforms, i.e. iPad, iPhone, Andriod, laptop, desktop and the web. Much to my surprise most spoke of how it was not possible or how it would be too difficult to pull off.

    Based on my scanning of this article (in depth read to follow) it is possible through a host of solutions. I would like to add/ask… does anyone know of a product that is currently available across multiple platforms?

    Thanks

    DPA
    2 pennies

  14. prashant says:

    Thanks heiko

  15. Purva says:

    Heiko,

    It’s a really informative article.
    Can I get any information about cross platform Mobile Website Apps and the major guidelines which we need to take care from QA prospective based on UI and the platform changes.

  16. raji says:

    Thank you so much clarifying the differences between these cross-platform app generators. I appreciate the thought and time that went into this publication.

Leave a Reply