Post on 15-Jan-2015
description
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?