← Graph

Component Driven UI with ViewComponent

talk 16 connections

Talk at wroclove.rb 2024 by Radoslav Stankov. Walks through how he structures the front end of his Angry Building ERP using the ViewComponent gem. Opens with his previous Product Hunt stack (Rails + GraphQL + Apollo + Next.js) and explains why, for Angry Building — a Rails weekend project — he wanted a Rails-only approach with Tailwind, minimal JavaScript, and extensive end-to-end tests. Criticizes Rails' default helpers/views/partials mix as an untestable 'wall of partials' and introduces ViewComponent as a way to build testable, reusable UI pieces. Presents a personal checklist for when to use a ViewComponent (code reused across controllers, HTML-generating helpers over ~3 lines, complex conditional logic, copy-pasted patterns, JavaScript-backed components) and when to stick with partials (underscore form) or view helpers (e.g. format_money). Introduces a mental split between UI components and domain components (e.g. money → product_price). Code walk-through of real components from Angry Building: a `component` sugar helper; a stats component using render_many / 'as :number' aliasing; a filter_form component built on a builder pattern (implemented before ViewComponent slots existed) exposing inputs like search, select, date_range, text; a page_header component using slots for breadcrumbs and action buttons, a `display` i18n helper for inferring object titles (display_name/name/title → string), and a before_render hook inferring page titles from the controller's translation table; a table component that started life as a view helper and now uses a builder DSL to declare columns (name, apartment, record, date, money, block). Uses a fetch-with-fallback pattern that raises in development/test but silently falls back in production. Testing approach: no unit tests — instead, smoke tests via Capybara that visit each Lookbook preview page and make sure it doesn't blow up, plus end-to-end tests for business logic. Advice: don't start a design system from button components (too many variants). Q&A covers comparing ViewComponent with React / React Native (pick per-product trade-offs) and testing strategy (smoke tests, no unit tests).

date
2024-03-22
type
talk
talk Component Driven UI with ViewComponent
about
Central topic of the talk.
talk Component Driven UI with ViewComponent
about
Angry Building project
All real code examples come from the Angry Building ERP.
talk Component Driven UI with ViewComponent
about
Lookbook tool
Talk shows how Lookbook surfaces ViewComponent previews and enables smoke testing.
talk Component Driven UI with ViewComponent
about
Stankov explains layering components into UI and domain tiers.
talk Component Driven UI with ViewComponent
about
Slots are demoed in stats, page_header, and discussed as an alternative to the builder pattern.
talk Component Driven UI with ViewComponent
about
Filter form component is built as a yielded builder with DSL methods.
talk Component Driven UI with ViewComponent
about
Application component uses this pattern for safe enum/color lookups.
asked_at
Component Driven UI with ViewComponent talk
First audience question during Q&A.
asked_at
Component Driven UI with ViewComponent talk
Second audience question during Q&A.
authored
Component Driven UI with ViewComponent talk
Speaker and author of this wroclove.rb 2024 talk.
from_talk
Component Driven UI with ViewComponent talk
Checklist explicitly presented during the talk.
from_talk
Component Driven UI with ViewComponent talk
Stated in the talk as Stankov's personal philosophy.
from_talk
Component Driven UI with ViewComponent talk
Friendly advice during the table/button discussion.
from_talk
Component Driven UI with ViewComponent talk
Testing approach explained in Q&A.
from_talk
Component Driven UI with ViewComponent talk
Key point from the React-comparison Q&A.
talk Component Driven UI with ViewComponent
presented_at
Talk delivered at wroclove.rb 2024 on 2024-03-22.

Provenance

Created
2026-04-17 16:17 seed
Read by
23 extractions