Building iOS/Android mobile app using Backbone.JS, jQUeryMobile and HTML
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.
Front-end technology stack
iOS Inspired jQueryMobile Theme
Back-end technology stack
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 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.
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
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.
In my demo app I used the same approach but now I understand that it is not perfect. See why:
- 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.
- 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.