- Ionic Framework
- 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.
So to get to my thoughts…
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.
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>
<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.
Happy App development!