A Front-End Journey

back to Rails

Or “How I learned to stop worrying & love the Hotwire”.

Kevin Vanzandberghe @kevinvzb

Hello!

• Discovered Ruby & Rails in 2010.
• First job as Rails developer in 2012.
• Worked in agency / freelance / product.

Work: Nodalview

Play: Tabletop RPGs

Rails front-end

across the years

A few attempts

• RJS
• Asset pipeline
• BackboneJS
• jQuery
• Rails UJS
• CoffeeScript
• SASS
• Bundled JS gems
• ERB alts (haml, slim)
• Bower
• Early frameworks (Ember, Angular)
• Turbolinks
• Early React
• Webpack(er)
• API mode + full front-end frameworks

React…

• Small islands of isolated component trees.

React…

• Small islands of isolated component trees.
• Entire pages in a single component tree.

React…

• Small islands of isolated component trees.
• Entire pages in a single component tree.
• Data fetching with GraphQL.

React…

• Small islands of isolated component trees.
• Entire pages in a single component tree.
• Data fetching with GraphQL.
• Client-side routing.

React…

• Small islands of isolated component trees.
• Entire pages in a single component tree.
• Data fetching with GraphQL.
• Client-side routing.
• Etc.

Excellent UI fidelity.

Huge overhead.

Next.js

React meta-framework

• Very opinionated.
• Sane defaults.
• Lots of features out of the box.

Time for a choice

No more hybrid stack.

One or the other.

First attempt: Next.js

“Famous last words”

“I’m going to need Rails at some point for that…”

Missing a lot

Increasing complexity

Second attempt: Rails

Kind of obvious in hindsight

One goal

All of Rails, without sacrificing UI/UX/DX.

I still want all that:

• Components
• Interactivity
• UI Docs
• Suspense
• Inline forms
• Form loading states
• Confirm dialogs
• Live updates

Can I?

Let’s find out!

Components

Components

Basics

Components

Views & Controllers

Components

Slots

Components

Interactivity

• Hook a Stimulus Controller
• Define targets
• Define actions

Components

Stimulus

Components

Bonus: Hooks

Demo

Suspense

Suspense

Demo

Inline Forms

Inline Forms

Index page

Inline Forms

Form page

• Caveat: extra methods might be due to a bug in Turbo 8 beta.

Inline Forms

Controller

• No magic here!

Demo

Loading States

Loading states

• Auto disabled on buttons & submits
• turbo_submits_with for dynamic text

Demo

Live Updates

Live updates

• Yes, that’s it.

Demo

Mission accomplished?

I’d say so.

But wait, there’s more…

Well, there’s less.

Fewer things to do for the same result.

No more

Internal APIs your front-end is the sole consumer of.

No more

Hard to debug local states.

No more

Duplicated logic across 2 half-stacks.

No more

Interminable asset compilations.

No more

Building expertise in two different frameworks.

Lessons

Tradeoffs

Tradeoffs

Minus

• Limited access to cutting-edge front-end libraries
• Not 100% native-feeling

Tradeoffs

Plus

• Sticking with (one) framework’s defaults
• Much faster iterations

I’m finding joy again

QA

hotwire-resources

All the links I’ve compiled while learning this.

​

github.com/kvzb/hotwire-resources

Thanks!