RailsConf - 6 Degrees of JavaScript on Rails

Transcript

1. Six Degrees of JavaScript On Rails
2. –Amnesiac(s) “Who am I?”
3. Michael Crismali Senior developer at DevMynd Started as an apprentice at DevMynd Software A lot of work in Rails apps with a lot of JavaScript On Github as crismali
4. –Michael Crismali, circa just now “There are six degrees of JavaScript on Rails.”
5. Why should anyone care? And what are they?
6. JavaScript is inescapable When it comes right down to it, certain user interactions can only be done with JavaScript
7. Teammates with differing skill levels A lot of teams write software and not everyone on the team is the same. People often have wildly different levels of comfort with JavaScript, especially when it’s not the primary language
8. All in on JavaScript? As Rails developers, it can often feel like choosing between a classic server rendered HTML app or a single page JavaScript application with a Rails API
9. –Michael Crismali and people who read the talk description “The previous slide contained a false choice.”
10. The Degrees
11. Unobtrusive JavaScript The first degree
12. What is it? Pretty slick Helps implement common UI patterns through Rails form helpers You don’t have to write any JavaScript So unobtrusive you may not know you’ve used it
13. UJS by example link_to "Sign Out", destroy_users_session_path, method: :delete link_to "Dangerous zone", dangerous_zone_path, data: { confirm: 'Are you sure?' } f.submit data: { "disable-with": "Saving..." }
14. jQuery and/or Widgets The second degree
15. jQuery and/or Widgets Classic! Probably not too organized Third party libraries are vendored or hosted from some CDN Examples: Typeahead search, custom dropdowns, making flash messages fade away
16. jQuery by Example <script type="text/javascript"> $(document).ready(function() { $('.flash-message').fadeOut() $('select.custom-dropdown').selectmenu() }) </script>
17. Structure and Stimulus The third degree
18. Structure and Stimulus Hip hybrid Eventually we have enough JavaScript that we need to be organized Probably starting to lean on data attributes pretty hard Stimulus is one solution At this point we may be adding tests or trying to figure out other ways to pass data to our scripts
19. <div data-controller="clipboard"> PIN: <input data-target="clipboard.source" type="text" value="1234" readonly> <button data-action="clipboard#copy">Copy to Clipboard</button> </div> // app/javascript/controllers/clipboard_controller.js import { Controller } from 'stimulus' export default class extends Controller { static targets = [ "source" ] connect() { if (document.queryCommandSupported("copy")) { this.element.classList.add("clipboard--supported") } } copy() { this.sourceTarget.select() document.execCommand("copy") } }
20. A Sprinkling of a Framework The fourth degree
21. A Sprinkling of a Framework Just a little taste For more complicated interactions, like wizards Leverage React/Angular/etc but just on a few pages Controls just part of the page
22. class CommentBubble extends Component { state = { text: '' } handleSubmit = () => { saveComment(this.state.text).then(() => this.setState({ text: ''})) } render() { return <div className='comment-bubble'> <input placeholder='Your comment' type='text' value={this.state.text} onChange={(text) => this.setState({ text })} /> <button onClick={this.handleSubmit}>Submit</button> </div> } } document.getElementsByClassName('comment').forEach((element) => { ReactDOM.render(<CommentBubble />, element) })
23. Framework Pages The fifth degree
24. Framework Pages Some pages are mostly or entirely rendered by a JavaScript framework A lot of interaction Rails templates are pretty much just pack tags Possibly some client side routing
25. <div id="wizard"></div> <%= stylesheet_pack_tag "sign-up-wizard" %> <%= javascript_pack_tag "sign-up-wizard" %> import React, { Component } from 'react' import ReactDOM from 'react-dom' import { Slides } from './Components' import { WizardRouter } from './WizardRouter' class SignUpWizard extends Component { render() { return <Slides type=''> <WizardRouter /> </Slide> } } ReactDOM.render(<SignUpWizard />, document.getElementById('wizard'))
26. Single Page App(s) in Rails The sixth degree
27. Single Page App(s) in Rails Basically a Rails API that happens to host a single page app Lots of client side routing Benefits of going all in on JavaScript without complicating your deploy processes
28. Rails Routes and Template Rails.application.routes.draw do root to: "pages#app" get "/admin/*path", to: "pages#admin" get "/*path", to: "pages#app" end <div id="app-root"></div> <%= stylesheet_pack_tag "app" %> <%= javascript_pack_tag "app" %> <div id="admin-root"></div> <%= stylesheet_pack_tag "admin" %> <%= javascript_pack_tag “admin" %> routes.rb app.html.erb admin.html.erb
29. Thrilling Conclusion/Recap 6 Rails, 6 JavaScript
30. The Degrees Unobtrusive JavaScript jQuery and/or Widgets Structure and Stimulus A Sprinkling of a Framework Framework Pages Single Page App Inside of Rails
31. –The Text Above “You don’t have to choose just one of the six degrees.”
32. Mix and Match Responsibly There are some risks to mixing the different degrees together, but it’s possible to do them well.
33. Resources https://www.devmynd.com/ http://guides.rubyonrails.org/ working_with_javascript_in_rails.html#unobtrusive- javascript https://jquery.com/ https://stimulusjs.org/ https://github.com/rails/webpacker
34. Questions? Comments? Just say hi?
35. The End?