Building SPA’s (Single Page App) with Backbone.js

Where to start

• Consumerisation of technology has had a large impact on how we
build apps

• Affordable portable devices means that consumers care more about
mobility

• Customers desire their product to be available on a wide range of
devices for consumers

Impacts on development

• Multi tenanted development teams

• HTML stack / .net stack / iOS stack / Java stack

• Management of source code, testing, maintainability, consistency

Snooze you loose

• Building x-platform x-device app

• Targeting wp7 and windows 7 tablet

• Performance problems with .net client side implementation

• Rebuilt in html and js

A time for change

• Build apps that meet these needs

• Touch based

• Mouse based

• Consumable on anything anywhere

• Development costs

Something's never change

• Software craftsmanship

• Still face the same problems

• Changing implementation language does not make it easier

• Actually some of the problems get bigger…much bigger!

• Browser inconsistency

Something's do change

Improvements in

• Browser performance
• HTML
• CSS
• ECMA Script
• Frameworks
• Development tools

And so the journey begins

Client side Architecture

 Async communication mechanism with server
 MV* framework
 Local storage mechanism
 Responsive web pages
 View management
 Data management
 UI interactions to enhance the experience


 MV* framework
 View management
 Data management

Async Communication

• Endpoints are REST based
• Endpoints support JSON and Xml – JSON is preferred
• jQuery $.ajax(query options)

$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: “Birmingham" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});

MV* framework

• Extensive range of JS frameworks that support MVC, MVP and MVVM

• YAFS! – each week there seems to be a new one

• IMHO there should be more focus on scaffolding tools

• Confused! Try this out! http://todomvc.com/

MV* framework – KO js

I want something that will make it easy to build complex dynamic UIs with
a clean underlying data model and declarative bindings.
It should automatically update my UI on model changes using two-way
bindings and support dependency tracking of model data.
I should be able to use it with whatever framework I prefer, or even an
existing app.
It should also come with templating built-in and be easily extensible.

Resource: Addy Osmani

MV* framework – backbone js

I want something flexible which offers a minimalist solution to separating
concerns in my application.
It should support a persistence layer and RESTful sync, models, views
(with controllers), event-driven communication, templating and routing.
It should be imperative, allowing one to update the View when a model
changes.
I’d like some decisions about the architecture left up to me. Ideally, many
large companies have used the solution to build non-trivial applications

Resource: Addy Osmani

Local Storage - amplify

• Amplifyjs http://amplifyjs.com/

• Simple to use as everything is all done via key value pairs

• Amplify works out what browser your app is running in and makes a
choice which local storage option to use

 Local Storage if available (latest browsers)
 Cookie in older browsers

Responsive layout

• As I eluded earlier supporting x-devices, x-browser means that we
need to up our game

• We want to be pragmatic about it and thus avoid tumbling/cascading
conditional blocks of code to handle the different browser

Responsive layout - bootstrap

• Bootstrap http://twitter.github.com/bootstrap/

• Bootstrap provides everything that we need to build responsive web
pages

• Provides a 12-column responsive grid

• Builds on CSS media queries to provide responsive functionality

• Uses LESS to help with maintainability of CSS from a Developer
prospective

View Layout Management

• Layout Manager https://github.com/tbranyen/backbone.layoutmanager

• When building a complex UI there is always the issue of how we
manage our views and also our sub-views

• Reusable views

• To be pragmatic we want to insure that we adhere to the DRY principle

• Backbone does not provide a formalised way for how we do
templatingttps://github.com/tbranyen/backbone.layoutmanager

Single Page App Design

• Taking Ajax to the next level

• Provide a UX which is closer to an app or desktop app UX

• Our application UX all happens in a single page and is not spread
across multiple pages

• Don’t think about a web site think about an app a web app experience

Ajax everything…

• Dynamically loading templates

• Html templates are defined on the server and loaded async when
required

• Html templates are associated with the backbone view

• Layout manager provides a strategy for managing views

Everything ajax…

• Asynchronous Module Definitions

• Use Requirejs http://requirejs.org/
•
• Provides a mechanism for include/import/require
• Ability to load nested dependencies

• Ease of use for developer but then backed by an optimisation tool that
helps with deployment

Data Management

• Backbone paginator
https://github.com/addyosmani/backbone.paginator

• Pagination of data

• Client side pagination

• Server side pagination

https://github.com/addyosmani/backbone.paginator

UI Interactions

• jQuery does everything that you need and more

• jQuery and Backbone play nice together

• jQuery Mobile


Bucket list

 MV* framework
 View management
 Data management

Tool up

• BDD / TDD

• Grunt

• Sublime Text Editor

• Development server

Jasmine

• Jasmine http://pivotal.github.com/jasmine/

• Does not depend on any other JS framework

• Does not require a DOM

• Given, When, Then syntax

• Works on windows 8!

Grunt

• grunt http://gruntjs.com/

• Requires Node – install using npm grunt

• Provides the ability for developers to have a pseudo compilation
mechanism

• MSBuild analogy where by developers can create a script that
performs a series of actions

Grunt

Build Script
• Run tests

• JSHint code
• http://www.jshint.com/

• Uglification / Compression of code
• https://github.com/mishoo/UglifyJS

• Bundling of code ready for deployment

Sublime text editor

• Nuget style package management console

• Support for backbone snippets

• Support for jQuery snippets

• Supports grunt build files

• Supports jshint configuration

Web Matrix

• Local Server for running web apps

• Awesome for deployment to Azure

• Has its own editor

Backbone
view

Events
Models
Collections router events

Views
Routers

collection model

http://backbonejs.org/

events

Router

• Provides methods for routing client-side pages, and connecting them
to actions and events

• Until recently, hash fragments (#page) were used to provide these
permalinks, but with the arrival of the History API, it's now possible to
use standard URLs (/page)

• For browsers which don't yet support the History API, the Router
handles graceful fallback and transparent translation to the fragment
version of the URL

Router
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},

help: function() {},

search: function(query, page) {}
});

Events

• Events is a module that can be mixed into any object
• Provides the ability to bind and trigger custom named events
• Normally used in the view so that it can update when our model
changes

this.model.on("destroy", this.close, this);

this.model.on(“reset”, this.addAll, this);

this.model.on(“add”, this.addOne, this);

Models

• Models are at the heart of any js app

• Models contain interactive data as well as a large part of the logic
surrounding it

• Models are databound to the html

• Models can also be extended to help contain common functionality

• By convention the initialise function gets called with the arguments
passed into the constructor

Collections

• Collections are ordered sets of models

• Bind “change” events to be notified when any model in the collection
has been modified

• Common change events to listen for
 Add
 Remove

Collections

Fetch()

• Call to populate collection with data

Collections

Sync(crud method, model, options callback)

• CRUD – Create, Read, Update or Delete

• Model – Model to be operated on

• Options – callbacks success and error

Collections

CRUD to REST

• Create -> POST /collection

• Read -> GET /collection[id]

• Update -> PUT /collection/id

• Delete -> DELETE /collection/id

Views

• More convention than they are code

• They don't determine anything about your HTML or CSS for you, and
can be used with any JavaScript templating library

• Organize your interface into logical views, backed by models, each of
which can be updated independently when the model
changes, without having to redraw the page

• Bind your view's render function to the model's "change" event and
now everywhere that model data is displayed in the UI, it is always
immediately up to date

Backbone
view

router events

collection model

events

MVVM
view

View
events
model

collection model

events

Underscore

• http://underscorejs.org/

• 80 odd helper functions

• Works seamlessly with jQuery and Backbone

• Provides the ability to shape data similar to how we would use linq or
lambda in .net

• Provides the ability to add script into our html templates

Underscore

Shaping data

• each

• map

• where

• sortBy, groupBy

Underscore

Templating

Works in the same way as other templating frameworks

<td>
<%=
typeof(model.get("foo")) !== 'undefined' ? model.get("foo").toPrecision(4) : ''
%>
</td>

events
dom layout
view
manager

router events

web local
request storage
collection model

pagination
events

Web Request Initialise App Router Collection

Layout
Fetch data Render Page View
Manager

Populate Notify UI that
Sync On success
Collection data changed

Render View

Web app

• News reader – uses Guardian API

• Router / Models / Views

• Pagination

• Local Storage

• View Management

Main layout
Section List Section List Item
Main.html
View View
section/list.html section/item.html

Section Header
View Story List View
section/header.html story/list.html

Story List Item
View
story/item.html

<div class="nav-collapse sectionListView"></div>
<div id="sectionHeaderView" class="hero-unit sectionHeaderView"></div> Section List
View
<div id="storyListView" class="storyListView"></div>
Main layout section/list.html
Main.html
<ul class="nav"></ul>

Section List Item
View
<a href="<%= model.get("id") %>"> section/item.html
<%= typeof(model.get("webTitle")) !== 'undefined' ? model.get("webTitle") : '' %>
</a>

<span>
<%= typeof(model.get("webTitle")) !== 'undefined' ? model.get("webTitle") : '' %>
</span> Section Header
View
section/header.html

Story List View
story/list.html
Story List Item
View
story/item.html

<div class="nav-collapse sectionListView"></div>
<div id="sectionHeaderView" class="hero-unit sectionHeaderView"></div> Section List
View
<div id="storyView" class="storyView"></div>
Story layout section/list.html
story.html

Section List Item
View
section/item.html
Section Header
View Story List View
section/header.html story/list.html

<p><img width="20%" src="<%= model.get('fields').thumbnail %>" type="" media=""></p>
<h1><%= model.get("fields").headline %></h1>
<div style="columns:100px 2; -webkit-columns:100px 2; -moz-columns:100px 2;">
<p><%= model.get("fields").body %></>
</div>

Winjs

• Provides access to winrt interfaces via javascript

• Uses the chakra engine same engine used in IE10

• Introduces some rather desirable programming concepts such as
namespaces, data binding, background tasks and more

• Builds on ECMA script 5 such as promises

Winjs and backbone

• Use backbone for all our data

• Use winjs as our UI Framework

• Ability to integrate and weave the backbone types into winjs binding
list types

• Ability to abstract backbone implementation behind more complex
winjs implementations

events
dom
view

events

navigation
binding
list

events

app local
load storage
collection model

pagination
events

App Load Initialise App Navigation Collection

Render Process
Fetch data View
Fragment Fragment

Populate Convert to
Sync On success
Collection Binding List

Render Notify UI that
Fragment data changed

Winjs app

• Reader port to windows 8

• Changes to note

 Change in User Experience impacts how and what data needs to be displayed
 Removal views (css, html and js) and replaced with winjs ui controls
 Replacing jQuery $Ajax with winjs xhr
 Replacing router with winjs navigation
 Extending data list source to be used in conjunction with Backbone collection

Looking back

• Overview of some useful js frameworks that allow us to create
maintainable client side apps in js/html/css

• Building on our experiences with xaml and
.net, databinding, composite UI and separation of view model
controller designs

• Ability to reuse underpinning modules in browser and win8

Looking forwards

• Improvements in the frameworks and plugins

• Improvements in scaffolding for building apps

• Better tools to help manage larger client side apps

• Better support for winjs binding list

• Better support for jQuery

Building SPA’s (Single Page App) with Backbone.js

More Related Content

What's hot (20)

Similar to Building SPA’s (Single Page App) with Backbone.js (20)

More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)

Building SPA’s (Single Page App) with Backbone.js