jQuery Mobile + Backbone

jQuery – the swiss army knife for cross-browser JavaScript used in well over 50% of all web sites in the world. 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 Mobile is a minimalistic upgrade to jQuery designed for responsive web sites and platform agnostic web apps. 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. Unlike some other frameworks, such as Sencha Touch, most of the work with jQuery Mobile will be done in HTML5 and CSS3 markup.

Backbone.js provides the missing JavaScript architecture, primarily the MV* infrastructure. The good thing is that Backbone depends on jQuery, reusing many core functionalities, thus cutting down on the final bundle size.

Let’s see how this promising combo performs in real life.

MV* Pattern

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.

Class System

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.

Underscore lays the foundation of Backbone’s impeccable performance, empowering JavaScript developers with a number of helpers (e.g. Object/Array/Function utilities), many of which make use of native ECMAScript 5 components in modern browsers. It even introduces more advanced OOP features such as mixins.

DOM control

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.

Widgets

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.

Desktop support

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.

Extensibility

Being particularly simple, the need for extending any of the JavaScript libraries is minimal. Basic extending, à la Crockford’s (or more appropriately Resig’s) prototypal style is available in both Backbone and jQuery. Since a few methods exist in both jQuery and Underscore as duplicates in various flavors, it’s a good idea to benchmark each version and use the one more performant for the particular usage. Examples include each(), bind(), proxy(), and other methods.

Building tools

Grunt is used for jQuery and will be an excellent option for your project. It works fantastically well with Backbone and it’s dependencies.

Packaging (native)

Backbone and jQuery Mobile both play really well with Cordova (PhoneGap). A more stack-specific tool is not available.

Device API

This stack does not support device APIs, but easily inherits from Cordova.

Documentation

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.

License

Both jQuery Mobile and Backbone are available under the generous MIT license.

Community

These two popular libraries also take pride in having large and active communities. Many JavaScript and overall web-dev celebrities will often contribute the source codes or write books and blog posts. Most JavaScript conferences will feature at least one talk concerning either of the two libraries. StackOverflow hosts almost half a million questions related to any of the libraries in this stack.

What would they say?

JavaScript developer:
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.

Designer:
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.

Product manager
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.

Five Best Mobile Web App Frameworks

Posted in
Share this

Grgur Grisogono

Grgur Grisogono is a software architect at Modus Create, specializing in JavaScript performance, React JS, and Sencha frameworks. He helped clients ranging from Fortune 100 to major governments and startups successfully release enterprise and consumer-facing web applications. He has also organized three tech conferences and co-authored Ext JS in Action SE. If Grgur's posts were helpful, maybe his 16 years of experience could help your project too.
Follow

Related Posts