Hotwire Series: Model State Updates: Real-Time UI with Turbo Broadcasts - Part 2

  • Date5/2/2025
  • Reading Time7 min
Hotwire Series: Model State Updates: Real-Time UI with Turbo Broadcasts - Part 2

Introduction

  • The challenge of keeping UIs in sync with database changes
  • Traditional polling vs WebSockets
  • How Turbo solves this elegantly

Understanding Turbo Broadcasts

  • The broadcast_refresh_to / broadcast_replace_to pattern
  • Channel subscription management
  • The ActionCable connection under the hood

Setting Up Model Broadcasting

  • Configuring models for auto-broadcasting
  • Using callbacks effectively
  • Scoping broadcasts appropriately

Building Reusable Partials for Model Rendering

  • Designing partials with broadcasts in mind
  • The importance of DOM IDs
  • Handling different update scenarios (create, update, destroy)

Real-Time Collaboration Example

  • A shared task list that updates across users
  • Implementing optimistic UI updates
  • Handling conflicts and race conditions

Performance Considerations

  • Controlling broadcast frequency
  • Limiting payload size
  • Scaling concerns with many concurrent users

Advanced Patterns

  • Throttling and debouncing updates
  • Batch processing changes
  • Handling offline reconciliation

Testing Broadcast-Based Features

  • Unit tests for broadcast functionality
  • Integration tests with multiple simulated users
  • Performance testing under load

Conclusion

  • Best practices summary
  • Security considerations
  • Next steps and further reading

Code Repository

  • Link to the example task list application
  • Setup and testing instructions

Want more insights like this?

Subscribe to receive new articles, expert insights, and industry updates delivered to your inbox every week.