Your SlideShare is downloading. ×
  • Like
Aplicacoes dinamicas gurusc
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Aplicacoes dinamicas gurusc

  • 1,246 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,246
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Aplicações dinâmicas em RailsSunday, October 2, 2011
  • 2. Rafael Felix http://www.crafters.com.br http://twitter.com/rs_felix http://blog.rollingwithcode.comSunday, October 2, 2011
  • 3. Sunday, October 2, 2011
  • 4. Sunday, October 2, 2011
  • 5. Backbone é uma estrutura para aplicações que fazem uso pesado de JavaScriptSunday, October 2, 2011
  • 6. Sunday, October 2, 2011
  • 7. Backbone.ModelSunday, October 2, 2011
  • 8. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  • 9. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  • 10. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model    paramRoot: list    defaults:{}Sunday, October 2, 2011
  • 11. Backbone.Model class BackboneTodos.Models.List extends Backbone.Model routes.rb    paramRoot: list resources :lists    defaults:{}Sunday, October 2, 2011
  • 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. Backbone.ModelSunday, October 2, 2011
  • 14. Backbone.Model Backbone.CollectionSunday, October 2, 2011
  • 15. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • 16. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • 17. Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • 18. Backbone.Model Backbone.CollectionSunday, October 2, 2011
  • 19. Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  • 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. 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. 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. 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. 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. 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. 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. 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. Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  • 29. Backbone.Model Backbone.Collection Backbone.View Backbone.RouterSunday, October 2, 2011
  • 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. 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. 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. 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. 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. 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. http://backbone-todos.heroku.com/ https://github.com/fellix/backbone-todosSunday, October 2, 2011
  • 37. ExemplosSunday, October 2, 2011
  • 38. Sunday, October 2, 2011
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Sunday, October 2, 2011
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Sunday, October 2, 2011
  • 61. Sunday, October 2, 2011
  • 62. ClickSunday, October 2, 2011
  • 63. Click @collection.createSunday, October 2, 2011
  • 64. Click @collection.create url: /categoriesSunday, October 2, 2011
  • 65. Click @collection.create post /categories url: /categoriesSunday, October 2, 2011
  • 66. Click @collection.create post /categories url: /categories CategoriesController#createSunday, October 2, 2011
  • 67. Sunday, October 2, 2011
  • 68. @collection.bind(add, @addOne)Sunday, October 2, 2011
  • 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