Aplicacoes dinamicas Rails com Backbone

1,888 views

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,888
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×