A DIY guide to building your own Rendering Engine
summary
Builds a frameworkless rendering engine that prints a to‑do MVC, uses faker.js for data, Jest for unit tests and puppeteer + stats.js for perf checks, and moves a problematic infinite‑scroll list from ~15 fps to ~60 fps in production. Iterations show cloning a stamped DOM node, using requestAnimationFrame, a small component registry with data-component selectors, and a tiny virtual DOM diff/patch that replaces only changed nodes; claims an ~80‑line Redux clone is possible and the approach works in real apps.
AI-written summary · about
chapters (37)
- 0:00Intro
- 0:32Francesco Strazzullo
- 0:55About FlowingFlow
- 1:49The point
- 1:59The story
- 3:06First problem
- 4:49Spaghetti code
- 5:33Panic
- 6:03Never manipulate the DOM
- 6:50Manipulation is art
- 7:03Should not be an alibi
- 7:18Own rendering code
- 8:20Lets start
- 8:53Architecture
- 11:15Simple Architecture
- 13:07Optimization
- 13:26Performance
- 13:58Measure
- 14:16Measure Performance
- 15:07Eat the Frog
- 16:26Demo
- 17:12Coding
- 17:45GetToDo
- 18:34RequestAnimationFrame
- 20:14View
- 24:53Testing
- 27:17Component Overview
- 28:31Component Registry
- 29:37Component Registry Code
- 30:47Recursive Component
- 32:40Yacht
- 33:17Connected component
- 34:01Dynamic data
- 35:10Apply if algorithm
- 35:45Apply if parameters
- 37:12Virtual DOM
- 37:42Whats next
