What are the differences between jQuery and jQuery Mobile?

Question

I was reading today about the jQuery Mobile framework and from what I understood it would be for jQuery as Bootstrap is for CSS.

I don’t know if I understand it correctly, but it’s doubtful: jQuery Mobile also has the same functionality as conventional jQuery?

And now that more and more internet access comes from mobile, it pays more to use jQuery Mobile instead of conventional jQuery?

Answer 1

Well, I’ll give here my understanding of the difference between them, correct me if I’m wrong.

Jquery

The main goal of Jquery is to simplify and somehow standardize cross-browser Javascript, making it easier and handling things like handling HTML elements and making HTTP requests

Jqueryui

It is a set of interface elements (buttons, datepickers, sliders, tabs, these things), made using Jquery, ie, Jqueryui need Jquery to work. (Jqueryui = Jquery User Interface)

Those top two were made for be an addition to your site (either desktop or mobile), adding features like the ones I mentioned above.

Jquery Mobile

Jquery Mobile, unlike the two above, is a complete framework for development. The intention is that it is the starting point of your website. It requires Jquery and uses Jquery and Jquery features to make it easy to build mobile sites.

Another difference is that Jquery and Jquery UI are made to be used as an extra layer in your HTML and CSS. For example, you have a input to choose date, and turns it into a plugin with Jquery:

$('#meu_input').datepicker();

Jquery Mobile provides ways to choose where these differentiated elements will appear only with the use of HTML:

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

The attribute data-role tells Jquery mobile to make this list a mobile-friendly component for mobile platforms. data-inset and data-filter define attributes of this element, without even using a Javascript line.

I used a little self-knowledge and of that OS question in English to formulate this answer

Answer 2

Framework for mobile front-end

The manufacturer’s own definition:

jQuery Mobile is a touch-friendly UI framework built on jQuery Core that Works Across all popular mobile, tablet and desktop Platforms.

This answers the first question about having the same functionality as jQuery. This is because this framework is an extension of jQuery and is directed towards building the application’s front end. So for it to work you need to install jQuery.

About its analogy with Bootstrap and CSS, I believe it can work, but Bootstrap is almost all CSS and jQuery Mobile has other functions besides the style part, but I see no problem to facilitate understanding.

Explaining a little more, this framework is intended to facilitate the development of "responsive" and mobile-oriented websites, that is, when desktop usage is not the priority. But if the desktop user accesses, he will be able to browse and use as well.

The idea is that you do not have to worry about the size of the screen of the mobile phone or tablet that is accessing the site. This is interesting because you can program in HTML5 and your application will work for any mobile device without the need to write native device code. However, it will have some limitations, of course, mainly regarding the sensors of the devices.

I think it is not worth going into details of how it works or examples because I imagine the question is more related to the concept of the framework. If you want to explore more, you can access demo page.

On your question whether it pays to use one or the other, I believe that with the explanation it loses its meaning. You can use everything from jQuery when using jQuery Mobile. Perhaps the question would be whether it pays to use it instead of another approach. For example, Bootstrap also offers you "responsive" design that will work regardless of the device screen size, but jQuery Mobile has many other features and Bootstrap is more for the visual part.

For this last comparative question, it is better to ask another question. IMHO compensates jQuery Mobile only if the application is for mobile exclusive use.