Building Single Page Web apps with Rails, CoffeeScript and Backbone.js

1. Building Single Page
Web Apps
A symphony of Rails, CoffeeScript and Backbone.js
Vagmi Mudumbai
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

2. Why Single Page Apps?
Fast & Sexy @vagmi | fb.com/vagmi | bit.ly/plusvagmi

3. Made for each other
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

4. JS and its Good Parts
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

5. CoffeeScript
Jeremy
Douglas
“CoffeeScript”
“Javascript”
Ashkenas
Crockford
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

6. 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;
})();
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

7. 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);
}
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

8. Backbone.js
Models
Collections Views
Sync Router
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

9. 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)”
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

10. 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
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

11. 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()
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

12. 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})
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

13. 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})
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

14. 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
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

15. Backbone Router
# setup router and history management
myRouter = new MyRouter()
Backbone.history.start()
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

16. Demo Time
@vagmi | fb.com/vagmi | bit.ly/plusvagmi

17. Questions
@vagmi | fb.com/vagmi | bit.ly/plusvagmi