Phonegap – Ionic – AngularJS – jQuery Mobile

In the world of HTML 5 app development, there are many different approaches you can take from your own custom code to using Javascript libraries and frameworks. I’ll try to share my thoughts on the following topics based on my experience:

  • Ionic Framework
  • AngularJS
  • jQuery Mobile

Since my first post about Phonegap there’s been a lot of features and improvements with Phonegap, and the vendors  that support HTML 5 based apps. Rather then me re-typing, this post says it all http://anzorb.com/html5-finally-getting-love-from-vendors/. In the past, large scrolling lists of data was absolutely terrible with Android versions older then KitKat, it was simply too choppy and not smooth.  I’ve noticed a MAJOR difference is data sets and scrolling. For example, I ran a test that injected 3,000 + rows into the DOM and it was scrolling just as smooth as a native app.

In terms of Google, I believe they are trying to lead the way in HTML5 development, the reason I say this, take a look at Chrome browser extensions, it’s 100% Javascript, HTML 5, and CSS 3 based, so no need to learn new languages.

So to get to my thoughts…

Ionic Framework

Ionic is built on top of Phonegap and depends on AngularJS. I was very excited about using this  framework. It was so easy to setup, performance in the browser was great, it had great AngularJS directives to make the UI look really clean and professional. However that all went downhill once I installed on my Android device.  On the surface it seemed to run just fine, when I happened to look at the memory usage, it was going through the roof.  In fact, I was running an HD game at the same time, and my simple 1 controller sample app was using more memory then the HD game. It was using 250+MB of RAM. Here is a bit of conversation about it: https://github.com/driftyco/ionic/issues/1096. Unfortunately because of this, I decided to move away from Ionic for the time being.

AngularJS

I’m using AngularJS in my latest Phonegap project and so far it’s going great. I’m not using Ionic, just simply AngularJS. So far memory usage seems to be inline. In the past, I’ve had the best performance by simply using plan old javascript, but now that most vendors like Apple and Google are coming out with better support, it’s not too big of a deal.  However you also need to look at your target market. I always recommend getting a bunch of old devices that a lot of people buy at Walmart or wherever, these devices tend to have really old versions of Android, which means the HTML 5 rendering is really bad.

jQuery Mobile

I firmly believe, jQuery mobile is what initially gave HTML 5 apps a bad name. The performance was really bad in my experience. I can only speak to the last time I used it, which was 3 years ago, so perhaps they’ve fixed performance problems.  The way I see it, jQuery mobile had some good event handlers for mobile, like swiping, but to use jQuery mobile for the UI portion that’s where things go downhill.  The way they converted something simple like this:

<ul class="menu">
    <li>Item 1</li>
</ul>

to:

<div class="container">
    <div class="another-container">
        <ul class="menu">
            <li>Item 1</li>
        </ul>
    </div>
</div>

Note: Those are not the exact class names, in fact they throw a bunch of class names there, and not to mention a bunch of CSS 3 transformations that kill older Android Devices.

In Conclusion

I don’t think HTML5 apps are at the point of taking over native apps, in fact I don’t know if it ever will “take it over”.  However, I do believe in the next 5 years HTML 5 apps will be the preferred way of app development.  I know a lot of native Java and Objective C developers may think otherwise.  What I would say to those developers: It would not hurt the expand your knowledge of HTML 5, Javascript, and CSS.  When building Phonegap Apps, you have to remember, Phonegap simply taps into Native functionality via Javascript API. So You will already have a head start on what’s going on behind the scenes. For me, when I had issues with PhoneGap plugins (which have to be natively written), I had to learn Objective C and Java in order to know what’s going on to fix any problems.  With that said, I also think if you’re going to use PhoneGap plugins, they MUST work in both iOS and Android, otherwise this defeats the purpose of using Phonegap, in my opinion at least.

Happy App development!

LukePhonegap – Ionic – AngularJS – jQuery Mobile

Leave a Reply

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