Our Thinking

Building Cross-Platform Mobile Apps

Posted by Axel Buerkle on Jan 7, 2013 2:00:03 AM

No doubt, mobile is huge. With more than 700,000 mobile apps in the Apple App Store and as many in the Google Play Store, mobile computing has demonstrated impressive growth. According to a Gartner survey, 61% of CIOs plan to enhance their mobility capability during the next three years. However, some (particularly small) businesses are still hesitant developing and implementing a mobile strategy. A common concern has to do with the fragmentation of mobile platforms. Even if you focus on the two major systems, iOS and Android, which cover about 85% of smartphones and over 95% of tablets, you still have to master two separate worlds with quite different programming languages (Objective-C and Java), IDEs (Xcode and Eclipse+Android SDK) and APIs; not to mention specific requirements in order to comply with the terms and conditions of the corresponding app store. This leads to little or no code-reuse and, in the worst case scenario, complete recoding for each platform you want to support. With Windows Phone 8 (.NET) as a potential third big player, this doesn’t help ease the situation either.

If you are targeting several platforms with your app, this model might not be an acceptable solution for you. It could be just too expensive or too time consuming. However, there is an alternative to developing native apps: a cross-platform app built on web technologies. Standardized technologies such as HTML, CSS, and JavaScript are supported by almost all current devices. With the right tools and frameworks, HTML5 apps can be built to look and feel identical to their native counterparts. For many business apps, the technical benefits of native apps over HTML5-based apps are minimal.

The process of building a cross-platform app is similar to developing a mobile web app. Other than a native app, a web app typically resides on a web server and is accessed through a browser. Using a wrapper like PhoneGap, the web code is packaged into a native app that can be distributed via the app store. This way you can target multiple platforms with a single code base.

However, you are not limited to the already rich HTML5 functionalities. If your app needs access to device-specific features, a framework like PhoneGap provides APIs to access the device's default camera application, for example, or the phone’s contacts database. In addition to that, PhoneGap allows developers to write their own plug-ins, i.e., native code that can be invoked from JavaScript.

The resulting application is hybrid. It is neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because it is packaged as app and has access to native device APIs).

Frameworks for Cross-Platform App Development

There are two types of frameworks for building native-like mobile apps:

  • Web toolkits facilitate the development of web apps that run in web browsers on various devices.
  • Cross-platform frameworks create native apps for a number of mobile platforms.

Here is a selection of frameworks I have evaluated:

PhoneGap

PhoneGap (also known as Apache Cordova) is a commonly used framework for building cross-platform mobile apps. It is free and open source under the Apache License, Version 2.0. PhoneGap supports a wide range of platforms including iOS, Android, webOS, Windows Phone, Symbian, BlackBerry, Bada and Tizen. Applications are built using JavaScript, HTML5 and CSS3. Other languages and technologies such as Java, .NET, PHP, ASP and JSF are not supported.

Maqetta

PhoneGap does not include tools for authoring HTML5 user interfaces. This is where visual authoring tools that generate HTML5, CSS and JavaScript come in handy. Maqetta is an open source project that allows WYSIWYG visual authoring with built-in mobile themes that resemble the native look-and-feel of Android, BlackBerry, iPhone and iPad. It also has a Sketch theme that provides a hand-drawn look useful for creating mock-ups and wireframing scenarios.

jQuery Mobile

jQuery Mobile is an extension of the jQuery framework. The jQuery Mobile library is open source under the MIT License and has support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. Same as Maqetta, it does not create native or hybrid applications unless used with a wrapper like PhoneGap.

Sencha Touch

Sencha Touch is a performance-optimized HTML5 mobile app framework. It is licensed under free commercial and open source licenses. Sencha Touch has a built-in MVC system and provides native support through a packager which creates apps for iOS, Android and BlackBerry. Alternatively, it can be combined with PhoneGap for deployment to a wider range of platforms and incorporating native plug-ins.

Titanium

Appcelerator’s Titanium is a JavaScript-based SDK for creating native apps for iOS and Android as well as mobile web apps. Other than most cross-platform frameworks, Titanium doesn’t rely on the device’s build-in web browser UI (WebView in Android and UIWebView in iOS) for running the app. Instead it compiles the static parts of the JavaScript code into native code and interprets the dynamic parts through its own JavaScript engine bundled in with the app.

Others

A few other frameworks that we looked at: Motorola RhoMobile, MoSync, Marmalade and Brightcove AppCloud (cross-platform frameworks), The M-Project, Jo, Dojo Mobile and Kendo UI Mobile (web toolkits).

Besides dedicated frameworks for mobile apps, there are mobile extensions for established IDEs, e.g. Oracle ADF Mobile and Appeon Mobile (for PowerBuilder). They allow developers to extend existing enterprise applications to mobile without having to learn a new language or IDE.

Which Framework to Choose?

With the growing number of frameworks and their different levels of maturity there is no simple answer to this question. There are many factors to consider: the mobile platforms you intend to support, the kind of native features your app needs to access, existing development knowledge and experience with IDEs and last, but not least, personal preferences.

But before you start building your app with one of the above frameworks, you should be aware of the limitations of cross-platform development. An un-optimized HTML-based app simply does not perform as well as a native one. Regarding the tools for cross-platform apps, they are still behind their native counterparts.

The pros and cons of hybrid vs. native apps will be discussed in my next blog. To help you decide if cross-platform development is right for you please don’t hesitate to get in touch with me.

 

Topics: Mobility

Our Thinking - The Online Blog is a source for insights, resources, best practices, and other useful content from our multi-disciplinary team of Onliners.

Subscribe to Blog Updates

Recent Posts