🚨 Live On the Edge 🚨
summary
Live-codes a multiplayer web app using Nu/Nitro, pnpm and the built-in storage/KV layer, exposes API routes for get/put, and wires websockets (cross-ws) for real-time sync and pub/sub (broadcast on Node/Bun). Implements a shared-state composable that syncs cursors across tabs and phone, swaps full sync for tiny patches using Mendoza WASM diffing and an apply-patch step, and demonstrates deployment options including Cloudflare Pages. It has small hiccups during the demo but ultimately syncs state live across clients.
AI-written summary · about
chapters (21)
- 0:00Welcome
- 1:03New Nu project setup
- 2:07Shared state server-client
- 5:21Server API for state
- 7:06Nu storage layer
- 9:16State sync with prefetch
- 12:32WebSocket real-time sync
- 16:04WebSocket composable
- 21:18Multiplayer mouse cursors
- 26:41User cursors and colors
- 29:35State sync optimization
- 35:42Mendoza state patches
- 39:13Deploy to edge
- 41:51Live demo
- 42:34Answering questions about Nu and Nitro
- 47:48Nu console logging
- 48:30Nu vs other frameworks
- 50:38Cloudflare for Nu
- 53:06Nu unique features
- 54:35Nu performance on Cloudflare
- 57:07Closing
related talks
34mGet Your Head Out of the Cloud — Embracing Local-First Apps with Nuxt
28mDynamic UI at the Edge
18mThe need for speed - Single-page apps, Optimistic UIs, Reactivity
22mEvery Node.js app should have real-time collab features
21mWhy Real Time Matters
23mLightning Talks Future JS
24mBuilding Realtime Singlepage Apps
36mReal-time Rails with Sync