This document provides an introduction and overview of the Backbone.js JavaScript library. It discusses what problems Backbone solves, including keeping data synchronized and managing callbacks. It then summarizes the main components of Backbone - the router for handling application routing and history, views for representing models and handling user interaction, models for managing data, and collections for grouping models together. It provides examples of implementing these components and notes that events are a core concept in Backbone, rather than callbacks.

2. Renan Carvalho
Carioca
U2 fan
Frustrated musician
Beer Appreciator
King of age of empires
Love agile methods
Front end developer at Chute
Blog : rcarvalhojs.com
Github : renancarvalho
Twitter : rcarvalhojs
Hate who says bad things about JS

3. The examples will be based on blogMv project
https://github.com/blogmv/backbone-browserify
More info http://blogmv.github.io

4. What’s the problem?
What’s backbone?
Keep data synchronized
Complex code
Spaghetti code
Manage callbacks
Ajax, XHR? (Impossible to remember the syntax)
How to test it? :( - TDD? http://www.tddunlocked.com.br/

5. “Backbone is a mindset change.”
Renan Carvalho
What’s backbone?

6. And it’s also…
Javascript library
Based on MV* concept
Lightweight (production version has 6.5kb)
Depends on underscore
Trust me, it’s awesome!
What’s backbone?

7. What are you building?

8. A Helicopter…

9. …or a Helicopter?

10. For complex users interface
Reusable code
Build single page apps
When you don’t know what kind of “helicopter”
When to use?
When to use it?
Complex systems
Good Integration with legacy code
Simple systems
Really performatic system
If you’re under 18
(Flying lollipop)

11. Router
Url routing using (#home or /home)
Application history

12. Backbone router
Router.js

13. Backbone.history.start(), to start to track url (hashChanges)
If you’d like to use html5 push state, just use Backbone.history.start({pushState: true})
Backbone router
More examples : http://backbonejs.org/#Router

14. View
Represents models data
Handle user interaction (input events)

15. View
render() - Convenction function for render view. Be
careful with SRP
el - Dom object, that will be used as the view reference
(default is a <div>)
$el - Jquery object that keeps the reference to el.
initialize() - “Constructor” function for every backbone
class
events - Handle view events like ( click, change…)
Backbone view

16. postComment.hbs
Backbone view

17. postComment.js
Backbone view

18. Example of bad
implementation
Backbone view

19. Example of good implementation
Backbone view

20. Model
Manage data.
Validate data
know where to send/get data
Should be thin and beautiful

21. Model
fetch() - get data from server
save() - post/put data on server
If the model has an id attribute, backbone will perform a put.
get/set - get/set attributes on model
parse - function called before backbone merge the server content with the model.
validate - perform custom validations on model. Fired when save(), set or invoked.
url - server endpoint (api), where model will perform the request
More about backbone models: http://backbonejs.org/#Model
Backbone model

22. Example of bad
implementation
Backbone model

23. comment.js
Backbone model

24. Collection
Basically “a lot of models
together"

25. Collection
fetch() - Exactly like model, get data from server.
create() - Create a new model instance within a collection (save on
server).
push() - add a model at the end of the collection
add - add a model into a collection, you can specify the position where
the model will be added ( this.collection.add(new model(), {at : 8}); )
reset() - sets the collection with an array of models.
More about backbone collection: http://backbonejs.org/#Collection
Backbone collection

26. comment.js
Backbone collection
article.js

27. Events
NOT CALLBACKS !!

28. Catalog of Events
Backbone events

29. listenTo - Tell an object to listen to a particular event
on another object.
on - Bind a callback function to an object.
stopListening - Tell an object to stop listening to
events.
Backbone events

30. Events on model
Backbone events

31. Events on collection
Backbone events

32. Events on View
Backbone events

33. Trigger you own event
Backbone events
This way you can unbind the function
to the object using “off"

34. Obrigado!