Is There Still Room for Backbone.js

Is there still room for backbone.js?of course there is! what would we do without it …

Principal Front End Architect at Carma

AUthor of Beginning Backbone.js

@SUGRUE www.jamessugrue.ie

HELPS STRUCTURE CODEMODEL VIEW CONTROLLER

LIGHTWEIGHT6.4KB

MATURE2010

UNOPINIONATED

WHY DO WE NEED MODEL VIEW WHATEVER

2005

2006

10 MINUTES LATER

EVEN JAVASCRIPT NEEDS STUCTURE

Controller

View

Model

DOM

BACK TO BACKBONE

DEPENDS ON

OPTIONAL

REpRESENts A SINGLE DATA OBJECT !

CONNECTS TO SERVER URL TO POPULATE / PERSIST !

WHEN DATA CHANGES, EVENTS FIRE

BACKBONE MODEL

BACKBONE MODELTweet = 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 COLLECTIONTimeline = 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

THINGS TO WATCH OUT FOR

ZOMBIE VIEWS

BAckBONE EYE

BREAK DOWN RENDER FUNCTION

PRECOMPILE TEMPLATES

HOW DOES BACKBONE

STAND OUT?

UNOPINIONATED ===

CONTROL

ECO SYSTEM

MATURITY

TOOLING

WANT TO USE BACKBONE TONIGHT?