I hope this question does not rub folk up the wrong way however I have been developing an application that has both desktop and tablet audience - until now I have developed using jQuery and jQueryUI. The tablet dependancy has until now utilised Dialog and Buttons and for the most part, delivered what I want.

My concern is as my dependancy increases (meaning I use features beyond Dialog and Buttons) that I will find myself applying band-aids to my tablet target code which might not otherwise be required if I had developed using jQuery Mobile.

Is there something I am missing? Does jQuery Mobile 'compete' for part of the jQuery UI's audience or are there real added advantages of one over the other?

Replies(6)

I'm not an expert on either, but my take on the situation is that jUI is largely focused on desktop UI. It supports a wider variety of browsers, including legacy ones such as IE7 (not sure about IE6 though), takes advantage of the higher resolution and fine action selection (ie via mouse clicks). Because the workstation is generally more powerful than mobile devices, there's more processing juice to do the funky stuff like carousel, graphing etc.

jQM ensures that the specifics of a mobile app are considered (eg. button sizes, page transitions, input control size and rendering) while working with the device constraints such as processing power, and a much broader resolution spectrum (not to mention orientations). Oh, and touch interpretations too.

In summary, you wouldn't use jQM to write a desktop web app, and neither is jUI appropriate for mobile web app. There's not much conflict to talk about. But as mobile devices get more powerful, that may well change.

In summary, you wouldn't use jQM to write a desktop web app, and neither
is jUI appropriate for mobile web app. There's not much conflict to
talk about.

Not so sure I quite agree with this statement. Sure, jQuery Mobile has "Mobile" in the name but it's not targeted only at mobile devices. From Supported Platforms:

jQuery Mobile has broad support for the vast majority of all modern
desktop, smartphone, tablet, and e-reader platforms. In addition,
feature phones and older browsers are supported because of our
progressive enhancement approach. We're very proud of our commitment to
universal accessibility through our broad support for all popular
platforms.

It all depends on what you're trying to accomplish. If you need or want a different look and feel for your application on desktop and mobile platforms then you probably wouldn't want to use only jQuery Mobile. You'd be stuck with providing two versions of your application (one for jQuery Mobile and a second for jQuery UI on desktop as an example) and the support/maintenance involved with separate solutions. That is, unless you can figure out a way to make the two frameworks together which is a known challenge/issue.

However, if you wanted a common look and feel across both the mobile and desktop versions of your application there's no reason you couldn't use jQuery Mobile to accomplish that. If you don't like the look and feel of jQuery Mobile on the desktop you can always adjust the CSS styles to match your requirements or use another framework (Twitter Bootstrap as an example) out there that works on both platforms.

The jQuery Mobile and UI projects aren't really compatible at this point and you'll be fighting an uphill battle to get them to work together in their current form depending on which pieces you need to use. But you need to decide what's most important to your users, an application that looks like a desktop app on the desktop and a mobile web app on a mobile device, or an application that looks the same on both. There's no right answer, it just depends on your application and the expectations of your audience.

Thank you all for your comments - I could see the post was viewed by a reasonable number of people so it appears I am not the only one who had kicked the question around.

Since I am developing for both tablet and desktop and since I have good familiarity with jQueryUI, and comfortable with the results (so far), I would think my situation weighs heavily in favour of continuing with jQueryUI as opposed to learning jQueryMobile at the moment.

Wow, after 2 years and a few versions, I'm at JQM 1.4.5 right
now and I'm in the same boat, well, I just finished a huge
application in MVC 5 with lots of partial views loaded in dialogs with
JQuery 2.1.4 and JQuery UI 1.11.4 and everything seems so familiar now
to me and easy to do and now my employer asked me to change all this
for JQM. My first step was to understand how I can convert all this
to JQM specially the Dialogs part outch !!!!

These days they asks applications to run EVERYWHERE that's the
demand it's a fact and from what I read, it's one framework or
the other but not both maybe this will change yeah but right now I
can't imagine going from JQ UI to JQM other then working a lot of
CSS dialog changes, ajax, pages etc.

It's a real pain. I would say if you start a new app maybe
you could start entirely with JQM even if you loose some desktop
aspect. For instance I was surprised when I tried one of the
datepicker from JQuery UI with extension converted to JQM which was
looking so bad and so cheap. The input was taking the whole page
width and having a very hard time to make it looks like what I
want. This is just a very tiny example of what you face when you
try to go from a JQUI app to a JQM app not mentioning how I do
convert JQUI Dialog with ajax loading MVC partial views with Success
and Error event huh ?

That's what I had to say. Today I have to talk to my employer
and ask him why did he come with the idea of using JQM and I think I
already know the answer which is to look like a modern app maybe ?

I had an older application, some jQuery, a bit of jQUI, that I am in the
process of converting to JQM. It looks good, and I am confident that
this will succeed, I passed the point of no return.

To get it to look nice on the desktop, I had to do some (for me)
complicated CSS, such as

.ui-field-contain > label[id='myDropDown'] ~
[class*=ui-s] {

width: 150px;

}

This selects a fieldset contain with a label 'MyDropDown'
and then reduces the width of the dropdown to 150px. I don't want
all buttons and input to span the width of a screen.

jQuery Mobile supports HTML5 and CSS3, so there are still some
browsers not supporting all of it. For example, many browsers support
the HTML5 native date input, but not all. I use Modernizr to test for
the support, and then either show the native dropdown, or the jQueryUi
datepicker. There is no need to use the wrapper (I think) as I am not
showing it on mobile devices.

Respecting the history of both platforms, I think the community
would be served if they would merge at some point, if at all possible.
For me the future is Mobile first, but still support desktop
elegantly. I hope jQuery Mobile is the right choice for that. It could
do with some more easy support for desktop, but so far I have been
able to do everything that I need to do.