A View into Frameworks
summary
Worked on five different frameworks in three years while building Netflix studio UIs and then reverse-engineers what actually makes views work: templates plus a trigger plus a comparison strategy. Examples include setState for manual triggers, Zone.js monkey-patching async for Angular, and property tracking like Glimmer’s tracked fields. Comparison strategies compare virtual trees (virtual DOM) or stream-generated nodes against the real DOM (incremental DOM/Ivy), trading memory for diff speed and vice versa.
AI-written summary · about
chapters (16)
- 0:00Intro
- 0:34A View into Frameworks
- 2:01What's the problem?
- 2:51Common Patterns
- 4:55Difficulties of the DOM API
- 6:51DOM manipulation is expensive
- 7:03The browser has constraints
- 7:25VA DOM Node has a cost
- 9:15Staying in sync with the DOM
- 9:41How can we update a list?
- 9:57Recreate the list
- 10:35Update what is needed
- 11:39Templates
- 14:03How does a template turn into DOM?
- 20:17Performant DOM Updates
- 21:19Comparison Strategy
related talks
19mReactivity in Frontend JavaScript Frameworks
51mDeep dive into modern frameworks Reactivity🔬⚛️
28mWhere the future is heading for JS Frameworks…
57mHow React, Vue and Angular implement reactivity
48mDive into frontend frameworks to understand their reactivity🔬⚛️
41mDiving into Modern Frontend Frameworks to Understand Their r
01h 13mWorking with the DOM in JS Frameworks
47mImport-Substituting Svelte, or How I Made Glimmer 40% Faster