JQuery Mobile – Life Saver for Mobile app development

Over the past few months, I’ve spent most of my weekends playing with Android development and related technologies… My loong time dream was fulfilled last week – published “My First Android App” on Google Play.. This would not have been possible without JQuery Mobile. As promised in my earlier post, I would like to dedicate this blog post to JQuery Mobile..  This post is all about  advantages of using JQueryMobile for Mobile development (read Android dev.), the problems that I faced and the solutions that I used to overcome them. I feel that what I learnt could be interesting or useful to others too, so will recount my findings here 🙂

After deciding about my weekends’ Android *fun* projects, I started reading various blog posts that cover the technologies and the UI frameworks that can be used for Android development..

My ground rules for mobile development were pretty simple:

  • Should have support for accessing native APIs like Camera photos, Contacts, Geolocation etc.,
  • Should be easy to take advantage of HTML5, Javascript and CSS3.
  • Should be able to build apps that support different platforms like ios, Android, Blackberry etc., (But this is not a major concern, as I’m only focussing on getting my apps in Google Android – atleast for now 🙂 )

After many days of literature review (courtesy: Google 😉 ) I short-listed three candidates which could be used for the app development,

  • PhoneGap + JQueryMobile
  • PhoneGap + SenchaTouch
  • JQueryMobile alone

I downloaded all the three frameworks and played with each one of them for some days to get hands on experience.

PhoneGap makes it easy for the developers to access native features on the phone and works perfectly with tons of UI libraries including JQueryMobile, Sencha Touch, JQTouch etc., You can use PhoneGap with any of these UI libraries as per your requirement, as each one of them has got different features set. Personally I felt that PhoneGap + JQueryMobile makes an incredible combo as it gave what I was looking for.

After burning the midnight oil with PhoneGap, I thought why unnecessarily package all the PhoneGap jars with my Android app though I’m not extensively using it.. Why not build a framework that satisfies my need alone? This triggered me to write my own framework that could access the native APIs.. I wrote a wrapper Java class that can provide the basic native APIs  like adding/modifying phone contact, retrieving camera pictures, getting the location etc., which could be called from HTML with the help of javascript.

With my own framework in place, I decided to use JQueryMobile alone for the app development for one single reason.. I’ve been a fan of JQuery for many years not because JQuery is running on Zoho platform 😉   I have many years of coding  experience in this framework as it immensely simplifies programming with javascript by providing easy to use simple syntax.. JQuery made Javascript more tolerable to me as its condensed syntax helpsachieve complex tasks with javascript quite easily.

There are many advantages in using JQuery Mobile for my app development.. To list a few,

  • JQuery Mobile has extensive demos and documentation for even a newbie to get the ball rolling with this library. It is lot more easy to use, with its simple syntax. That is with no prior JQuery Mobile coding experience , makes it easy to build a rough version of an app over a weekend.
  • This framework comes with a CSS Theme Framework that will help even a novice CSS designer to get off the ground very quickly.. It is also possible to add our own custom styles with this one.
  • It is easy to support both Android and iOS if we use JQuery Mobile. If you’re a developer, you’ll know the pain of maintaining a separate code base for each browser/platforms. The fact that JQuery Mobile will work in multiple platforms is a huge bonus.. One day I’ll publish my apps in iOS as well 🙂

I can go on and on, but will stop here for now.

I also faced some issues while using JQuery Mobile, but StackOverflow, the discussion forum helped me  to solve most of my issues..  However I would like to share two nagging issues that I faced with JQueryMobile, but found a way to overcome it.

  • When I tested my app on an Android enabled phone, it showed a vertical white space at the right side of the screen.. However I couldn’t reproduce the issue in Android emulator.. I googled, searched in stackoverflow, asked my friends but didn’t find any solution.. Luckily while searching for something else, I found exactly the same question here.. By adding the following code in Android souce my problem got resolved 🙂

    myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

  • In my app, I’ve added code to swipe the screen left/right by making use of JQueryMobile.. While doing so, I noticed a nasty flicker on the CSS swipe transition.. It seems that many others have facedthe same issue in the framework.. It is considered as a known bug which will be fixed in the upcoming updates..After much googling, found that by adding “webkit-backface-visibility” tag in CSS will solve the issue. I added the following one line of code which made my life flicker-free 😉

    .ui-page {-webkit-backface-visibility: hidden;}

These are the only two major issues that I faced with JQueryMobile so far. I’ll stop here as the post has become lengthier than expected 😉

One final word abt JQuery mobile..  I would strongly recommend JQueryMobile to anyone who’re going to kickstart mobile app development..

I’m hoping to share more of my journey and battles about my Android dev in the coming days.

Last but not the least, do expect my second app on Google Play within a week 🙂 Do watch this space to know more about the app and other installation details..

Advertisements
Tagged , , ,

6 thoughts on “JQuery Mobile – Life Saver for Mobile app development

  1. Chris says:

    Excellent post.. I’ve decided to make use of Jquery mobile for my project 🙂

  2. […] read in my previous blog post about my *love* affair with JQuery Mobile and how it has become my life saver for mobile app development, JQuery Mobile has helped me save a lot of time for developing my second Mobile App – […]

  3. charan says:

    Great post Naveen..! It really useful 4me

  4. Thanks @Chris and @Charan 🙂 Happy that the post is useful for others :))

  5. Ratna Swami says:

    . I wrote a wrapper Java class that can provide the basic native APIs  like adding/modifying phone contact, retrieving camera pictures, getting the location etc., which could be called from HTML with the help of javascript?

    You have done the above wonderful task!

    How to do it from HTML via JavaScript? Could you please provide any guidelines and help?

    Thanks.
    Ratna

  6. @Ratna

    Thanks for your comment.

    To bind a new interface between your JavaScript and Android code, you need to call addJavascriptInterface() in your Activity class.. Below is the code,

    JavaScriptInterface jsInterface = new JavaScriptInterface(this);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(jsInterface, “JSInterface”);

    And the functions in JavaScriptInterface class can be called from Javascript by JSInterface.somefunction();

    Hope this helps.. Have a great day!!

    Naveen. V

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: