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 CODE
MODEL VIEW CONTROLLER
LIGHTWEIGHT
6.4KB
MATURE
2010
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 M...
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 COLLECTION
BULK OPERATIONS ON MODELS
!
CONNECTS TO SERVER URL TO POPULATE / PERSIST
!
WHEN DATA CHANGES, EVENTS F...
BACKBONE COLLECTION
Timeline = Backbone.Collection.extend({
});
BACKBONE COLLECTION: BASICS
MODEL
CONSTRUCTOR
URL
BACKBONE VIEW
CHANGES THE DOM
!
CAN HANDLE DOM EVENTS
!
SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER
!
USE TEMPLATE FOR EF...
BACKBONE VIEW: THE DOM
BACKBONE VIEW: THE TEMPLATE
BACKBONE VIEW
TimelineView = Backbone.View.extend({
});
BACKBONE VIEW: BASICS
DOM 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
[CO...
BACKBONE ROUTER CONTROLLER
AppRouter = Backbone.Router.extend({
});
BACKBONE ROUTER: BASICS
ROUTES
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?
Is There Still Room for Backbone.js
Is There Still Room for Backbone.js
Is There Still Room for Backbone.js
Is There Still Room for Backbone.js
Is There Still Room for Backbone.js
Is There Still Room for Backbone.js
Upcoming SlideShare
Loading in...5
×

Is There Still Room for Backbone.js

5,386

Published on

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.

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,386
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Is There Still Room for Backbone.js

  1. 1. Is there still room for backbone.js? of course there is! what would we do without it …
  2. 2. Principal Front End Architect at Carma AUthor of Beginning Backbone.js @SUGRUE www.jamessugrue.ie
  3. 3. HELPS STRUCTURE CODE MODEL VIEW CONTROLLER LIGHTWEIGHT 6.4KB MATURE 2010 UNOPINIONATED
  4. 4. WHY DO WE NEED MODEL VIEW WHATEVER
  5. 5. 2005
  6. 6. 2006
  7. 7. 10 MINUTES LATER
  8. 8. EVEN JAVASCRIPT NEEDS STUCTURE
  9. 9. Controller View Model DOM
  10. 10. BACK TO BACKBONE
  11. 11. DEPENDS ON OPTIONAL
  12. 12. REpRESENts A SINGLE DATA OBJECT ! CONNECTS TO SERVER URL TO POPULATE / PERSIST ! WHEN DATA CHANGES, EVENTS FIRE BACKBONE MODEL
  13. 13. BACKBONE MODEL Tweet = Backbone.Model.extend({ });
  14. 14. BACKBONE MODEL: BASICS DEFAULT VARIABLES CONSTRUCTOR BUILT-IN FUNCTIONS YOUR OWN FUNCTIONS
  15. 15. BACKBONE MODEL: USAGE
  16. 16. BACKBONE MODEL: CHANGE EVENTS
  17. 17. BACKBONE COLLECTION BULK OPERATIONS ON MODELS ! CONNECTS TO SERVER URL TO POPULATE / PERSIST ! WHEN DATA CHANGES, EVENTS FIRE ! LOTS OF QUERY and FILTER FUNCTIONS
  18. 18. BACKBONE COLLECTION Timeline = Backbone.Collection.extend({ });
  19. 19. BACKBONE COLLECTION: BASICS MODEL CONSTRUCTOR URL
  20. 20. BACKBONE VIEW CHANGES THE DOM ! CAN HANDLE DOM EVENTS ! SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER ! USE TEMPLATE FOR EFFICIENT RENDERING
  21. 21. BACKBONE VIEW: THE DOM
  22. 22. BACKBONE VIEW: THE TEMPLATE
  23. 23. BACKBONE VIEW TimelineView = Backbone.View.extend({ });
  24. 24. BACKBONE VIEW: BASICS DOM ELEMENT TEMPLATE DOM EVENT HANDLING RETRIEVE THE COLLECTION
  25. 25. BACKBONE VIEW: RENDERING APPEND TO DOM
  26. 26. BACKBONE ROUTER HANDLES APPLICATION STATE ! PROVIDES BOOKMARKABLE STATE ! SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER [CONTROLLER]
  27. 27. BACKBONE ROUTER CONTROLLER AppRouter = Backbone.Router.extend({ });
  28. 28. BACKBONE ROUTER: BASICS ROUTES EVENTS HANDLERS
  29. 29. DOM Model Collection ROUTER VIEW
  30. 30. THINGS TO WATCH OUT FOR
  31. 31. ZOMBIE VIEWS
  32. 32. BAckBONE EYE
  33. 33. BREAK DOWN 
 RENDER FUNCTION
  34. 34. PRECOMPILE TEMPLATES
  35. 35. HOW DOES BACKBONE STAND OUT?
  36. 36. UNOPINIONATED === CONTROL
  37. 37. ECO SYSTEM
  38. 38. MATURITY
  39. 39. TOOLING
  40. 40. WANT TO USE BACKBONE TONIGHT?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×