Building a Time Machine with ES6 Proxies

on YouTube ↗49m

" summary

Live-coded a working time engine built on ES6 Proxies that logs state changes into an array of snapshots, overrides proxy get/set handlers to push deep-copied states (using structuredClone), and adds an onUpdate callback for free reactivity. It implements stepwise undo/redo, timestamped jumps (cutting history to a chosen time), and branching timelines stored as arrays of timelines; covers pitfalls: reference mutation, memory cost, and the option to save deltas instead of full snapshots.

AI-written summary · about

" chapters (19)

1. 0:00Introduction
2. 1:07About the speaker
3. 3:34What are JavaScript proxies
4. 5:22Time machine concept
5. 9:15Planning the time machine
6. 11:06Live coding setup
7. 12:13Creating a basic proxy
8. 16:32Refactoring into time machine
9. 17:36Adding reactivity
10. 21:38Implementing undo/redo
11. 28:17Demoing the game
12. 30:05Integrating time machine
13. 33:23Fixing state duplication
14. 37:03Deep cloning states
15. 39:31Jumping back in time
16. 44:12Multi-timeline demo
17. 45:18Final implementation
18. 46:44Optimization ideas
19. 47:11Q&A

" related talks

• 29mBuilding a Time Machine with ES6 ProxiesMarc Backes · DevWorld 2024
• 29mBuilding a Time Machine with ES6 ProxiesMarc Backes · JSWorld Conference 2024
• 24mJavaScript metaprogramming with ES2015 ProxyAleksandr Skachkov · Frontend fwdays'17
• 26mJavaScript Metaprogramming - ES6 Proxy Use and AbuseEirik Langholm Vullum · JSConf Budapest 2017
• 52mJavaScript Metaprogramming - ES6 Proxy Use and AbuseEirik Langholm Vullum · NDC Oslo 2017
• 31mImmer, Immutability and the Wonderful World of ProxiesMichel Weststrate · JSNation 2019
• 27mUnlock the Proxy Power (Vue.js)John Lindquist · Frontend Developer Love 2019
• 54mMetaProgramming with JavaScriptVenkat Subramaniam · Developer Summit 2020