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)

Summary

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

Related Posts