React: Learn once, write everywhere

Slides for my presentation on the first React Meetup in Miami, @thelabmiami on Wed, Feb 17 at 6:30pm.

8. Arthur Debert
10. • Self-contained, concern-specific building blocks • Allows a “divide and conquer” approach where no particular part needs be especially complex Componentization
14. <TodoApp>
15. <Footer>
16. <TabGroup>
17. <TodoItem>
22. • Requires compilation / transpilation step • It’s plain javascript - It doesn't alter the language semantics.
24. • It’s plain javascript - It doesn't alter the language semantics. • XML is great for representing UIs in element trees with attributes. • It’s more concise and easier to visualise the structure of your application.
26. • Templates encourage a poor separation of concerns • Display logic and markup are inevitably tied together. They’re highly cohesive. • Keeping components small and single-purposed lead to separation of concerns
29. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
30. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
31. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
32. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
33. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
39. • Every time state is updated, it is guaranteed to be up-to-date. • No magical data binding. • No model dirty checking • No more explicit DOM operations – everything is declarative. Just Render the State. Every Time.
42. In-Memory lightweight representation of the DOM In-Memory lightweight representation of the DOM On Every Update: • React builds a new virtual dom subtree • Diffs the new tree with the old one • Computes the minimal set of DOM operations • Batch executes all updates