Functional Front-End Coding

November 30, 2015

Greg Weber explains how languages like Haskell and Elm are informing the design of Javascript libraries like Redux. He traces the evolution of front end coding from the simple to the complex and back towoard simplicity with carefully managed mutable state. This talk is based on work he did at the Haskell startup Front Row Education refactoring their front-end code. (Slides here)


  • Front row ed was doing the front-end in a traditional way
  • Greg thought it could be more productive
    • Goal: refactor existing front-end codebases to make them more like Haskell
  • History of the front end
    • it started with the purity of HTML and CSS
    • then jQuery then Backbone. Same style, hard to maintain
    • then high level frameworks like Angular
    • they solved problems but no rigor for how they handle state
    • you get weird performance errors and general confusion
  • Now we have tech like React (or Elm) that are careful about state management
  • You can add type checking with Typescript, FB Flow, or Elm
  • “The Javascript Problem”
    • untyped == more errors
    • hard to test UIs, so types can be more efficient
    • the out of the box solution for building web interfaces is poor
    • coffeescript is an improvement but it doesn’t address the fundamental problems
  • Although react provides components that manage state carefully we want something additional
  • Greg recommends Typescript or Facebook Flow
    • they are competing against each other and pushing each other to improve
    • the main downside of Flow is that you end up confused which things are dynamically typed
  • How do you link React components together
    • the parent holds the state
    • passes callbacks to kids for when things change
    • but this breaks encapsulation and adds boilerplate
    • two main solutions: signaling for state changes and using cursors
  • Elm
    • the UI strategy, aka the Elm Architecture, is now informing JS library strategy
    • if you’re coming from a blank slate consider using Elm
    • it’s a little immature, for instance writing a form submit was tricky
  • Back in Javascript
    • a lot of people use the Flux pattern
    • but Redux is modeled after Elm Architecture
    • not as easy as Elm because the lack of types, but still helpful
    • problems with side effects in Redux (prevents time traveling debugger)
    • people use the Effects library
  • React-cursor
    • another solution to the parent <-> child component communication
    • the parent has nested state and the child moves a cursor through it
    • children can update parts of the tree
    • internally it triggers generation of a new immutable data structure
    • lightweight approach that is pretty promising
    • but it doesn’t solve all the problems in a complex ui, just the 1st step
    • in particular auditing multiple actions
  • Summary: JS is going functional