January 9, 2013

Why I hate JQuery Mobile

Warning : This article was written a while ago, my views may have changed and this may not be relevant anymore.

If you follow me on twitter, you probably have seen me whining about JQuery mobile.

Indeed, I’ve worked a lot with JQuery Mobile recently, and this has been a pain.

So I’ll try to sum up here what I don’t like about JQuery, maybe I’m wrong, maybe I’m right, just tell me in the comments what you think about this.

Bugs, bugs everywhere #

If you have a conversation of more than five minutes with a developer that worked with JQuery Mobile, you’ll probably hear that JQM is full of bugs.

Well, after several months, I’ve been through a ton of them.

Some bugs are well-known and stackoverflow is full of useful workarounds dirty hacks.

This adds a considerable amount of time to the development time, and gives me the impression of being innefective, hate that feeling.

Documentation #

Whereas some parts of JQM are well documented, some are simply … not.

For example, list icons.
This page only consists of a demonstration, no explanation. You have to check the (dirty) source if you want to use this feature in your app.

Some basic stuff, such as waiting that the page is loaded before executing any code , $(document).ready() in classic JQuery, is not explained.

After some research, you can find on stackoverflow these two forms of doing the same thing with JQuery Mobile :

$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});

And …

$("div[data-role*='page']").live('pageshow', function(event, ui) {
    // code to execute on each page change
}

Yummy Yummy, beautiful code.

Of course, both don’t work the same way, so this might work for you or not, what are you supposed to do ? Who are you supposed to believe ?

Code unsexiness & DOM rape #

This one is kind of personnal, but after many lines of code, I find it to be easily uggly and difficult to maintain.

Concerning the dom rape, JQM works by replacing some elems of the DOM when the page loads to apply some style.

This has bugged me when I started working with JQM, why do they do that ? Why don’t they simply provide classes ?

So this kind of code :


<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

Gets translated into this :


<div data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-controls">
      <a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Yes</span></span></a>
      <a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">No</span></span></a>
      <a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Maybe</span></span></a>
    </div></div>

Ouch …

Performance #

Last but not least, performance.

JQM had made me think that mobile web apps were worthless in terms of performance.
Transitions are really laggy, sometimes I have to click 2 or 3 times in order to get something to work, etc.

However, recently, sencha had proven that this is not true. So I guess JQM has a lot of work to do.

That’s it ! #

So now you know, yeah, I hate JQM, but i look forward to see newer versions, hoping they’ll fix what I consider being wrong.

How about you, do you hate JQM ?

Kudos