Elm: React Without Compromises
The world of front end development has been experiencing a major paradigm shift over the past few years. Frameworks have shifted from Model/View and Object-Oriented paradigm of Backbone, Ember, Angularjs v1, and dozens of similar smaller projects to a new paradigm embracing immutable data structures, virtual DOM, and functional programming. The primary catalyst for this has been Facebook’s React framework powered by the large budgets Facebook poured into engineering and advocacy, and perhaps seizing the opportunity created by the delays and rewrites associated with Google’s AngularJS v2 framework.
If those concepts click for you but you want something more coherent, have a look at Elm. Elm has been around (initially as a PhD Thesis) since 2012 and represents some of the core ideas adopted by React/Redux in a more thorough and integrated way by providing a new programming language that directly integrates these concepts.
To build application behavior, Elm introduces the “Elm Architecture” where application actions such as clicking on a button, entering some text, or an AJAX response arriving are represented as strongly-typed events. These events (called Messages in Elm) are passed to a central
update function whose job is to look at the current state, apply the logic appropriate for the current action message, and return a modified state for the application. This new state is then passed to the view function to render a new DOM tree, and virtual DOM can then efficiently update the real DOM.
This architecture has developers smiling as debugging and bug reproduction become much more consistent and tractable (although the type system prevents many bugs from shipping at all). One of Elm’s killer demos early on was the “time-traveling debugger” where you can navigate backward and forward in the history of application states and observe how the UI changes. This is made possible by the design tenets of the architecture.
Elm ships with a core set of libraries for both key language-level functionality for dealing with data structures as well as basic web application building blocks for HTML, HTTP, and JSON. On top of that, the community contributes packages that can be plugged into your application via the
The Elm community is much much smaller than the mainstream React community, and probably always will be. The main corporate sponsor of Elm, No Red Ink, is many orders of magnitude smaller than Facebook. However, there are many active collaboration points including Slack chat, Github, Facebook groups, twitter accounts, blogs, and books. There’s a detailed guide to the community resources below.
Interested in learning more about Elm and exploring a bit? Here’s some key resources.
Essential Elm Resources
Elm Home Page has the primary docs
The Elm Guide is the official tutorial
Elm Slack Community has helpful channels especially #beginners
Planet Elm syndicates Elm-related articles and blog posts
Elm for Beginners video course at KnowThen
Elm FAQ is a community-maintained knowledge base
Elm in Action work-in-progress book by Elm luminary Richard Feldman