Conquering State

Why ReactJS (or something like it) is the Future of Front-end

A high-level overview of the concepts behind React and why it's not Just Another Framework.

Presenter's notes available on GitHub:
https://gist.github.com/matthewwithanm/a81b532ffb1d4c8b1fc0

Transcript

1. CONQUERING STATE Why ReactJS (or something like it) is the Future of Front-end
2. –Me “Front-end development is so much harder!”
3. • Need to support multiple environments • Broken APIs • Idiotic APIs • Insufficient tools for layout • Managing size/download time • Managing the load process itself
4. STATE
5. Request Response Server App
6. A W B X C Y Z FUNCTION A W B X C Y Z NOT A FUNCTION
8. Server Request
9. Server Request Click
10. Server Request
11. Server Request
12. Server Request Server Request Server Request
13. REACTJS
14. WHAT IF WE THOUGHT OF THE DOCUMENT AS THE RESULT OF A FUNCTION THAT TOOK SOME INPUT AND RETURNED A DOM OBJECT?
15. • We “get” functions • Functions are composable • Functions are testable • No need to recreate complicated event paths —just pass in the input and check the output
16. BUT HOW? • Re-render the entire document every time there’s a state change? Every time somebody clicks? • Obviously too slow • Plain impossible for some things, like text areas. You would lose cursor position, etc.
17. VIRTUAL DOM RENDER TO IT, THEN DIFF AND UPDATE
18. f(input) = DOM* *Description
19. f(props, children) = DOM* *Description
20. PROPS & CHILDREN f({title: “Cool Thing”}, [ g({text: “hello”}), h({name: “Winston”}) ])
21. f? f = function(props, children) { return div(null, heading(null, props.title), ul( li(null, children[0]), li(null, children[1]) ) ); }
22. PROPS & CHILDREN f({title: “Cool Thing”}, [ g({text: “hello”}), h({name: “Winston”}) ])
23. PROPS & CHILDREN <f title=“Cool Thing”> <g text=“hello” /> <h name=“Winston” /> </f>
24. SO WHERE’S THE STATE?
26. Server Request
27. Server Request
28. Server Request Server Request Server Request
29. REACT @MATTHEWWITHANM HZDG.COM