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.

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

2. Principal Front End Architect at Carma
AUthor of Beginning Backbone.js
@SUGRUE www.jamessugrue.ie

3. HELPS STRUCTURE CODE
MODEL VIEW CONTROLLER
LIGHTWEIGHT
6.4KB
MATURE
2010
UNOPINIONATED

4. WHY DO WE NEED
MODEL VIEW WHATEVER

5. 2005

7. 2006

9. 10 MINUTES
LATER

11. EVEN JAVASCRIPT
NEEDS STUCTURE

12. Controller
View
Model
DOM

14. BACK TO
BACKBONE

15. DEPENDS ON
OPTIONAL

16. REpRESENts A SINGLE DATA OBJECT
!
CONNECTS TO SERVER URL TO POPULATE / PERSIST
!
WHEN DATA CHANGES, EVENTS FIRE
BACKBONE MODEL

17. BACKBONE MODEL
Tweet = Backbone.Model.extend({
});

18. BACKBONE MODEL: BASICS
DEFAULT VARIABLES
CONSTRUCTOR
BUILT-IN
FUNCTIONS
YOUR OWN
FUNCTIONS

19. BACKBONE MODEL: USAGE

20. BACKBONE MODEL: CHANGE EVENTS

21. BACKBONE COLLECTION
BULK OPERATIONS ON MODELS
!
CONNECTS TO SERVER URL TO POPULATE / PERSIST
!
WHEN DATA CHANGES, EVENTS FIRE
!
LOTS OF QUERY and FILTER FUNCTIONS

22. BACKBONE COLLECTION
Timeline = Backbone.Collection.extend({
});

23. BACKBONE COLLECTION: BASICS
MODEL
CONSTRUCTOR
URL

24. BACKBONE VIEW
CHANGES THE DOM
!
CAN HANDLE DOM EVENTS
!
SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER
!
USE TEMPLATE FOR EFFICIENT RENDERING

25. BACKBONE VIEW: THE DOM

26. BACKBONE VIEW: THE TEMPLATE

27. BACKBONE VIEW
TimelineView = Backbone.View.extend({
});

28. BACKBONE VIEW: BASICS
DOM ELEMENT
TEMPLATE
DOM EVENT HANDLING
RETRIEVE THE COLLECTION

29. BACKBONE VIEW: RENDERING
APPEND TO DOM

30. BACKBONE ROUTER
HANDLES APPLICATION STATE
!
PROVIDES BOOKMARKABLE STATE
!
SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER
[CONTROLLER]

31. BACKBONE ROUTER CONTROLLER
AppRouter = Backbone.Router.extend({
});

32. BACKBONE ROUTER: BASICS
ROUTES
EVENTS
HANDLERS

33. DOM
Model
Collection
ROUTER
VIEW

34. THINGS TO
WATCH OUT FOR

35. ZOMBIE VIEWS

36. BAckBONE EYE

37. BREAK DOWN
RENDER FUNCTION

38. PRECOMPILE
TEMPLATES

39. HOW DOES
BACKBONE
STAND OUT?

41. UNOPINIONATED
===
CONTROL

42. ECO SYSTEM

43. MATURITY

44. TOOLING

45. WANT TO USE
BACKBONE
TONIGHT?