Find solution
How do I use jQuery sortable?

Which is a better platform to use JQuery Mobile or Twitter Bootstrap?

  • We're looking forward to build multiple websites which can be rendered fluidly on mobile. The basic principle is to build once, run anywhere (like Java). If that's not possible, what's the best platform to use? There's a number of options out there - use Sencha, JQuery Mobile, Twitter Bootstrap, Wordpress themes, etc.  A lot has been said comparing one vs another (e.g. Sencha Touch vs JQM):  http://css.dzone.com/articles/sencha-touch-v-jquery-mobile However, I'm looking forward to what your thoughts are in using Bootstrap vs JQM. Which one is more scalable? Which one gives developers more control to add custom elements (embedded maps, animated transitions, videos, iframes, etc.)? Is it possible to combine both and get the best of both worlds?

  • Answer:

    Having used both personally on projects, I would strongly suggest using Bootstrap for your Styles over JQM Styling & JS. JQM required a full load of the jQuery library and then the Mobile platform on top of it. You will find it much more painful to develop and very hard to integrate with Bootstrap styles/LESS. Considering that JQM doesn't just help with the mobile layout, but also has a separate theming system you will find it difficult to integrate properly. If you are looking for a layout system for mobile then there are other solutions and easier/slimmer code libraries you can use. Regarding styles and layout, Bootstraps Responsive features are much easier to manage because they use Media Queries, not to mention if you create a mobile-bootstrap.less file and only load what you need (do proper detection to load the right CSS file), it will be slimmer and easier to maintain. I would recommend to only use LESS with Bootstrap though and use CodeKit to compile to a single css file. You might also want to avoid the Bootstrap JS files unless absolutely required for certain items. More importantly you need to ensure you are providing the best experience for mobile web, and that might be different from a Native App that you eventually provide if you haven't already. Responsive design is a fantastic feature and is quickly becoming a core element needed from the beginning. However, I would always take into account the ease of modifying brand elements, and flow of your experience before choosing a platform. If you change a menu/color/font/layout, how easily will that translate into your mobile experience? Try to keep your code DRY! LESS has simplified my life by 10X with Bootstrap, and the Mix-ins make things 10X simpler to work with as well. If you're not using LESS at this point I would recommend you do. http://lesscss.org/ If you need to use a separate JS library for Mobile for speed and growth, then look at these over JQM, they are much lighter and faster and will accommodate most needs: http://xuijs.com/ http://zeptojs.com/ If you need a good MVC layout for mobile I would also look at backbone.js http://backbonejs.org/ Also, a great article by the co-creator of PhoneGap that illustrates some good advise on Mobile: http://sintaxi.com/you-half-assed-it If you decide to go full native for all platforms, there is Appcelerator which I'm a HUGE fan of. They recently released an MVC platform on their Titanium product called Alloy which is awesome to develop in and is great for generating iOS, Android, WM8, Mobile Web apps. http://www.appcelerator.com/

Conrad Fuhrman at Quora Visit the source

Was this solution helpful to you?

Other answers

First and foremost, if you want to find more about this topic take a look @http://www.gajotres.net/bootstrap-or-jquery-mobile-pros-and-cons/ All in all I’m amazed how much this topic is still very hot. I’m probably subjective regarding this topic but I would like to blame jQuery Mobile and Bootstrap developers for this state of affairs. When you visit official web pages you will notice that both frameworks are vaguely described. Let’s take a look at their official descriptions: 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 under impression that both frameworks serve the same purpose which is not correct, at least partially. Overview: jQuery Mobile: 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 best thing after bread came sliced. We were teased with HTML5 markup based framework heavily tied to jQuery framework, it looked 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 final result was far from spectacular. As its description states, jQuery Mobile is a HTML5 based user interface system designed to make responsive web sites. That’s more or less the truth. UI and lot of underlying functionality is 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 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 work horse in that case. This combined with mobile browsers will result in below average performances (it got better with time but this is still biggest jQuery Mobile problem). Thankfully this is not the case when used in desktop browsers. 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 bigger screens. This 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 manually play with CSS media queries.   Unlike Bootstrap, jQuery Mobile doesn’t just make your pages look nice, it gives a lot of mobile oriented features like swipe-events, page transitions, allows for single/multi page 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 thing of. Same goes with theme support, thou 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, thou 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 frameworks 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 purely documented and described. That’s is the second biggest problem related to jQuery Mobile. I want kid you, 80-90% of Stackoverflow jQuery Mobile related question are related to JavaScript or custom UI modifications. Bootstrap: Bootstrap is a front-end framework (personally it’s debatable if it can be called a framework ) relaying on a CSS grid system for both responsive and non-responsive look and feel. That same look and feel is improved via cherry picked icons, typography, code, tables, forms, buttons, etc. Just like jQuery Mobile it also includes different UI components, like dropdowns, button(s), button groups, button dropdowns, navs, navbars, breadcrumbs, pagination and many many other. And just like jQuery Mobile everything comes packed with jQuery JavaScript framework.   Here’s where lines between Bootstrap and jQuery becomes blurry. Bootstrap is advertised as mobile first and that’s only partially true. While responsive in nature it looks better on desktop screens then mobile ones. No matter what device you use, Bootstrap will always look like desktop application (unlike jQuery Mobile who always look like a mobile application). Unfortunately there’s a big downside, every Bootstrap application looks and feels the same (just like any jQuery Mobile application). Of course nothing prevents you doing some custom coding, which again breaks the purpose of Bootstrap rapid prototyping. Not to mention, Bootstrap customization can be pretty tricky, specially if you’re not CSS3 savvy. While in much smaller scale compared to jQuery Mobile, JavaScript also plays a role here. The best part, however, is that Bootstrap enables you to skip writing a lot of JavaScript altogether. With it, you can easily manipulate any visual aspect of your page, be that modal windows alerts, tooltips, etc.   Thankfully jQuery used with Bootstrap will not cause performance problems seen in many jQuery Mobile applications. This is because Bootstrap relays more on CSS during content generation then jQuery Mobile. More praises should go to Bootstrap grid system which is much much better then anything seen in jQuery Mobile, even if you count in every 3rd party grid systems. That grid system is what makes or breaks a good Bootstrap applications. Using the platform’s grid isn’t mandatory, but it does make your job a whole lot easier.   Bootstrap has a large community, not to mention dedicated developers, which is a curse and a blessing at the same time. Thankfully Bootstrap don’t suffer from this as much as jQuery Mobile do. If you need anything just look for it in a Bootstrap official documentation page o Google it, Stackoverflow is also a good place for your question.

Dragan Gaić

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.