jquery mobile alternatives (and what is the bottleneck ?)

Question

I'm just in the process of releasing my first app in JQM. Basically, geo dynamic pages with listviews. Nothing fancy in terms of design. So I really enjoy the basic look & feel of JQM.

I've not ran it with phonegap yet. I'm testing it as a web app on firefox on my desktop and it's really nice and working smoothly. I've tested it as a webapp over safari on my iphone 3GS and it's completely useless : screen flickering, transitions which remind me of Mosaic on a 33.6K modem.

I've seen on stackoverflow that there are lots of tweaks which improve JQM such as not using transitions. But what's the point ?

What is the bottleneck ? Is it JQuery itself and its handling of IE ? Sorry, I can't wait for JQuery release 2.0.

I've seen that some people recommend using zepto.js as an alternative. But zepto.js doesn't support the JQM css. Is there an easy solution to use zepto and not have to redo the basic design that JQM provides ?

I still don't want to go native since I'd like to have my app running on IOS and Android without having to learn Obj-C and go back to Java.

There's been numerous discussions about this but the latest one I've seen was in June.

Are there some new alternatives ? If Jquery is the bottleneck, is it possible to obtain one which is empty of anything which doesn't target IOS/Android ?

Thank you.

Answer 1

The idea of JQM is to not only target iOS/Android but all platforms, so you have to make comprosmies which you don't need if you are going iOS only - the pre JQM 1.1 transitions (which were much better) were dropped because of Android I believe, because they were failing so badly.

If you are looking for bottlenecks I think rendering elements on the client takes time. Say you have a list item:

<li><a href="some">link</a></li>

Which JQM will change to

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text">
            <a href="index.html" class="ui-link-inherit">Acura</a>
        </div>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
    </div>
</li>

Since this is done on the client for every list item, stuff takes time to render and elements that work perfectly smooth on desktop suddenly need 2-3 secs to render on crummy Android.

First workaround is to send enhanced HTML and try to not have to call trigger("create") You may loose element bindings doing so, or you will have to alter JQM to provide for an event-bind-only mode, which I'm doing when needed.

The other idea would be to store widget libararies as configurable enhanced markup. So you'd have a listview lib, which has all variations of listitems stored as templates in enhanced form. When looping through a list, you then just pick the list item from your lib, add dynamic data and you are done.

Both require a lot of fiddling, but it's easy to set up form some widgets (buttons, controlgroups) and already saves a ton of rendering time.

Hope this is a good pointer to get you going.