Mobile devices development using HTML5/JS – part 2 – JQuery Mobile

Following on previous post Mobile devices development using HTML5/JS – part 1 , after my initial discovery of PhoneGap and HTML5 mobile frameworks it was time to try out the first one. Since we’ve been using JQuery for long time on our web apps and web sites, it was a logical candidate to start with.

Before I continue, I want to say again that I’m no professional HTML5 nor mobile developer. I’m a noob in this area, although I’m building web apps and portals since 1995. However, my daily job for long time is management in this area and less coding, which remains a hobby. So, please don’t take me as HTML5/mobile authority, just a noob exploring new world for the first time.

That said, first impression of JQM was amazing. Coming from regular web development and JQuery this was very familiar. Actually, what I originally expected, JQM to be “Mobile version” of JQuery was wrong. Yo still need to include classic JQuery and on top of that you include JQM. So, it’s kind of extension of JQuery with mobile widgets and neat features.

My favorite thing about JQM is the way you write an app – it is mostly HTML with frequent use of HTML5 feature of custom attributes (data-*). So, if you want panel you do div with attribute “data-role” set to “page”. If you want footer you make a div with attribute “data-role” set to “footer”. JQM really saves time. There is a lot of classic HTML code without custom attributes that JQM simply transforms to mobile variants. Like Lists. Normaly, you have to design each list item, add icons, define title size, subtitle size, then you use templating to create list item. In JQM, Just use H1, H2, H3, P and JQM lays it out beautifully for mobile.

So, it’s markup-driven framework and you can create complete interface in HTML without writing a single line of JS code. I’m sure web masters are going to love this while programmers would probably prefer frameworks like Sencha where everything is written in JS without a line in HTML. But you like it or not, JQM really saves time! Actually, it took me only a day or so, to create initial version of my test app, and I was using only text editor. Normaly, I’m guessing Dreamweaver 5.5 would be the tool for this. Integration is very good and since Adobe bought PhoneGap recently you can bet Dreamweaver is going to support tools and frameworks like this. It is a perfect fit.

Also, JQM creates beautifull apps. Best looking from what I have tried. Widgets are great and apps look really good. If you want to check out some examples, try https://www.jqmgallery.com/

Now to downsides. Speed. I’m using HTC Desire and unfortunately it is hard to fool anybody into believing this is a native app. Transitions are not as smooth and worst thing is flickering which is not only occasional but frequent. If you want to reach older hardware and not just newest phones you will probably need to forget transitions and some heavy stuff like gradients, which is extra work as it is by default in a lot of widgets. Since at this time JQM is in RC1 status I was hoping this would be solved, but this thread did not leave me optimistic: https://github.com/jquery/jquery-mobile/issues/455
Scroll down to last comments (September 22nd) and you’ll find from JQ team member “Hi all – At this stage, we’ve really tried pretty much every technique or approach that might improve the smoothness of transitions and reduce blinkiness …”, “we’re exhausted every option to smooth this out so we’re actively lobbying browser makers to improve their support and performance for native overflow: CSS support”. Now, lobbying browser makers is not something where I expect results soon. But not everything is bad. If you’re concentrated on iPhone or if you’re willing to sacrifice some animations it is still more than usable. Also you can dig arround for some workarrounds and fixes. In example try searching for “webkit-backface-visibility: hidden;” which is supposed to fix some of the flicker issues.

That was it with JQM for now. I moved on to something completely different, JS based and not markup-based framwork… Sencha.