Download to read offline
![Know your tools! var inputs = $$('input'); for (var i = 0; i < inputs.length; i++) { alert(inputs[i].name); }](https://image.slidesharecdn.com/talk-100429034407-phpapp02/75/Rails-is-not-just-Ruby-7-2048.jpg)
![Know your tools! X var inputs = $$('input'); for (var i = 0; i < inputs.length; i++) { } alert(inputs[i].name);](https://image.slidesharecdn.com/talk-100429034407-phpapp02/75/Rails-is-not-just-Ruby-8-2048.jpg)
![Full Separation application.js var Application = (function() { var initializeReplacers = function() { $$('a[data-replaces]').each(function(replacingLink) { if (!replacingLink._initializedReplacer) { new Replacer(replacingLink, replacingLink.readAttribute('data-replaces')); replacingLink._initializedReplacer = true; } }); }; return { setupOnLoad: function() { initializeReplacers(); }, setupOnPageUpdate: function() { initializeReplacers(); } } })();](https://image.slidesharecdn.com/talk-100429034407-phpapp02/75/Rails-is-not-just-Ruby-49-2048.jpg)
Uploaded byMarco Otte-Witte
Rails is not just Ruby
The document discusses best practices for integrating JavaScript with Ruby on Rails, emphasizing the importance of clean and maintainable code. It compares traditional methods, such as remote helpers, with modern approaches like full separation and explicit controls for managing JavaScript behaviors. The author advocates for avoiding classic solutions and suggests utilizing resources for further learning and improvement in coding standards.
Rails is not just Ruby
- 1. Rails is notjust Ruby
- 2. Marco Otte-Witte Software Engineer,Consultant, Trainer http://simplabs.com Open Source http://github.com/marcoow http://github.com/simplabs
- 3. JavaScript is serious Business!
- 4. It‘s not just addinglib after lib after lib!
- 5. Give your JavaScriptthe same love your Ruby code gets!
- 6. Know your tools!
- 7. Know your tools! varinputs = $$('input'); for (var i = 0; i < inputs.length; i++) { alert(inputs[i].name); }
- 8. Know your tools! X var inputs = $$('input'); for (var i = 0; i < inputs.length; i++) { } alert(inputs[i].name);
- 9. Know your tools! Protoype.js $$('input').each(function(input){ alert(input.name); }); jQuery $.each('input', function() { alert(this.name); });
- 10. Know your tools! functionsetupPage() { $('userName').update( readUserName(); ); } function readUserName() { //read user's name from cookie }
- 11. Know your tools! X function setupPage() { $('userName').update( readUserName(); ); } function readUserName() { //read user's name from cookie }
- 12. Know your tools! varApplication = (function() { //private var readUserName = function() { //read user's name from cookie }; return { //public setupPage: function() { $('userName').update( readUserName(); ); } } })();
- 13. Know your tools! vartimeout = window.setTimeout( "element.update(" + someContent + ");", 1000 );
- 14. Know your tools! X var timeout = window.setTimeout( "element.update(" + someContent + ");", 1000 );
- 15. Know your tools! Protoype.js element.update.bind(element).curry( someContent ).delay(1)
- 16. Know your tools! varloginField = document.getElementById('#user_login'); alert(loginField.value);
- 17. Know your tools! X var loginField = document.getElementById('#user_login'); alert(loginField.value);
- 18.
- 19. Know your tools! varloginField = document.getElementById('#user_login'); loginField.style.display = 'none';
- 20. Know your tools! X var loginField = document.getElementById('#user_login'); loginField.style.display = 'none';
- 21.
- 22. Know your tools! varloginField = document.getElementById('user_login'); function loginChanged() { alert(loginField.value); } if (loginField.addEventListener) { loginField.addEventListener( 'change', loginChanged, false); } else if (obj.attachEvent) { obj.attachEvent('onchange', loginChanged); }
- 23. Know your tools! X var loginField = document.getElementById('user_login'); function loginChanged() { alert(loginField.value); } if (loginField.addEventListener) { loginField.addEventListener( 'change', loginChanged, false); } else if (obj.attachEvent) { obj.attachEvent('onchange', loginChanged); }
- 24. Know your tools! Protoype.js $('user_login').observe( 'change', function(event) { alert($F('user_login')); }); jQuery $('#user_login').change(function() { alert(this.val()); });
- 25.
- 26. Write valid JavaScript! someValue = 0; anotherValue = 1; function fun(param) { alert(param) }
- 27. Write valid JavaScript! X someValue = 0; anotherValue = 1; function fun(param) { alert(param) }
- 28. Write valid JavaScript! varsomeValue = 0; var anotherValue = 1; function fun(param) { alert(param); }
- 29. Write valid JavaScript! someValue = 0; anotherValue = 1; function fun(param) { alert(param) }
- 30. Write valid JavaScript! someValue = 0; anotherValue = 1; function fun(param) { alert(param) }
- 31. Write valid JavaScript! someValue = 0; Missing semicolon. anotherValue = 1; Implied globals: function fun(param) { someValue, anotherValue alert(param) }
- 32. JavaScript and Rails
- 33. JavaScript and Rails •RESTfulactions (delete, put, post) •AJAX •Effects •etc.
- 34.
- 35. the Demo App POST/replace
- 36. the Demo App POST/replace Code is at http://github.com/marcoow/js-and-rails
- 37.
- 38.
- 39. the classic Solution •Helpers(remote_form_for, link_to_remote etc.) •RJS •onclick=“... •href=“javascript:...
- 40. the classic Solution index.html.erb <divid="someElement"> some text that's replaced later </div> <%= link_to_remote 'Replace', :url => classic_solution_replace_path, :method => :post %>
- 41. the classic Solution classClassicSolutionController < ApplicationController def index end def replace end end
- 42. the classic Solution replace.rjs page.replace_html'someElement', :partial => 'new_content'
- 43. the classic Solution _new_content.html.erb <b>Freshnew content rendered at <%= Time.now %></b> <%= link_to_remote 'Replace again', :url => classic_solution_replace_path, :method => :post %>
- 44. the classic Solution •strongcoupling •hard to maintain •no/ little code reuse •bloated HTML •code that actually belongs together is distributed over several places •easy to write in the first place
- 45.
- 46. Full Separation •define JavaScriptcontrols that encapsulate all frontend logic •mark elements with class, rel or HTML5‘s data-* attributes •full separation of HTML and JavaScript •Initialization of controls on dom:loaded event
- 47. Full Separation •define JavaScriptcontrols that encapsulate all frontend logic •mark elements with class, rel or HTML5‘s data-* attributes •full separation of HTML and JavaScript •Initialization of controls on dom:loaded event
- 48. Full Separation replacer.js var Replacer= Class.create({ initialize: function(container, target) { this.container = $(container); this.target = $(target); this.container.observe('click', this.onClick.bindAsEventListener(this)); }, onClick: function(event) { event.stop(); new Ajax.Updater( this.target, this.container.href, { method: 'post', evalScripts: true } ); } });
- 49. Full Separation application.js var Application= (function() { var initializeReplacers = function() { $$('a[data-replaces]').each(function(replacingLink) { if (!replacingLink._initializedReplacer) { new Replacer(replacingLink, replacingLink.readAttribute('data-replaces')); replacingLink._initializedReplacer = true; } }); }; return { setupOnLoad: function() { initializeReplacers(); }, setupOnPageUpdate: function() { initializeReplacers(); } } })();
- 50. Full Separation application.js document.observe('dom:loaded', function(){ Application.setupOnLoad(); Ajax.Responders.register({ onComplete: Application.setupOnPageUpdate }); });
- 51. Full Separation application.js document.observe('dom:loaded', function(){ Application.setupOnLoad(); Ajax.Responders.register({ onComplete: Application.setupOnPageUpdate }); }); Replacer controls are initialized on page load and after every AJAX request
- 52. Full Separation index.html.erb <div id="someElement"> some text that's replaced later </div> <%= link_to 'Replace', full_separation_replace_path, :'data-replaces' => 'someElement' %>
- 53. Full Separation class FullSeparationController< ApplicationController def index end def replace respond_to do |format| format.js { render :partial => 'new_content' } end end end
- 54. Full Separation _new_content.html.erb <b>Fresh newcontent rendered at <%= Time.now %></b> <%= link_to 'Replace again', full_separation_replace_path, :'data-replaces' => 'someElement' %>
- 55. Full Separation •clean, semanticHTML •full separation of concerns •clean HTML/CSS/JS is crucial •Behaviour is (kind of) implicit •discipline required
- 56.
- 57. explicit Controls •like FullSeparation •but controls are initialized in the templates •more explicit/ obvious what‘s going on
- 58. explicit Controls index.html.erb <div id="someElement"> some text that's replaced later </div> <%= link_to 'Replace', controls_replace_path, :id => 'replacerLink' %> <script type="text/javascript" charset="utf-8"> document.observe('dom:loaded', function() { var replacer = new Replacer('replacerLink', 'someElement'); }); </script>
- 59. explicit Controls class ControlsController< ApplicationController def index end def replace respond_to do |format| format.js { render :partial => 'new_content' } end end end
- 60. explicit Controls _new_content.html.erb <b>Fresh newcontent rendered at <%= Time.now %></b> <%= link_to 'Replace again', controls_replace_path, :id => 'secondReplacerLink' %> <script type="text/javascript" charset="utf-8"> var newReplacer = new Replacer( 'secondReplacerLink', 'someElement' ); </script>
- 61. explicit Controls _new_content.html.erb <b>Fresh newcontent rendered at <%= Time.now %></b> <%= link_to 'Replace again', controls_replace_path, :id => 'secondReplacerLink' %> <script type="text/javascript" charset="utf-8"> var newReplacer = new Replacer( 'secondReplacerLink', 'someElement' ); </script> No initialization on dom:loaded here as this is the result of an AJAX request (dom:loaded not fired)
- 62. explicit Controls •HTML is(mostly) clean and semantic •Behaviour is explicit in the templates •easier to grasp what‘s going on than with Full Separation •though not as nice as full separation
- 63. Either go with FullSeparation or explicit Controls!
- 64. Avoid the classic Solution when you can!
- 65.
- 66.
- 67.