React: Front in Sampa

Transcript

8. Arthur Debert
10. • Self-contained, concern-specific building blocks
14. <TodoItem>
15. <TabGroup>
16. <Footer>
17. <TodoApp>
18. • Self-contained, concern-specific building blocks • Allows a “divide and conquer” approach where no particular part needs be especially complex Componentization
23. • 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.
25. • 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
28. ~2004 Hybrid ~2010 Single Page Application 1994+ Server Driven
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
40. • 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.
43. 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