The Backend is Reactive: Vue Beyond the Browser
This is a talk that de-mystifies Vue reactivity by implementing it in the browser. Rather than production-ready, we are going to have some FUN WITH CODE.
"What if Vue’s reactivity system didn’t stop at the browser? In this talk, I’ll turn the entire audience into a synchronized, reactive lightshow—using @vue/reactivity on the backend to orchestrate hundreds of phones in real time.
Format:
• First, there will be some light live coding to prove the principle
• Then, a live demo starts, while also showing some code on screen
• Everyone scans a QR and lands on a super-light page (no login). Their screens turn into “lights” controlled by the backend. I’ll make them hold up their phones that hopefully lights up the room (full brightness) • A conductor dashboard (on stage) exposes a few reactive controls: color, intensity, BPM, and pattern (solid, strobe, wave, sparkles, letter blocks). • The backend holds a small reactive graph:
▪ Source refs: mode, color, brightness, … ▪ Computeds: beat timing, per-client “bucket,” pattern projections (e.g., wave phase) ▪ Effects: push updates via WebSockets, log analytics • No imperative per-user wiring—just mutate source refs; computed projections and effects fan out changes to every device automatically.
Takeaways
• Vue’s reactivity can orchestrate backend logic, not just UI state. • A single reactive source of truth can drive many clients with minimal glue code. • Server-Sent Events/WebSockets pair naturally with reactive effects for live fan-out. • Computed projections make per-user instructions trivial and consistent. • Reactive thinking clarifies side effects, scheduling, and cleanup concern
I already gave this talk successfully at Vue.js Amsterdam:
https://www.youtube.com/watch?v=hFgqGgaHo0U
Marc Backes
The Backend is Reactive: Vue Beyond the Browser
This is a talk that de-mystifies Vue reactivity by implementing it in the browser. Rather than production-ready, we are going to have some FUN WITH CODE.
"What if Vue’s reactivity system didn’t stop at the browser? In this talk, I’ll turn the entire audience into a synchronized, reactive lightshow—using @vue/reactivity on the backend to orchestrate hundreds of phones in real time.
Format:
• First, there will be some light live coding to prove the principle
• Then, a live demo starts, while also showing some code on screen
• Everyone scans a QR and lands on a super-light page (no login). Their screens turn into “lights” controlled by the backend. I’ll make them hold up their phones that hopefully lights up the room (full brightness) • A conductor dashboard (on stage) exposes a few reactive controls: color, intensity, BPM, and pattern (solid, strobe, wave, sparkles, letter blocks). • The backend holds a small reactive graph:
▪ Source refs: mode, color, brightness, … ▪ Computeds: beat timing, per-client “bucket,” pattern projections (e.g., wave phase) ▪ Effects: push updates via WebSockets, log analytics • No imperative per-user wiring—just mutate source refs; computed projections and effects fan out changes to every device automatically.
Takeaways
• Vue’s reactivity can orchestrate backend logic, not just UI state. • A single reactive source of truth can drive many clients with minimal glue code. • Server-Sent Events/WebSockets pair naturally with reactive effects for live fan-out. • Computed projections make per-user instructions trivial and consistent. • Reactive thinking clarifies side effects, scheduling, and cleanup concern
I already gave this talk successfully at Vue.js Amsterdam:
https://www.youtube.com/watch?v=hFgqGgaHo0U