General

Developing Multiplatform Mobile Apps From a Single Code Base

coding

About a little more than a month ago I wrote about my experience with writing my Masters thesis from start to finish in small concentrated time frame of 150 hours. In this post I will be giving out more information about the guts of my thesis. I’ll give brief overview of what I did and what treasures and skeletons I met on the way. The title of my Master’s thesis was “Techniques of developing smart phone applications from a single code base”, I thought it was a bit lengthy, but seeing the other students titles with many more words and even multiple rows. I was quite pleased with my compact title.

So What Does It Mean

In the classical sense of developing mobile apps it pretty much means that, if you want to have an app running for example on iOS, Android and Windows Phone you have to have three separate development teams on staff. If we’re talking about the big players, then this kind of development model is not a problem and it even makes sense. If we think about smaller teams with less resources, then this kind of plan of action isn’t probably the way to go. In the course of my thesis I researched the possibilities of developing multi platform mobile applications from a single code base. I tried to describe the main principles of using different frameworks while doing so. During my work I studied two different frameworks: PhoneGap and Mono. I described the process of creating applications for three mobile operating systems: Android, iOS and Windows Phone 7.

Hey Tell Me About The Frameworks

I thought you’d never ask. Let me do a brief introduction to my two new friends.

Meet PhoneGap

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS. PhoneGap allows the developer to create the application with web technologies and then package it into a mobile app. In the core, PhoneGap is a stripped down operating systems native browser that displays only the developed web application. PhoneGap acts as a layer between the web app code and the mobile devices hardware. PhoneGap allows making native hardware calls straight from javascript.

Say Hello to Mono

Mono is an open source, cross-platform, implementation of C# and the CLR that is binary compatible with Microsoft.NET. What Mono allows us to do is develop .NET applications on operating systems other than Windows. Also it allows us to share code written in C# between applications. In case of my thesis I developed applications for Android using Mono for Android, application for iPhone using MonoTouch and application for Windows Phone 7 using Mono for Windows phone

How Did it All Go Down

So I wanted to know how easy or hard it was to develop some kind of trivial prototype app with these tools. For a prototype I chose to simplify the simple. I created stripped down Toggl app, that only communicates with Toggl public API. The main needed functionality was as follows:

  • Authenticating user
  • Showing listing of time entries.
  • Start/stop Time Entry
  • Stay functional when network connection is lost.
Prototype
Can you simplify Toggl? With hard work and dedication you can, maybe.

The PhoneGap way

With PhoneGap I started by creating a standalone web application using some cool things like CoffeeScript and Backbone. With some proxy tuning in place the web app was entirely usable by itself. Then after I had a functioning web app I looked at what could be done with PhoneGap. Firstly I decided to try out the PhoneGap Build service, that promises to do all the compiling work for you. This is exactly what it does. You can do some additional configuring like adding some settings or uploading the correct certificates and provisioning profiles for iOS to fine tune your application. Basically it does what it promises. If you are looking for some more custom solution with plugins and such, then PhoneGap Build is probably not the way to go. With my simple time tracking tool prototype the PhoneGap Build service worked great.

PhoneGap Build
Just give me the zip I’ve got it all covered

The other way I tried was the basic way of building apps for every platform with development tools. For Android I used Eclipse and Android SDK, for iPhone I used Xcode and for Windows Phone 7 I used Visual Studio for Windows phone. I created template PhoneGap project using the PhoneGap command line tools and then copied my web app inside the platform specific assets path inside the project. Android and iOS compiled with minor glitches and seemed to work as intended. The most difficult part of those three platforms was compiling Windows Phone 7. When compiling, it threw several strange errors, and gave me a real hard time. One of which was error message “Object doesn’t support this action”. After some investigation I found out that in the browser used by Windows Phone the variable name „item“ is a reserved word and using it somewhere in the code creates some nasty errors. To make it work as intended, I had to rewrite some parts of the application, that the Windows Phone didn’t get along at all.

PhoneGap
Three platforms, three applications, three development environments, one code

Mono style

With Mono framework it’s absolutely different side of the Moon. Not the darker side, but a different one indeed. When using Mono framework you can have part of your applications code shared between projects. So I started with creating a separate project for the shared code. What can be shared between projects is the part of the Business layer,the Data Access layer and the Data layer. Since I didn’t use any in-app database like SQLite I used only the first two. The Business layer meant that all the models and objects used in the app could be shared. The Data Access Layer consisted of simple HTTPWebRequest logic to post and get data from the Toggl public API.

After this was out of the way I started coding the mobile apps for all the platforms. With every platform I had to create it’s own user interface. To create applications for all the different platforms I had to get acquainted with every platforms specific User Interface designing techniques. On the other hand I felt that this is not what I was aiming at with the single code base to multiple platforms theme, but then again I figured that the separate User interfaces can be a plus since the users on different operating systems are used to different user interfaces.

Mono
Sharing Business and Data Access, but not the looks

 

So What’s The Verdict Chief

For the goals that were set at the beginning of the research, I would have to say that the Toggl way is still the better way. Using PhoneGap and web technologies is effective and at the same time powerful. The applications on different platforms are always in sync and making changes is fast and easy. When still choosing Mono, maybe you are very competent with C# or have some kind of infrastructure in place that is written in C#, you should keep in mind that all the user interfaces are created separately. This makes updating user interfaces not so simple because the changes have to be made for each and every one of the platforms.

By On June 12, 2013

  1. Great article. There are tons of tools for developing the cross platform mobile apps. As a developer, I am really interested in the tools which can used to develop the native app. Mono and appcelerator are good tools for the native app development.

    Is it possible to share your thesis to us? I’d like to learn more about your topic. Thanks, Indrek. My email is qq34506@hotmail.com.

    • Good point. The development techniques are definitely different. I have to admit, that being more of a web deveveloper I’m not so familiar with the .NET development cycle and thus can’t go more deep into this subject. Thank you for sharing the article.

  2. Indrek, I couldn’t agree more re web technologies.

    PhoneGap / Cordova and PhoneGap Build are great tools if you need to access device capabilities or need to get apps into the various app stores.

    I have just finished an app for a financial services company which started out as targeting iOS only. Then half-way through the development, a decision was made to also target Android. Nearing development completion, IE8 was added. I’d still be coding if it wasn’t for HTML, CSS and Javascript!

    For those only starting down this road: If you don’t need access to specific device capabilities, web apps are the way to go. With capabilities like localStorage and Application Cache, they can work offline, update themselves automatically, and work across all smartphone and desktop platforms from one code base – No, honestly, ONE code base.

    You will be using “standard web technologies” like HTML, CSS and Javascript – skills that can be used elsewhere. You don’t even need PhoneGap Build, Apple developer licences, or any of the app stores if you don’t need the app stores to deploy your app.

    • I totally agree with you. When the device’s native functionalities are not needed the web app is definitely a solid choice to consider. You can add an web app’s icon to the dashboard and it will look exactly like a real app. Also you can have splashcreens and such, at least in iOS. With web app you can use what ever installed browser to view the app. With PhoneGap you are limited to the OS-s default browser and we know that sometimes the native browser just isn’t fast enough when rendering stuff. And then there’s the hustling with the certificates and such. So the web app is definitely one good choice, if speed and simplicity is the goal.

  3. Very interesting Indrek. Wolfert, I also checked out your thesis. One new IDE I have been curious about but haven’t had the time to investigate is Telerik’s Icenium. Any thoughts on this cloud-based IDE?

    http://www.icenium.com/

    • Can’t say that I’m familiar with the icenium tools, but it looks interesting. Probably worth looking more into.

    • Hi Wolfert, thank you for your feedback.

      At first I thought of researching about 4 or 5 different frameworks, but since my focus was to thoroughly describe the process of development and create a fully working prototype with each one of the frameworks, I decided to narrow down the selection. I selected two frameworks that described very different approaches to developing multi platform apps.

      Read also your thesis, interesting stuff. Didn’t know about many frameworks you described. I will be looking into some of them more throughly. Appreciate you sharing your findings.