Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1

Building Single Page
Web Apps
A symphony of Rails, CoffeeScript and Backbone.js

Vagmi Mudumbai
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

Why Single Page Apps?

Fast & Sexy @vagmi | fb.com/vagmi | bit.ly/plusvagmi

Made for each other

JS and its Good Parts


CoffeeScript

Jeremy
Douglas
“CoffeeScript”
“Javascript”
Ashkenas
Crockford

CoffeeScript
countdown = (num for num in [10..1])

var countdown, num;
countdown = (function() {
var _results;
_results = [];
for (num = 10; num >= 1; num--) {
_results.push(num);
}
return _results;
})();

CoffeeScript
for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()

var filename, _fn, _i, _len;
_fn = function(filename) {
return fs.readFile(filename, function(err, contents)
{
return compile(filename, contents.toString());
});
};
for (_i = 0, _len = list.length; _i < _len; _i++) {
filename = list[_i];
_fn(filename);
}

Backbone.js
Models

Collections Views

Sync Router


Backbone - Models
class List extends Backbone.Model

list = new List()
list.set title: “My List”, checklist: true
list.urlRoot = “/api/lists”
list.save()
list.id # gives backend id
list.url # “/api/lists/(backend_id)”


Backbone - Collections
class Lists extends Backbone.Collection
model: List
url: “/api/lists”

lists = new Lists()
lists.fetch()
lists.each (model)->
#do something with the model


Backbone - Views
class ListsView extends Backbone.View
container: $(“#lists”)
template: JST[“templates/lists/index”]
render: =>
@container.html(@template())
@delegateEvents()

listsView = new ListsView({collection: lists})
lists.render()


Backbone - Views
class ListView extends Backbone.View
template: JST[“templates/lists/show”]
initialize: ->
@render()
render: =>
content = @template({list: @model.attributes})
@options.container.append(content)
@delegateEvents()

listView = new ListView({model: list})


EJS - Templates
tmpl=’<div class="list">
<h4><%=list.name%></h4>
<%if(list.checklist){%>
<p>Score items</p>
<%}%>
<ul class="items">
</ul>
</div>’
fn=EJS.compile(tmpl)
fn({list:@model.attributes})


Backbone Router
class MyRouter extends Backbone.Router
routes:
"" : "index" #default route
"/lists" : "showLists"
"/lists/:id" : "showList"

index: =>
#do something with views

showLists: =>
#get the lists

showList: (id)=>
list=lists.get(id)
#fancy stuff

Backbone Router

# setup router and history management
myRouter = new MyRouter()
Backbone.history.start()


Demo Time


Questions


Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1

More Related Content

What's hot

Similar to Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1

More from Vagmi Mudumbai

Recently uploaded

Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1

Editor's Notes