Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

–Me “Front-end development is so much harder!”

Slide 3

Slide 3 text

• Need to support multiple environments • Broken APIs • Idiotic APIs • Insufficient tools for layout • Managing size/download time • Managing the load process itself

Slide 4

Slide 4 text

STATE

Slide 5

Slide 5 text

Request Response Server App

Slide 6

Slide 6 text

A W B X C Y Z FUNCTION A W B X C Y Z NOT A FUNCTION

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Server Request

Slide 9

Slide 9 text

Server Request Click

Slide 10

Slide 10 text

Server Request

Slide 11

Slide 11 text

Server Request

Slide 12

Slide 12 text

Server Request Server Request Server Request

Slide 13

Slide 13 text

REACTJS

Slide 14

Slide 14 text

WHAT IF WE THOUGHT OF THE DOCUMENT AS THE RESULT OF A FUNCTION THAT TOOK SOME INPUT AND RETURNED A DOM OBJECT?

Slide 15

Slide 15 text

• 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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

VIRTUAL DOM RENDER TO IT, THEN DIFF AND UPDATE

Slide 18

Slide 18 text

f(input) = DOM* *Description

Slide 19

Slide 19 text

f(props, children) = DOM* *Description

Slide 20

Slide 20 text

PROPS & CHILDREN f({title: “Cool Thing”}, [ g({text: “hello”}), h({name: “Winston”}) ])

Slide 21

Slide 21 text

f? f = function(props, children) { return div(null, heading(null, props.title), ul( li(null, children[0]), li(null, children[1]) ) ); }

Slide 22

Slide 22 text

PROPS & CHILDREN f({title: “Cool Thing”}, [ g({text: “hello”}), h({name: “Winston”}) ])

Slide 23

Slide 23 text

PROPS & CHILDREN

Slide 24

Slide 24 text

SO WHERE’S THE STATE?

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Server Request

Slide 27

Slide 27 text

Server Request

Slide 28

Slide 28 text

Server Request Server Request Server Request

Slide 29

Slide 29 text

REACT @MATTHEWWITHANM HZDG.COM