is there still room for backbone.js

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

Upload: jamessugrue

Post on 15-Jan-2015

1.488 views

Category:

Software


5 download

DESCRIPTION

Backbone.js is one of the original MV* libraries, but since it's introduction there have been many new MV* solutions made available. Find out why Backbone.js still has an important part to play in JavaScript application development.

TRANSCRIPT

Page 1: Is There Still Room for Backbone.js

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

Page 2: Is There Still Room for Backbone.js

Principal Front End Architect at Carma

AUthor of Beginning Backbone.js

@SUGRUE www.jamessugrue.ie

Page 3: Is There Still Room for Backbone.js

HELPS STRUCTURE CODEMODEL VIEW CONTROLLER

LIGHTWEIGHT6.4KB

MATURE2010

UNOPINIONATED

Page 4: Is There Still Room for Backbone.js

WHY DO WE NEED MODEL VIEW WHATEVER

Page 5: Is There Still Room for Backbone.js

2005

Page 6: Is There Still Room for Backbone.js
Page 7: Is There Still Room for Backbone.js

2006

Page 8: Is There Still Room for Backbone.js
Page 9: Is There Still Room for Backbone.js

10 MINUTES LATER

Page 10: Is There Still Room for Backbone.js
Page 11: Is There Still Room for Backbone.js

EVEN JAVASCRIPT NEEDS STUCTURE

Page 12: Is There Still Room for Backbone.js

Controller

View

Model

DOM

Page 13: Is There Still Room for Backbone.js
Page 14: Is There Still Room for Backbone.js

BACK TO BACKBONE

Page 15: Is There Still Room for Backbone.js

DEPENDS ON

OPTIONAL

Page 16: Is There Still Room for Backbone.js

REpRESENts A SINGLE DATA OBJECT !

CONNECTS TO SERVER URL TO POPULATE / PERSIST !

WHEN DATA CHANGES, EVENTS FIRE

BACKBONE MODEL

Page 17: Is There Still Room for Backbone.js

BACKBONE MODELTweet = Backbone.Model.extend({ });

Page 18: Is There Still Room for Backbone.js

BACKBONE MODEL: BASICS

DEFAULT VARIABLES

CONSTRUCTOR

BUILT-IN FUNCTIONS

YOUR OWN FUNCTIONS

Page 19: Is There Still Room for Backbone.js

BACKBONE MODEL: USAGE

Page 20: Is There Still Room for Backbone.js

BACKBONE MODEL: CHANGE EVENTS

Page 21: Is There Still Room for Backbone.js

BACKBONE COLLECTIONBULK OPERATIONS ON MODELS !

CONNECTS TO SERVER URL TO POPULATE / PERSIST !

WHEN DATA CHANGES, EVENTS FIRE !

LOTS OF QUERY and FILTER FUNCTIONS

Page 22: Is There Still Room for Backbone.js

BACKBONE COLLECTIONTimeline = Backbone.Collection.extend({ });

Page 23: Is There Still Room for Backbone.js

BACKBONE COLLECTION: BASICS

MODEL

CONSTRUCTOR

URL

Page 24: Is There Still Room for Backbone.js

BACKBONE VIEWCHANGES THE DOM !

CAN HANDLE DOM EVENTS !

SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER !

USE TEMPLATE FOR EFFICIENT RENDERING

Page 25: Is There Still Room for Backbone.js

BACKBONE VIEW: THE DOM

Page 26: Is There Still Room for Backbone.js

BACKBONE VIEW: THE TEMPLATE

Page 27: Is There Still Room for Backbone.js

BACKBONE VIEW

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

Page 28: Is There Still Room for Backbone.js

BACKBONE VIEW: BASICSDOM ELEMENT

TEMPLATE

DOM EVENT HANDLING

RETRIEVE THE COLLECTION

Page 29: Is There Still Room for Backbone.js

BACKBONE VIEW: RENDERING

APPEND TO DOM

Page 30: Is There Still Room for Backbone.js

BACKBONE ROUTER

HANDLES APPLICATION STATE !

PROVIDES BOOKMARKABLE STATE !

SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER

[CONTROLLER]

Page 31: Is There Still Room for Backbone.js

BACKBONE ROUTER CONTROLLER

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

Page 32: Is There Still Room for Backbone.js

BACKBONE ROUTER: BASICSROUTES

EVENTS

HANDLERS

Page 33: Is There Still Room for Backbone.js

DOM

Model Collection

ROUTER

VIEW

Page 34: Is There Still Room for Backbone.js

THINGS TO WATCH OUT FOR

Page 35: Is There Still Room for Backbone.js

ZOMBIE VIEWS

Page 36: Is There Still Room for Backbone.js

BAckBONE EYE

Page 37: Is There Still Room for Backbone.js

BREAK DOWN RENDER FUNCTION

Page 38: Is There Still Room for Backbone.js

PRECOMPILE TEMPLATES

Page 39: Is There Still Room for Backbone.js

HOW DOES BACKBONE

STAND OUT?

Page 40: Is There Still Room for Backbone.js
Page 41: Is There Still Room for Backbone.js

UNOPINIONATED ===

CONTROL

Page 42: Is There Still Room for Backbone.js

ECO SYSTEM

Page 43: Is There Still Room for Backbone.js

MATURITY

Page 44: Is There Still Room for Backbone.js

TOOLING

Page 45: Is There Still Room for Backbone.js

WANT TO USE BACKBONE TONIGHT?

Page 46: Is There Still Room for Backbone.js