Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

REACT-HASKELL

Slide 3

Slide 3 text

HI, MY NAME IS JOEL

Slide 4

Slide 4 text

HI, MY NAME IS JOEL ... AND I USE HASKELL

Slide 5

Slide 5 text

HASKELL ▸ statically typed ▸ lazy ▸ purely functional

Slide 6

Slide 6 text

HASKELL ▸ statically typed ▸ lazy ▸ purely functional ▸ really cool

Slide 7

Slide 7 text

HASTE ▸ dialect of Haskell ▸ runs in browser

Slide 8

Slide 8 text

HASTE

Slide 9

Slide 9 text

BLAZE-HTML sample :: Html sample = p ! class_ "styled" $ em "Basic Algebra" becomes

Basic Algebra

Slide 10

Slide 10 text

REACT-HASKELL sample :: React sample = p Basic Algebra

Slide 11

Slide 11 text

PUT IT ON THE PAGE main :: IO () main = do Just elem <- elemById "id" render elem sample

Slide 12

Slide 12 text

MORE COMPLICATED sample :: React sample = div

Slide 13

Slide 13 text

CONTROLLED COMPONENT view :: Elem -> JSString -> IO () view elem str = render elem $ div $ do "Khan Academy" input

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

LET'S MAKE THAT EASIER

Slide 16

Slide 16 text

STATEFUL COMPONENT REDUX view :: StatefulReact JSString view = div $ do "Khan Academy" input

Slide 17

Slide 17 text

LIFECYCLE METHODS componentDidMount, componentWillUnmount, ... ?

Slide 18

Slide 18 text

QUESTIONS?