
While Backbone works really well on any device, jQuery Mobile is made with smartphones and tablets in mind. jQuery Mobile also leverages device-level optimizations to display appropriate layouts based on the screen real-estate and client browser capabilities. CSS media queries, flexible models, and relative units are the key elements used to make your app responsive out of the box.

While the widgets are considerably fast, they do have a website look-and-feel and you will have to work out the data bindings and event management with Backbone (or anything else) on your own.

Toolbars, Tabs, Listview, Tables, Collapsible panels, just to name some. This is particularly important when using widgets.Īll of the basic widgets often used for presenting content in mobile environments are available in jQuery mobile.
Jquery mobile responsive layout how to#
While using the UI is as simple as using HTML with proper class names, a developer will often need to know how to structure the HTML nodes properly, or else the styles will not inherit properly. Customizing theme just as simple with the provided ThemeRoller, an online theming tool. Installing a theme is as simple as including the right CSS file. not trying to mimic native device look and feel. JQuery Mobile comes with a couple of dozens themes, all being device agnostic, ie. Not only is the library rich features available for working with DOM, but jQuery tends to be amongst the fastest, utilizing best practices based on the client browser. Even the Backbone’s View mechanism uses jQuery to manipulate DOM. When it comes to DOM control, jQuery is the king of the hill. It even introduces more advanced OOP features such as mixins. Object/Array/Function utilities), many of which make use of native ECMAScript 5 components in modern browsers. Underscore lays the foundation of Backbone’s impeccable performance, empowering JavaScript developers with a number of helpers (e.g. Technically, this part of Backbone belongs to Underscore, a dependency library written by the same authors. Class Systemīackbone does not enforce a strict class system, though it supports prototypal inheritance and object extensions to help developers create object oriented application architecture. The Views are basically templates, which is why Backbone, not being a UI framework, works so well with jQuery Mobile. The Router corresponds to Touch’s Controllers, albeit simplified. Sencha Touch developers will find it easy to adopt to Backbone’s Models and Collections for evented data manipulation. Backbone’s loose MV* pattern is stripped of advanced features like two-way data binding or object queries, rendering the library lightweight and performant.

The Backbone pattern takes bits and pieces from each to help structure complex applications that are also clean, maintainable, and, hopefully, fast. Truth be told, it’s all of them and none of them at the same time. MV* Patternĭevelopers often argue whether the pattern presented in Backbone is MVC, MVP, or MVVM. Let’s see how this promising combo performs in real life. The good thing is that Backbone depends on jQuery, reusing many core functionalities, thus cutting down on the final bundle size. Unlike some other frameworks, such as Sencha Touch, most of the work with jQuery Mobile will be done in HTML5 and CSS3 markup.īackbone.js provides the missing JavaScript architecture, primarily the MV* infrastructure.
Jquery mobile responsive layout upgrade#
Where jQuery brings all of the well known JavaScript features to the table, the ‘Mobile’ part of the upgrade is mostly responsible for CSS and HTML. JQuery Mobile is a minimalistic upgrade to jQuery designed for responsive web sites and platform agnostic web apps. This also means that there are more jQuery developers than those programming in any other JavaScript library, although that doesn’t necessarily guarantee finding quality talent easily.

JQuery – the swiss army knife for cross-browser JavaScript used in well over 50% of all web sites in the world.
