A basic intro to Backbone.JS that I gave at WebDU in Sydney, April 2011. There was lots of switching to app demos and code examples, so there’s not heaps of explanation on the slides, but hopefully they might be of use.

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?