0
Aplicaçõesdinâmicas em    Rails
Rafael Felix         @rs_felixhttp://blog.rollingwithcode.com  http://www.crafters.com.br
Backbone é uma estrutura paraaplicações que fazem uso pesado de JavaScript, e  conecta-se a sua aplicação por uma interfac...
Backbone.Model
var MyModel = Backbone.Model.extend({})
save([attributes],[options])var MyModel = Backbone.Model.extend({})
POST           PUT       save([attributes],[options])var MyModel = Backbone.Model.extend({})
save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options])
save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options])     setInterval(function(){          ...
save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options])            validate(attributes)
var Chapter = Backbone.Model.extend({  validate: function(attrs) {    if (attrs.end < attrs.start) {      return "cant end...
var Chapter = Backbone.Model.extend({  validate: function(attrs) {    if (attrs.end < attrs.start) {      return "cant end...
Backbone.Model
Backbone.ModelBackbone.Collection
var Library = Backbone.Collection.extend({ model: Book});
add(models, [options])    var Library = Backbone.Collection.extend({     model: Book    });
add(models, [options])                    url()    var Library = Backbone.Collection.extend({     model: Book    });
url: /libraryadd(models, [options])                     url()    var Library = Backbone.Collection.extend({     model: Boo...
add(models, [options])                    url()    var Library = Backbone.Collection.extend({     model: Book    });  fetc...
add(models, [options])                     url()    var Library = Backbone.Collection.extend({     model: Book    });  fet...
add(models, [options])                       url()    var Library = Backbone.Collection.extend({     model: Book    });  f...
var alibrary = new Library;var book = alibrary.create({   title: "A book",   author: "Someone"})
Backbone.ModelBackbone.Collection
Backbone.ModelBackbone.Collection                      Backbone.Router
var Workspace = Backbone.Router.extend({ routes: {  "help":                 "help",  "search/:query":        "search",  "s...
var Workspace = Backbone.Router.extend({ routes: {  "help":                 "help",          #help  "search/:query":      ...
var Workspace = Backbone.Router.extend({ routes: {  "help":                 "help",          #help  "search/:query":      ...
var Workspace = Backbone.Router.extend({ routes: {  "help":                 "help",          #help  "search/:query":      ...
var Workspace = Backbone.Router.extend({ routes: {  "help":                 "help",          #help  "search/:query":      ...
Backbone.ModelBackbone.Collection                      Backbone.Router
Backbone.Model          Backbone.CollectionBackbone.View                   Backbone.Router
var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: {  "click .icon": "open",  "cli...
var DocumentRow = Backbone.View.extend({ tagName: "li",                                      <li class="document-row"></li...
var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: {  "click .icon": "open",      ...
Exemplo
layout
layout         application
layout                   application         ProductView
layout                   application         ProductView                                 CartView
click
click
Passo 1
layout         application
app/views/layouts/application.html.erb...  <div class="container">    <div class="content" id="application">    </div>    ...
JavaScript Templates
var obj = "bla bla bla";someDiv = document.getElementById("someDiv");someDiv.innerHTML = "<span>" + obj + "</span>";
template.jst<span> ${obj} </span>
template.jst<span> ${obj} </span>
template.jst.ejs<span> <%= obj %> </span>
app/assets/javascripts/templates/app.jst.ejs      <div id="products" class="span10">      </div>      <div id="cart" class...
app/assets/javascripts/views/app_view.js window.AppView = Backbone.View.extend({   template: JST["templates/app"],   class...
app/assets/javascripts/home.js$(function(){  view = new AppView().render().el;  $(view).appendTo("#application");});
app/assets/javascripts/home.js             $(function(){               view = new AppView().render().el;               $(v...
Passo 2
ProductView
app/assets/javascripts/templates/product.jst.ejs<div class="product-image">  <img class="thumbnail" src="http://placehold....
app/assets/javascripts/views/product_view.jswindow.ProductView = Backbone.View.extend({  template: JST["templates/product"...
rails g model product name:string price:decimal           rails g controller products         config/initializers/backbone...
rails g model product name:string price:decimal           rails g controller products         config/initializers/backbone...
rails g model product name:string price:decimal           rails g controller products         config/initializers/backbone...
app/controllers/products_controller.rbclass ProductsController < ApplicationController  respond_to :json  def index    @pr...
app/assets/javascripts/models/product.jswindow.Product = Backbone.Model.extend({});window.ProductsCollection = Backbone.Co...
app/assets/javascripts/views/app_view.jswindow.AppView = Backbone.View.extend({  initialize: function(){    _.bindAll(this...
Passo 3
CartView
app/assets/javascripts/templates/cart.jst.ejs<div id="cart-products"></div><hr/>Total: <%= model.get("quantity") %> R$ <%=...
app/assets/javascripts/views/cart_view.jswindow.CartView = Backbone.View.extend({  template: JST["templates/cart"],  class...
app/assets/javascripts/models/cart.js window.Cart = Backbone.Model.extend({   url: function(){     return /cart;   } });
rails g model cart quantity:integer total:decimal             rails g controller cart
app/controllers/cart_controller.rbclass CartController < ApplicationController  respond_to :json  def show    @cart ||= Ca...
app/controllers/cart_controller.rb    get cart => "cart#show"class CartController < ApplicationController  respond_to :jso...
app/assets/javascripts/views/app_view.jswindow.AppView = Backbone.View.extend({    ...  initialize: function(){    ...    ...
Passo 4
click
click
rails g model cart_product cart:references product:references
rails g model cart_product cart:references product:references                        app/models/cart.rb class Cart < Activ...
app/assets/javascripts/models/cart_product.jswindow.CartProduct = Backbone.Model.extend({  url: function(){     return "/c...
app/assets/javascripts/models/cart_product.jswindow.CartProduct = Backbone.Model.extend({  url: function(){     return "/c...
app/controllers/cart_controller.rbclass CartController < ApplicationController  respond_to :json  def show    ...  end  de...
app/assets/javascripts/views/product_view.js window.ProductView = Backbone.View.extend({   ...   events: {      "submit fo...
app/assets/javascripts/views/product_view.js              window.ProductView = Backbone.View.extend({                ...  ...
app/assets/javascripts/views/product_view.jswindow.ProductView = Backbone.View.extend({  ...  addProductToCart: function(e...
http://backbone-todos.heroku.com/
Obrigado                  felix.rafael@gmail.com                http://twitter.com/rs_felix                 http://github....
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Upcoming SlideShare
Loading in...5
×

Aplicacoes dinamicas Rails com Backbone

1,520

Published on

Apresentação na RubyConfBR sob

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,520
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Aplicacoes dinamicas Rails com Backbone"

  1. 1. Aplicaçõesdinâmicas em Rails
  2. 2. Rafael Felix @rs_felixhttp://blog.rollingwithcode.com http://www.crafters.com.br
  3. 3. Backbone é uma estrutura paraaplicações que fazem uso pesado de JavaScript, e conecta-se a sua aplicação por uma interface RESTful.
  4. 4. Backbone.Model
  5. 5. var MyModel = Backbone.Model.extend({})
  6. 6. save([attributes],[options])var MyModel = Backbone.Model.extend({})
  7. 7. POST PUT save([attributes],[options])var MyModel = Backbone.Model.extend({})
  8. 8. save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options])
  9. 9. save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options]) setInterval(function(){ model.fetch(); }, 10000);
  10. 10. save([attributes],[options]) var MyModel = Backbone.Model.extend({})fetch([options]) validate(attributes)
  11. 11. var Chapter = Backbone.Model.extend({ validate: function(attrs) { if (attrs.end < attrs.start) { return "cant end before it starts"; } }}); var one = new Chapter({ title : "Chapter One: The Beginning" }); one.bind("error", function(model, error) { alert(model.get("title") + " " + error); }); one.set({ start: 15, end: 10 });
  12. 12. var Chapter = Backbone.Model.extend({ validate: function(attrs) { if (attrs.end < attrs.start) { return "cant end before it starts"; } }}); var one = new Chapter({ title : "Chapter One: The Beginning" }); one.bind("error", function(model, error) { alert(model.get("title") + " " + error); }); one.set({ start: 15, end: 10 });
  13. 13. Backbone.Model
  14. 14. Backbone.ModelBackbone.Collection
  15. 15. var Library = Backbone.Collection.extend({ model: Book});
  16. 16. add(models, [options]) var Library = Backbone.Collection.extend({ model: Book });
  17. 17. add(models, [options]) url() var Library = Backbone.Collection.extend({ model: Book });
  18. 18. url: /libraryadd(models, [options]) url() var Library = Backbone.Collection.extend({ model: Book });
  19. 19. add(models, [options]) url() var Library = Backbone.Collection.extend({ model: Book }); fetch([options])
  20. 20. add(models, [options]) url() var Library = Backbone.Collection.extend({ model: Book }); fetch([options]) Library.fetch() GET /library
  21. 21. add(models, [options]) url() var Library = Backbone.Collection.extend({ model: Book }); fetch([options]) create(attributes, [options])
  22. 22. var alibrary = new Library;var book = alibrary.create({ title: "A book", author: "Someone"})
  23. 23. Backbone.ModelBackbone.Collection
  24. 24. Backbone.ModelBackbone.Collection Backbone.Router
  25. 25. var Workspace = Backbone.Router.extend({ routes: { "help": "help", "search/:query": "search", "search/:query/p:page": "search" }, help: function() {}, search: function(query, page) {}});
  26. 26. var Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search", #search/felix "search/:query/p:page": "search" #search/felix/p2 }, help: function() {}, search: function(query, page) {}});
  27. 27. var Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search", #search/felix "search/:query/p:page": "search" #search/felix/p2 }, help: function() {}, search: function(query, page) {}});
  28. 28. var Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search", #search/felix "search/:query/p:page": "search" #search/felix/p2 }, help: function() {}, search: function(query, page) {}});
  29. 29. var Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search", #search/felix "search/:query/p:page": "search" #search/felix/p2 }, help: function() {}, felix 2 search: function(query, page) {}});
  30. 30. Backbone.ModelBackbone.Collection Backbone.Router
  31. 31. Backbone.Model Backbone.CollectionBackbone.View Backbone.Router
  32. 32. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, render: function() { ... }});
  33. 33. var DocumentRow = Backbone.View.extend({ tagName: "li", <li class="document-row"></li> className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, render: function() { ... }});
  34. 34. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", $(".icon").click(open) "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, render: function() { ... }});
  35. 35. Exemplo
  36. 36. layout
  37. 37. layout application
  38. 38. layout application ProductView
  39. 39. layout application ProductView CartView
  40. 40. click
  41. 41. click
  42. 42. Passo 1
  43. 43. layout application
  44. 44. app/views/layouts/application.html.erb... <div class="container"> <div class="content" id="application"> </div> <footer> <p></p> </footer> </div>...
  45. 45. JavaScript Templates
  46. 46. var obj = "bla bla bla";someDiv = document.getElementById("someDiv");someDiv.innerHTML = "<span>" + obj + "</span>";
  47. 47. template.jst<span> ${obj} </span>
  48. 48. template.jst<span> ${obj} </span>
  49. 49. template.jst.ejs<span> <%= obj %> </span>
  50. 50. app/assets/javascripts/templates/app.jst.ejs <div id="products" class="span10"> </div> <div id="cart" class="span6"> </div>
  51. 51. app/assets/javascripts/views/app_view.js window.AppView = Backbone.View.extend({ template: JST["templates/app"], className: "row", initialize: function(){ }, render: function(){ $(this.el).html(this.template()); return this; } });
  52. 52. app/assets/javascripts/home.js$(function(){ view = new AppView().render().el; $(view).appendTo("#application");});
  53. 53. app/assets/javascripts/home.js $(function(){ view = new AppView().render().el; $(view).appendTo("#application"); });<div class="row"> <div id="products" class="span12"> </div> <div id="cart" class="span6"> </div></div>
  54. 54. Passo 2
  55. 55. ProductView
  56. 56. app/assets/javascripts/templates/product.jst.ejs<div class="product-image"> <img class="thumbnail" src="http://placehold.it/90x90" alt=""></div><div class="details"> <span class="name"><%= model.get("name") %></span><br /> <span class="price">R$ <%= model.get("price") %></span> <form class="add_product"> <input type="hidden" name="id" value="<%= model.get("id") %>"> <input type="submit" name="commit" value="Comprar" class="btn info"> </form></div>
  57. 57. app/assets/javascripts/views/product_view.jswindow.ProductView = Backbone.View.extend({ template: JST["templates/product"], className: "product-detail", initialize: function(){ }, render: function(){ $(this.el).html(this.template({model: this.model})); return this; }});
  58. 58. rails g model product name:string price:decimal rails g controller products config/initializers/backbone.rb ActiveRecord::Base.include_root_in_json = false
  59. 59. rails g model product name:string price:decimal rails g controller products config/initializers/backbone.rb ActiveRecord::Base.include_root_in_json = false [ {"product": { "name" : "" }}, {"product": { "name": "" }}, ]
  60. 60. rails g model product name:string price:decimal rails g controller products config/initializers/backbone.rb ActiveRecord::Base.include_root_in_json = false [ {"name" : "" }, {"name": "" }, ]
  61. 61. app/controllers/products_controller.rbclass ProductsController < ApplicationController respond_to :json def index @products = Product.all respond_with @products endend
  62. 62. app/assets/javascripts/models/product.jswindow.Product = Backbone.Model.extend({});window.ProductsCollection = Backbone.Collections.extend({ model: Product, url: /products});
  63. 63. app/assets/javascripts/views/app_view.jswindow.AppView = Backbone.View.extend({ initialize: function(){ _.bindAll(this, addOne, addAll); this.collection = new ProductsCollection; this.collection.bind(add, this.addOne); this.collection.bind(all, this.addAll); this.collection.fetch(); }, addAll: function(){ $("#products").html(""); this.collection.each(this.addOne); }, addOne: function(product){ view = new ProductView({model: product}).render().el; $(view).appendTo("#products"); }});
  64. 64. Passo 3
  65. 65. CartView
  66. 66. app/assets/javascripts/templates/cart.jst.ejs<div id="cart-products"></div><hr/>Total: <%= model.get("quantity") %> R$ <%= model.get("total") %>
  67. 67. app/assets/javascripts/views/cart_view.jswindow.CartView = Backbone.View.extend({ template: JST["templates/cart"], className: "cart-detail", initialize: function(){ _.bindAll(this, render); this.model.bind(change, this.render); this.model.fetch(); }, render: function(){ $(this.el).html(this.template({model: this.model})); return this; }});
  68. 68. app/assets/javascripts/models/cart.js window.Cart = Backbone.Model.extend({ url: function(){ return /cart; } });
  69. 69. rails g model cart quantity:integer total:decimal rails g controller cart
  70. 70. app/controllers/cart_controller.rbclass CartController < ApplicationController respond_to :json def show @cart ||= Cart.first || Cart.create! respond_with @cart endend
  71. 71. app/controllers/cart_controller.rb get cart => "cart#show"class CartController < ApplicationController respond_to :json def show @cart ||= Cart.first || Cart.create! respond_with @cart endend
  72. 72. app/assets/javascripts/views/app_view.jswindow.AppView = Backbone.View.extend({ ... initialize: function(){ ... this.cart = new Cart; this.cartView = new CartView({model: this.cart}). render().el; }, render: function(){ $(this.el).html(this.template()); this.$("#cart").html(this.cartView); return this; }, ...});
  73. 73. Passo 4
  74. 74. click
  75. 75. click
  76. 76. rails g model cart_product cart:references product:references
  77. 77. rails g model cart_product cart:references product:references app/models/cart.rb class Cart < ActiveRecord::Base has_many :cart_products has_many :products, through: :cart_products def add_product(product) self.update_attributes quantity: self.quantity + 1, total: total + product.price self.cart_products << CartProduct.new(cart: self, product: product) end end
  78. 78. app/assets/javascripts/models/cart_product.jswindow.CartProduct = Backbone.Model.extend({ url: function(){ return "/cart/product/"+this.productId+"/add"; }, initialize: function(args){ this.productId = args.productId; }});
  79. 79. app/assets/javascripts/models/cart_product.jswindow.CartProduct = Backbone.Model.extend({ url: function(){ return "/cart/product/"+this.productId+"/add"; }, initialize: function(args){ this.productId = args.productId; }}); post cart/product/:id/add => "cart#add_product"
  80. 80. app/controllers/cart_controller.rbclass CartController < ApplicationController respond_to :json def show ... end def add_product @product = Product.find params[:id] @cart = Cart.first @cart.add_product @product respond_with @cart endend
  81. 81. app/assets/javascripts/views/product_view.js window.ProductView = Backbone.View.extend({ ... events: { "submit form" : "addProductToCart" }, initialize: function(args){ ... this.cart = args.cart }, ... });
  82. 82. app/assets/javascripts/views/product_view.js window.ProductView = Backbone.View.extend({ ... events: { "submit form" : "addProductToCart" }, initialize: function(args){ ... this.cart = args.cart }, ... app/assets/javascripts/views/app_view.js });addOne: function(product){ view = new ProductView({model: product, cart: this.cart}).render().el; $(view).appendTo("#products");}
  83. 83. app/assets/javascripts/views/product_view.jswindow.ProductView = Backbone.View.extend({ ... addProductToCart: function(e){ e.preventDefault(); productId = this.$("form.add_product > input[name=id]").val(); item = new CartProduct({productId: productId}); view = this; item.save({}, { success: function(){ view.cart.fetch(); } }); }});
  84. 84. http://backbone-todos.heroku.com/
  85. 85. 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-railshttp://seesparkbox.com/foundry/better_rails_apis_with_rabl
  1. A particular slide catching your eye?

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

×