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
0. Introduction
- 01 - Hotwire - Reactive Ruby on Rails applications
- 02 - What you should know
- 03 - What was available before
- 04 - How Hotwire works - HTML over the wire
- 05 - Creating the sample application
1. Turbo Drive
- 06 - Turbo Drive overview
- 07 - Enabling and disabling Turbo Drive
- 08 - Reloading changed assets
- 09 - Displaying the page load progress bar
2. Turbo Frames
- 10 - Turbo Frames overview
- 11 - Turbo Frames in action
- 12 - Multiple frames in a page
- 13 - Targeting other frames
- 14 - Loading a frame automatically
3. Turbo Streams
- 15 - Turbo Streams overview
- 16 - Creating a sample list
- 17 - Adding a new row to the table
- 18 - Performing multiple updates
- 19 - Broadcasting messages - Part 1
- 20 - Broadcasting messages - Part 2
4. Stimulus
- 21 - Stimulus overview
- 22 - Connecting to the controller
- 23 - Adding targets
- 24 - Calling an action
- 25 - Toggling CSS classes
- 26 - Passing data to controllers with values
5. Building a To-Do List App
- 27 - Introduction
- 28 - Making the list page compact
- 29 - Adding new tasks with Turbo Streams
- 30 - Editing a task
- 31 - Showing form errors
- 32 - Removing tasks
- 33 - Checking and unchecking tasks
- 34 - Dividing the list into two
Conclusion
- 35 - Putting it all together
- 36 - Next steps