Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React-Haskell

Joel Burget
November 19, 2014

 React-Haskell

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

Joel Burget

November 19, 2014
Tweet

More Decks by Joel Burget

Other Decks in Programming

Transcript

  1. BLAZE-HTML sample :: Html sample = p ! class_ "styled"

    $ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
  2. REACT-HASKELL sample :: React sample = p <! className "styled"

    $ em "Basic Algebra" becomes <p class="styled"> <em>Basic Algebra</em> </p>
  3. PUT IT ON THE PAGE main :: IO () main

    = do Just elem <- elemById "id" render elem sample
  4. MORE COMPLICATED sample :: React sample = div <! className

    "beautify" $ do "Khan Academy" input "Rewritten in Haskell"
  5. CONTROLLED COMPONENT view :: Elem -> JSString -> IO ()

    view elem str = render elem $ div $ do "Khan Academy" input <! onChange (view elem . targetValue) text str
  6. STATEFUL COMPONENT REDUX view :: StatefulReact JSString view = div

    $ do "Khan Academy" input <! onChange' (updateState . targetValue) text str