Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine

Raimonds Simanovskis

Rails-like JavaScript
using CoffeeScript,
Backbone.js and
Jasmine

Raimonds Simanovskis

github.com/rsim

@rsim

.com

JavaScript code in
Rails 3.0.x

application.js
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

Which leads to...
(example from Redmine)

application.js
/* redMine - project management software
Copyright (C) 2006-2008 Jean-Philippe Lang */

function checkAll (id, checked) {
var els = Element.descendants(id);
for (var i = 0; i < els.length; i++) {
if (els[i].disabled==false) {
els[i].checked = checked;
}
}
}

function toggleCheckboxesBySelector(selector) {
boxes = $$(selector);
var all_checked = true;
for (i = 0; i < boxes.length; i++) { if (boxes[i].checked == false) { all_checked = false; } }
for (i = 0; i < boxes.length; i++) { boxes[i].checked = !all_checked; }
}

function setCheckboxesBySelector(checked, selector) {
var boxes = $$(selector);
boxes.each(function(ele) {
ele.checked = checked;
});
}

function showAndScrollTo(id, focus) {
Element.show(id);
if (focus!=null) { Form.Element.focus(focus); }

/*
* 1 - registers a callback which copies the csrf token into the
* X-CSRF-Token header with each ajax request. Necessary to

application.js
* work with rails applications which have fixed
* CVE-2011-0447
* 2 - shows and hides ajax indicator
*/
Ajax.Responders.register({

onCreate: function(request){
var csrf_meta_tag = $$('meta[name=csrf-token]')[0];

if (csrf_meta_tag) {
var header = 'X-CSRF-Token',
token = csrf_meta_tag.readAttribute('content');

if (!request.options.requestHeaders) {
request.options.requestHeaders = {};
}
request.options.requestHeaders[header] = token;
}

if ($('ajax-indicator') && Ajax.activeRequestCount > 0) {
Element.show('ajax-indicator');
}
},
onComplete: function(){
if ($('ajax-indicator') && Ajax.activeRequestCount == 0) {
Element.hide('ajax-indicator');
}
}
});

function hideOnLoad() {
$$('.hol').each(function(el) {
el.hide();
});
}

Event.observe(window, 'load', hideOnLoad);

Do we really know
(and love?)
JavaScript?

Sample JavaScript
(from RailsCasts #267)
var CreditCard = {
cleanNumber: function(number) {
return number.replace(/[- ]/g, "");
},

validNumber: function(number) {
var total = 0;
number = this.cleanNumber(number);
for (var i=number.length-1; i >= 0; i--) {
var n = parseInt(number[i]);
if ((i+number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}
};

console.log(CreditCard.validNumber('4111 1111-11111111')); // true
console.log(CreditCard.validNumber('4111111111111121')); // false

We see as this
“ugly” Ruby
CreditCard = {
:cleanNumber => lambda { |number|
return number.gsub(/[- ]/, "");
},

:validNumber => lambda { |number|
total = 0;
number = CreditCard[:cleanNumber].call(number);
for i in 0..(number.length-1)
n = number[i].to_i;
if ((i+number.length) % 2 == 0)
n = n*2 > 9 ? n*2 - 9 : n*2;
end
total += n;
end;
}
};

puts(CreditCard[:validNumber].call('4111 1111-11111111')); # true
puts(CreditCard[:validNumber].call('4111111111111121')); # false

Or as this “normal” Ruby
module CreditCard
def self.clean_number(number)
number.gsub(/[- ]/, "")
end

def self.valid_number?(number)
total = 0
number = clean_number(number)
for i in 0...number.length
n = number[i].to_i
if i+number.length % 2 == 0
n = n*2 > 9 ? n*2 - 9 : n*2
end
total += n
end
total % 10 == 0
end
end

puts CreditCard.valid_number?('4111 1111-11111111') # true
puts CreditCard.valid_number?('4111111111111121') # false

“Best practices” Ruby
class CreditCard
def initialize(number)
@number = clean_number(number)
end

def valid?
total = 0
for i in 0...@number.length
n = @number[i].to_i
if i+@number.length % 2 == 0
n = n*2 > 9 ? n*2 - 9 : n*2
end
total += n
end
total % 10 == 0
end

private

def clean_number(number)
number.gsub(/[- ]/, "")
end
end

puts CreditCard.new('4111 1111-11111111').valid? # true
puts CreditCard.new('4111111111111121').valid? # false

JavaScript has objects too!
var CreditCard = function(number) {
function cleanNumber(number) {
return number.replace(/[- ]/g, "");
}
this.number = cleanNumber(number);
};

CreditCard.prototype = {
isValid: function() {
var total = 0;
for (var i=this.number.length-1; i >= 0; i--) {
var n = parseInt(this.number[i]);
if ((i+this.number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
}
};

console.log( (new CreditCard('4111 1111-11111111')).isValid() ); // true
console.log( (new CreditCard('4111111111111121')).isValid() ); // false

But this would be much
more Ruby-like!
class CreditCard
cleanNumber = (number) -> number.replace /[- ]/g, ""

constructor: (number) ->
@number = cleanNumber number

isValid: (number) ->
total = 0
for i in [0...@number.length]
n = +@number[i]
if (i+@number.length) % 2 == 0
n = if n*2 > 9 then n*2 - 9 else n*2
total += n
total % 10 == 0

console.log (new CreditCard '4111 1111-11111111').isValid() # true
console.log (new CreditCard '4111111111111121').isValid() # false

Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine

Sample CoffeeScript
# Assignment: # Splats:
number = 42 race = (winner, runners...) ->
opposite = true print winner, runners

# Conditions: # Existence:
number = -42 if opposite alert "I knew it!" if elvis?

# Functions: # Array comprehensions:
square = (x) -> x * x cubes = (math.cube num for num in list)

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

Functions
square = (x) -> x * x
cube = (x) -> square(x) * x

fill = (container, liquid = "coffee") ->
"Filling the #{container} with #{liquid}..."

awardMedals = (first, second, others...) ->
gold = first
silver = second
rest = others

contenders = [
"Michael Phelps"
"Liu Xiang"
"Yao Ming"
"Allyson Felix"
"Shawn Johnson"
]

awardMedals contenders...

Objects and Arrays
song = ["do", "re", "mi", "fa", "so"]

singers = {Jagger: "Rock", Elvis: "Roll"}

bitlist = [
1, 0, 1
0, 0, 1
1, 1, 0
]

kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9

Variable Scope

var changeNumbers, inner, outer;
outer = 1 outer = 1;
changeNumbers = -> changeNumbers = function() {
var inner;
inner = -1 inner = -1;
outer = 10 return outer = 10;
inner = changeNumbers() };
inner = changeNumbers();

Existential Operator
solipsism = true if mind? and not world?

speed ?= 75

footprints = yeti ? "bear"

zip = lottery.drawWinner?().address?.zipcode

Conditionals
mood = greatlyImproved if singing

if happy and knowsIt
clapsHands()
chaChaCha()
else
showIt()

date = if friday then sue else jill

options or= defaults

Loops

eat food for food in ['toast', 'cheese', 'wine']
countdown = (num for num in [10..1])

earsOld = max: 10, ida: 9, tim: 11
ages = for child, age of yearsOld
child + " is " + age

Classes, Inheritance
and super
class Animal
constructor: (@name) ->

move: (meters) ->
alert @name + " moved " + meters + "m."

class Snake extends Animal
move: ->
alert "Slithering..."
super 5

class Horse extends Animal
move: ->
alert "Galloping..."
super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

Function Binding

Account = (customer, cart) ->
@customer = customer
@cart = cart

$('.shopping_cart').bind 'click', (event) =>
@customer.purchase @cart

And many other
nice features...

How to install?

brew install node # or install node.js otherwise
curl http://npmjs.org/install.sh | sh
npm install -g coffee-script

Dynamic single page
application

Identifying
components
AppView

Identifying
components
AppView

TodoView
TodoView
TodoView

Identifying
components
AppView

keypress event
click event TodoView
dblclick event TodoView
TodoView
click event

Browser-side
Views and Models
AppView
TodoList
keypress event
click event TodoView Todo
dblclick event TodoView Todo
TodoView Todo
click event

Browser-side
Views and Models
AppView
new, fetch
TodoList
keypress event
click event TodoView create, save
Todo
dblclick event TodoView Todo
TodoView Todo
click event

Browser-side
Views and Models
AppView
refresh, add TodoList
keypress event
click event TodoView Todo
dblclick event TodoViewchange, destroy Todo
TodoView Todo
click event

Browser-side Models
and RESTful resources
Browser Rails
GET
TodoList TodosController
POST index
Todo PUT show
Todo create
DELETE update
Todo
destroy
JSON

Organize CoffeeScript
and JavaScript Code

using http://github.com/Sutto/barista

application.coffee

# main namespace
window.TodoApp = {}

Todo model
class TodoApp.Todo extends Backbone.Model

# If you don't provide a todo, one will be provided for you.
EMPTY: "empty todo..."

# Ensure that each todo created has `content`.
initialize: ->
unless @get "content"
@set content: @EMPTY

# Toggle the `done` state of this todo item.
toggle: ->
@save done: not @get "done"

TodoList collection
class TodoApp.TodoList extends Backbone.Collection

# Reference to this collection's model.
model: TodoApp.Todo

# Save all of the todo items under the `"todos"` namespace.
url: '/todos'

# Filter down the list of all todo items that are finished.
done: ->
@filter (todo) -> todo.get 'done'

# Filter down the list to only todo items that are still not finished.
remaining: ->
@without this.done()...

# We keep the Todos in sequential order, despite being saved by unordered
# GUID in the database. This generates the next order number for new items.
nextOrder: ->
if @length then @last().get('order') + 1 else 1

# Todos are sorted by their original insertion order.
comparator: (todo) ->
todo.get 'order'

Todo item view
class TodoApp.TodoView extends Backbone.View
# ... is a list tag.
tagName: "li"

# Cache the template function for a single item.
template: TodoApp.template '#item-template'

# The DOM events specific to an item.
events:
"click .check" : "toggleDone"
"dblclick div.todo-content" : "edit"
"click span.todo-destroy" : "destroy"
"keypress .todo-input" : "updateOnEnter"

# The TodoView listens for changes to its model, re-rendering. Since there's
# a one-to-one correspondence between a **Todo** and a **TodoView** in this
# app, we set a direct reference on the model for convenience.
initialize: ->
_.bindAll this, 'render', 'close'
@model.bind 'change', @render
@model.bind 'destroy', => @remove()

# Re-render the contents of the todo item.
render: ->
$(@el).html @template @model.toJSON()
@setContent()
this

# Re-render the contents of the todo item.
render: ->
$(@el).html @template @model.toJSON()
@setContent()

Todo item view
this

# To avoid XSS (not that it would be harmful in this particular app),
# we use `jQuery.text` to set the contents of the todo item.
setContent: ->
content = @model.get 'content'
@$('.todo-content').text content
@input = @$('.todo-input')
@input.blur @close
@input.val content

# Toggle the `"done"` state of the model.
toggleDone: ->
@model.toggle()

# Switch this view into `"editing"` mode, displaying the input field.
edit: ->
$(@el).addClass "editing"
@input.focus()

# Close the `"editing"` mode, saving changes to the todo.
close: ->
@model.save content: @input.val()
$(@el).removeClass "editing"

# If you hit `enter`, we're through editing the item.
updateOnEnter: (e) ->
@close() if e.keyCode == 13

# Destroy the model.
destroy: ->
@model.destroy()

Application view
class TodoApp.AppView extends Backbone.View

# Instead of generating a new element, bind to the existing skeleton of
# the App already present in the HTML.
el: "#todoapp"

# Our template for the line of statistics at the bottom of the app.
statsTemplate: TodoApp.template '#stats-template'

# Delegated events for creating new items, and clearing completed ones.
events:
"keypress #new-todo" : "createOnEnter"
"keyup #new-todo" : "showTooltip"
"click .todo-clear a" : "clearCompleted"

# At initialization we bind to the relevant events on the `Todos`
# collection, when items are added or changed. Kick things off by
# loading any preexisting todos that might be saved.
initialize: ->
_.bindAll this, 'addOne', 'addAll', 'renderStats'

@input = @$("#new-todo")

@collection.bind 'add', @addOne
@collection.bind 'refresh', @addAll
@collection.bind 'all', @renderStats

@collection.fetch()

@collection.bind 'add', @addOne
@collection.bind 'refresh', @addAll
@collection.bind 'all', @renderStats

Application view
@collection.fetch()

# Re-rendering the App just means refreshing the statistics -- the rest
# of the app doesn't change.
renderStats: ->
@$('#todo-stats').html @statsTemplate
total: @collection.length
done: @collection.done().length
remaining: @collection.remaining().length

# Add a single todo item to the list by creating a view for it, and
# appending its element to the `<ul>`.
addOne: (todo) ->
view = new TodoApp.TodoView model: todo
@$("#todo-list").append view.render().el

# Add all items in the collection at once.
addAll: ->
@collection.each @addOne

# Generate the attributes for a new Todo item.
newAttributes: ->
content: @input.val()
order: @collection.nextOrder()
done: false

# If you hit return in the main input field, create new **Todo** model,
# persisting it to server.
createOnEnter: (e) ->
if e.keyCode == 13
@collection.create @newAttributes()
@input.val ''

view = new TodoApp.TodoView model: todo
@$("#todo-list").append view.render().el

# Add all items in the collection at once.

Application view
addAll: ->
@collection.each @addOne

# Generate the attributes for a new Todo item.
newAttributes: ->
content: @input.val()
order: @collection.nextOrder()
done: false

# If you hit return in the main input field, create new **Todo** model,
# persisting it to server.
createOnEnter: (e) ->
if e.keyCode == 13
@collection.create @newAttributes()
@input.val ''

# Clear all done todo items, destroying their views and models.
clearCompleted: ->
todo.destroy() for todo in @collection.done()
false

# Lazily show the tooltip that tells you to press `enter` to save
# a new todo item, after one second.
showTooltip: (e) ->
tooltip = @$(".ui-tooltip-top")
val = @input.val()
tooltip.fadeOut()
clearTimeout @tooltipTimeout if @tooltipTimeout
unless val == '' or val == @input.attr 'placeholder'
@tooltipTimeout = _.delay ->
tooltip.show().fadeIn()
, 1000

#todoapp
index.html.haml
.title
%h1 Todos
.content
#create-todo
%input#new-todo{:placeholder => "What needs to be done?", :type => "text"}/
%span.ui-tooltip-top{:style => "display:none;"} Press Enter to save this task
#todos
%ul#todo-list
#todo-stats
%ul#instructions
%li Double-click to edit a todo.

:coffeescript
$ ->
TodoApp.appView = new TodoApp.AppView collection: new TodoApp.TodoList

%script#item-template{:type => "text/html"}
.todo{:class => "{{#done}}done{{/done}}"}
.display
%input{:class => "check", :type => "checkbox", :"{{#done}}checked{{/done}}" => true}
.todo-content
%span.todo-destroy
.edit
%input.todo-input{:type => "text", :value => ""}

%script#stats-template{:type => "text/html"}
{{#if total}}
%span.todo-count

%input#new-todo{:placeholder => "What needs to be done?", :type => "text"}/
%span.ui-tooltip-top{:style => "display:none;"} Press Enter to save this task
#todos
%ul#todo-list

index.html.haml
#todo-stats
%ul#instructions
%li Double-click to edit a todo.

:coffeescript
$ ->
TodoApp.appView = new TodoApp.AppView collection: new TodoApp.TodoList

%script#item-template{:type => "text/html"}
.todo{:class => "{{#done}}done{{/done}}"}
.display
%input{:class => "check", :type => "checkbox", :"{{#done}}checked{{/done}}" => true}
.todo-content
%span.todo-destroy
.edit
%input.todo-input{:type => "text", :value => ""}

%script#stats-template{:type => "text/html"}
{{#if total}}
%span.todo-count
%span.number {{remaining}}
%span.word {{pluralize remaining "item"}}
left.
{{/if}}
{{#if done}}
%span.todo-clear
%a{:href => "#"}
Clear
%span.number-done {{done}}
completed
%span.word-done {{pluralize done "item"}}
{{/if}}

One more thing:
Backbone Controllers
Routers
class Workspace extends Backbone.Controller Router

routes:
"help" : "help" #help
"search/:query" : "search" #search/kiwis
"search/:query/p:page": "search" #search/kiwis/p7

help: ->
...

search: (query, page) ->
...

RSpec-like testing for
JavaScript

Together with all
other tests

Testing Todo model
describe "Todo", ->
todo = null
ajaxCall = (param) -> jQuery.ajax.mostRecentCall.args[0][param]

beforeEach ->
todo = new TodoApp.Todo
todos = new TodoApp.TodoList [todo]

it "should initialize with empty content", ->
expect(todo.get "content").toEqual "empty todo..."

it "should initialize as not done", ->
expect(todo.get "done").toBeFalsy()

it "should save after toggle", ->
spyOn jQuery, "ajax"
todo.toggle()
expect(ajaxCall "url").toEqual "/todos"
expect(todo.get "done").toBeTruthy()

and TodoList
collection
describe "TodoList", ->
attributes = [
content: "First"
done: true
,
content: "Second"
]
todos = null

beforeEach ->
todos = new TodoApp.TodoList attributes

it "should return done todos", ->
expect(_.invoke todos.done(), "toJSON").toEqual [attributes[0]]

it "should return remaining todos", ->
expect(_.invoke todos.remaining(), "toJSON").toEqual [attributes[1]]

application.js.coffee
using Sprockets

#= require jquery
#= require underscore
#= require backbone
#= require handlebars
#= require ./todo_app
#= require_tree ./models
#= require ./views/helpers
#= require_tree ./views

Watch RailsConf
DHH keynote
http://en.oreilly.com/rails2011/public/schedule/detail/19068

References
http://jashkenas.github.com/coffee-script/

http://documentcloud.github.com/backbone/

http://pivotal.github.com/jasmine/

https://github.com/rsim/backbone_coffeescript_demo

Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine

Recommended

More Related Content

What's hot (20)

Similar to Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine (20)

More from Raimonds Simanovskis (20)

Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine