SpreeConf Europe: Backbone.js & Spree

A look a hypothetical Backbone.js front-end replacement for Spree Commerce, with sever-side EJS rendering.

2. Brian D. Quinn CTO & Co-founder Spree Commerce, Inc. github.com/bdq twitter.com/briandq
3. BRUG
4. Breakfast Roll User Group
6. Using backbone.js with Spree
7. Our Experience
9. Theme Editor SpreeWorks.com
10. Admin (Orders/Products) SpreeWorks.com
12. Better API Needed
13. Spree-API: improvements
14. Overhauled Product & Order API’s Spree-API: improvements
15. Overhauled Product & Order API’s Spree-API: improvements Included RABL for response templates
16. Overhauled Product & Order API’s Spree-API: improvements Included RABL for response templates Swapped to Ransack for searching
17. Overhauled Product & Order API’s Spree-API: improvements Included RABL for response templates Swapped to Ransack for searching Improved Authentication
18. RABL https://github.com/nesquena/rabl
19. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 class Spree::Api::BaseController < Spree::BaseController ... respond_to :json def index respond_with(@collection) do |format| format.json { render :json => @collection.to_json(serialization_options) } end end def show respond_with(@object) do |format| format.json { render :json => @object.to_json(serialization_options) } end end ... 01. api/app/controllers/spree/api/base_controller.rb Spree-API: PRe-RABL
20. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 class Spree::Api::BaseController < Spree::BaseController ... respond_to :json def index respond_with(@collection) do |format| format.json { render :json => @collection.to_json(serialization_options) } end end def show respond_with(@object) do |format| format.json { render :json => @object.to_json(serialization_options) } end end ... 01. api/app/controllers/spree/api/base_controller.rb Spree-API: PRe-RABL
21. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 object @product attributes *product_attributes child :variants_including_master => :variants do attributes *variant_attributes child :option_values => :option_values do attributes *option_value_attributes end end child :images => :images do extends "spree/api/v1/images/show" end child :option_types => :option_types do child :option_values => :option_values do attributes *option_value_attributes end end 01. api/app/views/spree/api/v1/products/show.rabl Spree-API: With RABL
22. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 object @product attributes *product_attributes child :variants_including_master => :variants do attributes *variant_attributes child :option_values => :option_values do attributes *option_value_attributes end end child :images => :images do extends "spree/api/v1/images/show" end child :option_types => :option_types do child :option_values => :option_values do attributes *option_value_attributes end end 01. api/app/views/spree/api/v1/products/show.rabl Spree-API: With RABL
23. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 object @product attributes *product_attributes child :variants_including_master => :variants do attributes *variant_attributes child :option_values => :option_values do attributes *option_value_attributes end end child :images => :images do extends "spree/api/v1/images/show" end child :option_types => :option_types do child :option_values => :option_values do attributes *option_value_attributes end end 01. api/app/views/spree/api/v1/products/show.rabl Spree-API: With RABL
24. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 object @product attributes *product_attributes child :variants_including_master => :variants do attributes *variant_attributes child :option_values => :option_values do attributes *option_value_attributes end end child :images => :images do extends "spree/api/v1/images/show" end child :option_types => :option_types do child :option_values => :option_values do attributes *option_value_attributes end end 01. api/app/views/spree/api/v1/products/show.rabl Spree-API: With RABL
25. Spree-API: Rabl Benefits
26. Better control over JSON output Spree-API: Rabl Benefits
27. Better control over JSON output Spree-API: Rabl Benefits Easily extendable by extensions / applications
28. Better control over JSON output Spree-API: Rabl Benefits Easily extendable by extensions / applications Supports lots of formats
29. Better control over JSON output Spree-API: Rabl Benefits Easily extendable by extensions / applications Supports lots of formats Great caching support
30. Ransack https://github.com/nesquena/rabl
31. Spree-API: RANSACK
32. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK
33. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[name_start]=Ruby
34. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[master_price_lteq]=10.00 GET api/products/search?q[name_start]=Ruby
35. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[master_price_lteq]=10.00 GET api/orders/search?q=[email_matches]=brian%25 GET api/products/search?q[name_start]=Ruby
36. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[master_price_lteq]=10.00 GET api/orders/search?q=[email_matches]=brian%25 GET api/orders/search?q=[completed_at_present]=1 GET api/products/search?q[name_start]=Ruby
37. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[master_price_lteq]=10.00 GET api/orders/search?q=[email_matches]=brian%25 GET api/orders/search?q=[completed_at_present]=1 GET api/products/search?q[name_start]=Ruby GET api/products/search?q[taxons_id_eq]=12345
38. GET api/products/search?q[name_cont]=ruby Spree-API: RANSACK GET api/products/search?q[master_price_lteq]=10.00 GET api/orders/search?q=[email_matches]=brian%25 GET api/orders/search?q=[completed_at_present]=1 GET api/products/search?q[name_start]=Ruby GET api/products/search?q[taxons_id_eq]=12345 GET api/products/search?q[variants_count_on_hand_gt]=5
39. Spree 1.1
40. BackBone.js & Core Admin
41. Maybe?
42. Sample Front End
43. Target High traffic Pages Products Index Products Show Taxon Show Order Edit
44. Target High traffic Pages Products Index Products Show Taxon Show Order Edit Checkout Log In/Out
45. Target High traffic Pages Products Index Products Show Taxon Show Order Edit Checkout Log In/Out
46. Models Collections Routers Views The BASICS: BACKbone.js Templates
47. app/assets/javascripts/store The BASICS: Structure /models /collections /routers /views /products /templates /taxons /products /taxons /orders /orders
48. The BASICS: MODELS
49. The BASICS: MODELS Product
50. The BASICS: MODELS Product Variant
51. The BASICS: MODELS Product Variant Option Type
52. The BASICS: MODELS Product Variant Option Type Option Value
53. The BASICS: MODELS Product Variant Image Option Type Option Value
54. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy
55. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon
56. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon Order
57. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon Order LineItem
58. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon Order LineItem Adjustment
59. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon Order LineItem Adjustment Status
60. 01 02 03 04 05 06 07 08 09 10 11 12 Spree.Models.Product = Backbone.Model.extend({ initialize: function(){ this.build_associations(); }, build_associations: function(){ this.images = new Spree.Collections.Images( this.get('images' ) ); ... }, ... }); 01. app/assets/javascripts/store/models/product.js The Basics: Models
61. 01 02 03 04 05 06 07 08 09 10 11 12 Spree.Models.Product = Backbone.Model.extend({ initialize: function(){ this.build_associations(); }, build_associations: function(){ this.images = new Spree.Collections.Images( this.get('images' ) ); ... }, ... }); 01. app/assets/javascripts/store/models/product.js The Basics: Models
62. 01 02 03 04 05 06 07 08 09 10 11 12 Spree.Models.Product = Backbone.Model.extend({ initialize: function(){ this.build_associations(); }, build_associations: function(){ this.images = new Spree.Collections.Images( this.get('images' ) ); ... }, ... }); 01. app/assets/javascripts/store/models/product.js The Basics: Models
63. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 { id: 723959550, name: "Ruby on Rails Bag", description: "Lorem ipsum tincidunt egestas. Mauris nibh...", price: "22.99", available_on: "2012-06-05T13:02:05Z", permalink: "ruby-on-rails-bag", count_on_hand: 45, images: [{ id: 3, position: 1, attachment_content_type: "image/jpeg", attachment_file_name: "ror_bag.jpeg", alt: null, viewable_type: "Spree::Variant", viewable_id: 504220342 }] } 01. Sample Products JSON Snippet The Basics: Models
64. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 { id: 723959550, name: "Ruby on Rails Bag", description: "Lorem ipsum tincidunt egestas. Mauris nibh...", price: "22.99", available_on: "2012-06-05T13:02:05Z", permalink: "ruby-on-rails-bag", count_on_hand: 45, images: [{ id: 3, position: 1, attachment_content_type: "image/jpeg", attachment_file_name: "ror_bag.jpeg", alt: null, viewable_type: "Spree::Variant", viewable_id: 504220342 }] } 01. Sample Products JSON Snippet The Basics: Models
65. Product Variant Image Option Type Option Value Taxonomy Taxon Order LineItem Adjustment The BASICS: Collections
66. Index Show Products => The BASICS: Routers
67. Index Show Products => The BASICS: Routers Show Taxons =>
68. Index Show Products => Edit Orders => The BASICS: Routers Show Taxons =>
69. Index Show Products => Edit Orders => Show Taxons => The BASICS: Views
70. The BASICS: Templates ...
71. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 //= require jquery //= require jquery_ujs //= require store/spree_core //= require store/spree_auth //= require store/spree_promo //= require jquery //= require underscore //= require backbone //= require store/spree //= require store/plumbing //= require store/paginated_collection //= require store/underscore_mixins //= require_tree ./models //= require_tree ./collections //= require_tree ./routers //= require_tree ./views //= require_tree ./templates 01. app/assets/javascripts/store/all.js The Basics: all.js
72. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 //= require jquery //= require jquery_ujs //= require store/spree_core //= require store/spree_auth //= require store/spree_promo //= require jquery //= require underscore //= require backbone //= require store/spree //= require store/plumbing //= require store/paginated_collection //= require store/underscore_mixins //= require_tree ./models //= require_tree ./collections //= require_tree ./routers //= require_tree ./views //= require_tree ./templates 01. app/assets/javascripts/store/all.js The Basics: all.js
73. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 //= require jquery //= require jquery_ujs //= require store/spree_core //= require store/spree_auth //= require store/spree_promo //= require jquery //= require underscore //= require backbone //= require store/spree //= require store/plumbing //= require store/paginated_collection //= require store/underscore_mixins //= require_tree ./models //= require_tree ./collections //= require_tree ./routers //= require_tree ./views //= require_tree ./templates 01. app/assets/javascripts/store/all.js The Basics: all.js
74. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 //= require jquery //= require jquery_ujs //= require store/spree_core //= require store/spree_auth //= require store/spree_promo //= require jquery //= require underscore //= require backbone //= require store/spree //= require store/plumbing //= require store/paginated_collection //= require store/underscore_mixins //= require_tree ./models //= require_tree ./collections //= require_tree ./routers //= require_tree ./views //= require_tree ./templates 01. app/assets/javascripts/store/all.js The Basics: all.js
75. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 //= require jquery //= require jquery_ujs //= require store/spree_core //= require store/spree_auth //= require store/spree_promo //= require jquery //= require underscore //= require backbone //= require store/spree //= require store/plumbing //= require store/paginated_collection //= require store/underscore_mixins //= require_tree ./models //= require_tree ./collections //= require_tree ./routers //= require_tree ./views //= require_tree ./templates 01. app/assets/javascripts/store/all.js The Basics: all.js
76. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
77. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
78. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
79. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
80. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
81. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 var Spree = { Views: { Shared: {}, Products: {}, Taxons: {} ,Orders: {} }, Routers: { _active: {} }, Models: {}, Collections: {}, Data: { _preload: {}, products: null, taxonomies: null }, current_order: null, current_user: null, init: function(){ ... } }); 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
82. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 init: function(){ if(this.Data._preload.products!=undefined){ //preload products this.Data.products = new this.Collections.Products(); this.Data.products.resetWithPagination(this.Data._preload.products); } this.Routers._active.products = new this.Routers.Products(); this.Routers._active.taxons = new this.Routers.Taxons(); this.Routers._active.orders = new this.Routers.Orders(); Backbone.history.start({pushState: true}) $('a[data-push-state]').click(this._navigate); this.status = new this.Models.Status() this.status.fetch({success: this.set_state}); } 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
83. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 init: function(){ if(this.Data._preload.products!=undefined){ //preload products this.Data.products = new this.Collections.Products(); this.Data.products.resetWithPagination(this.Data._preload.products); } this.Routers._active.products = new this.Routers.Products(); this.Routers._active.taxons = new this.Routers.Taxons(); this.Routers._active.orders = new this.Routers.Orders(); Backbone.history.start({pushState: true}) $('a[data-push-state]').click(this._navigate); this.status = new this.Models.Status() this.status.fetch({success: this.set_state}); } 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
84. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 init: function(){ if(this.Data._preload.products!=undefined){ //preload products this.Data.products = new this.Collections.Products(); this.Data.products.resetWithPagination(this.Data._preload.products); } this.Routers._active.products = new this.Routers.Products(); this.Routers._active.taxons = new this.Routers.Taxons(); this.Routers._active.orders = new this.Routers.Orders(); Backbone.history.start({pushState: true}) $('a[data-push-state]').click(this._navigate); this.status = new this.Models.Status() this.status.fetch({success: this.set_state}); } 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
85. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 init: function(){ if(this.Data._preload.products!=undefined){ //preload products this.Data.products = new this.Collections.Products(); this.Data.products.resetWithPagination(this.Data._preload.products); } this.Routers._active.products = new this.Routers.Products(); this.Routers._active.taxons = new this.Routers.Taxons(); this.Routers._active.orders = new this.Routers.Orders(); Backbone.history.start({pushState: true}) $('a[data-push-state]').click(this._navigate); this.status = new this.Models.Status() this.status.fetch({success: this.set_state}); } 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
86. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 init: function(){ if(this.Data._preload.products!=undefined){ //preload products this.Data.products = new this.Collections.Products(); this.Data.products.resetWithPagination(this.Data._preload.products); } this.Routers._active.products = new this.Routers.Products(); this.Routers._active.taxons = new this.Routers.Taxons(); this.Routers._active.orders = new this.Routers.Orders(); Backbone.history.start({pushState: true}) $('a[data-push-state]').click(this._navigate); this.status = new this.Models.Status() this.status.fetch({success: this.set_state}); } 01. app/assets/javascripts/store/spree.js The Basics: Spree Object
87. The BASICS: push state /products/ruby-on-rails-mug RAILS URL:
88. The BASICS: push state /products/ruby-on-rails-mug RAILS URL: #products/ruby-on-rails-mug HASH Anchor:
89. The BASICS: push state /products/ruby-on-rails-mug RAILS URL: #products/ruby-on-rails-mug HASH Anchor: /products/ruby-on-rails-mug PUSH STATE:
90. The BASICS: push state /products/ruby-on-rails-mug RAILS URL: #products/ruby-on-rails-mug HASH Anchor: /products/ruby-on-rails-mug PUSH STATE:
91. 01 02 03 04 _navigate: function(evt){ evt.preventDefault(); Spree.Routers._active.products.navigate($(evt.currentTarget).attr('href'), true); } 02. spree.js _navigate() function 01 02 03 04 05 init: function(){ ... $('a[data-push-state]').click(this._navigate); ... } 01. spree.js init() function The BASICS: push state
92. 01 02 03 04 _navigate: function(evt){ evt.preventDefault(); Spree.Routers._active.products.navigate($(evt.currentTarget).attr('href'), true); } 02. spree.js _navigate() function 01 02 03 04 05 init: function(){ ... $('a[data-push-state]').click(this._navigate); ... } 01. spree.js init() function The BASICS: push state
93. 01 02 03 04 _navigate: function(evt){ evt.preventDefault(); Spree.Routers._active.products.navigate($(evt.currentTarget).attr('href'), true); } 02. spree.js _navigate() function 01 02 03 04 05 init: function(){ ... $('a[data-push-state]').click(this._navigate); ... } 01. spree.js init() function The BASICS: push state
94. Index Show Products => The BASICS: Templates
95. Index Show Products => The BASICS: Templates Pagination
96. Index Show Products => The BASICS: Templates Pagination Show Taxons =>
97. Index Show Edit Products => Orders => The BASICS: Templates Pagination Show Taxons =>
98. Index Show Edit Products => Orders => The BASICS: Templates Pagination Cart Link Account Links Show Taxons =>
99. EJS
100. 01 02 03 04 05 06 07 <td class="cart-item-image" data-hook="cart_item_image"> <% if variant.images.length == 0 %> <%= link_to small_image(variant.product), variant.product %> <% else %> <%= link_to image_tag(variant.images.first.attachment.url(:small)) ... <% end %> </td> 01. Original HTML.ERB Template 01 02 03 04 05 06 07 <td class="cart-item-image" data-hook="cart_item_image"> <% if(line_item.product.images.size()>0){ %> <a href="/products/<%= line_item.product.get('permalink') %>" <img src="/spree/products/<%= line_item.product.images.first().id %>/... </a> <% } %> </td> 02. Replacement JST.EJS Template Template: Conversion
101. CODE SMELL?
102. IDEA!
103. Render EJS Server Side
104. Rabbit Hole
105. Rabbit Hole ME
106. Scribble
107. Scribble: Concept The Ruby Racer ActionController::Responder
108. Scribble: REsponder Request
109. Scribble: REsponder Request JST.EJS File Exists?
110. Scribble: REsponder Request JST.EJS File Exists? Scribble JST.EJS YES
111. Scribble: REsponder Request JST.EJS File Exists? Scribble JST.EJS YES Rails HTML.ERB No
112. Scribble: REsponder Request Products => Index
113. Scribble: REsponder Request Products => Index JST.EJS File Exists? app/views/spree/products/index.jst.ejs
114. Scribble: REsponder Request Render Products => Index JST.EJS File Exists? app/views/spree/products/index.jst.ejs
115. 01 02 03 04 05 06 07 <% var products = new Spree.Collections.Products() %> <% products.resetWithPagination(JSON.parse(get('products_json'))) %> <%= JST['store/templates/products/index']({ products: products }) %> <script type="text/javascript"> Spree.Data._preload.products = <%= get('products_json') %>; </script> 01. app/views/spree/products/index.jst.ejs Scribble: Example Server Side JST.EJS
116. 01 02 03 04 05 06 07 <% var products = new Spree.Collections.Products() %> <% products.resetWithPagination(JSON.parse(get('products_json'))) %> <%= JST['store/templates/products/index']({ products: products }) %> <script type="text/javascript"> Spree.Data._preload.products = <%= get('products_json') %>; </script> 01. app/views/spree/products/index.jst.ejs Scribble: Example Server Side JST.EJS
117. 01 02 03 04 05 06 07 <% var products = new Spree.Collections.Products() %> <% products.resetWithPagination(JSON.parse(get('products_json'))) %> <%= JST['store/templates/products/index']({ products: products }) %> <script type="text/javascript"> Spree.Data._preload.products = <%= get('products_json') %>; </script> 01. app/views/spree/products/index.jst.ejs Scribble: Example Server Side JST.EJS
118. 01 02 03 04 05 06 07 <% var products = new Spree.Collections.Products() %> <% products.resetWithPagination(JSON.parse(get('products_json'))) %> <%= JST['store/templates/products/index']({ products: products }) %> <script type="text/javascript"> Spree.Data._preload.products = <%= get('products_json') %>; </script> 01. app/views/spree/products/index.jst.ejs Scribble: Example Server Side JST.EJS
119. 01 02 03 04 05 06 07 08 09 10 11 12 module Spree ProductsController.class_eval do helper Spree::Api::ApiHelpers def index @searcher = Config.searcher_class.new(params) @products = @searcher.retrieve_products @products_json = render_to_string(:file => 'spree/api/v1/products/index') respond_with(@products) end 01. app/controllers/spree/products_contoller_decorator.rb Scribble: Getting JSON from Actions
120. 01 02 03 04 05 06 07 08 09 10 11 12 module Spree ProductsController.class_eval do helper Spree::Api::ApiHelpers def index @searcher = Config.searcher_class.new(params) @products = @searcher.retrieve_products @products_json = render_to_string(:file => 'spree/api/v1/products/index') respond_with(@products) end 01. app/controllers/spree/products_contoller_decorator.rb Scribble: Getting JSON from Actions
121. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 source: - vendor/assets/javascripts/underscore.js - vendor/assets/javascripts/backbone.js - app/assets/javascripts/store/spree.js - app/assets/javascripts/store/paginated_collection.js - app/assets/javascripts/store/underscore_mixins.js - app/assets/javascripts/store/models/product.js - app/assets/javascripts/store/models/variant.js - ... - app/assets/javascripts/store/models/adjustment.js - app/assets/javascripts/store/collections/products.js - app/assets/javascripts/store/collections/variants.js - ... - app/assets/javascripts/store/collections/images.js layout: store/templates/layouts/spree_application 01. config/scribble.yaml Scribble: Configuration
122. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 source: - vendor/assets/javascripts/underscore.js - vendor/assets/javascripts/backbone.js - app/assets/javascripts/store/spree.js - app/assets/javascripts/store/paginated_collection.js - app/assets/javascripts/store/underscore_mixins.js - app/assets/javascripts/store/models/product.js - app/assets/javascripts/store/models/variant.js - ... - app/assets/javascripts/store/models/adjustment.js - app/assets/javascripts/store/collections/products.js - app/assets/javascripts/store/collections/variants.js - ... - app/assets/javascripts/store/collections/images.js layout: store/templates/layouts/spree_application 01. config/scribble.yaml Scribble: Configuration
123. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 source: - vendor/assets/javascripts/underscore.js - vendor/assets/javascripts/backbone.js - app/assets/javascripts/store/spree.js - app/assets/javascripts/store/paginated_collection.js - app/assets/javascripts/store/underscore_mixins.js - app/assets/javascripts/store/models/product.js - app/assets/javascripts/store/models/variant.js - ... - app/assets/javascripts/store/models/adjustment.js - app/assets/javascripts/store/collections/products.js - app/assets/javascripts/store/collections/variants.js - ... - app/assets/javascripts/store/collections/images.js layout: store/templates/layouts/spree_application 01. config/scribble.yaml Scribble: Configuration
124. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
125. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
126. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
127. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
128. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
129. 01 02 03 04 05 06 07 08 09 10 11 12 if template.exist? ctx = Scribble::Context.new(@controller) compile = ctx.load_templates compile << %Q{var _view = #{EJS.compile(Pathname.new(template).read)}; var layout = JST['#{Scribble::Config.layout}']; layout()} @controller.response_body = ctx.js_context.eval(compile) else super #fallback to built rails method end 01. lib/scribble/responder.rb Scribble: ActionController::responder
130. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 <head data-hook="inside_head"> <title><%= get('title') %></title> <%= get('csrf_meta_tags') %> <%= get('javascript_include_tag', 'store/all') %> <script type="text/javascript"> Spree.api_key = '<%= get('api_key') %>'; $(function() { Spree.init(); }); </script> </head> <body data-hook="body"> <div class="container"> <%= JST['store/templates/shared/header']() %> <div id="wrapper" class="row" data-hook> <%= _view() %> </div> <%= JST['store/templates/shared/footer']() %> </div> </body> 01. app/assets/javascripts/store/templates/layouts/spree_application.jst.ejs Scribble: LAyout
131. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 <head data-hook="inside_head"> <title><%= get('title') %></title> <%= get('csrf_meta_tags') %> <%= get('javascript_include_tag', 'store/all') %> <script type="text/javascript"> Spree.api_key = '<%= get('api_key') %>'; $(function() { Spree.init(); }); </script> </head> <body data-hook="body"> <div class="container"> <%= JST['store/templates/shared/header']() %> <div id="wrapper" class="row" data-hook> <%= _view() %> </div> <%= JST['store/templates/shared/footer']() %> </div> </body> 01. app/assets/javascripts/store/templates/layouts/spree_application.jst.ejs Scribble: LAyout
132. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 <head data-hook="inside_head"> <title><%= get('title') %></title> <%= get('csrf_meta_tags') %> <%= get('javascript_include_tag', 'store/all') %> <script type="text/javascript"> Spree.api_key = '<%= get('api_key') %>'; $(function() { Spree.init(); }); </script> </head> <body data-hook="body"> <div class="container"> <%= JST['store/templates/shared/header']() %> <div id="wrapper" class="row" data-hook> <%= _view() %> </div> <%= JST['store/templates/shared/footer']() %> </div> </body> 01. app/assets/javascripts/store/templates/layouts/spree_application.jst.ejs Scribble: LAyout
133. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 <head data-hook="inside_head"> <title><%= get('title') %></title> <%= get('csrf_meta_tags') %> <%= get('javascript_include_tag', 'store/all') %> <script type="text/javascript"> Spree.api_key = '<%= get('api_key') %>'; $(function() { Spree.init(); }); </script> </head> <body data-hook="body"> <div class="container"> <%= JST['store/templates/shared/header']() %> <div id="wrapper" class="row" data-hook> <%= _view() %> </div> <%= JST['store/templates/shared/footer']() %> </div> </body> 01. app/assets/javascripts/store/templates/layouts/spree_application.jst.ejs Scribble: LAyout
134. Demo time
135. WHY?
136. 1. DRY
137. 2. SEO
141. 3. Progressive Enhancement
142. 4. Better User Experience
143. 5. SCALABILITY
144. 6. Because you can
145. WHY NOT?
146. 1. MEMORY HOG
147. 2. MEMORY HOg
148. 3. MEMORY HOG
151. Workarounds
152. Implementation
153. Alternative JS Engines
154. Server Configuration
155. Page Caching
156. Caching High traffic Pages Products Index Products Show Taxon Show Orders Edit
157. The BASICS: MODELS Product Variant Image Option Type Option Value Taxonomy Taxon Order LineItem Adjustment Status
158. 01 02 03 04 05 06 07 08 09 10 { user: { id: 1 }, order: { id: 1234, number: 'R716022188', item_total: '16.99', state: 'cart', ... line_items: [{...}] } } 01. /status.json snippet Status: JSON
159. 01 02 03 04 05 06 07 08 09 10 { user: { id: 1 }, order: { id: 1234, number: 'R716022188', item_total: '16.99', state: 'cart', ... line_items: [{...}] } } 01. /status.json snippet Status: JSON
160. 01 02 03 04 05 06 07 08 09 10 { user: { id: 1 }, order: { id: 1234, number: 'R716022188', item_total: '16.99', state: 'cart', ... line_items: [{...}] } } 01. /status.json snippet Status: JSON
161. 01 02 03 04 05 06 07 08 09 10 { user: { id: 1 }, order: { id: 1234, number: 'R716022188', item_total: '16.99', state: 'cart', ... line_items: [{...}] } } 01. /status.json snippet Status: JSON
167. aPI Caching
168. 01 02 03 04 05 06 07 08 09 10 object @taxon cache @taxon attributes *taxon_attributes node do |t| child t.children => :taxons do attributes *taxon_attributes end end 01. /api/app/views/spree/v1/taxons/show.rabl API caching: Rabl
169. 01 02 03 04 05 06 07 08 09 10 object @taxon cache @taxon attributes *taxon_attributes node do |t| child t.children => :taxons do attributes *taxon_attributes end end 01. /api/app/views/spree/v1/taxons/show.rabl API caching: Rabl
170. 01 02 03 Started GET "/api/products/search?q%5Btaxons_id_eq%5D=558398358&page=1" for 127.0.0.1 at 2012-08-18 16:56:33 +0100 Rendered spree/api/v1/products/index.rabl (3.2ms) 02. With Cache 01 02 03 Started GET "/api/products/search?q%5Btaxons_id_eq%5D=558398358&page=1" for 127.0.0.1 at 2012-08-18 16:56:05 +0100 Rendered spree/api/v1/products/index.rabl (87.2ms) 01. Without Cache Api Caching: performance
171. 01 02 03 Started GET "/api/products/search?q%5Btaxons_id_eq%5D=558398358&page=1" for 127.0.0.1 at 2012-08-18 16:56:33 +0100 Rendered spree/api/v1/products/index.rabl (3.2ms) 02. With Cache 01 02 03 Started GET "/api/products/search?q%5Btaxons_id_eq%5D=558398358&page=1" for 127.0.0.1 at 2012-08-18 16:56:05 +0100 Rendered spree/api/v1/products/index.rabl (87.2ms) 01. Without Cache Api Caching: performance
172. Improvements
173. Better Data Handling
174. Cache Expiry
175. ECO
176. The Future
177. Client Side Rendering
179. JS
180. JS
181. JS
182. JS
183. JS
184. JS
185. polyglot
186. Deface.js
187. scribble.spree.mx
188. github.com/bdq/ejs_demo
189. ?