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

Submitted by vadim on Sat, 05/26/2012 - 21:37

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.

50 comments

Friv

Submitted by Friv (not verified) on Thu, 04/24/2014 - 23:48.

Its opportunity are so fantastic and working style so speedy. Friv

Very interesting topic, i got

Submitted by is bubblegum casting legitimate (not verified) on Tue, 04/01/2014 - 12:27.

Very interesting topic, i got a lot of information from your post, thank you for sharing with us.

Well It’s confronted with

Submitted by Scottish Trust Deeds (not verified) on Sun, 03/30/2014 - 11:07.

Well It’s confronted with responsibilities such as funding treasury expenses, industrial documents as well as lenders acceptances. Scottish Trust Deeds

I enjoyed

Submitted by Anonymous (not verified) on Sat, 03/22/2014 - 00:21.

Excellent post my friend. This is exactly what I've been observing for for quite a time now... Thanks for this wonderful post! It has been extremely useful.vectores gratis

If you are a learner in

Submitted by Anonymous (not verified) on Mon, 03/10/2014 - 10:38.

If you are a learner in demand of a quite-tailored notwithstanding edited think composition, besides Intact Thesis is the harmonize-true you demand. Its gigantic fact in the jurisdiction ritual manual percentage calls it skill to country, that Virtue Venture is 100% efficient further springy amenity.ecift

Well would like to thank you

Submitted by link (not verified) on Mon, 03/31/2014 - 23:52.

Well would like to thank you for your nicely written post, its informative and your writing style encouraged me to read it till end useful web tools

I am preparing a research

Submitted by Anonymous (not verified) on Tue, 03/04/2014 - 14:49.

I am preparing a research paper and collecting information on this topic. Your post is one of the better that I have read. this site

audio bible

Submitted by ankurs127 (not verified) on Mon, 03/03/2014 - 17:27.

Daily audio bible is a Devotional website,
it has Bible Studies and Prophecy Studies.
It's a Christian Ministry that exemplifies inspiration,
fellowship, encouragement, prayer,
laughter, and friendship which come together,
strengthening our walk in audio bible.

financingabusiness

Submitted by Anonymous (not verified) on Tue, 03/04/2014 - 09:48.

Lots of reasons exist why you need to not only enter business, but additionally endure running a business. You might want to take these decisions due to the love of the particular company. financingabusiness

financecourse

Submitted by Anonymous (not verified) on Tue, 03/04/2014 - 09:47.

Financial courses educate you on the research of fund and it is management. A few of the major places in monetary management consist of business financial and individual finance. financecourse

www.financemarkets.org

Submitted by humortum (not verified) on Tue, 02/18/2014 - 14:10.

Lending marketing is normally developing right into more accessible with your continuing production of cyberspace to smartphone's. www.financemarkets.org

getinsuranceonline

Submitted by Anonymous (not verified) on Tue, 03/04/2014 - 09:48.

You will observe that within processing most very existence insurance estimates, you will be asked to present lots of detail regarding yourself. All these details on your lifetime may appear irrelevant for you or as well detailed but it's important to determine the high quality rates. Such info revolves around how old you are, gender, as well as medical information. getinsuranceonline

www.financemagazines.org

Submitted by humortum (not verified) on Tue, 02/18/2014 - 14:10.

In the present highly demanding business enterprise, subscribing to make sure you popular home business and lending magazines are usually important than in the past. www.financemagazines.org

www.financeaid.org

Submitted by humortum (not verified) on Tue, 02/18/2014 - 14:10.

If your main past lending log isn't really impressive enough to present you in the form of safe borrower while you are for dire will want of finances, don't lose hope. www.financeaid.org

I have enjoyed reading. Nice

Submitted by bubblegum casting (not verified) on Mon, 02/17/2014 - 19:23.

I have enjoyed reading. Nice blog. I will keep visiting this blog very often..bubblegum casting

Accident Claim

Submitted by Accident Claim (not verified) on Sun, 02/09/2014 - 13:39.

I would be very thankful if you continue with quality what you are serving right now with your blog.Accident Claim

Riverbank

Submitted by Riverbank (not verified) on Thu, 02/06/2014 - 20:03.

This is my first visit to your blog! We are a team of volunteers and new initiatives in the same niche.Riverbank

Great Article, keep up the

Submitted by Riverbank Fernvale (not verified) on Thu, 02/06/2014 - 10:59.

Great Article, keep up the good work and thanks for sharing this with us. Riverbank Fernvale

1 celebration might be

Submitted by Maydi (not verified) on Tue, 03/25/2014 - 10:53.

1 celebration might be concerned that they’ll free monetary property regarding the actual separation and divorce. Placing the pre-nup in position prior to the relationship might help avoid this issue. lawyer colleges

In order to make enough time

Submitted by Maydi (not verified) on Tue, 03/25/2014 - 10:53.

In order to make enough time specific you will need to program out there specific items beforehand simply which means your moment and also funds equally complements properly with all the household periods. kids and parents care

You will have to possess

Submitted by Maydi (not verified) on Tue, 03/25/2014 - 10:53.

You will have to possess practical anticipation by what you are able to as well as can’t perform. Occasionally, you’ll have to state absolutely no since you just can’t get it done just about all. introduction to law

interesting review

Submitted by jual baju batik pekalongan online (not verified) on Sun, 01/26/2014 - 01:43.

every day always just around the virtual world for friendship greetings to all bloggers around the world ... well. I hope what you write and post on this blog useful for us all. grosir jilbab murah tanah abang | grosir jilbab syria murah

CherryPy is a Minimalist

Submitted by Anonymous (not verified) on Tue, 01/14/2014 - 04:21.

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. This article is worth to have a read. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. Cheap DVD on Sale

Kudos to Sebastian Ilves!

Submitted by KDrcyber (not verified) on Fri, 01/10/2014 - 10:27.

Kudos to Sebastian Ilves! this was a pretty good application. Me and my friends had great fun using it. go to this site I hope you will come up with such new apps that can give us quality entertainment time. Thanks for the share!
Mobil Sedan COrolla dan Online Indonesia Terpercaya dan Cipto Junaedy

Looking forward to reading

Submitted by The Hillford (not verified) on Wed, 12/18/2013 - 23:43.

Looking forward to reading more. Great blog.Really thank you! Much obliged. The Hillford

Thank you very much for a

Submitted by Anonymouses (not verified) on Wed, 12/25/2013 - 09:59.

Thank you very much for a very useful article. Best of luck always to the author.
Cipto Junaedy, Mobil Sedan COrolla, Mobil Sedan COrolla, Cipto Junaedy

Hutchison

Submitted by Hutchison (not verified) on Wed, 11/27/2013 - 13:53.

Simply wished to point out you are doing Hutchison a fantastic career along with drupal.... Thank you regarding every little thing, My partner and i be thankful! Use a pleasant morning.

People associated with a

Submitted by office 2010 professional (not verified) on Thu, 03/06/2014 - 07:23.

People associated with a little or big business, you might be wondering whether there’s a difference within the web style techniques which are commonly employed for each. office 2010 professional

If classic style is the dream

Submitted by outlet shopping guru (not verified) on Thu, 03/06/2014 - 07:23.

If classic style is the dream wedding style, search on the internet now for that beautiful classic wedding accessories of the dreams, and help to make your wedding a classic day to consider. outlet shopping guru

Happening vacation and have

Submitted by home security software (not verified) on Thu, 03/06/2014 - 07:23.

Happening vacation and have to inform your social networking friends over it? That won’t be an truthful plan. Thieves tend to be continuously attempting and being mindful of realize opportunist focuses on. home security software

I discovered an interesting

Submitted by Anonymous (not verified) on Mon, 11/18/2013 - 08:12.

I discovered an interesting blog post by Christophe Coentraetes. He suggested how to use Backbone.js and jQueryMobile together. This article is just what I like, it writes very well. Thanks for your marvelous posting! I actually enjoyed reading it, you will be a great author.I will ensure that I bookmark your blog and will come back in the foreseeable future. American Horror Story Seasons 1-2 DVD Box Set | 2 Broke Girls Seasons 1-2 DVD Box Set | Touch Seasons 1-2 DVD Box Set | Homeland Seasons 1-2 DVD Box Set | Sherlock Seasons 1-2 DVD Box Set | Modern Family Seasons 1-4 DVD Box Set

Reply to comment | Vadim Mirgorod

Submitted by clean (not verified) on Thu, 02/27/2014 - 21:27.

Hi, I do believe this is a great site. I stumbledupon it ;
) I'm going to revisit yet again since I book marked it.
Money and freedom is the best way to change,
may you be rich and continue to help other people.

There are interesting

Submitted by Anonymous (not verified) on Mon, 11/18/2013 - 08:11.

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. This article is useful for me. I like it very much. I could have sworn that I visited this blog before but after browsing some of the post I realized it was new to me. Anyway I am really happy that I found and I ll bookmark and check back regularly! 30 Rock Seasons 1-7 DVD Box Set | Lie to Me Seasons 1-3 DVD Box Set | Star Wars The Clone Wars Seasons 1-5 DVD Box Set | Californication Seasons 1-6 DVD Box Set | NCIS Los Angeles Seasons 1-4 DVD Box Set | The Tudors Seasons 1-4 DVD Box Set

Hash Table is a testinside

Submitted by Anonymous (not verified) on Tue, 11/05/2013 - 14:02.

Hash Table is a testinside 000-225 peer-to-peer system that provides lookup service in the similar way how regular hash table does. One of the popular implementation of DHT is file sharing used in BitTorrent Protocol, it allows to download files without use of the tracker. 000-225 exam

thank u

Submitted by Vladimir S (not verified) on Fri, 11/01/2013 - 14:56.

Dear Vadim Mirgorod,

Just wanted to say that you are doing an amazing job with drupal.... Thanks for everything, I appreciate it! Have a nice day

Your Friend
Vladimir

Green Power International was

Submitted by green (not verified) on Tue, 10/22/2013 - 13:28.

Green Power International was established in early 2002 in close cooperation with MWM GmbH (formerly Deutz Power System GmbH).
Gas genset
H2S removal processes
Portable gas generator

Year 2012 has been quite

Submitted by Rodene (not verified) on Fri, 10/18/2013 - 13:38.

Year 2012 has been quite eventful. SRSG also witnessed events and evolved in terms of business verticals, technologies, people and processes.
System integration
News room automation
Broadcast consultancy services

Places to VisitIn Florida

Submitted by emily.bronte (not verified) on Thu, 09/05/2013 - 18:40.

best part of this post is Every time when user goes to a next page, new one is created in a DOM, while previous one is removed.
thanks
Regards
Emily.Bronte

Wish me luck

Submitted by Best Android Tablet Apps (not verified) on Wed, 03/20/2013 - 20:51.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Thanks for your teach, I will try myself. Wish me luck

Re - Building iOS/Android mobile app using Backbone.JS, jQUeryMo

Submitted by Logo Design (not verified) on Fri, 09/28/2012 - 12:09.

Thanks for sharing the technique and tips you have used before. As a beginner i always face some trouble in integration of Apps and other things with iOS.

Cisco is the industry leader

Submitted by Cisco Sales Expert (not verified) on Wed, 12/04/2013 - 22:24.

Cisco is the industry leader in information technology, and getting certified by them is a guaranteed way to succeed with IT careers. We help you do exactly that with our best quality Cisco 200-120 Cisco Certified Network Associate CCNA (803) training materials. http://www.uniquedumps.com

Hello there

Submitted by Olly Richardson (not verified) on Tue, 07/24/2012 - 15:42.

The iOS inspired theme was very cool in the eyes. Besides, my mom have complimented that my phone have better theme background because a reader can easily get and read the thought on it. I am very glad for this! Thank you so much!

great article

Submitted by delfo (not verified) on Fri, 06/15/2012 - 23:35.

sounds like the perfect couple on client side. willing to try it with processing.js on top.
whether the forecast will be confirmed or not guarantee flexibikity and pltform independency sounds like a great thing.
the maintenance and testing of apps on all the handsets on the market it's a monkey job

Rubber sheets, which are used

Submitted by Rubber Sheet (not verified) on Fri, 09/06/2013 - 10:34.

Rubber sheets, which are used as padding for floors, seats, and tools or equipment, can be cut using regular paper cutting scissors, but the process would be difficult. Regular scissors are too weak to cut through rubber sheets easily and attempting to do so may result in crooked lines and injury from overexertion. Rubber Sheet

Attractive Checker/Diamond

Submitted by Gym Mats (not verified) on Tue, 09/24/2013 - 10:50.

Attractive Checker/Diamond Embossed Pattern High Oil, Grease & Chemical resistance Excellent slip resistant characteristics Suitable for wet & dry areas High insulation properties Gym Mats

Internet Cafe provides all

Submitted by Internet Cafe software (not verified) on Thu, 10/03/2013 - 13:58.

Internet Cafe provides all the features you need to run a successful gaming center or an Internet cafe. It does not annoy your customers with forced advertisements. It makes them enjoy and come back.

Internet Cafe provides all

Submitted by Internet Cafe software (not verified) on Thu, 10/03/2013 - 13:59.

Internet Cafe provides all the features you need to run a successful gaming center or an Internet cafe. It does not annoy your customers with forced advertisements. It makes them enjoy and come back. Internet Cafe software

If you want to get some work

Submitted by HotSpot Billing (not verified) on Fri, 10/04/2013 - 07:15.

If you want to get some work done but are sick of being cooped up in your home or office, there are options for you. Bring along your laptop as you head out to a coffee shop, bookstore, mall or even some outdoor locations, and enjoy the company of other humans while you keep up with your workload. HotSpot Billing

You can turn a Wi-Fi-enabled

Submitted by Free HotSpot (not verified) on Thu, 10/03/2013 - 10:17.

You can turn a Wi-Fi-enabled Windows laptop into a Wi-Fi hotspot by using Microsoft's Internet connection sharing (ICS) feature. hotspot software This feature is enabled through the laptop's Network Sharing properties. Free HotSpot

Thanks for sharing such great

Submitted by Smartkathy (not verified) on Tue, 06/12/2012 - 10:19.

Thanks for sharing such great information which is very useful to android developer who is trying to find Backbone.JS, jQUeryMobile and HTML. I am hoping to get some more new updates from your side.