Introduction#

• The evolution of frontend development in Rails
• Traditional approaches vs modern HTML-over-the-wire
• The problem Hotwire aims to solve

Hotwire Components Overview#

• Turbo: The heart of Hotwire
  • Turbo Drive: Full page navigation without full page loads
  • Turbo Frames: Independent sections of a page
  • Turbo Streams: Real-time page updates with WebSockets
  • Turbo Native: Native app wrappers
• Stimulus: Minimal JavaScript framework
  • The controller pattern
  • Lifecycle callbacks
  • Actions and targets
• Strada: (Brief mention, if relevant to Rails 8)

Setting Up Hotwire in Rails 8#

• Configuration steps
• Importing and installing dependencies
• Verifying the setup with a simple example

Hotwire vs Traditional JavaScript Frameworks#

• Comparison with React, Vue, Alpine, etc.
• When to use Hotwire vs. when to reach for a JS framework
• Performance considerations

Real-World Example: A Simple Live Counter#

• Building a counter that updates across browsers
• Implementing with Turbo Streams
• Adding Stimulus for interactivity

Best Practices and Common Pitfalls#

• Organization strategies for Hotwire components
• Debugging techniques
• Browser compatibility considerations

Conclusion#

• Summary of Hotwire's advantages
• Looking ahead to the rest of the series
• Resources for further learning

Code Repository#

• Link to the example code
• Setup instructions