Mobile Application Development: A hybrid approach

I think it’s reasonably obvious to even those with only the slightest interest in technology that mobile and tablet application development is a rising trend. Unfortunately (and understandably) there is currently no single industry adopted standard allowing for a “write once, deploy to many” methodology. The results of which vary but almost certainly include increased development time and costs and I think it goes without saying that the minimisation of both is highly desirable in such a dynamic industry, more so if the intention is to maximise revenue or capitalise on current trends.

Many developers have decided to adopt a less traditional method of application deployment in the way of remotely hosted HTML5 web applications. The advantages of which include RAD (rapid application development) and easy cross platform deployment. The disadvantages of which will include the prerequisite of an active internet connection and the inability to distribute the application via an official store or marketplace. One such solution to these disadvantages would be to adopt a “hybrid” development model, wherein a bare bones native application is developed which in turn calls a “webview” populated with an embedded HTML5 application. In most instances, the HTML5 application can often be implemented with minimal (if any) modification whilst deploying cross-platform. Not only does this method allow for an almost “write-once” scenario, it also allows for web developers with little native/desktop application development experience to utilise their skill set and yet still produce a native product.

Sample Java wrapper:

package com.example.application;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
 
public class exampleActivity extends Activity {
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
 
       WebView webView = (WebView)findViewById(R.id.webView);
       webView.getSettings().setJavaScriptEnabled(true);
       webView.getSettings().setDomStorageEnabled(true);
       webView.getSettings().setUseWideViewPort(true);
       webView.getSettings().setLoadWithOverviewMode(true);
       webView.setWebChromeClient(new WebChromeClient());
       //Start the HTML5 application
       webView.loadUrl("file:///android_asset/www/index.html");
   }
}

HTML5 Application running within a Native Wrapper

The Experience:

I recently adopted this hybrid approach whilst developing a companion Android application for a niche social website managed by myself. The intention was to develop a reasonably lightweight application in as short a time as possible with the mindset of eventual iOS implementation with minimal effort. The development of which was unfortunately not as smooth as I would have hoped for. Seeing as I would primarily be developing for a web environment I was capable of implementing the jQuery Javascript library and the reasonably new jQuery Mobile framework (JQM). The JQM framework provides developers with a UI tool set intended to reflect that of a native application and for the most part it succeeds reasonably well, certainly hi-lighting the fact that the hybrid development approach is definitely a viable option. However, a number of bugs and inconsistencies hindered my progress significantly at times, including but not limited to poor page transitions, broken animations, footers which would not appear at the bottom of the page correctly, inconsistent scaling factors between devices, issues with multiple buttons on a single row and more.

Now, whilst I am sure that a number of my issues were indeed due to my own ignorance and unfamiliarity with the JQM framework, there are a great deal of issues which are inherent within the framework and the result of which is a functional, yet noticeably unpolished application. Certainly one I would have significant reservations about distributing as anything other than a sub v1.0 release. This saddens me somewhat as JQM has some wonderful features and a great deal of potential, but if my experiences are anything other than isolated then I don’t think it’s quite ready for the prime time just yet.

Immediately familiar style with a distinctly native feel

The Alternative?

A suitable alternative to JQM appears to be a framework entitled Sencha Touch. This framework is free for commercial application development save for some licensing restrictions and thus far appears to function significantly smoother than JQM on the devices which I tested it on (HTC Desire-Z, HTC Wildfire-S, iPad 2). Each application is built upon model-view-controller (MVC) principles – something that I personally find appealing based on my regular usage of the Zend PHP framework. I must admit to initially being somewhat reluctant to embark on a Sencha Touch journey, largely in part due to sheer laziness and my great fondness for jQuery, but I’ve come to understand that this mindset was perhaps stubborn and misguided. Sencha Touch, at least from what I have witnessed thus far, produces an experience more akin to that I would expect from a native application. And since the end goal is to provide an experience as close to native without the headache of cross platform native development, it would make sense to adopt the best tools for the job. At present, Sencha Touch appears to be top of the list for many.

Considering I have yet to write a single line of code using Sencha Touch, it may simply be a case of the grass always being greener on the other side, so I’ll fully reserve judgement until I am a little bit more versed in the framework. I will be migrating my application in it’s current state over to the Sencha Touch framework throughout the next couple of weeks or so and I intend to fully document my experiences along the way. Part of me hopes that I’ll encounter as many frustrations as I did whilst working with JQM simply so that I may as well keep working with what is already quite familiar (yet under that mindset I would have never embraced Object Oriented Programming or MVC).

The rest of me really hopes that the end result will absolutely be worth the time invested.

One thought on “Mobile Application Development: A hybrid approach

  1. Good article, I’m interested in the speed of sencha touch and all the hybrid frameworks eg; sencha touch, jqm, kendo ui mobile. I’ve used kendo and it’s fairly slow on my ipod 3 and speed is a very important factor in a mobile app. I’m looking for a basic bare bones framework (or even just a template) that just handles the grunt work such as scaling and other browser inconsistencies. I’ll create the ui myself with css

Leave a Reply

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