Single Page Application – The jQuery Mobile Way
Single page applications are becoming more and more prevalent in these days. So I thought I’d review how it can be achieved using some of today’s libraries and frameworks, starting with my personal first – jQuery Mobile.
Before actually diving into the matter let’s review over the idea that is single page applications. The idea is based on the notion that to get a better user experience you need to remove hindrances, such as waiting times. think about it – what happens when a user travels inside a site? He reads a bit of data in page one, decides to move to page two, reads a little bit there and maybe moves to another page. During all those transitions the browser made about 50-60 requests per page, now some of those requests are files that are shared between all those pages. Single page applications exploit that fact by grouping all the shared files and saving them into browser’s cache or by saving them into the browser’s storage system.
Now that we got over that boring stuff, Let’s dig into the cool stuff. It starts the same as any html page you add the major css and Javascript files:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> </head> <body> </body> </html>
So here’s where it gets tricky with jQuery Mobile. It all starts with the container:
<div id="page-one" data-role="page" data-title="Page 1"> content goes here </div>
In that container you can start styling your page and pour content into it, and that’s it whenever you go to that page again you will only see the content of that page. And so, when your done with your main page, you just create another container just like the first with a different id and a title of your choosing. The next step is to create another page and then continue on and on till all your pages are set up. Your HTML page at this point would look something like this:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" media="screen"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div id="page-one" data-role="page" data-title="Page 1">...</div> <div id="page-two" data-role="page" data-title="Page 2">...</div> </body> </html>
Thing is, when you view this page you only see the first page so you must be wondering now:
“But Netanel if it’s all one page how do you see and move between the pages?”
Well, that’s simple you just create a hyperlink and redirect to the hashtag with the id of the target page, something like this:
<a href="#page-two">Click here for page #2</a>
The url would be something like this: http://index.html#page-two
.
So that’s Single Page Application using the jQuery Mobile, quite simple you have to admit and keeps the mantra of:
But wait, what if you want to trigger events on page load, such as querying the server for updated information? well here’s where some jQuery magic comes into place, you can achieve page load events in this fashion with:
$('#page-one').on('pageshow', function(event) {
alert("page #1");
});
The structure of this SPA is basically this: the shared CSS files, JS files and with them global variables if you want to use them, so you can even pass data between pages, even though that’s never advised, and you know why! Here’s a small diagram to illustrate this:
In the bottom line here, what did we get? We managed to reuse our code, gave the users a better user experience and overall solid structure for our project.
I’ll be updating this post when i finish uploading a nice little example displaying how it’s all tied up with a pretty little bootstrap bow tie on top soon.
Like always keep tuning in for updates.
Netanel's 