← Graph

18 months of using hotwire and viewcomponent in production

talk 24 connections

Yaroslav Shmarov's wroclove.rb 2022 talk on 18 months of using Hotwire and ViewComponent to build a modern Rails monolith at the French startup Bearer. Part 1 discusses ViewComponent: why helpers (global) and decorators (object-specific) don't solve front-end component structuring, how Bearer's badges were designed in Figma and implemented with a .rb file defining variants/validations, a separate CSS file, and a tiny shared HTML template; key learnings include appending custom CSS classes and data attributes instead of proliferating variants, mixing object-specific components (passing a record) with generic ones (passing color/size), nesting components inside components, choosing per-component CSS files on a case-by-case basis, and that replacing templates/partials with ViewComponents is possible but not mandatory. The hardest problems are custom form inputs (e.g. multi-select with search) implemented by hidden forms driven by Stimulus. Part 2 covers Hotwire: Turbo Frames + Turbo Streams + Stimulus, noting Hotwire is not Rails-specific (e.g. Turbo Laravel) and distinguishing HTTP Turbo Streams (response-driven, like rebranded js.erb) from Action Cable WebSocket broadcasts. Live demo shows asynchronously-loaded index records, live search with URL updates via turbo-action=advance, modals auto-opening via Stimulus clicking a hidden link, multi-step typeform-style flows, conditionally-visible submit buttons that re-render only on actual attribute change, API-token one-time reveal, folder-navigation UIs, infinite pagination (Turbo Frame rendered inside a Turbo Stream), and dynamic country/state/city forms where selecting country triggers a hidden button that re-renders the form fragment. Emphasizes Frames, Streams and Stimulus can be used separately and that 'a couple of lines of JS' via Stimulus massively extends their capabilities. Challenges: designers with React mindset expecting animated transitions; learning the limits; structuring DOM so a search field can target a form it isn't nested inside. Closes on also-rans: StimulusReflex and AnyCable to go further, htmx and Phoenix LiveView as non-Rails server-side-rendering alternatives, and Phlex as a potential ViewComponent substitute. Q&A: testing ViewComponents via RSpec assertions, snapshot testing, and system tests for Turbo Stream/Frame flows — easier than React for a Ruby-comfortable developer.

date
2022-03-11
type
talk
talk 18 months of using hotwire and viewcomponent in production
about
ViewComponent tool
First half of the talk is dedicated to structuring the Rails front-end with ViewComponent.
talk 18 months of using hotwire and viewcomponent in production
about
Turbo Frames tool
Live demo showcases async record loading, modals, and YouTube-like independent regions with Turbo Frames.
talk 18 months of using hotwire and viewcomponent in production
about
Turbo Streams tool
Live demo shows reset-filter buttons, filter counts, one-time token reveal, and infinite pagination via Turbo Streams.
talk 18 months of using hotwire and viewcomponent in production
about
Stimulus tool
Demonstrates hidden-link modal triggers, re-submit buttons, and how a few lines of Stimulus extend Hotwire dramatically.
talk 18 months of using hotwire and viewcomponent in production
about
Tailwind CSS tool
Part of Bearer's front-end stack used alongside ViewComponent.
talk 18 months of using hotwire and viewcomponent in production
about
Bearer company
Case study of the speaker's employer and its Rails monolith rewrite.
talk 18 months of using hotwire and viewcomponent in production
about
React tool
Frames Hotwire vs React decision criteria early in the talk.
talk 18 months of using hotwire and viewcomponent in production
about
Webpacker tool
Describes migrating away from Webpacker as the year's favorite PR.
talk 18 months of using hotwire and viewcomponent in production
about
Turbo Laravel tool
Cited to argue Hotwire is not Rails-specific.
talk 18 months of using hotwire and viewcomponent in production
about
StimulusReflex tool
Recommended path to extend capabilities beyond default Hotwire.
talk 18 months of using hotwire and viewcomponent in production
about
AnyCable project
Mentioned as extending Action Cable for going further than Hotwire defaults.
talk 18 months of using hotwire and viewcomponent in production
about
htmx tool
Listed as a non-Rails server-side-rendering alternative to Hotwire.
talk 18 months of using hotwire and viewcomponent in production
about
Phoenix LiveView tool
Listed as a non-Rails server-side-rendering alternative to Hotwire.
talk 18 months of using hotwire and viewcomponent in production
about
Phlex tool
Mentioned as a potential substitute for ViewComponent.
talk 18 months of using hotwire and viewcomponent in production
about
Hotwire tool
Second half of the talk explores Turbo Frames, Turbo Streams and Stimulus in production.
question How do you test ViewComponents and Hotwire flows?
asked_at
18 months of using hotwire and viewcomponent in production talk
Asked in Q&A at the end of the talk.
person Yaroslav Shmarov
authored
18 months of using hotwire and viewcomponent in production talk
Speaker of the talk at wroclove.rb 2022.
takeaway Hotwire suits B2B desktop apps; React suits B2C mobile and canvas UIs
from_talk
18 months of using hotwire and viewcomponent in production talk
Key framing at the start of the talk.
takeaway Prefer extending ViewComponent classes/attrs over multiplying variants
from_talk
18 months of using hotwire and viewcomponent in production talk
Key learning from building the badge component.
takeaway Use generic and object-specific ViewComponents together
from_talk
18 months of using hotwire and viewcomponent in production talk
Reported pattern after 18 months in production.
takeaway Turbo Frames, Turbo Streams and Stimulus can be used independently
from_talk
18 months of using hotwire and viewcomponent in production talk
Explicit advice during and in the takeaways slide.
takeaway Migrate off Webpacker to cssbundling/jsbundling
from_talk
18 months of using hotwire and viewcomponent in production talk
Shared as the speaker's favorite merged PR of the last year.
talk 18 months of using hotwire and viewcomponent in production
presented_at
wroclove.rb 2022 event
Delivered at wroclove.rb 2022 on 2022-03-11.
talk How To Package A Rails Engine Generation To Automation
related_to
18 months of using hotwire and viewcomponent in production talk
Adrian opens by praising Yaroslav's earlier wroclove.rb 2022 talk on ViewComponent and Hotwire.

Provenance

Created
2026-04-17 16:17 seed
Last updated in
18 months of Hotwire and ViewComponent in production 2026-04-17 21:53
Read by
20 extractions