Apresentação na RubyConfBR sob

1. Aplicações
dinâmicas em
Rails

3. Rafael Felix
@rs_felix
http://blog.rollingwithcode.com
http://www.crafters.com.br

5. Backbone é uma estrutura para
aplicações que fazem uso pesado de JavaScript, e
conecta-se a sua aplicação por uma interface
RESTful.

8. Backbone.Model

9. var MyModel = Backbone.Model.extend({})

10. save([attributes],[options])
var MyModel = Backbone.Model.extend({})

11. POST PUT
save([attributes],[options])
var MyModel = Backbone.Model.extend({})

12. save([attributes],[options])
var MyModel = Backbone.Model.extend({})
fetch([options])

13. save([attributes],[options])
var MyModel = Backbone.Model.extend({})
fetch([options]) setInterval(function(){
model.fetch();
}, 10000);

14. save([attributes],[options])
var MyModel = Backbone.Model.extend({})
fetch([options]) validate(attributes)

15. var Chapter = Backbone.Model.extend({
validate: function(attrs) {
if (attrs.end < attrs.start) {
return "can't 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
});

16. var Chapter = Backbone.Model.extend({
validate: function(attrs) {
if (attrs.end < attrs.start) {
return "can't 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
});

17. Backbone.Model

18. Backbone.Model
Backbone.Collection

19. var Library = Backbone.Collection.extend({
model: Book
});

20. add(models, [options])
var Library = Backbone.Collection.extend({
model: Book
});

21. add(models, [options]) url()
var Library = Backbone.Collection.extend({
model: Book
});

22. url: '/library'
add(models, [options]) url()
var Library = Backbone.Collection.extend({
model: Book
});

23. add(models, [options]) url()
var Library = Backbone.Collection.extend({
model: Book
});
fetch([options])

24. add(models, [options]) url()
var Library = Backbone.Collection.extend({
model: Book
});
fetch([options]) Library.fetch()
GET '/library'

25. add(models, [options]) url()
var Library = Backbone.Collection.extend({
model: Book
});
fetch([options]) create(attributes, [options])

26. var alibrary = new Library;
var book = alibrary.create({
title: "A book",
author: "Someone"
})

27. Backbone.Model
Backbone.Collection

28. Backbone.Model
Backbone.Collection
Backbone.Router

29. var Workspace = Backbone.Router.extend({
routes: {
"help": "help",
"search/:query": "search",
"search/:query/p:page": "search"
},
help: function() {},
search: function(query, page) {}
});

30. 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) {}
});

31. 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) {}
});

32. 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) {}
});

33. 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) {}
});

34. Backbone.Model
Backbone.Collection
Backbone.Router

35. Backbone.Model
Backbone.Collection
Backbone.View Backbone.Router

36. var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
render: function() {
...
}
});

37. 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() {
...
}
});

38. 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() {
...
}
});

39. Exemplo

41. layout

42. layout
application

43. layout
application
ProductView

44. layout
application
ProductView
CartView

46. click

47. click

48. Passo 1

49. layout
application

50. app/views/layouts/application.html.erb
...
<div class="container">
<div class="content" id="application">
</div>
<footer>
<p></p>
</footer>
</div>
...

51. JavaScript Templates

52. var obj = "bla bla bla";
someDiv = document.getElementById("someDiv");
someDiv.innerHTML = "<span>" + obj + "</span>";

53. template.jst
<span> ${obj} </span>

55. template.jst
<span> ${obj} </span>

56. template.jst.ejs
<span> <%= obj %> </span>

57. app/assets/javascripts/templates/app.jst.ejs
<div id="products" class="span10">
</div>
<div id="cart" class="span6">
</div>

58. 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;
}
});

59. app/assets/javascripts/home.js
$(function(){
view = new AppView().render().el;
$(view).appendTo("#application");
});

60. 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>

61. Passo 2

62. ProductView

63. 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>

64. app/assets/javascripts/views/product_view.js
window.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;
}
});

65. rails g model product name:string price:decimal
rails g controller products
config/initializers/backbone.rb
ActiveRecord::Base.include_root_in_json = false

66. 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": "" }},
]

67. 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": "" },
]

68. app/controllers/products_controller.rb
class ProductsController < ApplicationController
respond_to :json
def index
@products = Product.all
respond_with @products
end
end

69. app/assets/javascripts/models/product.js
window.Product = Backbone.Model.extend({
});
window.ProductsCollection = Backbone.Collections.extend({
model: Product,
url: '/products'
});

70. app/assets/javascripts/views/app_view.js
window.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");
}
});

72. Passo 3

73. CartView

74. app/assets/javascripts/templates/cart.jst.ejs
<div id="cart-products">
</div>
<hr/>
Total: <%= model.get("quantity") %> R$ <%= model.get("total") %>

75. app/assets/javascripts/views/cart_view.js
window.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;
}
});

76. app/assets/javascripts/models/cart.js
window.Cart = Backbone.Model.extend({
url: function(){
return '/cart';
}
});

77. rails g model cart quantity:integer total:decimal
rails g controller cart

78. app/controllers/cart_controller.rb
class CartController < ApplicationController
respond_to :json
def show
@cart ||= Cart.first || Cart.create!
respond_with @cart
end
end

79. 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
end
end

80. app/assets/javascripts/views/app_view.js
window.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;
},
...
});

82. Passo 4

83. click

84. click

85. rails g model cart_product cart:references product:references

86. 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

87. app/assets/javascripts/models/cart_product.js
window.CartProduct = Backbone.Model.extend({
url: function(){
return "/cart/product/"+this.productId+"/add";
},
initialize: function(args){
this.productId = args.productId;
}
});

88. app/assets/javascripts/models/cart_product.js
window.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"

89. app/controllers/cart_controller.rb
class 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
end
end

90. app/assets/javascripts/views/product_view.js
window.ProductView = Backbone.View.extend({
...
events: {
"submit form" : "addProductToCart"
},
initialize: function(args){
...
this.cart = args.cart
},
...
});

91. 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");
}

92. app/assets/javascripts/views/product_view.js
window.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();
}
});
}
});

94. http://backbone-todos.heroku.com/

95. 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_rabl