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

Backbone js

Richard GriffinTwitter RichGee Email [email protected]

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

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

https://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


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!


Tool up

• BDD / TDD

• Grunt



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

Tool up

• BDD / TDD

• Grunt



Sublime text editor

• Nuget style package management console

• Support for backbone snippets

• Support for jQuery snippets

• Supports grunt build files

• Supports jshint configuration

Tool up

• BDD / TDD

• Grunt



Web Matrix

• Local Server for running web apps

• Awesome for deployment to Azure

• Has its own editor

Backbone

EventsModelsCollectionsViewsRouters

http://backbonejs.org/

router

view

collection model

events

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

router

view

collection model

events

events

View model

view

collection model

events

events

MVVM

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>

Putting it all together

router

domview

collection model

events

events

events

web reques

t

layout manager

pagination

local storage

Web Request

Initialise App Router Collection

ViewLayout Manager

Render PageFetch data

Sync On success Populate Collection

Notify UI that data changed

Render View

Web app

• News reader – uses Guardian API

• Router / Models / Views

• Pagination

• Local Storage

• View Management

Main layout

Main.html

Section List View

section/list.html

Section List Item View

section/item.html

Section Header View

section/header.html

Story List View

story/list.html

Story List Item Viewstory/

item.html

Section List View

section/list.html

Story List View

story/list.htmlStory List Item Viewstory/

item.html

<ul class="nav"></ul>

<a href="<%= model.get("id") %>"><%= typeof(model.get("webTitle")) !== 'undefined' ?

model.get("webTitle") : '' %></a>

<span><%= typeof(model.get("webTitle")) !== 'undefined' ?

model.get("webTitle") : '' %></span>


section/item.html

<div class="nav-collapse sectionListView"></div><div id="sectionHeaderView" class="hero-unit sectionHeaderView"></div><div id="storyListView" class="storyListView"></div> Main

layoutMain.html

Section Header View

section/header.html

Section List View

section/list.html


section/item.html

<div class="nav-collapse sectionListView"></div><div id="sectionHeaderView" class="hero-unit sectionHeaderView"></div><div id="storyView" class="storyView"></div> Story

layoutstory.html

Section Header View

section/header.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>

Story List View

story/list.html

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

Putting it all together

navigation

domview

collection model

events

events

events

appload

binding list

pagination

local storage

events

App Load Initialise App Navigation Collection

ViewProcess Fragment

Render FragmentFetch data

Sync On success Populate Collection

Convert to Binding List

Notify UI that data changed

Render Fragment

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

Documents

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