15: Functional Programming with Elm, ClojureScript, Om, and React

Episode 15 deep dives into the programming experiences of Adam Solove (@asolove), Head of Engineering at Pagemodo. Adam has spent the last ten years building web interfaces various technologies such as CGI, Flash, DHTML, RJS, jQuery, and many MVC JavaScript frameworks. Adam has found over his career that working with a more functional style of programming is much more rewarding in many ways.

Functional programming and FRP (Functional Reactive Programming) provides improvements in performance and purposely avoids changing-state and mutable data. This can be an extremely effective technique in web application development because of the stateful nature of DOM (Document Object Model) implementations in the browser. Adam evangelizes and works with several languages and tools to provide incredible functional style applications including, but not limited to, Elm, ClojureScript, OM, & React.js.

Facebook’s React.js, met with mixed reviews when it was first released in 2013.  Since then it has been stirring up support in droves within the JavaScript development community do to it’s high UI performance output in browsers. It’s Virtual DOM and ways of solving data & DOM performance problems have been highly criticized but hard to ignore. React has an effective unorthodox way of thinking about UI.

Elm, a functional reactive language for interactive applications, combines core features of functional languages like immutability & type inference with FRP to Create highly interactive applications without callbacks or shared state. Elm is similar in syntax to Haskell and it compiles to HTML, CSS, and JavaScript that uses a Virtual DOM model similar in concepts to that of react.js. According to Elm’s internal benchmarks, using it’s compiled JavaScript code is actually faster than any JavaScript framework tested by a extreme margin.  

ClojureScript, is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler. David Nolen, has taken ClojureScript and created an interface for react.js called OM. Om allows for simple represention of Web Application User Interfaces as an EDN. ClojureScript data is immutable data, which means that Om can always rapidly re-render the UI from the root.  According to the project description, UIs created with Om are inherently able to create & manage historical snapshots with no implementation complexity and little overhead.

Resources

• Why use Functional Style? - http://stackoverflow.com/questions/36504/why-functional-languages

• Lambda: the ultimate syntax-semantics interface - http://okmij.org/ftp/gengo/NASSLLI10/

• Haskell -http://www.haskell.org/haskellwiki/Haskell

• Adam Solove - http://adamsolove.com/

• Adam’s talk on ClojureScript/OM - http://adamsolove.com/js/clojure/2014/05/08/react-js-and-om.html

Elm

• Elm’s Virtual DOM - http://elm-lang.org/blog/Blazing-Fast-Html.elm

• Elm’s Time Travelling Debugger - http://debug.elm-lang.org/

ClojureScript & OM

• ClojureScript Intro 2011 - http://clojure.com/blog/2011/07/22/introducing-clojurescript.html

• A feature comparison to JavaScript - http://himera.herokuapp.com/synonym.html

• David Nolen - https://twitter.com/swannodette/

• David Nolen’s Benchmarks - http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/

• Todo MVC - https://github.com/swannodette/todomvc/tree/gh-pages/labs/architecture-examples/om/src/todomvc

React.js

• Reactjs - http://facebook.github.io/react/

• Secrets of The Virtual DOM - http://fluentconf.com/fluent2014/public/schedule/detail/32395

• React Demystified -

• React Diff Algorithm - http://calendar.perfplanet.com/2013/diff/