Pros and Cons of using jQuery Mobile for your site

There are many frameworks available to create your mobile site, including jQuery Mobile. jQuery Mobile has a fast learning curve, is simple to implement and uses HTML5/JavaScript. I chose to use this for a recent client project because of their design and user interaction requirements.

PROS

• An important thing to consider is that jQuery Mobile takes care of cross-platform and cross-device (iPhone, Android, Windows, Blackberry, and other platforms) issues so you don’t have to worry about writing different code for each device or resolution. This is a huge advantage that results in a unique, clean code that saves time and resources.

• jQuery Mobile adapts the page to different Android devices with different screen sizes and resolutions.

• You can create your own theme using the ThemeRoller - a useful tool for creating themes without writing any line of code.

• jQuery Mobile uses HTML5 along with JavaScript for ease of development.

• Layout grids made it easy for us to create the client’s product page, result page, and other custom pages

• It’s easy to add collapsible menus

CONS

• jQuery Mobile works fine for simple designs where you can use a default theme or create your own theme using the ThemeRoller. However, when you have something more custom, like our client’s design, there are a lot of things that have to be overwritten to obtain the results that you need.

• The client’s design didn’t fit with any of the default themes, so I used a basic theme and wrote the HTML page structure layout from scratch. Though this was a quick solution in the beginning, it later gave me some issues, especially with the CSS styles.

  .ui-select .ui-btn {
      background: #fff url(../img/arrow_down.png) no-repeat 95% 22px!important;
      color: #666!important;
      text-shadow:none!important;
  }
  

• Since jQuery Mobile uses Ajax to navigate through pages, I ran into multiple issues, especially with anchors. To solve this, I reset all the Ajax navigation (which is a default jQuery Mobile feature).

  $('a').attr('data-ajax', 'false');

• The biggest issue that we had was jQuery Mobile’s interaction with .NET, especially with update panels. When the content came back from the server doing a Postback, it didn’t return the HTML classes that were required for the styles to load properly. We solved this by:

• We registered the script functions in the code behind:

  private void RunScriptForDDL()
    {
     /* Execute script */
  ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "CreateSearchResultDDL", "CreateSearchResultDDL();", true);
  
    }

• Triggering the event ‘create’ on the topmost element that you just inserted to DOM:

  function CreateSearchResultDDL() {
      $('#FilterOptionUpdatePanel').trigger('create')
      $('#container_0_ResultUpdatePanel').trigger('create')
  }

Conclusion

I think that jQuery Mobile is a very powerful platform for mobile application development. However, it doesn't fit for all kind of applications specially when there is a complex design that doesn't match with any of the custom themes.

Another thing to consider is that if your code behind is done in .NET you might experience some issues with Ajax and post-backs you might want to consider this before starting your development. Hopefully newer versions will fix this lack of compatibility and make it more friendly with .NET.