$30 off During Our Annual Pro Sale. View Details »

Conquering State

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

Matthew Dapena-Tretter

May 02, 2014
Tweet

More Decks by Matthew Dapena-Tretter

Other Decks in Technology

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
  7. None
  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?

  25. None
  26. Server Request

  27. Server Request

  28. Server Request Server Request Server Request

  29. REACT @MATTHEWWITHANM HZDG.COM