Hotwire: Reactive Ruby on Rails Applications
1h 30mIntermediate2023-05-31
Authors
David Morales
Web Developer, Technical Instructor
Course details
Ruby on Rails 7 introduces a new way to make reactive applications using Hotwire without manually writing JavaScript. It is a more straightforward and automated way to create modern web applications. In this course, web developer and technical instructor David Morales covers all the components of Hotwire: Turbo Drive, Turbo Frames, Turbo Streams, and Stimulus. Go in-depth on each component, and then learn the concepts by applying them to a to-do list application that will be developed during the course.
Skills covered
Ruby on RailsBack-End Web DevelopmentFull-Stack Web DevelopmentFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
Introduction
- Hotwire - Reactive Ruby on Rails applications
- What you should know
- What was available before
- How Hotwire works - HTML over the wire
- Creating the sample application
Turbo Drive
- Turbo Drive overview
- Enabling and disabling Turbo Drive
- Reloading changed assets
- Displaying the page load progress bar
Turbo Frames
- Turbo Frames overview
- Turbo Frames in action
- Multiple frames in a page
- Targeting other frames
- Loading a frame automatically
Turbo Streams
- Turbo Streams overview
- Creating a sample list
- Adding a new row to the table
- Performing multiple updates
- Broadcasting messages - Part 1
- Broadcasting messages - Part 2
Stimulus
- Stimulus overview
- Connecting to the controller
- Adding targets
- Calling an action
- Toggling CSS classes
- Passing data to controllers with values
Building a To-Do List App
- Introduction
- Making the list page compact
- Adding new tasks with Turbo Streams
- Editing a task
- Showing form errors
- Removing tasks
- Checking and unchecking tasks
- Dividing the list into two
Conclusion
- Putting it all together
- Next steps