Let’s see how this promising combo performs in real life.
Developers often argue whether the pattern presented in Backbone is MVC, MVP, or MVVM. Truth be told, it’s all of them and none of them at the same time. The Backbone pattern takes bits and pieces from each to help structure complex applications that are also clean, maintainable, and, hopefully, fast. Backbone’s loose MV* pattern is stripped of advanced features like two-way data binding or object queries, rendering the library lightweight and performant.
Sencha Touch developers will find it easy to adopt to Backbone’s Models and Collections for evented data manipulation. The Router corresponds to Touch’s Controllers, albeit simplified. The Views are basically templates, which is why Backbone, not being a UI framework, works so well with jQuery Mobile.
Backbone does not enforce a strict class system, though it supports prototypal inheritance and object extensions to help developers create object oriented application architecture. Technically, this part of Backbone belongs to Underscore, a dependency library written by the same authors.
When it comes to DOM control, jQuery is the king of the hill. Even the Backbone’s View mechanism uses jQuery to manipulate DOM. 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.
UI and Theming
jQuery Mobile comes with a couple of dozens themes, all being device agnostic, ie. not trying to mimic native device look and feel. Installing a theme is as simple as including the right CSS file. Customizing theme just as simple with the provided ThemeRoller, an online theming tool.
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. This is particularly important when using widgets.
All of the basic widgets often used for presenting content in mobile environments are available in jQuery mobile. Toolbars, Tabs, Listview, Tables, Collapsible panels, just to name some. 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.
Responsive Design (RWD)
The entire UI is built with RWD in mind. CSS media queries, flexible models, and relative units are the key elements used to make your app responsive out of the box. jQuery Mobile also leverages device-level optimizations to display appropriate layouts based on the screen real-estate and client browser capabilities.
While Backbone works really well on any device, jQuery Mobile is made with smartphones and tablets in mind. Although a jQuery Mobile app will show properly in most modern desktop browsers, desktops are not its target audience. Nonetheless, you can freely customize styles for the intended purposes, making desktop support at least half way there.
Third party plugins
jQuery is famous for the wealth of 3rd party plugins available, and the Mobile continues the tradition. You can find many plugins, extensions and other resources at the official resources web site. At least as rich is the Backbone’s BackPlug repository, opening up endless opportunities for extending the core libraries for your next web application. This is perhaps the stack with more 3rd party plugins than any other.
Grunt is used for jQuery and will be an excellent option for your project. It works fantastically well with Backbone and it’s dependencies.
Backbone and jQuery Mobile both play really well with Cordova (PhoneGap). A more stack-specific tool is not available.
This stack does not support device APIs, but easily inherits from Cordova.
Since there are several libraries involved with this stack, developers will have to deal with several documentation resources as well. Their quality may also vary, depending on one’s skills. Both jQuery Mobile (especially jQuery) and Backbone have been around for a while so there is a really good amount of learning resources available online and in form of books.
Both jQuery Mobile and Backbone are available under the generous MIT license.
What would they say?
A great mix of simplicity, extensibility and capability. This flexible stack is very easy to learn even to the inexperienced developers. The amount of external resources available is staggering, although sometimes dangerous as the quality can be questionable. The number of dependencies to maintain is a downside.
Even non-designers can create beautiful sites with ThemeRoller. The simplicity of the available UI elements is great, but may require extra work to create native-looking or even widgets available with other frameworks.
The huge community is a good resource for talent hunting, whereas the vast availability of learning opportunities will benefit any team in forming. The stack may lack advanced widgets and predefined (and optimized) bindings found with other frameworks, but this also gives the flexibility to custom tailor abstract components exactly as needed, provided sufficient time and budget.