Backbone.js is a model-view framework that separates an application's data layer and user interface layer. It allows for a single source of data that both the views and models can use, improving rendering and organization. The core features include models to define data, collections to manage models, and views to handle user interface events and re-rendering based on data changes. Backbone aims to help developers create full-fledged web applications rather than just websites.

1. Bobby Roe
Javascript Developer
at The New York Times Company
developing Ricochet

2. Backbone.js
An Introduction

3. What is it?
Backbone.js is the model & view layer
for your javascript app

4. Why?
* The DOM isn't the source of truth in your app.

5. jQuery is good.
Storing state in the DOM is bad.

6. * A single source of data for the UI to render.

7. to create a web app
not just a web site

8. Here are a whole bunch of real world projects

9. Core Features

10. Models
- attributes

11. Collections
- filter, transform, manage your models

12. Views
- UI events
- data events (on)
* acts as controllers

13. Other Features
... not covered here --
* Routers
* the Sync function

14. Demo -- Mastermind

15. ?

16. ?

19. Mastermind app

21. Model: Turn

22. Collection: Turn_collection

23. View: Turn_view

24. View methods

25. initialize

26. render

27. template

28. Chrome console demo

29. another View: Game_view

30. Game_view: initialize

31. Game_view: render

32. A Couple of Potholes to Avoid

33. Do: Fully re-render your views (from
templates).
Don't: show / hide bits of UI /
get & set HTML attributes.

34. Do: Look at a lot of examples & keep your
functions simple & small.
Don't write intimidating, epic code.

35. Summary
Backbone is the model & view layer for your app
* one source of data
* optimized rendering
* simple core features that rock

36. Thank you
http://bobbyroe.com/mm