Explore a conference talk that challenges conventional JavaScript development practices and introduces React, a revolutionary open-source library from Facebook and Instagram. Dive into three controversial topics: abandoning templates in favor of JavaScript-built views, re-rendering entire applications upon data changes, and implementing a lightweight DOM and events system. Discover how React pushes the boundaries of web development, learn about its core principles, and understand its similarities to game engine architecture. Gain insights into React's virtual DOM, its performance benefits, and the newly announced React Chrome Developer Tools. Presented by Pete Hunt, a React core team member at Facebook and Instagram.com engineer, this talk offers a fresh perspective on building efficient and maintainable JavaScript applications.
Overview
Syllabus
Intro
Give it five minutes.
We all like separation of concerns, right?
Coupling is
Cohesion is
inevitably tightly coupled.
highly cohesive.
Templates separate technologies, not concerns.
Symptoms that your front-end technology is underpowered
The framework cannot know how to separate your concerns for you.
This tool is a React component.
Use components to separate your concerns.
Components are reusable.
Components are unit testable.
What about spaghetti code?
Just don't write spaghetti code.
What about working with designers?
JSX is an optional preprocessor to let you use HTML-like syntax.
With JSX, it's easy for designers to contribute code.
The accessibility of templates and the power of JavaScript.
Re-render the whole app on every update
Data changing over time is the root of all evil.
When the data changes, React re- renders the entire component.
That is, React components are basically just idempotent functions.
Re-rendering on every change makes things simple.
React's architecture looks a lot like the Doom 3 engine
The virtual DOM lets us do fun things.
Virtual DOM is simple and fast
Announcing React devtools
Taught by
JSConf
