1. Give Your
JS Apps
A Spine
LACHSTOCK

2. What is Backbone?

3. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

4. I’m no computer scientist.

5. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

6. WTF?

7. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

8. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

9. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

10. What is Backbone?
It’s a JavaScript library.

11. What is Backbone?
It’s a JavaScript library for
writing applications.

12. What is Backbone?
It’s a JavaScript library for
writing applications like...

13. Library size
- 35Kb uncompressed
- 3.9Kb Packed and Gzipped

14. Library dependencies
- Underscore.js

15. Underscore.js
- Functional programming library
- 60-odd functions such as map, select,
invoke

16. Library dependencies
- Underscore.js

17. Library dependencies
- Underscore.js
- JSON2.js

18. JSON2.js
- Provides JSON support if it doesn’t exist
natively
- Does nothing in modern browsers

19. Library dependencies
- Underscore.js
- JSON2.js
- jQuery or Zepto.js

20. Zepto.js
“Zepto.js is a minimalist JavaScript framework
for mobile WebKit browsers, with a jQuery-
compatible syntax.”

21. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

22. Backbone.Model
- Models contain the data

23. Backbone.Model
- Models contain the data
- Validations, properties and permissions

24. Backbone.Model
- Models contain the data
- Validations, properties and permissions
- Manage changes to the above

25. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

26. Backbone.Collection
- Collections are ordered sets of models

27. Backbone.Collection
- Collections are ordered sets of models
- Act on events within models

28. Backbone.Collection
- Collections are ordered sets of models
- Act on events within models
- Add, Remove, Fetch, Refresh, Create, Sort

29. What is Backbone?
“Backbone supplies structure to JavaScript-
heavy applications by providing models with
key-value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
application over a RESTful JSON interface. ”

30. Backbone.View
- A logical UI component, not just the
template

31. Backbone.View
- A logical UI component, not just the
template
- Bind render function to model change event

32. Backbone.View
- A logical UI component, not just the
template
- Bind render function to model change event

33. What is Backbone?
- Backbone.Events
- Backbone.Controller
- Backbone.History
- Backbone.Sync

34. Find out more
http://documentcloud.github.com/
backbone/

35. Questions?