Building Sinle Page Application With jQuery's Best Friends

SPA   single page application

DocumentCloud's  Backbone.js   Underscore.js  LAB.js and jQuery

templating   to name but a few.

is a three-level bookmarkable image  gallery.

Dustin Diaz's CacheProvider

JSDoc  Toolkit

SPAs are web applications  or websites which persistenly run in the same page

without requiring a reload fr futher navigation.

All of the code needed for your initial load in these applications is driven b

by eiter local data or data rtrieved from a web server on demand , such as

any additional data required from hyour app that might be driven by uer acions

The basic idea behind an SPA is that regardless of whatinteractions your users might have with the application

Why better than Multi-pageApplications

SPAs typically contrast from classical

page hanges are regular and the browser is oftern asked to fetch new content from the server and thn reload to fulfil user requests.

is a way of disrupting the user experience quite ba

changes of application state re handled using approachs such as

XHR calls, making the user experience a lot more

fluid.

consider the idea of state sequence to be equivlent to the concept o pages. Apartical change

implies a change of state in the same way a change of navigation

in a server-side app results in a change of page

How Will Today's App Approach SEO, Hash Routing

and Graceful Degradation?

In today's tutorial, we'll be leveraging the jQuery templating plugin to handle rendering our Backbone

views ad using hash-based routing for the URLs;

normally, without any additional work done , this would

simply result in a blank pag being visible to both search bots  and users

with JS switched off.

So, how do we handle SEO hen bots don;t correctly follow JS powered routes?

How do we also provide an experience for users with JS copletly diabled   In

my opinion the solution to hash-bang/based URLs and

graceful degradatio lie in the same basket.

Backbone.js  and Underscore.js

Collections

Ordeed Sets of Models      Views   Render HTML/css wth JS ttemplating

Models

Interactive Data Domain-specific methods     Controllers   Methods For Routing URL Fragments

a structure fro your cde  where you don't have to tie data so heavily to the DOM

Anoher userful feature is that whn your Backbone models change, te views representing the underlying data

can be notified ,,  causing tem to re-render.

Well it's basically a utility-belt library that provides a lot of the functional support that you would expect in something like Ruby    each, map, isEmpty isElement and more

Going bac toBackbone  views can be created by extending Bacbone view and passing in options models collections etc .  You can als specify a render function on the view to set it up with templating

Client-Side Templating with the jQuery Templating Pluin

create simple client-side teplates that are easily re-usable where templates are written in HTML withtemplate tags whist jQUery code is used for performing the actual data poluplation

var albums = [

{Title:"My Vacation In Malibu", AlbumYear:"1993"},

{Title:"A Trip To the Sea-side", AlbumYear:"1992"}

];

 

var template_markup = "

<ul>

　　<li><b>${Title}</b>(${AlbumYear})</li>

<ul>

";

 

$.template("albumTemplate",template_markup);

$.tmpl("albumTemplate",albms).appendTo("#albumList")

LAB.js   Asynchronous   Script   Loading

Kyle   Simpson's LABjs    Loading And Blocking JavaScript   is a great general purpose scrit loader hic allows you to load Scripts in parallel as the browser allows.

.wait()    in your chain .  

$LAB

.script("jquery.js").wait()

.script("")

.script("relies.onabove.depenccy.js").wait()

.script("app.js");

Today's Single-Page MVC Gallery Appliation

Introduction

Backbone  will be used to provide a taste of MVC

architecture to the ap,Underscore  for it's utility functions

LAB.js for asynchronous script loadig and the

Data caching is something that can ofter be gnored in tutorials about

client-side app developmnt, CacheProvder which allow you to cache data both in memory and using localStorage it it's available.

organize your interface into logical views,

backed by models,  each o whih can be updated independently  when the model changes, without having to redraw the page.

 

<pde;s defined using Backbone.Model contan the interacitve data and logc around the information being used in our application For the g  Photo  to reperent the data around the image entries.

Backbone.Collection allos you to define ordered sets of models which can bid change eventsto the notified wen models in a collection are nmodified

PhotoCollection  

IndexView,  SubalbumView   PhotoView