Building a Time Machine with ES6 Proxies
summary
Shows how ES6 Proxies intercept get/set to implement automatic change saving and simple reactivity, and live codes a time machine/multiverse that records full-state snapshots and exposes forward/back and jump-to-time controls. Implementation uses structuredClone and pushes entire states (cheap to implement, heavy on memory), creates timelines when jumping, and wires DOM updates via an onUpdate callback. Caveats: nested objects/arrays need more proxying, and actions in the past do not change existing futures.
AI-written summary · about
chapters (18)
- 0:00JavaScript Proxies intro
- 1:00Introduction
- 2:05What are Proxies
- 3:31Time machine concept
- 5:17Live coding setup
- 6:01Proxy getters/setters
- 7:29Proxy traps
- 10:40Time machine function
- 12:04Reactivity with proxies
- 14:53Saving states
- 17:43UI state display
- 19:10Adding forward and backward navigation
- 21:18Introducing the role-playing game demo
- 22:26Game structure
- 23:53Time travel in game
- 26:01Resolving demo issues and final walkthrough
- 27:50Game demo
- 28:36Limitations
related talks
49mBuilding a Time Machine with ES6 Proxies
29mBuilding a Time Machine with ES6 Proxies
26mJavaScript Metaprogramming - ES6 Proxy Use and Abuse
52mJavaScript Metaprogramming - ES6 Proxy Use and Abuse
24mJavaScript metaprogramming with ES2015 Proxy
27mUnlock the Proxy Power (Vue.js)
31mImmer, Immutability and the Wonderful World of Proxies
30mImmer, Immutability and the Wonderful World of Proxies