Single page applications with backbone.js

Cork ALT.NET March 2014

LEAD Architect

@SUGRUE www.jamessugrue.ie

AUthor of Beginning Backbone.js

Published Dec 2013

SIDE PROJECT

www.donatecode.com

THE HISTORY !

CHARACTERISTICS OF A SINGLE PAGE APPLICATION !

ADVANTAGES AND PITFALLS !

BACKBONE.JS AND OTHER JS LIBRARIES !

SINGLE PAGE APPLICATIONS and .NET

SINGLE PAGE APPLICATIONS

HISTORY

2005

2006

THE WILDERNESS YEARS

2006 -2010

2010++

https://xkcd.com/927/

CHARACTERISTICS

Makes websites more APP-lIKE LESS WAITING ALL RESOURCES LOADED AT THE START !

PAGE NEVER RELOADS !

BOOKMARKABLE SECTIONS !

CHARACTERISTICS

MODEL VIEW * REQUIRED

REDRAW UI WITHOUT SERVER ROUND-TRIP !

Server

Views

View 1

View 2

Model

Model 1

Model 2

Client

TWITTER

WHAT DOES THE SERVER DO?

BECOMES A PURE DATA API or a WEB SERVICE

THIN SERVER

HANDLES SECURE or SENSITIVE CODE

WHAT DOES THE SERVER DO?

THICK STATEFUL SERVER

Server RENDERS HTML and Executes LOGIC RECORDS STATE AND UPDATES CLIENT

ADVANTAGES PITFALLS

EMBRACE THE ADVANTAGES

NATURAL USER FLOW

PARALLEL DEVELOPMENT

EXPERIENCE on MOBILE DEVICES

STATE HANDLED ON CLIENT

OFFLINE EXPERIENCE POSSIBLE

BEWARE OF PITFALLS

SEARCH ENGINE OPTIMISATION

JAVASCRIPT MUST BE ENABLED

LOADING TIME

JAVASCRIPT MEMORY LEAKS

USE THE SERVER LUKE

RENDER FIRST PAGE ON THE SERVER

INITIAL LOAD TIME ISSUE

POPULATE INITIAL MODELS

BACKBONE.JS AND OTHER LIBRARIES

HELPS STRUCTURE CODEMODEL VIEW CONTROLLER

LIGHTWEIGHT6.4KB

MATURE2010

UNOPINIONATED

DEPENDS ON

OPTIONAL

REpRESENts A SINGLE DATA OBJECT !

CONNECTS TO SERVER URL TO POPULATE / PERSIST !

WHEN DATA CHANGES, EVENTS FIRE

BACKBONE MODEL

BACKBONE MODEL

Tweet = Backbone.Model.extend({ });

BACKBONE MODEL: BASICS

DEFAULT VARIABLES

CONSTRUCTOR

BUILT-IN FUNCTIONS

YOUR OWN FUNCTIONS

BACKBONE MODEL: USAGE

BACKBONE MODEL: CHANGE EVENTS

BACKBONE COLLECTIONBULK OPERATIONS ON MODELS !

CONNECTS TO SERVER URL TO POPULATE / PERSIST !

WHEN DATA CHANGES, EVENTS FIRE !

LOTS OF QUERY and FILTER FUNCTIONS

BACKBONE COLLECTION

Timeline = Backbone.Collection.extend({ });

BACKBONE COLLECTION: BASICS

MODEL

CONSTRUCTOR

URL

BACKBONE VIEWCHANGES THE DOM !

CAN HANDLE DOM EVENTS !

SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER !

USE TEMPLATE FOR EFFICIENT RENDERING

BACKBONE VIEW: THE DOM

BACKBONE VIEW: THE TEMPLATE

BACKBONE VIEW

TimelineView = Backbone.View.extend({ });

BACKBONE VIEW: BASICSDOM ELEMENT

TEMPLATE

DOM EVENT HANDLING

RETRIEVE THE COLLECTION

BACKBONE VIEW: RENDERING

APPEND TO DOM

BACKBONE ROUTER

HANDLES APPLICATION STATE !

PROVIDES BOOKMARKABLE STATE !

SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER

[CONTROLLER]

BACKBONE ROUTER CONTROLLER

AppRouter = Backbone.Router.extend({ });

BACKBONE ROUTER: BASICSROUTES

EVENTS

HANDLERS

DOM

Model Collection

ROUTER

VIEW

UNOPINIONATED ===

CONTROL

ECO SYSTEM

MATURITY

TOOLING

.NET

http://www.asp.net/single-page-application/overview/introduction

TEMPLATES FOR THE MOST POPULAR

@SUGRUE www.jamessugrue.ie

AVAILABLE ON AMAZON

WIN IT NOW!

JOIN UP AT

www.donatecode.com

HIRING JAVASCRIPT / MOBILE DEVELOPERS