Rails 7 Front End Tooling

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Has this ever happened to you? Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Getting code to the browser is too complicated Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

The Logistics Problem Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Once you are already packaging code… Build steps Other tooling Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Webpack Strategy • Package.json • webpack configuration • Compilation Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Bundling Thin wrapper around • esbuild • Rollbar • Webpack • Tailwind • Sass Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

{ "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" } } import "application" Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

• 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

Slide 61

Slide 61 text

• 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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

• 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

Slide 64

Slide 64 text

Layout • app/views/layouts/application.html.erb RailsConf2022 <%= 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 %> <%= yield %> Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 65

Slide 65 text

• 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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Lots to do here Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Custom HTML 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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Turbo Stream processing does NOT happen on normal GET requests Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Adds attributes to existing HTML

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

• 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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Prefer Turbo Frame over Turbo Stream, where possible Noel Rappin -- Rails 7 Front End Tooling -- RailsConf 2022 -- http://www.noelrappin.com -- @noelrap

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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