begriffs

Writing a React JS front-end in Haskell

January 12, 2015

Joel Burget, Developer at Khan Academy explains the design of his new react-haskell library.

It allows you to write a front-end app in Haskell which you compile to JavaScript via Haste and render using React JS.

Check out the code at joelburget.com/react-haskell.

Overview

  • Overview of React itself (without the Haskell)
    • The virtual dom
    • Partial diffing
  • Haste: turning Haskell into JavaScript
  • Inspiration for React-Haskell
    • Blaze-HTML builder provided the general flavor of the API
    • Recently Joel has been switching to the Lucid library instead of Blaze
    • Building the eventual DOM happens inside a monad
    • It could be considered an abuse of a monad, but provides nice do-notation
  • Examples of react html written in Haskell
  • Event handlers
  • Principles of interruptible animations (inspired by UIKit)
    • the model is discrete
    • we apply updates immediately
    • use additive animation by default
  • Performance observations