Bobby RoeJavascript Developerat The New York Times Companydeveloping Ricochet
Backbone.js An Introduction
What is it?Backbone.js is the model & view layerfor your javascript app
Why?* The DOM isnt the source of truth in your app.
jQuery is good.Storing state in the DOM is bad.
* A single source of data for the UI to render.
to create a web appnot just a web site
Here are a whole bunch of real   world projects
Core Features
Models- attributes
Collections- filter, transform, manage your models
Views- UI events- data events (on)* acts as controllers
Other Features... not covered here -- * Routers * the Sync function
Demo -- Mastermind
?
?
Mastermind app
Model: Turn
Collection: Turn_collection
View: Turn_view
View methods
initialize
render
template
Chrome console demo
another View: Game_view
Game_view: initialize
Game_view: render
A Couple of Potholes to Avoid
Do: Fully re-render your views (fromtemplates).Dont: show / hide bits of UI /     get & set HTML attributes.
Do: Look at a lot of examples & keep your     functions simple & small.Dont write intimidating, epic code.
SummaryBackbone is the model & view layer for your app * one source of data * optimized rendering * simple core features t...
Thank youhttp://bobbyroe.com/mm
Backbone.js – an introduction
Backbone.js – an introduction
Backbone.js – an introduction
Upcoming SlideShare
Loading in …5
×

Backbone.js – an introduction

899 views

Published on

Backbone.js – an introduction

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

  • Be the first to like this

No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone.js – an introduction

  1. 1. Bobby RoeJavascript Developerat The New York Times Companydeveloping Ricochet
  2. 2. Backbone.js An Introduction
  3. 3. What is it?Backbone.js is the model & view layerfor your javascript app
  4. 4. Why?* The DOM isnt the source of truth in your app.
  5. 5. jQuery is good.Storing state in the DOM is bad.
  6. 6. * A single source of data for the UI to render.
  7. 7. to create a web appnot just a web site
  8. 8. Here are a whole bunch of real world projects
  9. 9. Core Features
  10. 10. Models- attributes
  11. 11. Collections- filter, transform, manage your models
  12. 12. Views- UI events- data events (on)* acts as controllers
  13. 13. Other Features... not covered here -- * Routers * the Sync function
  14. 14. Demo -- Mastermind
  15. 15. ?
  16. 16. ?
  17. 17. Mastermind app
  18. 18. Model: Turn
  19. 19. Collection: Turn_collection
  20. 20. View: Turn_view
  21. 21. View methods
  22. 22. initialize
  23. 23. render
  24. 24. template
  25. 25. Chrome console demo
  26. 26. another View: Game_view
  27. 27. Game_view: initialize
  28. 28. Game_view: render
  29. 29. A Couple of Potholes to Avoid
  30. 30. Do: Fully re-render your views (fromtemplates).Dont: show / hide bits of UI / get & set HTML attributes.
  31. 31. Do: Look at a lot of examples & keep your functions simple & small.Dont write intimidating, epic code.
  32. 32. SummaryBackbone is the model & view layer for your app * one source of data * optimized rendering * simple core features that rock
  33. 33. Thank youhttp://bobbyroe.com/mm

×