Building iOS/Android mobile app using Backbone.JS, jQUeryMobile and HTML

There are interesting researches made by Cisco and Ericsson that predicts incredible mobile traffic increase during next few years and a share of it will reach a share of PCs traffic by 2016.

Nowadays almost any major website has a mobile version or responsive/adaptive design that helps to view website on any device. These approaches are quite different, but they work good for content display only. What if you desire to build a rich HTML5 and JavaScript application which interacts with a server and renders pages using theme similar to iPhone or Android one? What kind of technology stack would you use for that?

In this blog post I will answer on the questions above and demonstrate you simple mobile web application that allows to view and save textual posts. There is a Python backend, that stores information in the MongoDB and communicates with a front end using REST approach. Front end is built with the Backbone.js and jQueryMobile.

Below are screenshots of the application (click to view big image in a new window):

Front-end technology stack

Backnone.js

Backbone.js is a JavaScript MVC framework based on Underscore.js, that helps to build complex JavaScript applications. It has Model, Collection, View and Router classes. Model and Collection communicates with a RESTful service, while View renders an HTML page. In View you can bind functions to both Model and DOM events, so if Model is updated, page will be re-rendered automatically. For more information about Backbone.JS, please, visit step-by-step tutorial, Backbone patterns, official reference or a demo app.

jQueryMobile

jQueryMobile is a useful JavaScript framework for building mobile apps. It provides mobile looking components such as lists, buttons, toolbars and dialogs. All mobile pages can be stored in a single HTML file in different divs. HTML file is processed by jQueryMobile that provides many effects for transitions between pages. There is also rich API that allows to interact with a user or to build pages in a DOM dynamically.

iOS Inspired jQueryMobile Theme

iOS Inspired is a special theme for jQueryMobile that makes your web app look and feel like native iOS application. You can also build your own theme with the ThemeRoller.

Back-end technology stack

CherryPy

CherryPy is a Minimalist Python Web Framework that allows to build simple web applications. In this project it is used for a REST server. In production mode CherryPy instances could be run on several servers.

MomPy

MomPy is a Python 3 compatible ORM (Object Relational Mapper) to use MongoDB with Python. It is not perfect but is ok for a demo app. I used it because Mongoengine is not ported to the Python 3 yet.

MongoDB

If you have ever think about scaling your project, you might think about making your database fast. MongoDB is a NoSQL document-oriented database that is easy to use and scale. It ideally works for applications that require big data storage and do not have ttransaction queries.

Backbone.js and jQueryMobile together

Approach

I discovered an interesting blog post by Christophe Coentraetes. He suggested how to use Backbone.js and jQueryMobile together. He disabled router of jQueryMobile and used one from Backbone.js, which made his app more solid. Though there is a side effect (you need manually define weather router item is page or dialog and write custom code to open it) benefit is obvious: you can manually render page in a DOM using Backbone.js.

Problems

In my demo app I used the same approach but now I understand that it is not perfect. See why:

1. Every time when user goes to a next page, new one is created in a DOM, while previous one is removed. Same happens to models and collections too. This degrades benefits of Backbone.js. At least collections and models should be loaded in memory. Also in most cases we do not need to re-create most of the pages.
2. Template handling isn't implemented in the best way, cause there are lot's of different files which needs to be loaded. I think that there should be single template for all pages written in e.g. Mustache. Moreover, elements such as header or footer, could be generated automatically.

Sources and further work

Of course, source code of this demo app is free to dowload. Follow my Github repository to watch updates in future. My plan is to construct skeleton/framework for building mobile applications easily using Backbone.js and jQueryMobile and as example I want to build simple social mobile application to allow people to share something.