jQuery vs jQuery Mobile vs jQuery UI?

Question

I'm new to web development and there are just too many j* stuff out there. I wonder what are the differences between these frameworks?

Moreover, why do people talk a lot about making a plugin using jQuery? Isn't it supposed to be a JavaScript library to make your web page more interactive?

Solution

jQuery is a JavaScript framework designed to allow developers to literally "write less, do more", the 3 different flavours you are asking about, do very different things.

First up jQuery is the core library which contains the main functionality of the framework, so if you want to make an element fade in, you would include jQuery on your page, and then call the fadeIn() function on one of your elements.

jQuery UI was created with user-interface elements and interactions in mind that generally require a lot of code to manipulate otherwise. So the library contains things like the ability to drag and drop elements, and get useful information from those interactions. But at the same time there is a focus on the look and feel, therefore there are all sorts of themes available to style these powerful UI elements in this library.

jQuery mobile is a powerful framework built on top of jQuery and designed specifically for mobile platforms - after all the functionality of things like drag and drop needs to be rethought for touch screens, as does core functionality such as "hovering" which simply doesn't exist on mobile.

All together the frameworks can be used to enhance the usability of a site, and really save developers a lot of time. To learn more about the framework visit Learning jQuery - a great resource for getting started.

Plugins allow web developers to take the solution to their problem and abstract it into a single functional and independent block (usually in a separate file). They can then share that with everyone else so that they can do the same. So if someone builds a gallery feature for a site they made, making a plugin would allow them to easily reuse the code, and help others facing the same problem.

Comments

[Muhammad Qasim]

If I use jquery mobile than I will also need to use jQuery? I mean does jQuery mobile provides all of the jQuery functionality (except mouse/keyboard events)?

[Tom Walters]

@MuhammadQasim Indeed you do require jQuery core, see this question.

[Ansel Halliburton]

jQuery Mobile is not built on top ot jQueryUI. You can easily see that when you compare Object.keys($.fn) in both frameworks. I'm not sure whether this has been true in the past. Today there may be certain incompatibilities between the two.

[silencedmessage]

For newer visitors, jQuery UI is still not quite up to speed for mobile development, but there's a wonderful helper that makes it so: touchpunch.furf.com