Today we’re going to look at building a single page website application using Backbone.js and spwa-backbone libraries.
You can view the source code on Github. You can also view the single page web application example in the /example/ folder. For a more complete example, visit: Single Web Page Example
What is an spwa?
Specifically, an spwa is a single page web application. More generally, it’s a website or application where all (or most) of the content is in a single page. You can have links to other pages but the URL stays the same, except for possibly anything after the hash tag (the pound sign – #).
Why would I want to build an spwa?
There are many reasons to build an spwa. The most obvious advantage is pure speed. Since most of the content is loaded in a single, first request, the subsequent calls are extremely fast.
When you load the example application, you can see that switching from page to page is almost instant. Also, if you open Firebug, you’ll see that there are not additional http requests to the server for each page.
Another major reason is bandwidth considerations for mobile devices. Since all the pages are loaded with the first request, we don’t need to make subsequent calls to the server. Additionally, all of our JavaScript libraries and CSS files don’t need to be re-requested, downloaded or processed. This can save a considerable amount of time and bandwidth.
Will I be able to deep link to a specific page?
Of course! Your application would be pretty worthless if you couldn’t allow your visitors to link to a specific page on your site. The beauty of using this code is that the spwa-backbone and Backbone.js libraries both automatically handle the deep linking.
Will the browser’s ‘back button’ work?
Of course it works! Just like the deep linking, Backbone.js and spwa-backbone handle everything necessary for the back button to work.
How do I get started?
It doesn’t take much to get started with spwa-backbone.
1) The first step is to include the required libraries: jQuery, Underscore.js and Backbone.js. You can use the minified or un-minified versions of each library. It does not matter.
2) The second step is to include the spwa-backbone library.
3) The third step is to create and your content. Each page is enclosed in a script tag, similar to:
Each ‘page’ should have a different id attribute but you must include the ‘-template’ suffix (note the hyphen). Another example of an id attribute would be ‘about-template’. The ‘home’ page is shown by default if there is no page specified in the URL by hash tag.
4) Lastly, create your links. You’ll naturally want to create links between your pages. You link to them using the following convention:
This would link us to the ‘about-template’ page. Notice that there is a hash tag and an exclamation point in the href. This let’s us use the hash tag to change the page and the exclamation point to tell Google to index the page.
That’s it!
It’s very easy. You can create multiple pages and links very quickly. The library will do all the work and routing. Take a look at the example html file for a full example.
Lastly, the un-minified version of the spwa-backbone library is fully commented. If you are curious how the library works, take a look and if you read through the whole file, it should make sense. If something doesn’t make sense or needs a better explanation, please don’t hesitate to let me know.
If you have any questions, comments or requests, please leave a comment below.