1. Single Page Web
Applications
CoffeeScript + Backbone.js + Jasmine BDD
@pirelenito
github.com/pirelenito
#tdc2011

2. Who am I?

4. 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;

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

6. What I am doing?

7. Fullscreen Map
Geo CRUDs
No refreshes

8. Fullscreen Map
Geo CRUDs
No refreshes
CoffeeScript
Backbone.js

9. Fullscreen Map
Geo CRUDs
No refreshes
CoffeeScript
Backbone.js
JSON
Rest API Ruby on Rails

10. Why is CoffeeScript so
awesome?

11. I like to choose my
tools!

12. I can to that on the
Server!

13. Browser?
Javascript Only!

14. Browser?
Javascript Only!
NO MOAR!

15. Too error-prone.

16. Semicolon insertion
return return {
{ a: 10
a: 10 };
};

17. Semicolon insertion
return ; return {
{ a: 10
a: 10 };
};

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

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

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

21. Global variables
function messWithGlobal() {
a = 10;
}
messWithGlobal();
alert(a);
function messWithGlobal() {
var a = 10;
}

22. }
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);
};

24. Awesome platform.

25. “I Think Coffeescript is
clearly good stuff”
Douglas Crockford
Javascript Programming Style And Your Brain

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

27. Coffeescript:
return return a: 10
a: 10

28. Coffeescript:
return return a: 10
a: 10
It has no semicolon!

29. How it fixes globals?

30. Never write var again!
messWithGlobal = ->
a = 10

31. Never write var again!
messWithGlobal = ->
a = 10
messWithGlobal = function() {
var a;
return a = 10;
};

32. Compiles with scope
a = 10

33. Compiles with scope
a = 10
(function() {
var a;
a = 10;
}).call(this);

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

35. You want global?
Go explicit!
window.messWithGlobal = ->
a = 10
(function() {
window.messWithGlobal = function() {
var a;
return a = 10;
};
}).call(this);

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

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

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

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

40. Classes
class MyClass
attribute: 'value'
constructor: ->
@objectVariable = 'Dude'
myMethod: ->
# this.objectVariable
@objectVariable

41. Classes
class MyClass
attribute: 'value'
constructor: ->
@objectVariable = 'Dude'
myMethod: ->
# this.objectVariable
@objectVariable
object = new MyClass
object.myMethod()
object.objectVariable # Dude
object.attribute

42. 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);

43. Ranges
list = [1..5]

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

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

46. Expressions!
vehicles = for i in [1..3]
"Vehicle#{i}"
vehicles
['Vehicle1', 'Vehicle2', 'Vehicle3']

47. 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)

49. Don’t use --bare

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

51. Namespaces are cool
class namespace('views').MyView
new oncast.views.MyView()

52. Namespaces are cool
class namespace('views').MyView
new oncast.views.MyView()
@.namespace = (name) ->
@.oncast ||= {}
return @.oncast[name] ||= {} if name
return @.oncast

53. No more hidden bugs
on my client code!

54. CoffeeScript will make
you a better Javascript
programer.

55. The era before
Backbone.

56. Rails did the rendering
Rails
Coffeescript

57. Rails did the rendering
Rails
$('.new').load "/cars/new", prepare
Coffeescript

58. Rails did the rendering
Rails
$('.new').load "/cars/new", prepare
Coffeescript

59. Rails did the rendering
Rails
<form>
<input name='name'>
...
</form>
$('.new').load "/cars/new", prepare
Coffeescript

60. Rails did the rendering
Rails
<form>
<input name='name'>
...
</form>
$('.new').load "/cars/new", prepare
Coffeescript

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

62. Coffeescript Actions
ActionActivationHandler One active at time
EditRefAction ListRefAction ...

63. Mapped an action on
our Rail’s Controller

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

65. Problems?

66. One Action at a time!

67. Difficult to keep thinks
in sync.

68. Difficult to keep thinks
in sync.
No real state on the browser.

69. Slow (web 1.0)

70. “Not surprisingly, we're finding
ourselves solving similar
problems repeatedly.”
Henrik Joreteg
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

71. Fix browser spaghetti
code with Backbone.

72. Why Backbone?

73. Gives enough structure

74. Very lightweight

75. Easy to get started!

76. Why not GWT(for instance)?

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

78. Works nicely with
CoffeeScript
Inheritance.
https://github.com/documentcloud/backbone/blob/master/test/model.coffee

79. Works nicely with
CoffeeScript
Inheritance.
class Car extends Backbone.Model
https://github.com/documentcloud/backbone/blob/master/test/model.coffee

80. Ok, but what is it?

81. Four Abstractions
• Collection;
• Model;
• Router;
• View;

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

83. Models / Collections
class Reference extends Backbone.Model
urlRoot: "/references"
class References extends Backbone.Collection
model: Reference
url: '/references'
Model Model Model
Collection

84. Fetch Collection
# creates a new collection
references = new References
# fetch data asynchronously
references.fetch()

85. 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'
}]

86. Model attributes

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

88. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'

89. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'
# change the name property of the model
reference.set name: 'new name'

90. Model attributes
# get reference with id 1
reference = references.get 1
# get the name property of the model
name = reference.get 'name'
# change the name property of the model
reference.set name: 'new name'
# save the model to the server
reference.save()

91. Why use model.set ?
reference.set name: 'new name'

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

93. Events!
reference.bind 'change', (name)-> alert name
reference.set name: 'new name'

94. Events!
reference.bind 'change', (name)-> alert name
reference.set name: 'new name'

95. 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()

96. 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()

97. 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()

98. 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()

99. 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()

100. 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()

101. Using a View

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

103. Using a View
# creates a new instance of the view
view = new SaveButtonView()
# render it
view.render()

104. Using a View
# creates a new instance of the view
view = new SaveButtonView()
# render it
view.render()
# append the content of the view on the doc
$('.some-div').html view.el

105. ‘Events’ is the magic
element!

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

107. View Model

108. Click!
View Model

109. Click!
event changes the model
View Model

110. Click! model.set name: 'new name'
event changes the model
View Model

111. Click! model.set name: 'new name'
event changes the model
View Model
event changes the view

112. Click! model.set name: 'new name'
event changes the model
View Model
event changes the view
keeps everything in sync

113. Routers
class ReferencesRouter extends Backbone.Router
routes:
'references': 'index'
initialize: (options)->
@listPanelView = options.listPanelView
index: ->
@listPanelView.renderReferences()

114. Routers
class ReferencesRouter extends Backbone.Router
routes:
'references': 'index'
initialize: (options)->
@listPanelView = options.listPanelView
index: ->
@listPanelView.renderReferences()

115. Routers
class ReferencesRouter extends Backbone.Router
routes:
'references': 'index'
initialize: (options)->
@listPanelView = options.listPanelView
index: ->
@listPanelView.renderReferences()

116. This is just the basics!

117. Lessons Learned

118. DOM is not always
your friend!

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

120. Always do
view.render()
Before
$('.some-div').html view.el

121. Always return this.

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

123. Routers should only
route!

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

125. You don’t need an
Action abstraction!!!

126. The View will represent
one model/collection
forever!

127. 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.

128. 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

129. View.fetch
Backbone.View::fetch = (options={})->
return @ unless (@collection || @model)
_(options).extend
complete: =>
@removeLoading()
@renderLoading()
(@collection || @model).fetch options
return @

130. View.fetch
Backbone.View::fetch = (options={})->
return @ unless (@collection || @model)
_(options).extend
complete: =>
@removeLoading()
@renderLoading()
(@collection || @model).fetch options
return @
view.fetch()

131. 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 @

132. Be professional: with
Jasmine BDD.

133. Why Jasmine?

134. BDD

135. BDD
rspec like!

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

137. 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'

138. describe 'DeleteButton', ->
context 'when the user clicks the view', =>
it 'should delete the model'

139. describe 'DeleteButton', ->
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()

140. describe 'DeleteButton', ->
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()
http://sinonjs.org/
https://github.com/froots/jasmine-sinon

141. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()

142. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
beforeEach =>
sinon.spy @model, 'delete'
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()

143. describe 'DeleteButton', ->
beforeEach =>
@model = new Backbone.Model
@deleteButton = new DeleteButton(model: @model)
context 'when the user clicks the view', =>
beforeEach =>
sinon.spy @model, 'delete'
@deleteButton.render()
$(@deleteButton.el).click()
it 'should delete the model', =>
expect(@model.delete).toHaveBeenCalledOnce()

144. Run it headless!
Text
http://johnbintz.github.com/jasmine-headless-webkit/

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

146. 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

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