Building Optimistic UI with Custom Elements in Rails
By
amalinovic
5mo ago· 6 min readen
100/100
Golden Brown
Bagelometer↗
Crisp on the outside, thoughtful on the inside. A keeper.
Score100Typehow-toSentimentpositive
Summary
This article explains how to use custom elements in Rails to build optimistic UI interfaces. It covers what custom elements are, how they compare to Stimulus controllers, and provides practical examples from building a simple counter to creating an optimistic form that updates instantly without waiting for server responses. The article demonstrates that custom elements are simpler than they sound, noting that Rails developers using Hotwire have already worked with them through <turbo-frame> and <turbo-stream> tags.
Key quotes
· 5 pulledCustom elements are one of those web platform features that sound complicated but turn out to be surprisingly simple.
Both <turbo-frame> and <turbo-stream> are custom elements. They are just HTML tags with JavaScript behavior attached.
Starting with a simple counter and ending with an optimistic form that updates instantly without waiting for the server.
Learn how custom elements work in Rails by building an optimistic form.
Understand when to use custom elements over Stimulus controllers.
Learn how custom elements work in Rails by building an optimistic form. From simple counters to instant UI updates, understand when to use custom elements over Stimulus controllers.
