Building Single Page       Web AppsA symphony of Rails, CoffeeScript and Backbone.js              Vagmi Mudumbai    @vagmi...
Why Single Page Apps?       Fast & Sexy   @vagmi | fb.com/vagmi | bit.ly/plusvagmi
Made for each other              @vagmi | fb.com/vagmi | bit.ly/plusvagmi
JS and its Good Parts                @vagmi | fb.com/vagmi | bit.ly/plusvagmi
CoffeeScript   Jeremy                   Douglas“CoffeeScript”                 “Javascript”  Ashkenas                 Crock...
CoffeeScriptcountdown = (num for num in [10..1])var countdown, num;countdown = (function() {  var _results;  _results = []...
CoffeeScriptfor filename in list  do (filename) ->    fs.readFile filename, (err, contents) ->      compile filename, cont...
Backbone.js               ModelsCollections             Views        Sync       Router                        @vagmi | fb....
Backbone - Modelsclass List extends Backbone.Modellist = new List()list.set title: “My List”, checklist: truelist.urlRoot ...
Backbone - Collectionsclass Lists extends Backbone.Collection  model: List  url: “/api/lists”lists = new Lists()lists.fetc...
Backbone - Viewsclass ListsView extends Backbone.View  container: $(“#lists”)  template: JST[“templates/lists/index”]  ren...
Backbone - Viewsclass ListView extends Backbone.View  template: JST[“templates/lists/show”]  initialize: ->    @render()  ...
EJS - Templatestmpl=’<div class="list">  <h4><%=list.name%></h4>  <%if(list.checklist){%>    <p>Score items</p>  <%}%>  <u...
Backbone Routerclass MyRouter extends Backbone.Router  routes:    ""           :    "index" #default route    "/lists"    ...
Backbone Router# setup router and history managementmyRouter = new MyRouter()Backbone.history.start()                     ...
Demo Time        @vagmi | fb.com/vagmi | bit.ly/plusvagmi
Questions@vagmi | fb.com/vagmi | bit.ly/plusvagmi
Upcoming SlideShare
Loading in …5
×

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

5,133 views
5,023 views

Published on

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

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,133
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
50
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1

    1. 1. Building Single Page Web AppsA symphony of Rails, CoffeeScript and Backbone.js Vagmi Mudumbai @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    2. 2. Why Single Page Apps? Fast & Sexy @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    3. 3. Made for each other @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    4. 4. JS and its Good Parts @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    5. 5. CoffeeScript Jeremy Douglas“CoffeeScript” “Javascript” Ashkenas Crockford @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    6. 6. CoffeeScriptcountdown = (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. 7. CoffeeScriptfor 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. 8. Backbone.js ModelsCollections Views Sync Router @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    9. 9. Backbone - Modelsclass List extends Backbone.Modellist = new List()list.set title: “My List”, checklist: truelist.urlRoot = “/api/lists”list.save()list.id # gives backend idlist.url # “/api/lists/(backend_id)” @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    10. 10. Backbone - Collectionsclass 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. 11. Backbone - Viewsclass 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. 12. Backbone - Viewsclass 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. 13. EJS - Templatestmpl=’<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. 14. Backbone Routerclass 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. 15. Backbone Router# setup router and history managementmyRouter = new MyRouter()Backbone.history.start() @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    16. 16. Demo Time @vagmi | fb.com/vagmi | bit.ly/plusvagmi
    17. 17. Questions@vagmi | fb.com/vagmi | bit.ly/plusvagmi

    ×