Multiplatform development with Phonegap

It has been a while not being active in blogging. I have been engaged in a project developing mobile applications for a tourism project in Kosovo. The project entailed development of three mobile applications for the needs of the project in three major platforms, iOS, Android, and Windows Mobile.

As the requirements were to develop the very same functionality and look in all platforms, the first thing that came to my mind was to use in HTML5, CSS3, and JavaScript combination. I would share the same code and design in three different platforms and finish the project in a faster time.  After a short analysis and readings, I came to decision to use jQuery mobile and PhoneGap. Now that everything is finished, I would like to describe my experience here so you can make a better judgement when you start your own project.

Goods

The initial start of the project was a fairytale. I managed to customize the jQuery mobile theme and adjust the design as needed and created the prototype within a week. It was a nice piece which satisfied the needs of my client. I used the PhoneGap build which made my job easier. There was no need to install anything and was using a text editor to write HTML + CSS + JavaScript code.

PhoneGap is an excellent tool to build non-native applications in an amazingly fast way. Our application was a basic brochure which did not require a native experience and HTML5 app was doing a great job.

Leverage existing knowledge

Leveraging existing knowledge was the main motivation behind going non-native development. My experience in designing and developing web applications was a great help in immediately starting to develop the applications.

Shared functionality

Although I managed to port around 70% of the functionality in all three platforms, the idea of write once run anywhere is a fallacy. I faced the most problems when porting to Windows Phone. The browser was not rendering well the look and feel and had to do some custom tricks to adopt. Also there was a bug with back button event in jQuery mobile which was not reacting well to Windows Phone back button event. Apple iOS and Android platforms were working fine with minimal differences.

Easier maintenance

Maintenance is a huge cost factor in the lifecycle of an application, and mobile applications make no exception on this. Having the same codebase made changes easier and faster. After deploying the first version, we saw the need to some updates, and having to touch same JavaScript or HTML code made propagation of changes to other platforms a matter of copy – paste.

Bads

After putting some images to the application, the application soon passed the size of 35 megs. PhoneGap build does not support applications larger than 15 MB. As my app was larger I had to build them locally. This required separate installations of mobile development platforms and the PhoneGap build itself, and required to have a Windows PC and Mac computer.

Some performance issues

PhoneGap and jQuery mobile is a good combination, but, there are some performance implications though. It is not hard to notice some latencies on clicks. There are some performance improvement tips and tricks out there, but you have to do a little research and customizations to achieve a desired performance level.

Overall opinion

In general, my experience developing these applications was OK. I managed to create three applications within a month and a half, which deadline, I’m sure I would not be able to meet if I would have chosen to develop in native platforms. Depending on the requirements, if there is no need for a very fast application, such as games or any real time communication application, I would recommend  PhoneGap. When it comes to jQuery mobile, on my next project I will test another framework first and then post my recommendation :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>