Aplicações                          dinâmicas em                              RailsSunday, October 2, 2011
Rafael Felix                          http://www.crafters.com.br                          http://twitter.com/rs_felix     ...
Sunday, October 2, 2011
Sunday, October 2, 2011
Backbone é uma estrutura para       aplicações que fazem uso pesado de JavaScriptSunday, October 2, 2011
Sunday, October 2, 2011
Backbone.ModelSunday, October 2, 2011
Backbone.Model                            class BackboneTodos.Models.List extends Backbone.Model                          ...
Backbone.Model                            class BackboneTodos.Models.List extends Backbone.Model                          ...
Backbone.Model                            class BackboneTodos.Models.List extends Backbone.Model                          ...
Backbone.Model                            class BackboneTodos.Models.List extends Backbone.Model                          ...
Backbone.Model                                  POST              PUT                     GET                             ...
Backbone.ModelSunday, October 2, 2011
Backbone.Model                          Backbone.CollectionSunday, October 2, 2011
Backbone.Model                                Backbone.Collection                    class BackboneTodos.Collections.Lists...
Backbone.Model                                Backbone.Collection                    class BackboneTodos.Collections.Lists...
Backbone.Model                                Backbone.Collection                    class BackboneTodos.Collections.Lists...
Backbone.Model                          Backbone.CollectionSunday, October 2, 2011
Backbone.Model                          Backbone.Collection                                                Backbone.Router...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                            class BackboneTodos.Routers.Application extends Backbone.Router                 ...
Backbone.Model                          Backbone.Collection                                                Backbone.Router...
Backbone.Model                          Backbone.Collection          Backbone.View                         Backbone.Router...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
Backbone.Model                          class BackboneTodos.Views.AppView extends Backbone.View                           ...
http://backbone-todos.heroku.com/                          https://github.com/fellix/backbone-todosSunday, October 2, 2011
ExemplosSunday, October 2, 2011
Sunday, October 2, 2011
app/assets/javascripts/backbone/models/category.js.coffee          class Sample1.Models.Category extends Backbone.Model   ...
app/assets/javascripts/backbone/views/categories/categories.js.coffee          class Sample1.Views.Categories extends Back...
app/assets/javascripts/backbone/views/categories/categories.js.coffee          class Sample1.Views.Categories extends Back...
app/assets/javascripts/backbone/views/categories/categories.js.coffee           addOne: (category) ->          class Sampl...
app/assets/javascripts/backbone/views/categories/categories.js.coffee          class Sample1.Views.Categories extends Back...
app/assets/javascripts/backbone/views/categories/categories.js.coffee         class Sample1.Views.CategoryItem extends Bac...
app/assets/javascripts/backbone/views/routers/application_router.js.coffee  class Sample1.Routers.ApplicationsRouter exten...
app/controllers/categories_controller.rb                 class CategoriesController < ApplicationController               ...
app/controllers/categories_controller.rb                                      app/views/categories/index.rabl             ...
Sunday, October 2, 2011
app/assets/javascripts/backbone/templates/categories/form.jst.hamljs          %form#new_category.form-stacked           %fi...
app/assets/javascripts/backbone/views/categories/category_form.js.coffee        class Sample1.Views.CategoryForm extends B...
app/assets/javascripts/backbone/views/categories/category_form.js.coffee        class Sample1.Views.CategoryForm extends B...
app/assets/javascripts/backbone/views/categories/category_form.js.coffee        class Sample1.Views.CategoryForm extends B...
app/assets/javascripts/backbone/views/categories/category_form.js.coffee                                     create: (e) -...
app/assets/javascripts/backbone/views/routers/application_router.js.coffee  class Sample1.Routers.ApplicationsRouter exten...
app/assets/javascripts/backbone/views/routers/application_router.js.coffee  index: ->    @categories = new Sample1.Collect...
app/assets/javascripts/backbone/views/routers/application_router.js.coffee  index: ->    @categories = new Sample1.Collect...
app/assets/javascripts/backbone/views/routers/application_router.js.coffee  index: ->    @categories = new Sample1.Collect...
app/controllers/categories_controller.rb                 class CategoriesController < ApplicationController               ...
app/controllers/categories_controller.rb       class CategoriesController < ApplicationController         respond_to :json...
Sunday, October 2, 2011
Sunday, October 2, 2011
ClickSunday, October 2, 2011
Click              @collection.createSunday, October 2, 2011
Click              @collection.create                           url: /categoriesSunday, October 2, 2011
Click              @collection.create                post /categories                           url: /categoriesSunday, Oc...
Click              @collection.create                   post /categories                           url: /categories       ...
Sunday, October 2, 2011
@collection.bind(add, @addOne)Sunday, October 2, 2011
Obrigado                                    felix.rafael@gmail.com                                  http://twitter.com/rs_...
Upcoming SlideShare
Loading in...5
×

Aplicacoes dinamicas gurusc

1,347

Published on

Slides da minha apresentação no Encontro do GuruSC - Florianópolis - 01/10/2011

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,347
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Aplicacoes dinamicas gurusc

  1. 1. Aplicações dinâmicas em RailsSunday, October 2, 2011
  2. 2. Rafael Felix http://www.crafters.com.br http://twitter.com/rs_felix http://blog.rollingwithcode.comSunday, October 2, 2011
  3. 3. Sunday, October 2, 2011
  4. 4. Sunday, October 2, 2011
  5. 5. Backbone é uma estrutura para aplicações que fazem uso pesado de JavaScriptSunday, October 2, 2011
  6. 6. Sunday, October 2, 2011
  7. 7. Backbone.ModelSunday, October 2, 2011
  8. 8. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  9. 9. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  10. 10. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  11. 11. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model routes.rb    paramRoot: list resources :lists    defaults:{}Sunday, October 2, 2011
  12. 12. Backbone.Model POST PUT GET DELETE class BackboneTodos.Models.List extends Backbone.Model routes.rb    paramRoot: list resources :lists    defaults:{}Sunday, October 2, 2011
  13. 13. Backbone.ModelSunday, October 2, 2011
  14. 14. Backbone.Model Backbone.CollectionSunday, October 2, 2011
  15. 15. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  16. 16. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  17. 17. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  18. 18. Backbone.Model Backbone.CollectionSunday, October 2, 2011
  19. 19. Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  20. 20. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  21. 21. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  22. 22. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  23. 23. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  24. 24. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  25. 25. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  26. 26. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn } !/:username : showUser meusite.com/#!/felix root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  27. 27. Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn !/:username : showUser } root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  28. 28. Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  29. 29. Backbone.Model Backbone.Collection Backbone.View Backbone.RouterSunday, October 2, 2011
  30. 30. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  31. 31. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  32. 32. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  33. 33. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  34. 34. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  35. 35. Backbone.Model class BackboneTodos.Views.AppView extends Backbone.View   template: JST["backbone/templates/home"],   events: {     "keypress #new-list" : "createOnEnter"   },   initialize: ->     _.bindAll(@, addOne, addAll, render)     @lists = new BackboneTodos.Collections.ListsCollection     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  36. 36. http://backbone-todos.heroku.com/ https://github.com/fellix/backbone-todosSunday, October 2, 2011
  37. 37. ExemplosSunday, October 2, 2011
  38. 38. Sunday, October 2, 2011
  39. 39. app/assets/javascripts/backbone/models/category.js.coffee class Sample1.Models.Category extends Backbone.Model paramRoot: category class Sample1.Collections.CategoriesCollections extends Backbone.Collection model: Sample1.Models.Category url: /categoriesSunday, October 2, 2011
  40. 40. app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs" initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  41. 41. app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs"render: -> @ initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  42. 42. app/assets/javascripts/backbone/views/categories/categories.js.coffee addOne: (category) -> class Sample1.Views.Categories extends Backbone.View tagName: "ul"Sample1.Views.CategoryItem({model: view = new category}).render().el className: "tabs" $(view).appendTo(@el) initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  43. 43. app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.Categories extends Backbone.View addAll: -> tagName: "ul" $(@el).html("") className: "tabs" @collection.each(@addOne) initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  44. 44. app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.CategoryItem extends Backbone.View tagName: "li" initialize: -> _.bindAll(@, "render") @model.bind("change", @render) render: -> $(@el).html("<a href=#>#{@model.get("name")}</a>") @Sunday, October 2, 2011
  45. 45. app/assets/javascripts/backbone/views/routers/application_router.js.coffee class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  46. 46. app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  47. 47. app/controllers/categories_controller.rb app/views/categories/index.rabl class CategoriesController < ApplicationController collection @categories respond_to :json attributes :id, :name def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  48. 48. Sunday, October 2, 2011
  49. 49. app/assets/javascripts/backbone/templates/categories/form.jst.hamljs %form#new_category.form-stacked %fieldset .clearfix %label{for: "category"}Name .input %input{type: "text", name: "name"} .actions %input{type: "submit", name: "commit", value: "Save", class: "btn primary"}Sunday, October 2, 2011
  50. 50. app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: { "submit form" : "create" } initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  51. 51. app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] render: -> events: { $(@el).html(@template()) "submit form" : "create" @input = @$("input[name=name]") } @ initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  52. 52. app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: { "submit form" : "create" } initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  53. 53. app/assets/javascripts/backbone/views/categories/category_form.js.coffee create: (e) -> class Sample1.Views.CategoryForm extends Backbone.View e.preventDefault() template: JST["backbone/templates/categories/form"] input = @input events: { @collection.create({ "submit form" : "create" input = @input.val() } }, { error: (model, response) -> initialize: -> alert "OOPS!" _.bindAll(@, "render") success: -> input.val("") })Sunday, October 2, 2011
  54. 54. app/assets/javascripts/backbone/views/routers/application_router.js.coffee class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  55. 55. app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  56. 56. app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row") form = new Sample1.Views.CategoryForm({collection: @categories}).render().el $(form)appendTo("#content-row")Sunday, October 2, 2011
  57. 57. app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row") form = new Sample1.Views.CategoryForm({collection: @categories}).render().el $(form)appendTo("#content-row")Sunday, October 2, 2011
  58. 58. app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  59. 59. app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json ... def create @category = Category.new params[:category] if @category.save respond_with @category else render json: {errors: @category.errros.full_messages}, status: :unprocessable_entity end end endSunday, October 2, 2011
  60. 60. Sunday, October 2, 2011
  61. 61. Sunday, October 2, 2011
  62. 62. ClickSunday, October 2, 2011
  63. 63. Click @collection.createSunday, October 2, 2011
  64. 64. Click @collection.create url: /categoriesSunday, October 2, 2011
  65. 65. Click @collection.create post /categories url: /categoriesSunday, October 2, 2011
  66. 66. Click @collection.create post /categories url: /categories CategoriesController#createSunday, October 2, 2011
  67. 67. Sunday, October 2, 2011
  68. 68. @collection.bind(add, @addOne)Sunday, October 2, 2011
  69. 69. Obrigado felix.rafael@gmail.com http://twitter.com/rs_felix http://github.com/fellix Links http://documentcloud.github.com/backbone/ https://github.com/creationix/haml-js https://github.com/codebrew/backbone-rails http://seesparkbox.com/foundry/better_rails_apis_with_rablSunday, October 2, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×