SlideShare a Scribd company logo
Alex Gaziev’s
GEM GON
@gazay (github, twitter)
Saturday, June 8, 13
Saturday, June 8, 13
SURFING
JAZZ
OSS
:russia => ‘BALI’
Saturday, June 8, 13
Some of my works
gon
talks
gon-sinatra
tonik
is
hockeypuck
...
Saturday, June 8, 13
A little about GON
Send data from action to JS
Started 2 years ago
~800 stars
50+ forks and PRs
Saturday, June 8, 13
Data to JS:
data-attribute
Instance variable in controller
Data-attribute in view
Find tag and parse data attribute
Saturday, June 8, 13
Data to JS:
data-attr example
controller
# home_controller.rb
def index
# some logic
@products = counted_products_collection
end
Saturday, June 8, 13
Data to JS:
data-attr example
view
# views/home/index.html.erb
... some content
<%= contant_tag “div”, id: “products”, data:
{ products: @products } do %>
Loading products...
<% end %>
Saturday, June 8, 13
Data to JS:
data-attr example
JS
# assets/javascripts/pages/home.js.coffee
jQuery ->
doSomething $(‘#products’).data(‘products’)
Saturday, June 8, 13
Data to JS:
javascript_tag
Excess lines inside your views
You should think what you write
Saturday, June 8, 13
Data to JS:
javascript_tag
view
# views/home/index.html.erb
... some content
<%= javascript_tag do %>
window.prodsURL = “<%=j products_url %>”
window.prods = <%=raw @prods.to_json %>
<% end %>
Saturday, June 8, 13
Data to JS:
javascript_tag
JS
# assets/javascripts/pages/home.js.coffee
jQuery ->
doSomething prods
Saturday, June 8, 13
Saturday, June 8, 13
Data to JS
GON
Views step - once (perfect - in layout)
Don’t have to think about escaping
Stored uniq data per request
Saturday, June 8, 13
Data to JS:
GON example
controller
# home_controller.rb
def index
# some logic
gon.products = counted_collection
gon.products_url = products_url
end
Saturday, June 8, 13
Data to JS:
GON example
view
# views/layouts/layout.html.erb
<head>
<%= include_gon(options) %>
... your js, css etc
Saturday, June 8, 13
Data to JS:
GON example
JS
# assets/javascripts/pages/home.js.coffee
jQuery ->
doSomething gon.products
Saturday, June 8, 13
Usual ways: cons
Escaping ( “</script><script>evil()</
script>”)
Excess lines in your views
Search for tag and parse attributes
Views step
Saturday, June 8, 13
GON: pros
Automatically escape and transform
to_json all data
What you write in action – you’ll get in JS
Should modify views once
Saturday, June 8, 13
GON. Next versions
Generate json with template engines
Share data between requests
Renew data in JS gon easy way
Saturday, June 8, 13
GON
RABL and jBuilder
Success!
Screencast
Ruby Weekly
More users => more PRs
Saturday, June 8, 13
GON, RABL and
jBuilder
why so cool?
All power of RABL and jBuilder
Clean your controller new way
Render multiple templates with GON
Saturday, June 8, 13
GON and RABL
multi templates
# home_controller.rb
def index
gon.rabl ‘path_to_temlpate1’, as: ‘posts’
gon.rabl ‘path_to_template2’, as: ‘users’
gon.rabl ‘path_to_template3’, as: ‘admins’
gon.rabl # app/views/home/index.rabl
end
Saturday, June 8, 13
GON and jBuilder
problems
jBuilder rendering flow
Metaprogramming
Whole environment for eval
Saturday, June 8, 13
Saturday, June 8, 13
GON Global
Share data application-wide
Initial data
Change settings everywhere by event
Saturday, June 8, 13
GON Global
init data example
# config/initializers/gon.rb
Gon.global.pictures_per_user = 4
# app/assets/javascripts/imageboard.js.coffee
setLimitToUser = gon.global.pictures_per_request
Saturday, June 8, 13
GON Global
change data example
# app/model/user.rb
after_save :change_users_limit
def change_users_limit
if User.count > 1000
Gon.global.pictures_per_request = 3
end
end
Saturday, June 8, 13
GON watch
Renew data for variable
No excess LOC
Use current state of action
Saturday, June 8, 13
GON watch:
how it works
# home_controller.rb
def index
num = User.count * factor + params[:some].to_i
gon.watch.pictures_per_request = num
gon.watch.other_num = num * factor2
end
Saturday, June 8, 13
GON watch:
how it works
# layout.html.erb
<head>
<%= include_gon(watch: true) %>
...
Saturday, June 8, 13
GON watch:
how it works
# home_index.js.coffee
renewLimit = (count) ->
$(‘#limit-counter’).text(count)
gon.watch(‘pictures_per_request’, interval: 1000,
renewLimit)
Saturday, June 8, 13
GON watch
example
Saturday, June 8, 13
Thank you!
Any questions?
http://github.com/gazay/gon
Saturday, June 8, 13

More Related Content

Similar to Gon gem. For RDRC 2013, June 7

Использование Debug утилит в разработке под Android
Использование Debug утилит в разработке под AndroidИспользование Debug утилит в разработке под Android
Использование Debug утилит в разработке под Android
SoftTechnics
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel
 
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General AssemblyIntro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
Azat Mardanov
 
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
Red Hat Developers
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e bigAndy Peterson
 
Oredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.jsOredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.js
Jesse Cravens
 
UberFire Quick Intro and Overview (early beta Aug 2013)
UberFire Quick Intro and Overview (early beta Aug 2013)UberFire Quick Intro and Overview (early beta Aug 2013)
UberFire Quick Intro and Overview (early beta Aug 2013)
Mark Proctor
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
Troy Miles
 
A Better UJS for Rails
A Better UJS for RailsA Better UJS for Rails
A Better UJS for RailsZack Siri
 
RequireJS
RequireJSRequireJS
Performance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend LondonPerformance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend London
thomas alisi
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
Jay Phelps
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptjasonsich
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
Tricode (part of Dept)
 
Passing a Front end Developer interview
Passing a Front end Developer interview Passing a Front end Developer interview
Passing a Front end Developer interview
tonyfarnsworth
 
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
Richard McIntyre
 
Data visualization in python/Django
Data visualization in python/DjangoData visualization in python/Django
Data visualization in python/Django
kenluck2001
 

Similar to Gon gem. For RDRC 2013, June 7 (20)

Использование Debug утилит в разработке под Android
Использование Debug утилит в разработке под AndroidИспользование Debug утилит в разработке под Android
Использование Debug утилит в разработке под Android
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
Intro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General AssemblyIntro to Backbone.js by Azat Mardanov for General Assembly
Intro to Backbone.js by Azat Mardanov for General Assembly
 
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
Boost Development With Java EE7 On EAP7 (Demitris Andreadis)
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Oredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.jsOredev 2013: Building Web Apps with Ember.js
Oredev 2013: Building Web Apps with Ember.js
 
UberFire Quick Intro and Overview (early beta Aug 2013)
UberFire Quick Intro and Overview (early beta Aug 2013)UberFire Quick Intro and Overview (early beta Aug 2013)
UberFire Quick Intro and Overview (early beta Aug 2013)
 
jQuery Mobile Deep Dive
jQuery Mobile Deep DivejQuery Mobile Deep Dive
jQuery Mobile Deep Dive
 
Einführung in AngularJS
Einführung in AngularJSEinführung in AngularJS
Einführung in AngularJS
 
Slides
SlidesSlides
Slides
 
Phplx mongodb
Phplx mongodbPhplx mongodb
Phplx mongodb
 
A Better UJS for Rails
A Better UJS for RailsA Better UJS for Rails
A Better UJS for Rails
 
RequireJS
RequireJSRequireJS
RequireJS
 
Performance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend LondonPerformance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend London
 
Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScript
 
Dive into AngularJS and directives
Dive into AngularJS and directivesDive into AngularJS and directives
Dive into AngularJS and directives
 
Passing a Front end Developer interview
Passing a Front end Developer interview Passing a Front end Developer interview
Passing a Front end Developer interview
 
What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...What is this DI and AOP stuff anyway...
What is this DI and AOP stuff anyway...
 
Data visualization in python/Django
Data visualization in python/DjangoData visualization in python/Django
Data visualization in python/Django
 

Recently uploaded

Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
Pixlogix Infotech
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 

Recently uploaded (20)

Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 

Gon gem. For RDRC 2013, June 7

  • 1. Alex Gaziev’s GEM GON @gazay (github, twitter) Saturday, June 8, 13
  • 4. Some of my works gon talks gon-sinatra tonik is hockeypuck ... Saturday, June 8, 13
  • 5. A little about GON Send data from action to JS Started 2 years ago ~800 stars 50+ forks and PRs Saturday, June 8, 13
  • 6. Data to JS: data-attribute Instance variable in controller Data-attribute in view Find tag and parse data attribute Saturday, June 8, 13
  • 7. Data to JS: data-attr example controller # home_controller.rb def index # some logic @products = counted_products_collection end Saturday, June 8, 13
  • 8. Data to JS: data-attr example view # views/home/index.html.erb ... some content <%= contant_tag “div”, id: “products”, data: { products: @products } do %> Loading products... <% end %> Saturday, June 8, 13
  • 9. Data to JS: data-attr example JS # assets/javascripts/pages/home.js.coffee jQuery -> doSomething $(‘#products’).data(‘products’) Saturday, June 8, 13
  • 10. Data to JS: javascript_tag Excess lines inside your views You should think what you write Saturday, June 8, 13
  • 11. Data to JS: javascript_tag view # views/home/index.html.erb ... some content <%= javascript_tag do %> window.prodsURL = “<%=j products_url %>” window.prods = <%=raw @prods.to_json %> <% end %> Saturday, June 8, 13
  • 12. Data to JS: javascript_tag JS # assets/javascripts/pages/home.js.coffee jQuery -> doSomething prods Saturday, June 8, 13
  • 14. Data to JS GON Views step - once (perfect - in layout) Don’t have to think about escaping Stored uniq data per request Saturday, June 8, 13
  • 15. Data to JS: GON example controller # home_controller.rb def index # some logic gon.products = counted_collection gon.products_url = products_url end Saturday, June 8, 13
  • 16. Data to JS: GON example view # views/layouts/layout.html.erb <head> <%= include_gon(options) %> ... your js, css etc Saturday, June 8, 13
  • 17. Data to JS: GON example JS # assets/javascripts/pages/home.js.coffee jQuery -> doSomething gon.products Saturday, June 8, 13
  • 18. Usual ways: cons Escaping ( “</script><script>evil()</ script>”) Excess lines in your views Search for tag and parse attributes Views step Saturday, June 8, 13
  • 19. GON: pros Automatically escape and transform to_json all data What you write in action – you’ll get in JS Should modify views once Saturday, June 8, 13
  • 20. GON. Next versions Generate json with template engines Share data between requests Renew data in JS gon easy way Saturday, June 8, 13
  • 21. GON RABL and jBuilder Success! Screencast Ruby Weekly More users => more PRs Saturday, June 8, 13
  • 22. GON, RABL and jBuilder why so cool? All power of RABL and jBuilder Clean your controller new way Render multiple templates with GON Saturday, June 8, 13
  • 23. GON and RABL multi templates # home_controller.rb def index gon.rabl ‘path_to_temlpate1’, as: ‘posts’ gon.rabl ‘path_to_template2’, as: ‘users’ gon.rabl ‘path_to_template3’, as: ‘admins’ gon.rabl # app/views/home/index.rabl end Saturday, June 8, 13
  • 24. GON and jBuilder problems jBuilder rendering flow Metaprogramming Whole environment for eval Saturday, June 8, 13
  • 26. GON Global Share data application-wide Initial data Change settings everywhere by event Saturday, June 8, 13
  • 27. GON Global init data example # config/initializers/gon.rb Gon.global.pictures_per_user = 4 # app/assets/javascripts/imageboard.js.coffee setLimitToUser = gon.global.pictures_per_request Saturday, June 8, 13
  • 28. GON Global change data example # app/model/user.rb after_save :change_users_limit def change_users_limit if User.count > 1000 Gon.global.pictures_per_request = 3 end end Saturday, June 8, 13
  • 29. GON watch Renew data for variable No excess LOC Use current state of action Saturday, June 8, 13
  • 30. GON watch: how it works # home_controller.rb def index num = User.count * factor + params[:some].to_i gon.watch.pictures_per_request = num gon.watch.other_num = num * factor2 end Saturday, June 8, 13
  • 31. GON watch: how it works # layout.html.erb <head> <%= include_gon(watch: true) %> ... Saturday, June 8, 13
  • 32. GON watch: how it works # home_index.js.coffee renewLimit = (count) -> $(‘#limit-counter’).text(count) gon.watch(‘pictures_per_request’, interval: 1000, renewLimit) Saturday, June 8, 13