Structure large jQuery Mobile web apps: use iFrames as pages? Backbone, Spine, Underscore, and other frameworks?

Question

We built a web app using jQuery Mobile. It's now nine pages and becoming very unwieldy. jQuery Mobile bundles all "pages" into the same page to simulate the responsiveness of native apps.

We thought about implementing each page as a separate iFrame. The first page contains every iFrame/page and preloads each one. Page transitions happens like JQM by displaying the appropriate page in the viewport. Data is passed between the master page and child pages through iFrame messaging. We think this might be advantageous since:

(1) it won't require additional frameworks;

(2) the web app won't grow beyond 15 pages/iFrames; and

(3) the web app will be accessed through a native app container (ie, PhoneGap) not a mobile browser.

We're also exploring frameworks. From our research on SO and elsewhere, it seems like Backbone and Spine are two great options for structuring large JavaScript projects.

It's less clear how well they manage JQM projects in particular.

We're looking for three things:

1) What options and frameworks exist for structuring large JQM projects (MVC ideally or worst case, any improvement over a monolithic file)?

2) If you have used Backbone, Spine, or any other JS framework with JQM, please share what you liked/disliked.

3) Do you see any glaring problems with our iFrame architecture, aside from the fact it means building proprietary functionality?

Answer 1

Using iFrames seems to be not optimal especially when lots of different light-weight and easy frameworks exist.

JqueryMobile has it's own router. I didn't like it - using hash tags it requires the page with needed hash was in DOM. Of course, it's possible to load pages dynamically but you'll anyway need to create new pages, add them to page container etc. Such way of working with pages is not suitable for me and also overloads DOM.

Also working with JQM it's possible to use Jquery templates - they allow to store pages or different HTML code, that can be parsed later using passed data. These templates and parsing mechanisms seemed to me very simple and easy to use. But they are not suitable if it's needed to parse complex number of data. Also no support for partials (like in ASP.NET MVC). That means, that you cannot store header and footer in only one file and load them as partials for each page. You'll have to duplicate it for each page.

The rest functional of this framework is great. Lots of controls, theming etc. It seems to be a leader for UI creation - without any doubt. The only thing I didn't like - JQM page transitions.

Now about Backbone. It's a powerful and easy framework to create your app using MVC pattern. Actually, there is no JS framework that allows to create real MVC. But basics are true. Models, Views and Controller (Router). Simple creation of new routes, good documentation and lots of samples on GitHub. Powerful mechanisms to work with views and models - their site will show all the features.

I offer to use Backbone + JQM. But in this case you'll have to disable one of routers to avoid conflicts between these frameworks. Only one should stay.

About paging. There is no need to store all the available pages in DOM. You can create only one JQM page with content element and update it dynamically. Store html in templates, get data from services, parse templates and update content element. Backbone has a dependency - underscore. At first sight, I didn't want to use Backbone because of this. But underscore is a powerful framework with lots of useful features. And one of them is - templating. Powerful parsing mechanisms for parsing - support loops, js functions, creation of variables in templates etc. Also do not support partials - but you don't need it, because no need to create new page all the time.

When my app had just few pages - I loaded all my js files (frameworks, helpers, service callers, views, models etc.) and stored underscore templates right on my html page. But supporting of such code is a horror. HTML page became huge. RequireJS framework can solve this problem. It can load not only JS files, but also text templates (using text plugin). All the code in this case will be modular. It's well documented with lots of samples so there is no problem to see how it works. By the way, the last versions of Backbone officially do not support AMD. But it's still possible to load it using RequireJS.

Also think about scrolling of your content. I won't write a lot about it. Just look at iScroll framework.

So, PhoneGap + Backbone + JQM + RequireJS = Success:)

Answer 2

Go with Sencha Touch , and replace all with it.

Answer 3

15 pages doesn't seem that large to me. I really don't think introducing another framework will make things easier for a site of that scale.

I have felt the same frustrations as you, but instead of putting everything in one giant file, have used ajax page loading to dynamically load pages.

To avoid collisions, I'm just careful to prefix identifiers with the page name. It hasn't been that much of a problem.

It's a little annoying that you have to copy paste the into every file (which makes testing a lot easier, and allows multiple entry points to the site), but I've been able to put up with it.

Despite the drawbacks, splitting pages into HTML files helps with the 'wieldiness', especially if you are inlining the javascript on the page.