Before we start let me make something clear, this article is made for beginners though I will touch some intermediate topics. If there’s something you would like to know, and you can’t find it here, just leave me a comment down below, even if you only want to say Hi. There’s a good chance I’ll forget something; both frameworks were made several years ago, and they collide in more than one place, so ask, ask, ask.
 
All in all, I’m amazed how much this topic is still trending. I’m probably subjective regarding this subject, but I would like to blame jQuery Mobile and Bootstrap developers for this state of affairs. When you visit official webpages, you will notice that both frameworks are vaguely described. Let’s take a look at their official descriptions.
 
 

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Overview

 
 

jQuery Mobile:

 
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
 

Bootstrap:

 
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
 
Every developer not familiar with jQuery Mobile and Bootstrap would get the impression that both frameworks serve the same purpose that is not correct, at least partially.
 

jQuery Mobile:

 
Link
 
I will start with jQuery Mobile, mostly because I started using it during it beta state, several years ago. At that time, it looked like the best thing since bread came sliced. We were teased with HTML5 markups based framework heavily tied to the jQuery framework; it seemed too good to be true. jQuery was (and still is) one of the best JavaScript frameworks to this date, and we expected the same from jQuery Mobile. Unfortunately, the final result was far from spectacular.
 
As its description states, jQuery Mobile is an HTML5 based user interface system designed to make responsive websites. That’s more or less the truth. UI and lot of an underlying functionality are done purely through the HTML5 markup. It’s almost funny how easy it is; everything is made logically, learn how to use one widget, and you would know all the rest. Of course, here lies the first real problem. Because everything is done through HTML5 markup, jQuery Mobile application still needs to process that markup in the background during the application real-time execution, and JavaScript is a workhorse, in that case. This combined with mobile browsers will result in below-average performances (it got better with time, but this is still the biggest jQuery Mobile problem). Thankfully this is not the case when used in desktop browsers.
 
jQuery UI
 
Just like Bootstrap, jQuery Mobile is responsive out of the box. Show it on a smartphone, tablet or desktop device, and it will seamlessly adapt to available screen size. Unfortunately, jQuery Mobile UI widgets are made solely for small screens; they look almost comically large on bigger screens. You can’t resist the feeling how everything looks oversized and out of the place when observed on 13″ or larger screens. This problem can be fixed using grids, but unlike Bootstrap grids, jQuery Mobile grids will not rearrange depending on a screen size, so you are forced to play manually with CSS media queries.
 
Unlike Bootstrap, jQuery Mobile doesn’t just make your pages look beautiful, it gives a lot of mobile-oriented features like swipe-events, page transitions, allows for single/multipage applications, AJAX page preload, and history manipulation API, and lots of touch-friendly components/widgets.
 
What I like most about jQuery Mobile is its 3rd party plugin support, including every imaginable jQuery plugin you can think of. Same goes for theme support, though it’s disappointing that jQuery Mobile don’t support native mobile look and feel, at lease not out of the box, you can always acquire it via 3rd party themes and nothing prevents you from creating one of your own(jQuery Mobile has excellent theme builder).
 
Documentation is another great thing about jQuery Mobile though it can be pretty confusing for the first time. When you google it you will be served every possible result from every possible jQuery Mobile version, and there are a lot of them (so always watch for a right version). Every possible aspect of a framework HTML5 markup is heavily described with numerous examples. On the other hand, this framework is not built of HTML5 only; JavaScript is also heavily involved, and that part is poorly documented and described. That’s is the second biggest problem related to jQuery Mobile. I won’t kid you; 80-90% of StackOverflow jQuery Mobile related question are related to JavaScript or custom UI modifications.
 

Pros

 
  • Easy to develop, if you understand HTML(HTML5) you will have pretty good understanding of jQuery Mobile
  • Excellent 3rd party support, what through knowledge what through plugins
  • Easy to debug
  • Better for mobile web applications
  • Official documentation
  • Stackoverflow
 

Cons

 
  • Sometimes slow and sluggish on mobile devices, application needs to be designed properly
  • Dull look unless you are capable UI designer. All applications look the same, and it looks pretty bad on large screens
  • Official documentation is lacking in some segments, too few information about jQuery Mobile architecture and JavaScript
 
Continue Reading