React - Rethinking Best Practices (updated)
summary
Announces the React Chrome Developer Tools and claims React replaces templates with components, re-renders the entire UI on every data change and uses a virtual DOM diff to compute minimal DOM operations and batch updates. Demonstrates event delegation, optional JSX, server‑side rendering for fast first paint, hooks for custom updates, and an experimental web‑worker bridge. Reports working at scale on Facebook and Instagram and achieving smooth 60fps mobile interactions.
AI-written summary · about
chapters (27)
- 0:00Intro
- 0:47Give it five minutes.
- 3:05We all like separation of concerns, right?
- 3:44Coupling is
- 4:43Cohesion is
- 6:48inevitably tightly coupled.
- 7:02highly cohesive.
- 7:26Templates separate technologies, not concerns.
- 7:41Symptoms that your front-end technology is underpowered
- 10:34The framework cannot know how to separate your concerns for you.
- 11:16This tool is a React component.
- 11:27Use components to separate your concerns.
- 12:58Components are reusable.
- 13:10What about spaghetti code?
- 13:40Just don't write spaghetti code.
- 15:29What about working with designers?
- 15:54JSX is an optional preprocessor to let you use HTML-like syntax.
- 16:24With JSX, it's easy for designers to contribute code.
- 16:49Re-render the whole app on every update
- 17:55Data changing over time is the root of all evil.
- 19:46When the data changes, React re- renders the entire component.
- 20:00That is, React components are basically just idempotent functions.
- 21:46Re-rendering on every change makes things simple.
- 23:54React's architecture looks a lot like the Doom 3 engine
- 31:10The virtual DOM lets us do fun things.
- 35:32Virtual DOM is simple and fast
- 35:52Announcing React devtools
