Single Page Web Applications with CoffeeScript, Backbone and Jasmine

Single Page Web
Applications
CoffeeScript + Backbone.js + Jasmine BDD

@pirelenito
github.com/pirelenito
#tdc2011

What can you expect?

• What I am doing?
• Why is CoffeeScript so awesome?
• The era before Backbone;
• Fix browser spaghetti code with Backbone;
• Be professional: with Jasmine BDD;

Assumptions

• You know your Javascript;
• and your JQuery;
• You developed for the web before.

Fullscreen Map
Geo CRUDs
No refreshes

Fullscreen Map
Geo CRUDs
No refreshes

CoffeeScript
Backbone.js

Fullscreen Map
Geo CRUDs
No refreshes

CoffeeScript
Backbone.js
JSON

Rest API Ruby on Rails

Why is CoffeeScript so
awesome?

I like to choose my
tools!

I can to that on the
Server!

Browser?
Javascript Only!
NO MOAR!

Semicolon insertion

return return {
{ a: 10
a: 10 };
};

Semicolon insertion

return ; return {
{ a: 10
a: 10 };
};

Global variables
function messWithGlobal() {
a = 10;
}

Global variables
a = 10;
}

messWithGlobal();
alert(a);

Global variables
a = 10;
}

messWithGlobal();
alert(a);

var a = 10;
}

}
square = function(x) {
return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
root: Math.sqrt, Too verbose!
square: square,
cube: function(x) {
return x * square(x);
}
};
race = function() {
var runners, winner;
winner = arguments[0], runners = 2 <=
arguments.length ? __slice.call(arguments,
1) : [];
return print(winner, runners);
};

“I Think Coffeescript is
clearly good stuff”
Douglas Crockford

Javascript Programming Style And Your Brain

Remember this?
return return {
{ a: 10
a: 10 };
};

Coffeescript:
return return a: 10
a: 10

Coffeescript:
return return a: 10
a: 10

It has no semicolon!

Never write var again!

messWithGlobal = ->
a = 10

Never write var again!

messWithGlobal = ->
a = 10

messWithGlobal = function() {
var a;
return a = 10;
};

Compiles with scope

a = 10

(function() {
var a;
a = 10;
}).call(this);

You want global?
Go explicit!
window.messWithGlobal = ->
a = 10

You want global?
Go explicit!
window.messWithGlobal = ->
a = 10

(function() {
window.messWithGlobal = function() {
var a;
return a = 10;
};
}).call(this);

Functions as callbacks
$('.button').click(function() {
return alert('clicked!');
});

Functions as callbacks
$('.button').click(function() {
return alert('clicked!');
});

$('.button').click -> alert 'clicked!'

Block by identation
if (somethingIsTrue) {
complexMath = 10 * 3;
}

Block by identation
if (somethingIsTrue) {
complexMath = 10 * 3;
}

if somethingIsTrue
complexMath = 10 * 3

Classes
class MyClass
attribute: 'value'
constructor: ->
@objectVariable = 'Dude'

myMethod: ->
# this.objectVariable
@objectVariable

Classes
class MyClass
attribute: 'value'
constructor: ->
@objectVariable = 'Dude'

myMethod: ->
# this.objectVariable
@objectVariable

object = new MyClass
object.myMethod()
object.objectVariable # Dude
object.attribute

Compiled class:
(function() {
var MyClass;
MyClass = (function() {
MyClass.prototype.attribute = 'value';
function MyClass() {
this.objectVariable = 'Dude';
}
MyClass.prototype.myMethod = function() {
return this.objectVariable;
};
return MyClass;
})();
}).call(this);

Ranges
list = [1..5]

var list;
list = [1, 2, 3, 4, 5];

Expressions!
vehicles = for i in [1..3]
"Vehicle#{i}"

Expressions!
vehicles = for i in [1..3]
"Vehicle#{i}"

vehicles
['Vehicle1', 'Vehicle2', 'Vehicle3']

More awesomeness...
number = -42 if opposite

math =
square: (x) -> x * x

race = (winner, runners...) ->
print winner, runners

alert "I knew it!" if elvis?

squares = (math.square num for num in list)

Namespaces are cool
class namespace('views').MyView

Namespaces are cool

new oncast.views.MyView()

Namespaces are cool

new oncast.views.MyView()

@.namespace = (name) ->
@.oncast ||= {}
return @.oncast[name] ||= {} if name
return @.oncast

No more hidden bugs
on my client code!

CoffeeScript will make
you a better Javascript
programer.

Rails did the rendering
Rails

Coffeescript

Rails

$('.new').load "/cars/new", prepare

Coffeescript

Rails
<form>
<input name='name'>
...
</form>

$('.new').load "/cars/new", prepare

Coffeescript

Advantages

• Simple;
• Used tools we knew;
• i18n.

Coffeescript Actions

ActionActivationHandler One active at time

EditRefAction ListRefAction ...

Mapped an action on
our Rail’s Controller

Action Abstraction

• Would handle the ‘remote’ rendering;
• Initialize the rich components on the
DOM;
• JQuery heavy.

Difﬁcult to keep thinks
in sync.

Difﬁcult to keep thinks
in sync.
No real state on the browser.

“Not surprisingly, we're ﬁnding
ourselves solving similar
problems repeatedly.”
Henrik Joreteg

http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

Fix browser spaghetti
code with Backbone.

Doesn’t hide the DOM
You are doing real web development.

Works nicely with
CoffeeScript
Inheritance.

https://github.com/documentcloud/backbone/blob/master/test/model.coffee

Works nicely with
CoffeeScript
Inheritance.
class Car extends Backbone.Model

https://github.com/documentcloud/backbone/blob/master/test/model.coffee

Four Abstractions

• Collection;
• Model;
• Router;
• View;

Models / Collections
class Reference extends Backbone.Model
urlRoot: "/references"

Models / Collections
class Reference extends Backbone.Model
urlRoot: "/references"

class References extends Backbone.Collection
model: Reference
url: '/references'

Model Model Model
Collection

Fetch Collection
# creates a new collection
references = new References

# fetch data asynchronously
references.fetch()

Fetch Collection
# creates a new collection
references = new References

# fetch data asynchronously
references.fetch()

[{
id: 1
JSON name: "Paulo's House",
latitude: '10',
longitude: '15'
}]

Model attributes
# get reference with id 1
reference = references.get 1

Model attributes

# get the name property of the model
name = reference.get 'name'

Model attributes


# change the name property of the model
reference.set name: 'new name'

Model attributes


# change the name property of the model

# save the model to the server
reference.save()

Why use model.set ?

Events!
reference.bind 'change', (name)-> alert name

Views
class SaveButtonView extends Backbone.View
className: 'save-button'
tagName: 'div'
events:
click: '_click'

render: ->
$(@el).html "<input type='button'
value='Save'></input>"
return @

_click: ->
@model.save()

Using a View
# creates a new instance of the view
view = new SaveButtonView()

Using a View

# render it
view.render()

Using a View

# render it
view.render()

# append the content of the view on the doc
$('.some-div').html view.el

‘Events’ is the magic
element!

‘Events’ is the magic
element!
They will keep you in sync!

Click!

event changes the model

View Model

Click! model.set name: 'new name'


View Model



View Model
event changes the view



View Model
event changes the view

keeps everything in sync

Routers
class ReferencesRouter extends Backbone.Router
routes:
'references': 'index'

initialize: (options)->
@listPanelView = options.listPanelView

index: ->
@listPanelView.renderReferences()

DOM is not always
your friend!

DOM is not always
your friend!
# will be 0 unless it is attached to the
# document
$(@el).height()

Always do
view.render()

Before
$('.some-div').html view.el

Always return this.
new SaveButtonView().highlight().render().el

Routers should only
route!

Routers should only
route!
index: ->
@listPanelView.renderReferences()

You don’t need an
Action abstraction!!!

The View will represent
one model/collection
forever!

Broken events
# append the view's element to the document
$('.div').append view.el

# remove it
$('.div').empty

# add it again
$('.div').append view.el

View events (click, change) will no longer work.

Collection.getOrFetch
class Posts extends Backbone.Collection
url: "/posts"

getOrFetch: (id) ->
if @get(id)
post = @get id
else
post = new Post { id : id }
@add post
post.fetch()

post
http://bennolan.com/2011/06/10/backbone-get-or-fetch.html

View.fetch
Backbone.View::fetch = (options={})->
return @ unless (@collection || @model)

_(options).extend
complete: =>
@removeLoading()

@renderLoading()
(@collection || @model).fetch options

return @

View.fetch
Backbone.View::fetch = (options={})->
return @ unless (@collection || @model)

_(options).extend
complete: =>
@removeLoading()

@renderLoading()
(@collection || @model).fetch options

return @
view.fetch()

Lazy fetching
class LazyFetchView extends Backbone.View
render: ->
if @model.isFullyFetched()
# if the data is ready we render it
$(@el).html ...
else
# otherwise we fetch the data
# rendering the loading indicator
@fetch()
return @

Be professional: with
Jasmine BDD.

given a delete button view
when the user clicks the view
then it should delete the model

Jasmine:
given a delete button view
when the user clicks the view
then it should delete the model

describe 'DeleteButtonView', ->

context 'when the user clicks the view', =>

it 'should delete the model'

describe 'DeleteButton', ->


it 'should delete the model'



it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()




http://sinonjs.org/

https://github.com/froots/jasmine-sinon

beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)



beforeEach =>

beforeEach =>
sinon.spy @model, 'delete'


beforeEach =>

beforeEach =>
sinon.spy @model, 'delete'

@deleteButton.render()
$(@deleteButton.el).click()


Run it headless!

Text

http://johnbintz.github.com/jasmine-headless-webkit/

http://tinnedfruit.com/2011/03/03/testing-backbone-apps-
with-jasmine-sinon.html

Further reading

• https://github.com/creationix/haml-js
• https://github.com/fnando/i18n-js
• http://documentcloud.github.com/underscore/
• https://github.com/velesin/jasmine-jquery

So long and thanks for
all the ﬁsh!
@pirelenito
github.com/pirelenito
about.me/pirelenito

Single Page Web Applications with CoffeeScript, Backbone and Jasmine

More Related Content

What's hot (20)

Similar to Single Page Web Applications with CoffeeScript, Backbone and Jasmine (20)

Recently uploaded (20)

Single Page Web Applications with CoffeeScript, Backbone and Jasmine

Editor's Notes