Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails 7 Front End Tooling

Rails 7 Front End Tooling

Rails 7 introduces new tools for the the default interaction between Rails and front end JavaScript and CSS. Out with Webpacker, in with importmaps and tailwindcss-rails. Or jsbundling-rails and cssbundling-rails. Out with Sprockets, in with Propshaft. It seems confusing, but the new tools are simpler to use and manage than the old ones. In this workshop, attendees will build a Rails 7 program using the new tooling, building up to using Hotwire to augment a Rails view. We’ll explore why the new tools exist, and how they can improve your relationship with JavaScript building and developing.

6b767d8a4c9910e007c122d81eb4de73?s=128

Noel Rappin

June 12, 2022
Tweet

More Decks by Noel Rappin

Other Decks in Technology

Transcript

  1. Rails 7 Front End Tooling If you want to follow

    along • The repo is at https://github.com/ noelrappin/rails_conf_2022 • Set up instructions are in the Readme • Slack channel is #ws-rails-7-front-end- tooling Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  2. Has this ever happened to you? Noel Rappin -- Rails

    7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  3. [Webpacker] Compiling... Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  4. [Webpacker] Compiling... Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  5. [Webpacker] Still Compiling... Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  6. [Webpacker] Go Get Some Coffee I'm still Compiling... Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  7. Or this? Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  8. Webpacker can't find application in public/packs/manifest.json. Possible causes: 1. You

    want to set webpacker.yml value of compile to true for your environment 2. webpack has not yet re-run to reflect updates. 3. You have misconfigured Webpacker's config/webpacker.yml file. 4. The moon is the seventh house 5. You looked at Webpacker funny 6. You neglected to throw a pinch of salt over your shoulder Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  9. Getting code to the browser is too complicated Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  10. Lots of configuration Lots of boilerplate Noel Rappin -- Rails

    7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  11. Rails 7 to the rescue Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  12. But there's a larger problem: Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  13. A client side code is very complicated Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  14. Rails 7 to the Rescue there, too Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  15. Rails 7 Front End Tooling Noel Rappin (@noelrap) https://www.chime.com http://noelrappin.com

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  16. This is a long session Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  17. Please ask questions #ws-rails-7-front-end-tooling Noel Rappin -- Rails 7 Front

    End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  18. Repo https://github.com/noelrappin/rails_conf_2022/ Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  19. 1. Why is it like this? 2.What does Rails 7

    do? 3.Look at boilerplate code 4. Do Hotwire stuff to it Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  20. The Logistics Problem Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  21. In development: Allow you to write structured code and serve

    that code quickly when you change it Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  22. In production: Bundle all that code in a place that

    the browser expects it Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  23. JavaScript C Static Assets Noel Rappin -- Rails 7 Front

    End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  24. For a long time, Rails didn't have a logistical problem

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  25. Because Rails used "classic" Ajax Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  26. Inline JavaScript and Rails helpers link_to_remote form_for_remote Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  27. JavaScript tooling got more powerful Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  28. JavaScript code got more complex Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  29. Asset Pipeline (Sprockets) Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  30. Manifest files app/assets/javascripts/application.js //= require user.js //= require_tree javascript Then

    <%= javascript_link_tag "application" %> Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  31. Pros • Integration with Rails • Relatively simple • Package

    JavaScript as Ruby Gem Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  32. Cons • Unique Syntax • Outside of JS ecosystem •

    Didn't keep up with Babel, TypeScript, etc… Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  33. Once you are already packaging code… Build steps Other tooling

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  34. Webpack / Webpacker Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  35. Webpack Strategy • Package.json • webpack configuration • Compilation Noel

    Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  36. Webpacker • Sensible default webpack configuration • Integrate compilation with

    Rails tools Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  37. Pros • Access to webpack's flexibility • The default is

    good for many uses Cons • Webpack is really complicated • Small webpacker team fell behind Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  38. Rails 7 Strategies Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  39. Separate Generate browser-friendly code Send stuff to browser Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  40. Conversion: Bundling or Import Maps Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  41. Sending Stuff: Propshaft Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  42. Propshaft is a partial replacement for Sprockets Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  43. Propshaft • Get your stuff to a known directory •

    Propshaft will serve it Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  44. Bundling Thin wrapper around • esbuild • Rollbar • Webpack

    • Tailwind • Sass Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  45. Pros • Very flexible • Much simpler Cons • Doesn't

    help with complex JS builds Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  46. But what if you didn't actually need to bundle? Noel

    Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  47. Import maps Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  48. What do import maps do? Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  49. Logical name of module -> URL of module Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  50. They map imports Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  51. Bundling does two things for the browser • One H

    P request rather than many • Handles where to look when you import a module Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  52. In H P/2, there's no penalty for many H P

    requests Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  53. The map tells you where to look Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  54. <script type="importmap" data-turbo-track="reload">{ "imports": { "application": "/assets/application-71cc3ac8c00a1b68a53eca7aa49b154c8a5d858b.js", "@hotwired/turbo-rails": "/assets/turbo.min-2e103ccc37abc7e592e309b1e6fa6aab152c8c99.js", "@hotwired/stimulus":

    "/assets/stimulus.min-18eaacc58b7827f3729d07fff0094620e22f9c20.js", "@hotwired/stimulus-loading": "/assets/stimulus-loading-e367296568a6df104dc84fcfe5d1aafae5076fc0.js", "controllers/application": "/assets/controllers/application-a45fcffa4627508814a7727d04043357d1dcedbe.js", "controllers/hello_controller": "/assets/controllers/hello_controller-6affc1d50ed526d025a35f1d9651a07629a2312d.js", "controllers": "/assets/controllers/index-a60852f1edb9abac18231d32c970b5d1d066dc74.js" } }</script> <link rel="modulepreload" href="/assets/application-71cc3ac8c00a1b68a53eca7aa49b154c8a5d858b.js"> <link rel="modulepreload" href="/assets/turbo.min-2e103ccc37abc7e592e309b1e6fa6aab152c8c99.js"> <link rel="modulepreload" href="/assets/stimulus.min-18eaacc58b7827f3729d07fff0094620e22f9c20.js"> <link rel="modulepreload" href="/assets/stimulus-loading-e367296568a6df104dc84fcfe5d1aafae5076fc0.js"> <script src="/assets/es-module-shims.min-5ae73ca96350ef69888fc88e45277f783c0be43b.js" async="async" data-turbo-track="reload"></script> <script type="module">import "application"</script> Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  55. Pros • No JS build step at all Cons •

    No JS build step at all Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  56. Best for a modest amount of JS Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  57. Hotwire suggests you only need a modest amount Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  58. Installing • rails new . -a propshaft -j importmap -d

    sqlite3 -c tailwind --skip-test Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  59. JavaScript • app/javascript/application.js // Configure your import map in config/importmap.rb.

    // Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" import "controllers" Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  60. • app/controllers/index.js // Import and register all your controllers from

    the importmap under controllers/* import { application } from "controllers/application" // Eager load all controllers defined in the import map under controllers/**/*_controller import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" eagerLoadControllersFrom("controllers", application) // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!) // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading" // lazyLoadControllersFrom("controllers", application) Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  61. • config/importmap.rb # Pin npm packages by running ./bin/importmap pin

    "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  62. Tailwind • config/tailwind.config.js const defaultTheme = require('tailwindcss/defaultTheme') module.exports = {

    content: [ './app/helpers/**/*.rb', './app/javascript/**/*.js', './app/views/**/*.{erb,haml,html,slim}' ], theme: { extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), ] } Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  63. • app/assets/stylesheets/ application.tailwind.css @tailwind base; @tailwind components; @tailwind utilities; Noel

    Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  64. Layout • app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>RailsConf2022</title> <meta name="viewport"

    content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> </head> <body> <main class="container mx-auto mt-28 px-5 flex"> <%= yield %> </main> </body> </html> Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  65. • bin/dev #!/usr/bin/env bash if ! command -v foreman &>

    /dev/null then echo "Installing foreman..." gem install foreman fi foreman start -f Procfile.dev • Procfile.dev web: bin/rails server -p 3000 css: bin/rails tailwindcss:watch Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  66. Noel Rappin -- Rails 7 Front End Tooling -- RailsConf

    2022 -- http://www.noelrappin.com -- @noelrap
  67. Added • Data (projects, people, cards) • Default scaffolds, but

    custom project view • Some handy gems (simple form, annotate) • The data is generated randomly Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  68. Lots to do here Noel Rappin -- Rails 7 Front

    End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  69. Branch Uses edit_name_and_description turbo frames detail_show_hide stimulus add_new_card turbo stream

    forward_and_back turbo stream status_show_hide stimulus broadcast_new_card actioncable search turbo frames search_with_autosubmit stimulus drag_and_drop stimulus and sortable.js size_and_person stimulus and turbo frames search_with_recent_searches stimulus kredis turbo stream actioncable Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  70. The Rails Front End Way Server-Side Rendering "Sprinkles of JavaScript"

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  71. Hotwire Turbo and Stimulus Noel Rappin -- Rails 7 Front

    End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  72. Turbo Frames Noel Rappin -- Rails 7 Front End Tooling

    -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  73. Custom HTML <turbo- frame> All links or forms in that

    element only redraw that element Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  74. The returned HTML is parsed and looks for a Turbo

    Frame matching the DOM ID Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  75. If there is no matching frame, the frame goes blank

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  76. Two fun tricks Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  77. <turbo-frame id="concert_16" src="/concerts/16" loading="lazy"> LOADING DISPLAY </turbo-frame> Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  78. src means "load from that URL after the page loads"

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  79. lazy means "wait to load until the element is visible"

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  80. Turbo Stream <turbo-stream action="" target=""> <template> </template> </turbo-stream> Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  81. Multiple Turbo Stream payloads can be in the same response

    Turbo Frames can only affect one DOM ID Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  82. Turbo Streams allows for different HTML actions (append, prepend, remove,

    replace, update) Turbo Frames can only update Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  83. Turbo Stream processing does NOT happen on normal GET requests

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  84. Turbo Streams are meant to be enhancements Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  85. Stimulus Noel Rappin -- Rails 7 Front End Tooling --

    RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  86. Adds attributes to existing HTML <div data-controller="pulldown" data-action="click->pulldown#start" data-pulldown-target="anchor"> </div>

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  87. A controller is where Stimulus code is executed Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  88. Controllers are attached to DOM elements with the data-controller attribute

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  89. Targets are declared as data- controllername-target=targetname as in data-flip- target=elementToChange

    Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  90. Targets are declared in the controller • elementToChangeTarget • elementToChangeTargets

    • hasElementToChangeTarget Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  91. Values and Classes Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  92. data-flip-status-value=true data-flip-true-class=rotate-90 data-flip-false-class=-rotate-90 Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  93. • this.statusValue • this.statusValueChanged() (called on startup) • this.trueClass •

    this.hasTrueClass Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  94. Actions data-action="click->flip#toggle" action -> controller # method Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  95. So the action calls the toggle method which changes the

    value which calls the change hook Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  96. Which to use? Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  97. There's a lot of overlap Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  98. Rules of thumb Noel Rappin -- Rails 7 Front End

    Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  99. The server is the source of truth Noel Rappin --

    Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  100. Build it without fancy interaction first, where possible Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  101. Take advantage of The Rails Way • Small partials •

    Naming conventions for partials • Naming conventions for resources and actions Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  102. Prefer Turbo Frame over Turbo Stream, where possible Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  103. Selectively redrawing a page is actually really flexible… Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  104. Prefer generic Stimulus where possible Noel Rappin -- Rails 7

    Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  105. Selectively adding and removing C is also really flexible… Noel

    Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  106. Can | do this as a form submit? Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  107. Does the server need to know this action happened? Noel

    Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  108. Can | do this by combining view code that already

    exists? Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  109. Can | do this by toggling C ? Noel Rappin

    -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  110. Thanks! Noel Rappin -- Rails 7 Front End Tooling --

    RailsConf 2022 -- http://www.noelrappin.com -- @noelrap
  111. Noel Rappin (@noelrap) http://pragprog.com/book/nrclient2 http://pragprog.com/book/tailwind2 (35% with RailsConf_May2022) https://buttondown.email/noelrap And

    coming soon: Programming Ruby, Fifth Edition Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap