Frameworks for (multi platform) mobile application development

.........................................................

In the next four months, I will be developing mobile applications with and for UBVU (the university library of the Vrije Universiteit Amsterdam). The goal is to provide a mobile entry point to the library’s catalogues, make content and information about the library (opening hours, contact information, maps) available on the go, provide quick and easy access to several library services (reservations, and to lay the groundwork for possible future services using innovative technologies such as QR codes, Near Field Communication (NFC) and augmented reality.

The mobile world is a fragmented world. Because we want to support as many users as possible we decided to build three versions of the application: an iOS version, an Android version and a mobile website to support other platforms. The goal is to make these versions almost identical to each other, although target platform differences will have to be respected. It is important to note that while iOS and Android may have relatively large user bases, the number of people potentially using the web version is probably bigger.

Many development frameworks are available to facilitate (multi-platform) mobile development. In order to choose the development framework that is most suitable for this project, I have investigated several of these development frameworks. For each platform, I indicate what it does, as well as its advantages and disadvantages.

Note: these frameworks are free, open and/or open source.


Technology frameworks analysis

1. Molly Project

URL: http://mollyproject.org/
What: The Molly project aims to provide “a framework for the rapid development of information and service portals targeted at mobile internet devices”. It is used at a number of higher education institutions, among which Oxford University. It supports the library query protocol Z39.50 out-of-the-box, and internally uses Python [http://www.python.org/] to generate a Django-powered [https://www.djangoproject.com/] website project.
Advantages: A lot of functionality (supposedly) out-of-the-box.
Disadvantages: Web only, needs additional technologies: Python (dependencies), Django (framework), relatively difficult to configure.
Useful in the project: No.
Additional resources:
Download: https://github.com/mollyproject/mollyproject/archives/master
Documentation: http://docs.mollyproject.org/molly1.2.2/

2. iMobileU / Kurogo Mobile Framework / Mobile Campus

URL: http://modolabs.com/framework.php
URL2: http://imobileu.org/
What: Modo Labs offers their Mobile Campus service platform to higher education institutions. They also offer the framework behind this service, the Kurago Mobile Framework as a free download. It is a PHP based framework containing Data Controllers (RSS, ICS (Calendar), LDAP, Database, HTML, JSON, INI) to handle external data and a Template Engine to generate the User Interface.
Advantages: Targeted at libraries, powerful Data Controllers, out-of-the-box available modules.
Disadvantages: Web only, no real code examples? Needs PHP backend, not standalone, probably not very PhoneGap compatible.
Useful in the project: Candidate only if it works with PhoneGap.
Additional resources:
Download: http://modolabs.com/kurogo/latest.php
Developer’s Guide: http://modolabs.com/kurogo/guide/
Examples: http://imobileu.org/community-users

3. Mobile Web OSP

URL: http://mobilewebosp.pbworks.com/
What:
Mobile Web OSP is a framework focused on delivering mobile web solutions for higher education institutions. It is a PHP/MySQL server based framework. There is little documentation and there seems to be no active community.
Advantages:
Targeted at higher education institutions.
Disadvantages:
Project seems to be inactive.
Useful in the project:
No.
Additional resources:
none

4. Sencha Touch

URL: http://www.sencha.com/products/touch/
What: Sencha Touch is “the world’s first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization”. It is a JavaScript framework containing a large amount of UI Controls, Icons, Animations and other Components. It scales well to different screen sizes and can be themed with a house style. It does mainly front end User Interface generation, and may therefore require some additional back-end platform.
Advantages: very powerful, synergy with PhoneGap.
Disadvantages: Doesn’t target iOS and Android natively by itself (works together with PhoneGap), chart framework costs $99
Useful in the project: Very good candidate for web, possibly also for
Additional resources:
Download: http://www.sencha.com/products/touch/download/1.1.0/
Quick Start: http://www.sencha.com/learn/sencha-touch-quick-start/
Learning Center: http://www.sencha.com/learn
API Documentation: http://dev.sencha.com/deploy/touch/docs/
Examples: http://dev.sencha.com/deploy/touch/examples/
Sencha Touch with PhoneGap: http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap

5. jQuery Mobile

URL: http://jquerymobile.com/
What: jQuery Mobile is a mobile variant of the very popular jQuery framework. Its aim is to provide “a unified user interface system that works seamlessly across all popular mobile device platforms”. It delivers a large library of Mobile UI Components and builds upon jQuery’s existing core framework.
Advantages: Strong framework with active community, synergy with PhoneGap
Disadvantages: Needs PhoneGap for native applications.
Useful in the project: Very good candidate for web version, in combination with PhoneGap also option for native versions.
Additional recources:
Demo: http://jquerymobile.com/demos/1.0b2/
jQuery with PhoneGap: http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile

6. jQuery Touch

URL: http://jqtouch.com/
What: jQuery Touch was made by (one of) the creators of Sencha Touch, but is a plugin to the normal jQuery framework. In a way jQuery Touch is a predecessor to both jQuery Mobile and Sencha Touch. jQuery Touch is optimized for WebKit-based browsers, while jQuery Mobile tries to support all mobile devices. jQuery Touch and jQuery Mobile use progressive enhancement to make HTML pages mobile friendly, while Sencha Touch is JavaScript based and therefore more software engineering oriented than web design oriented.
Advantages: Small and fast.
Disadvantages: a bit older and smaller community than jQuery Mobile and Sencha Touch
Useful in the project: Good candidate, but jQuery Mobile and Sencha Touch seem more powerful and sophisiticated.
Additional resources:
none

7. Less Framework

URL: http://lessframework.com/
What: Less Framework is “a CSS grid system for designing adaptive web­sites”. It is basically a CSS template that helps content that is intended to be shown on large screens to also look good on smaller and small screens.
Advantages: Just CSS
Disadvantages: Just CSS
Useful in the project: Maybe, probably not.
Additional resources:
none

8. PhoneGap

URL: http://www.phonegap.com/
What: PhoneGap is a wrapper framework that bundles a HTML/JS/CSS website into an semi-native package (iOS, Android and other targets). It doesn’t compile the application to native code, but instead just shows the web application in a dedicated browser, making the application indistinguishable from a real native application. It uses the target platform’s native browser. However, for each platform that is to be a publishing target, a separate publishing workflow is required.
Advantages: Provides a clear method to deploy one application to multiple target platforms with a single web design codebase.
Disadvantages: Access to native features (such as NFC or QR) in the future may be more difficult. Possibly not all parts of the app will work offline.
Useful in the project: A serious candidate in combination with jQuery Mobile/Touch or Sencha Touch.
Additional resources:
Get Started Guide: http://www.phonegap.com/start/
Developer Tools: http://www.phonegap.com/tools
Developer Wiki: http://wiki.phonegap.com/w/page/16494772/FrontPage
API Documentation: http://docs.phonegap.com/
Tutorial series: http://hiediutley.com/2011/03/14/phonegap-tutorial-series-1-project-structure-and-internals/
Tutorial: http://mobile.tutsplus.com/tutorials/phonegap/phonegap-development/

9. Appcelerator Titanium Mobile

URL: http://www.appcelerator.com/products/titanium-mobile-application-development/
What: Like PhoneGap, Titanium takes a web application and transforms it into a native application. But unlike PhoneGap, Titanium actually compiles the HTML/JS/CSS to native byte code. Titanium is a Cloud-based service, which means that all(?) compilation is done on Appcelerator’s servers.
Advantages: Native code might be faster
Disadvantages: Documentation seems a bit chaotic.
Useful in the project: No.
Additional resources:
Example tutorial: http://mobile.tutsplus.com/tutorials/appcelerator/titanium-mobile-build-a-pizza-ordering-app/
Another example tutorial: http://boldr.net/iphone-app-with-titanium-mobile

10. Unify

URL: http://unify.github.com/unify/
What: Unify is a meta-framework built to “improve the development efficiency of apps for smart phones”. It uses other technologies such as PhoneGap, QooXDoo, Sass and Adobe AIR.
Advantages: A complete workflow for app development.
Disadvantages: A lot of technologies involved (metaframework).
Useful in the project: Maybe, but other frameworks seem to be more useful.
Additional resources:
none

11. Flex Mobile

URL: http://www.adobe.com/products/flash-builder/features.html
What: The Flex Builder 4.5 IDE makes it possible to compile Flex/Flash/ActionScript3 based applications to native iOS and Android byte code.
Advantages: Gigantic existing ActionScript3 community.
Disadvantages: The Flex Builder IDE is not free. Relatively new technology, some performance problems reported.
Useful in the project: Maybe, other options seem more stable.
Additional resources:
none

12. Android SDK (native)

URL: http://developer.android.com/
What: The Android SDK (using the Eclipse IDE) is the native framework for building applications targeted at Android smart phones and tablets. Applications are coded in Java and XML, and are compiled to byte code. The Android SDK features its own application architecture design patterns (Activities, Services, Content Providers, Broadcast Receivers, Intents, etc.) and a set of standard mobile UI Components. Other frameworks that build to native android (PhoneGap, Titanium, etc.) make use of the Android SDK.
Advantages: Native source code guarantees future maintainability and updatability. Best performance and user experience.
Disadvantages: Only targets Android.
Useful in the project: Yes.
Additional resources:
Download: http://developer.android.com/sdk/index.html
Developer Guide: http://developer.android.com/guide/index.html

13. iOS SDK (native)

URL: http://developer.apple.com/
What: The iOS SDK (containing the Xcode IDE), is the native framework for building applications targeted at iOS devices (iPhone, iPod Touch, iPad). Applications are coded in Objective-C and user interfaces are built using the Interface Builder application, using a set of standard mobile UI Components, and using a few Objective-C/IB specific design patterns such as Delegation, Outlets and Object Messaging.
Advantages: Native source code guarantees future maintainability and updatability. Best performance and user experience.
Disadvantages: Only targets iOS devices.
Useful in the project: Yes.
Additional resources:
iOS Developer Center: https://developer.apple.com/devcenter/ios/index.action

14. Primo template

URL: http://www.exlibrisgroup.com/category/PrimoForMobile
What: The Primo For Mobile template is a mobile version of the Primo library search system (that is used by UBVU).
Advantages: Synergy with existing UBVU systems? Adaptability (web based).
Disadvantages: Web only, will need changes/replacement for native applications.
Useful in the project: Yes.

Summary and conclusions

Summary / observations:

Molly, Kurogo and Mobile Web OSP are ‘old style’ frameworks, running centrally on a server. Frameworks such as Sencha Touch and jQuery Mobile are more modern frameworks, running de-centrally on the user’s phone, while of course getting content data from external sources. These modern frameworks better separate UI and data (View and Content) than the server-based frameworks. As a result, the more modern frameworks are more compatible with PhoneGap.
Because the older style frameworks are specifically targeted at higher education institutions, they do provide valuable information and examples in the area of User Interface design / best practices.
PhoneGap seems to be the best choice for converting web applications to semi-native applications. Titanium and Unify are possible but more complex alternatives.
The Less framework doesn’t offer much more than CSS presets and will probably not of much value by itself.
Flex Mobile is a powerful outsider, performance, support will be ok, future changes might be more difficult because the code base might be less stable. The Flex IDE is not free.
Of course the native frameworks provide the best native integration, the most clean code base and the best code maintainability in case of future changes and updates.
Most likely, the Primo template will be of use when making the library search functionality available on mobile phones.

jQuery Mobile vs. Sencha Touch

jQuery Mobile: ‘easier’ to develop (more like web development)
jQuery Mobile: faster loading (smaller)
Sencha Touch: better performance (JS core)
Sencha Touch: more UI Components

PhoneGap vs. Native

Native: better access to native functionality
Native: most stable framework
Native: better performance
PhoneGap: easier code base (any web developer can edit)
PhoneGap: more complex development process
PhoneGap: possibly less development time (share with web version).

Preliminary conclusion:

Web application: use Sencha Touch or jQuery Mobile
iOS application: use native iOS SDK (unless PhoneGap builds the web version really well into an iOS application).
Android application: use native Android SDK (unless PhoneGap builds the web version really well into an Android application).

Other resources

Technologies:
RippleEmulator: http://ripple.tinyhippos.com/ (to test mobile applications)
Sass: http://ripple.tinyhippos.com/ (Ruby based CSS extension allowing faster and more powerful CSS).

Web resources:
http://9-bits.com/post/723711597/jqtouch-and-sencha-touch
http://www.quora.com/Were-deciding-between-jQuery-Mobile-currently-in-alpha-and-Sencha-Touch-What-are-the-pros-and-cons-for-each
http://interfacethis.com/2011/adventures-in-html5-part-one/
http://jquerymobile.com/strategy/
http://stackoverflow.com/questions/3446186/sencha-touch-vs-jqtouch
http://beautyindesign.com/blog/titanium-phonegap-sencha-touch-jquery-mobile-clearing-up-confusion/
http://www.the4thdimension.net/2011/07/sencha-touch-vs-jquerymobile.html
http://www.petefreitag.com/item/781.cfm — Distributing a test application on iPhone/iPod/iPad

~ End Article and Begin Conversation ~

Comments are closed.

Search this Site


[]