What has been your experience with RhoMobile + JqueryMobile + KnockoutJS?

Question

My team and I have been engaged in building several cross-platform (BlackBerry, Android, iOS) mobile apps for our organization using RhoMobile + JqueryMobile + KnockoutJS. The development experience is acceptable considering the state of cross-platform mobile application development today. The frustration starts to come when using the application on the mobile devices themselves. Performance issues are the number one pain point for us at this time. I don't want this to be a rant but I would like to know what others have done to alleviate performance problems. Specifically, performance issues on BlackBerry devices. I've tried the solutions recommended in the RhoMobile docs. Perhaps there are other hints the community can offer. I appreciate any feedback you can provide.

Answer 1

I only have experience with Jquery mobile, and while I loved the fast paced development it makes possible, if I had the time, I would always code a native app. Jquery mobile apps work best on iOS devices due to Safari's CSS3 support. Animations like slide etc are quite choppy on Android browser and downright shoddy on Blackberry's browser.

Apart from that, Jquery mobile works by basically never switching pages. Every time you request a new page (via a hyperlink or whatever), it fetches the page via an AJAX request and inserts it into the current page's DOM (you can explicitly request this not to happen, but then you cannot 'slide' to another page). This form of navigation causes problems after a long-ish chain of navigations. Not to mention, you have to be very careful no two elements across your entire application share the same id.

I made this Jquery mobile app as a demo for a school project, so it served the purposes I needed: fast development and it served as a proof of concept.

However, for my own company's product, we are developing mobile apps, and I would never go with anything but native apps for that. It does take a lot longer to develop, so it depends on your requirement.

Addition to your comment:

Nothing that Jquery Mobile does cannot be done by Jquery alone. But, using jquery, if you add the CSS3 animations, use the single-DOM navigation style etc., you'll suffer the same issues. The problem isn't with Jquery mobile. The problem is, few mobile browsers can handle the effects Jq mobile employs. Like I said, iPhone does good. This is partly because of Safari 3's CSS 3 implementation, and mostly because the iOS prioritizes UI threads above background workers.

Answer 2

1. Remove box-shadow and text-shadow from the CSS, it makes the pages quite a bit slower.
2. You can also set the -hover and -down classes to be the same as their derivatives so that the browser doesn't have to redraw the page when you tap an element (like a listview link) when scrolling (this made scrolling on my Android 2.3 device a lot smoother).

To remove shadows:

.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

To make the -hover classes the same you will need to change styles like this:

.ui-btn-hover-a {
    border: 1px solid       #000 ;
    background:             #444444 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 )); 
    background-image: -webkit-linear-gradient( #666 , #444 ); 
    background-image:    -moz-linear-gradient( #666 , #444 ); 
    background-image:     -ms-linear-gradient( #666 , #444 ); 
    background-image:      -o-linear-gradient( #666 , #444 ); 
    background-image:         linear-gradient( #666 , #444 );
}

To be the same as it's derivative (in this case that would be .ui-btn-up-a):

.ui-btn-hover-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

You can also do this for the -down classes which are triggered when a tap event occurs on an element:

.ui-btn-down-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

Here is a link to the non-minified version of the jQuery Mobile 1.0 CSS style-sheet: http://code.jquery.com/mobile/latest/jquery.mobile.css