Skip to main content

jQuery Mobile single-page vs multi-page template

[Updated 2012/02/09]
In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them?


Single Page Template:

Launch - example from previous post, notice the address shown as you navigate
  • Lighter and cleaner. Each page is a separate html file and more modular. 
  • Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers 
  • On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM.
  • The DOM size is relatively smaller
  • Optional to use the "page" data-role element in the code
  • Can turn off Ajax Navigation between pages using data-ajax="false"
  • Recommend to use the <title> tag for page titles
  • The <title> tag always gets precedence during page loads
  • Consumes more bandwidth as each page navigation generates a new request
  • Navigating back to a previously loaded page will again generate a fresh request (with DOM caching you can avoid reloading of the same pages multiple times)
  • First load is faster, but every subsequent page has to be fetched
  • Suitable for larger applications and situations where you want to target as many platforms as possible including platforms which lack JavaScript support



Multi Page Template:

Launch - example from previous post, notice the address shown as you navigate
  • Heavier. All the pages are in a single html file.
  • Needs JavaScript support as Ajax Navigation is used
  • Multiple page containers are present, and only the first one is shown when page loads
  • Large applications with many pages will increase the DOM size
  • The "page" data-role element is required
  • Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
  • Recommend to use the data-title attribute for all page titles
  • On first load, <title> tag is used and subsequent transitions data-title is used for page titles
  • 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
  • Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support
Labels:

Comments

  1. GabbsmoFebruary 8, 2012 at 3:16 PM

    So when should you use what? Why is single page cleaner?

    You make it sound like Multi Page is not good for anything.

    ReplyDelete
    Replies
    1. chetankjainFebruary 8, 2012 at 3:26 PM

      Gabbsmo, Multi-page is definitely useful, I didn't intend to sound like one should never use multi-page. Thanks for the feedback :), will update this page by EOD.

      Delete
    2. chetankjainFebruary 9, 2012 at 11:38 AM

      The page is now updated

      Delete
    3. chetankjainFebruary 20, 2012 at 3:25 PM

      Check the documentation in this page, even jQuery Mobile website recommends single page template apps: http://jquerymobile.com/test/docs/pages/page-template.html

      Delete
    4. venkat reddyFebruary 6, 2013 at 4:36 AM

      Multipage temaplates are superfast and looks way better than single page templates especially on mobile browsers and mobile apps.

      biggest usage of multipage template is developing hybrid apps, which gives rich UI.

      Delete
  2. royshubhojitDecember 31, 2012 at 10:35 PM

    this really good thanks for ur help good going

    ReplyDelete
  3. chetankjainJanuary 2, 2013 at 11:30 PM

    Thanks royshubhojit

    ReplyDelete
  4. AnonymousApril 26, 2013 at 12:33 AM

    I have run both of your examples with the latest JQuery code and data-transition does not work as slide on either when used on the 'a' tag. I have tried changing the global defaultPageTransition setting to none and slide (fade is now the default, not slide) and slide still doesn't work. This behavior is seen on code > 1.0.1. Any idea why this is happening?

    ReplyDelete
  5. AnonymousApril 26, 2013 at 1:07 AM

    Never mind. It works on a phone but not in a web browser. Not sure why the earlier JQuery works in browsers.

    ReplyDelete
    Replies
    1. chetankjainApril 26, 2013 at 10:22 AM

      Hi, Thanks for bringing this to my notice .. will fix it and also this is a reminder that I have to update all other posts to reflect v1.3.1 and changes :)

      Delete
  6. UnknownJuly 17, 2013 at 3:42 PM

    In both case what if i want to manage common navigation header/footer in all pages and having some scripting code in it, then how can i manage it?

    ReplyDelete
    Replies
    1. chetankjainJuly 18, 2013 at 10:15 AM

      Hi Amit, script to do what? can u give an example/code snip where u tried this and faced issues

      Delete
  7. Jeet's BlogOctober 22, 2013 at 3:21 PM

    Nice article! Pretty helpful. What if I have a common header and footer with a navigation in a single page instance, and I want to use a common DOM/script for them as those has to be similar through out the pages.

    ReplyDelete
  8. sam biDecember 12, 2013 at 10:42 PM

    nice article, thank you Chetan!

    ReplyDelete

Post a Comment

Popular posts from this blog

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi...
19 comments
Read more

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesh...
9 comments
Read more

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t...
16 comments
Read more