8

In my phonegap/jquery mobile app, the multi page model is been used. index.html have all the pages of my app, so far 6 pages . If this app would grow too much and it turned to be 19 pages in a single html file, would it be bad? I created other app to test and used one html file to each page. But looks like every time the page is changed, the whole DOM is loaded again, is that right?

Please tell me which structure is better for a big app

Gajotres
  • 57,309
  • 16
  • 102
  • 130
Rodrigo Dias
  • 1,331
  • 2
  • 13
  • 18

2 Answers2

28

When working with jQuery Mobile first thing to think about is what kind of page template should I use. I have already talk a little bit about this topic in one of my previous ARTICLES and now I have a need to clarify this part of a story a little bit more.

To make a story short (I am not going to talk about page architecture, everything you need to know can be found in a previous link). This answer can also be found on THIS location, to be transparent it is my personal blog.

Multi HTML page template:

This is a template where one jQuery Mobile page is placed inside a single HTML page.

Good

  • Smaller and lighter, each data-role="page" is inside a separate HTML file and page structure is much more modular.
  • Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn't data-role="pšage" div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
  • DOM size is relatively small, only first page is permanently loaded into the DOM, any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
  • Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app mainly because AJAX can be turned off.

...vs the bad

  • Consumes more bandwidth as each page navigation generates a new request. When moved from every page will be permanently removed from the DOM, unless cashing is turned on.
  • Navigating back to a previously loaded page will again generate a fresh request.
  • Initial page load is fast but subsequent page loads are slower then in multipage template. This can cause problems during page transitions, more so on mobile devices. Desktop browsers don't have this problem.
  • Much more suitable for desktop browsers then mobile browsers. Also suitable for larger applications, again this is problem for mobile devices.
  • Pageinit event will be triggered each time page is visited (for those who don't know this an event that replaces document ready in jQuery Mobile and thus it should run only once), which consequently causes problems with multiple event binding.
  • Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page.

Multipage template

This is a template where one or more jQuery Mobile pages are part of a single HTML file.

Good

  • Since all pages are already loaded, no additional requests are generated for navigating between pages.
  • First load is slower as the file size is larger, but subsequent page navigation is fast, thus making transitions much more smooth. Almost native like smooth, emphasize on almost.
  • Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution for a hybrid app. It works much much better as a Phonegap app then multi HTML template.
  • The "page" data-role element is required.

...vs the bad

  • Heavier. All the pages are in a single html file. Large applications with many pages will increase the DOM size.
  • Needs JavaScript support as Ajax Navigation is used.
  • Multiple page containers are present, and only the first one is shown when page loads.
  • Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
  • Heavily styled pages can become sluggish on mobile devices.

In the end, the secret of a good jQuery Mobile page architecture is somewhere in the middle.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • A few comments: **1)** Single page templates are not lighter, they're heavier, since you have to download a bunch of HTML that you'll never see each time you visit a page. **2)** You can turn off AJAX navigation using either method globally before jQuery Mobile initializes. *****)** The most important thing is that the blog you posted a link to is too old to be relevant. The blog post is almost a year old right now, and for this particular framework, that's a long time, it's matured a lot in the last year. See my comment on Leng's answer about cell signal, it's a very important consideration. – Jasper Jan 03 '13 at 23:36
  • Jasper, your definitions are reversed, see JQuery mobile docs. "Single page" means one page per HTML file while "Multipage" means multi-pages per HTML. Using these standard definitions, Gajotres has the correct bullet points. The blog post he lists may be old but it is still relevant. – donramos Jan 04 '13 at 00:59
  • @donramos The definitions you posted in your comment are the same ones I used. **1)** If you have 5 single page templates, they will weigh more combined than if you have just one multi page template with 5 pseudo-pages. This is because everything outside of the first `data-role="page"` is transferred over the network however not used (stripped-out by jQM). – Jasper Jan 04 '13 at 20:04
  • 3
    Using Phonegap, I have 2 templates with 5 pages the first, 8 pages the second in 2 separate html files `index.html`, `inputs.html`. When navigating back and forth this 2 main pages, I get Phonegap errors as sometimes my database object does not get initialised in time and yes, I am binding to `ondeviceready`...So if you are using Phonegap, put everything in a single file. – Paranoid Android Sep 12 '13 at 10:38
  • A multipage html file has a big browser history limitation if you have recursive data / navigation. For instance you are editing a tree or list data structure and use a single page to edit a node `#pageNode`. On this page you can traverse the node to load a child node, but the page remains idential. For this structure we use a hybrid approach using a querystring parameter to idenfity current node. This way we preserve history. – djmj Apr 03 '17 at 01:31
2

Your code will be easier to maintain and update if you break each page into its own html file.

Sometimes you want to animate between every page, or have an input form that has the illusion of being multiple pages but is in fact multiple divs on the same page. In these and many other cases, using one page has distinct advantages. If you have no real need for that kind of functionality, though, break apart your site.

Leng
  • 2,948
  • 2
  • 21
  • 30
  • When each page has its own html file and a changePage happens, does it load all css/js files and the whole DOM? Is it slower? – Rodrigo Dias Jan 03 '13 at 18:03
  • 1
    How is splitting code onto several documents easier to maintain (just wondering about your thoughts on this)? Using a single document with multiple pseudo-pages has a great advantage for mobile devices in latency. Cell phones can easily take several seconds to ramp-up their cell signal, based on current activity, so loading it all at once reduces this ramp-up time between pages. If you want your site to feel native, use a multi-page template. If you want to convert a desktop site into a mobile one, I'd use single page templates so you don't have to recreate the site. – Jasper Jan 03 '13 at 19:33
  • 1
    @RodrigoDias When external pages are loaded in jQuery Mobile, only the first `data-role="page` element is grabbed, so subsequent pseudo-pages are not grabbed, nor is anything in the `` of the document (or more specifically, anything outside the first `data-role="page"` element). – Jasper Jan 03 '13 at 19:35
  • Interesting, when a external page is loaded the content is grabbed. In the transition to another page it is removed from DOM. – Rodrigo Dias Jan 04 '13 at 12:07
  • @RodrigoDias No - whenever a new page is loaded, any already loaded js and css files will already be in the browser's memory, regardless of what type of device is used (phone / laptop / ipad / etc). – Leng Jan 04 '13 at 18:38
  • @Jasper Please note that the advantage is that the DOM will only load the particular page that is viewed. This has many advantages: Your server uses less bandwidth, pages load more quickly, and your site is easier to maintain. Don't forget to use includes for any part of the site that remains the same on multiple pages so that you only have to update one file and not multiple. I'm not sure what you mean by "ramping up signal", I've never experienced that personally. – Leng Jan 04 '13 at 18:40
  • 1
    @Leng Here is a great article that describes the phenomenon: http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/. Also, I know this is kind of an open ended question that doesn't really fit S.O. but so is this answer, could you explain any of your assumptions (for instance having multi-page forms or page-animations is pretty much the same using either method)? – Jasper Jan 04 '13 at 20:07
  • @Jasper I wouldn't call my statements assumptions, they're merely opinions. I do not observe the phenomenon you are describing, even when I'm outside the city. So I am of the opinion that unless something is a lot easier to code with all the pages in one html file (such as animation transitions and forms), then I prefer to have separate http requests for data so that server bandwidth is reduced and download time is increased. You can accomplish animations and forms with multiple pages, but I'm speaking about simplicity's sake. Upvote for the article. – Leng Jan 05 '13 at 04:11
  • @Jasper I'm not familiar with the mobile-specific jQuery library - was reading your writings on it and saw the page slide loading html features. That's cool stuff. I guess I need to try the mobile-specific jQuery library. – Leng Jan 05 '13 at 04:18