React-Haskell

Khan Academy dev standup presentation.
https://github.com/joelburget/react-haskell

Transcript

2. REACT-HASKELL
3. HI, MY NAME IS JOEL
4. HI, MY NAME IS JOEL ... AND I USE HASKELL
5. HASKELL ▸ statically typed ▸ lazy ▸ purely functional
6. HASKELL ▸ statically typed ▸ lazy ▸ purely functional ▸ really cool
7. HASTE ▸ dialect of Haskell ▸ runs in browser
8. HASTE
9. BLAZE-HTML sample :: Html sample = p ! class_ "styled" $ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
10. REACT-HASKELL sample :: React sample = p <! className "styled" $ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
11. PUT IT ON THE PAGE main :: IO () main = do Just elem <- elemById "id" render elem sample
12. MORE COMPLICATED sample :: React sample = div <! className "beautify" $ do "Khan Academy" input "Rewritten in Haskell"
13. CONTROLLED COMPONENT view :: Elem -> JSString -> IO () view elem str = render elem $ div $ do "Khan Academy" input <! onChange (view elem . targetValue) text str
15. LET'S MAKE THAT EASIER
16. STATEFUL COMPONENT REDUX view :: StatefulReact JSString view = div $ do "Khan Academy" input <! onChange' (updateState . targetValue) text str
17. LIFECYCLE METHODS componentDidMount, componentWillUnmount, ... ?
18. QUESTIONS?