Hotwire Course Update: Forms and Lists
February 24, 2022
We have 5 new Hotwire videos for you this week!
đ If youâve already purchased a copy of the course (thanks!), just head over to the course and youâll find 5 new videos ready for you! Make sure to download a new copy of the code bundle which includes directories for the new modules.
đ¤ Donât have your copy of the course yet? Thereâs still time to take advantage of the early access price. We think youâll get a lot of value out of whatâs already in the course, and more videos are on the way. Weâd love to have you aboard.
The latest batch of videos take us through hotwiring the second page of our lilâ fishing app. We build on what weâve already learned about Turbo Frames and Streams, but apply them in new situations.
Forms and Lists
Hereâs a common scenario: pop some data into a form, submit it to create a record in the database, and dynamically add the new thing to a list. Using Turbo Streams we can efficiently append and prepend elements to a list without changing the existing contents. And as a bonus, we also update totals on another part of the page.
Handling Form Errors
How do you display validation errors on a form with Hotwire? Inline and instantly, of course! And since everything is server-rendered in one unified code base, we can reuse all the ActiveRecord model validations already set up to ensure data integrity.
Dynamic Deletes
One of the compelling benefits of Hotwire is that it makes easy things easy. You know, things like dynamically zapping an item from a list. Whereas historically you may have written custom JavaScript to keep everything on the page in sync, now we can use Turbo Streams.
Inline Form Editing
When do you use Turbo Frames vs. Turbo Streams, and why? Inline editing is a great example for working through these types of design decisions. In this case, we end up using both and you understand the interplay between them. The takeaway is a clear mental model and nifty technique you can apply with confidence.
Enjoy!