Beyond REST: Using Full-Stack Signals for Real-Time Reactive UIs by Leif Åstrand

Treat real-time updates as shared UI state between users rather than thinking about WebSocket implementations and complex data synchronization

Build applications in three steps:

1. Start with basic UI design
2. Implement local state management without real-time features
3. Add real-time capabilities by converting local state to shared signals

Signals are reactive value holders that automatically track dependencies and notify dependents when values change. Key operations:

• Create signal
• Read value
• Write value
• Compute derived signals
• Create effects

Handle conflicts in real-time updates by:

• Using granular operations instead of direct value updates
• Implementing server-side locking
• Creating append-only event logs for operation history

For distributed systems:

• Synchronize values through a central server
• Use event buses for pub/sub across multiple front-end servers
• Implement incremental updates for offline clients

Common real-time UI patterns include:

• Live collaboration features
• Progress indicators
• Chat systems
• Monitoring dashboards
• Notifications

Framework support exists for signals in:

• Angular (built-in)
• Vue (ref system)
• React (via Preact integration)
• Custom framework implementations

Consider network latency and race conditions when implementing real-time features to avoid data inconsistencies

Keep real-time updates focused on specific UI state that needs sharing rather than synchronizing everything

Build a simple foundation first before adding complexity - start with basic implementations before optimizing