Monday, August 12, 2013

My PhoneGap With jQuery Mobile Development Experience

Recently my PhoneGap team has been working with jQuery Mobile for a few clients. The overall development experience is really bad.

Project 1: tablet

The first APP I want to say is for tablet. Our team joined the development when the APP was about 90% done. That APP used jQuery Mobile and also backbone.
When we joined the development, the code looked not very professional. There are mainly two files for the project, two very big ones. One is the index.html that had over 2000 lines, and the other is index.js that has over 5000 lines of code.
Our first tasks are very small and were done quickly, but we still suffered from the too large code. So we advised the client refactor, and the client accepted. We then re-designed the code architecture and separated the big index.js into many small ones based on functions. The JS code became much clear, but the index.html is still very large(no change).
Later the client said the whole APP performance was not good, then we tried many methods but finally we have to remove usage of jQuery Mobile. It is because jQuery Mobile generates too many html elements for a simple element, such as a button. When the data become a little large, it costs a lot of time rendering so many html element. And the html elements each performance during the whole lifetime of the page.
Another example:
For the above item template, we can change it to:
<li>Acura<span></span></li> , even the <span> is not necessary.
For some pages with big data, we refactored the html to use as few html as possible. And the performance become much better.

Project 2: iPhone

We joined the project also from half way. One of our tasks is to list all contacts and search and choose. Normally, a phone has more than 200 contacts. At the beginning, we used jQuery Mobile listview because the project was already using jQuery Mobile. The list item template is not complex, but the performance was very bad. It cost about 3 seconds to render 300 contacts.
Then we tried removing using listview, instead, we wrote a very simple UL, and the performance become much better. We also spent much time on the listview item template, since it doesn’t work well and not easy to use.
For this project, there are also mainly two big files: index.js and index.html. The code is hard to read or maintain. We need to press CTRL+F to navigate to the right page all the time. It’s really a nightmare.

In conclusion

The two projects originally used a lot of jQuery Mobile features, but finally many of them are removed due to performance issues. I think jQuery Mobile is only suitable for web applications, not for PhoneGap, since performance is really a big concern in PhoneGap.
Till this moment, I haven’t seen any good jQuery Mobile project architecture. A good code architecture should keep the code easy to read, easy to maintain, and any developer knows where to put the code. Generally, each file should have less than 300 lines of code, each method should have less than 30 lines of code.

9 comments:

  1. I have seen jQM "murder" an app using PhoneGap (Android and iOS). jQM includes more code than necessary for WebKit, I'm sure this doesn't help.

    Untappd is the best app I've seen using jQuery Mobile and PhoneGap (there may be better idk).

    ReplyDelete
    Replies
    1. Thanks for the comment Ross. I have been making an APP without jQM, instead using Nova PhoneGap framework(http://cordova.codeplex.com). Hopefully it will be published to app store and google play in a month. Then I will put a link here. I think it has a better UI, better dev experience, better performance.

      Delete
  2. PhoneGap definitely wins the game because of its innumerable benefits. Though there are other tools as well but when it comes ease of use I choose no other tool. I cannot be so judgmental about the other tools, but personally I've worked on this tool and I have got quite satisfactory results.

    ReplyDelete
  3. Android has continued designing and reinventing itself and has changed itself as one of the heading cell phone working frameworks.Android application development // Android

    application development
    // mobile app developers

    ReplyDelete
  4. Our first tasks are very small and were done quickly, but we still suffered from the too large code. So we advised the client refactor, and the client accepted.
    Web Development in Orlando
    Web development in West Palm Beach

    ReplyDelete
  5. When we joined the development, the code looked not very professional. There are mainly two files for the project, two very big ones.
    Web Development in Orlando
    Web development in West Palm Beach

    ReplyDelete
  6. When we joined the development, the code looked not very professional. There are mainly two files for the project, two very big ones.
    osiz technologies madurai complaints |
    osiz technologies complaints

    ReplyDelete
  7. The first APP I want to say is for tablet. Our team joined the development when the APP was about 90% done. That APP used jQuery Mobile and also backbone.
    osiz technologies madurai complaints |
    osiz technologies complaints

    ReplyDelete
  8. Thank you for your post. This is excellent information. It is amazing and wonderful to visit your site. For more info:- Cordova App Development

    ReplyDelete