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

Rails 8 Frontend: 10 commandments & 7 deadly si...

Yaro Shm
September 24, 2024

Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025

Common patterns and best practices for developing Frontend in Rails applications.

This talk does not focus on Hotwire.

Yaro Shm

September 24, 2024
Tweet

Other Decks in Programming

Transcript

  1. Rails 6 🧑🎨🖼 Rails 7 renaissance Webpacker *.js.erb rails-ujs jQuery

    importmaps/esbuild *.turbo_stream.erb Turbo Drive StimulusJS
  2. • -c=tailwind, bootstrap, bulma, postcss, sass • -j=importmap, bun, webpack,

    esbuild, rollup • -a=propshaft, sprockets • -d=sqlite3, mysql, trilogy, postgresql • --main
  3. IMPORTMAP ESBUILD *if you have few JS dependencies VS *if

    you have JS dependencies with their own CSS
  4. • -c=none, tailwind, bootstrap, bulma, postcss, sass • -j=importmap, bun,

    webpack, esbuild, rollup • -a=propshaft, sprockets • -d=sqlite3, mysql, trilogy, postgresql • --main
  5. Do not disable, unless redirect to external service (oAuth) First

    complete feature with normal redirects. Next, add reactivity.
  6. LETS RECAP 1. Layout design = start here! 2. Page

    component - consistent <%= yield %> 3. Flash styling 4. Active link to 5. Button styling 6. CSS abstraction / helpers / view components 7. Hotwire, Stimulus 8. 404 pages, Dark Mode, Meta tags, native HTML tags 9. Component libraries
  7. Let’s work together! 🤝 • Rails frontend • Hotwire •

    Turbo Native (mobile apps with Rails) • Billing / SaaS • Multitenancy • Tests from zero to hero