SpreeConf Europe: Backbone.js & Spree

Transcript

1. None

2. Brian D. Quinn CTO & Co-founder Spree Commerce, Inc. github.com/bdq

   twitter.com/briandq

3. BRUG

4. Breakfast Roll User Group

5. None

6. Using backbone.js with Spree

7. Our Experience

8. None

9. Theme Editor SpreeWorks.com

10. Admin (Orders/Products) SpreeWorks.com

11. None

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

138. None
139. None
140. None

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

149. None
150. None

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
162. None
163. None
164. None
165. None
166. None

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

178. None

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