$30 off During Our Annual Pro Sale. View Details »

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.

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