Renan Carvalho

Blog : rcarvalhojs.com

Github : renancarvalho

Twitter : rcarvalhojs

Carioca

Beer Appreciator

Frustrated musician

Love agile methods

Front end developer at Chute

King of age of empires

Hate who says bad things about JS

U2 fan

https://github.com/blogmv/backbone-browserify

The examples will be based on blogMv project

More info http://blogmv.github.io

What’s the problem?

What’s backbone?

Keep data synchronized

Ajax, XHR? (Impossible to remember the syntax)

Spaghetti code

Complex code

How to test it? :( - TDD? http://www.tddunlocked.com.br/

Manage callbacks

Renan Carvalho

“Backbone is a mindset change.”

What’s backbone?

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?

What are you building?

A Helicopter…

…or a Helicopter?

When to use?

When to use it?

Complex systems

Good Integration with legacy code

Simple systems

Really performatic system

When you don’t know what kind of “helicopter”

Build single page apps

For complex users interface

Reusable code

If you’re under 18

(Flying lollipop)

Router

Url routing using (#home or /home)

Application history

Backbone router

Router.js

Call Backbone.history.start(), to start to track url (hashChanges)

Backbone router

More examples : http://backbonejs.org/#Router

If you’d like to use html5 push state, just use Backbone.history.start({pushState: true})

View

Represents models data

Handle user interaction (input events)

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…)

View

Backbone view

postComment.hbs

Backbone view

postComment.js

Backbone view

Example of bad

implementation

Backbone view

Example of good implementation

Backbone view

Model

Manage data.

Validate data

know where to send/get data

Should be thin and beautiful

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

Example of bad

implementation

Backbone model

comment.js

Backbone model

Collection

Basically “a lot of models

together"

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

comment.js

Backbone collection

article.js

Events

NOT CALLBACKS !!

Catalog of Events

Backbone events

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

Events on model

Backbone events

Events on collection

Backbone events

Events on View

Backbone events

Trigger you own event

Backbone events

This way you can unbind the function

to the object using “off"

Obrigado!