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.
