Maciej Rumianowski's Weblog 

jQuery Mobile application with Backbone.js

by Maciej Rumianowski


Posted on Monday Jul 20, 2015 at 07:35PM in General


jQuery Mobile (jQM) is a nice framework for User Interface in HTML5 and Javascript that is primarily optimized for touch oriented applications. jQM is just an UI, so to have a complete mobile application it is advisable to use other tools. In my example application I used following tools:

  • Backbone.js for application structure with division between Model and View
  • LoDash (compatible with underscore) for templates and other helper methods
  • RequireJS for structuring the application into modules

All the code shown in this post can be found at github.com/rumianom/fotonote.

Application for now runs only in a browser, but later with help of Apache Cordova it will be enabled for other platforms as a packaged looks-and-feels-like-native mobile application. To support that, application was initialized with cordova command line and following folders were created: hooks, platforms, plugins and www. For now the most important is www in which all the app code sits. Additionally, there are two folders node_modules and test, the former is for Node.js and the latter for both unit and component (BDD) tests.To start the app simply open index.html in www dir.

Backbone.js

I have used Backbone.js to give a solid structure to the application and not reinvent the wheel. Backbone.js provides Models, Collections of these Models and Views. Model is a wrapper around domain data that gives change management functionality and leaves space for domain logic. Collection as the name suggests provides methods to deal with group of Models and is very useful for displaying and modifying a list. View combined with templates is very good concept for managing screens in the application. Examples of each are shown below:

Model representing a Note with a title and a text, on construction title is set to default value based on text.

A Collection of Notes.

Main screen View.

Another useful element of Backbone.js is a Router and Events which provide greater control over navigation and user interactions. Router has methods to go from one view to another and update URL to a meaningful value. Events provide a way to bind callbacks to user actions in the UI or any event triggered by the application (for example an element added to a collection). Router is a replacement for built-in navigation in jQM, so additional configuration is needed for it to work. Both configuration and Router are shown on below snippets.

Router with home, add and note routes to change page/view of mobile jQM app.

Configuration for jQuery Mobile with Backbone.js Router

LoDash

Each View in the app extends PageView which enables UI to be rendered from templates based on their pageId. In www/js/app/templates reside all templates for the application and each is named by view's pageId. These templates are in underscore.js format, example is shown below, which are a mix of html code and "<%= property %>" tags. Views populate properties in template on a render method as shown in a PageView snippet.

Template for Note screen

Root View for all pages in the application.

LoDash is an implementation of underscore that brings improvements and keeps compatibility with original underscore.js library. LoDash is used directly in the app mostly for templates and implicitly by Backbone.js for other methods. In the app templates are pre-rendered in a build process, which will be explained later.

RequireJS

All of the libraries and application modules are loaded by RequireJS. Configuration for it can be found in www/js/index.js, shown below. All application modules are in www/js/app and are divided into models, templates and views - an example of each is shown in above snippets.

RequireJS configuration that is loaded by index.html on startup

Thanks to RequireJS each module encapsulates piece of functionality and directly declares its dependencies. For each of the modules the implementation can be hidden behind public interface allowing modules to be loosely coupled. Similarly each module can be unit tested in isolation from its dependencies, an example of unit test is shown below and all unit tests can e found in test/unit folder. Unit and component testing will be described later.

PageView unit test

Finally jQuery Mobile

With all the code explained above adding now jQuery Mobile UI is very easy and quick. To have a look and feel of a mobile application html code just needs two attributes added: data-role and class; for example: header, main, or navbar - each one used in home.jst template. These attributes control how jQM constructs elements of pages and their behaviour. However some of the widgets can be constructed programmatically. In jQM each displayed screen is a page and PageView with AppRouter is taking care of converting views and templates into pages - mainly AppRouter.changePage() method.

Another thing is jQM's Listview widget which is embedded in HomeView and managed by ListView. The ListView module handles events between an underlying collection and the widget, so that on add, delete or initialization widget is refreshed and rendered. For example when user clicks a delete button for a note in the list following steps happen:

  • a deleteItem method is called (this is declared in events section),
  • item is removed from the collection and this triggers a remove event,
  • which is bound to remove method (binding is declared in render method)
  • and the note is removed from the Listview widget.
Below is the source code of ListView that handles all described above

ListView handles event between an underlying collection and a Listview widget

Summary

With all that was presented in this post the mobile application is born - have a look yourself!



No one has commented yet.

Leave a Comment

HTML Syntax: NOT allowed