Frontend development, the nice way

Sun, Jun 5, 2016 3-minute read

My latest project at work was, for a change, the frontend of a web application. I usually work more on the backend or on standalone services so I had to learn how to do things properly. Our framework of choice is React, which is nice and a huge improvement over what I used in my (admittedly limited) previous frontend development experiences.

However, for how nice React is, it still has a problem: it still makes you write Javascript code. I don’t like writing code in a language where it’s so easy to do the wrong thing and shoot myself in the foot. Immutable and Underscore.js help making the language more functionally pure but they have no way to enforce anything, which I find very annoying.

undefined is not a function

Since I felt that React was good enough but not as good as it could have been I had a look around for possible alternatives and I came across Elm. I immediately liked it. It is purely functional (with an Haskell-like syntax), it has been designed to be easy and it’s very opinionated on how you should structure your application.

Functional purity is a big win, which makes you get closer to the promised land where if something compiles then it’s going to work. Being able to reason on your code with the guarantee that nothing will do crazy stuff with it is priceless.

Evan definitely met the goal of writing a language that a beginner can pick up easily enough. Have a look at this to-do list app to judge yourself. The resulting web-app is pretty good.

So far so good, but what really shines is the simplicity and the power of the Elm Architecture, which every Elm component follows strictly.

The Elm Architecture is a simple pattern for infinitely nestable components. It is great for modularity, code reuse, and testing. Ultimately, it makes it easy to create complex web apps that stay healthy as you refactor and add features.

The pattern is very similar to what you would follow in a React component but the difference is that Elm really does a good job at enforcing it and making sure that everything is cleanly structured. Every component of your application has a model, which describes it’s state, an update function, which mutates the state, and a view function, which renders it. Everything must happen in an explicit way, which makes it super easy to figure out what’s going on and to ensure that we have all the cases covered.

So far, so good. Elm is great and I’m thinking of some side projects where I can use it. I’m sure it’s going to be super fun. I’m not sure it’s production ready yet (new versions can change and break a lot of things) but it’s worth following how its development goes. I believe Elm is the nicest way to do web-development I’ve seen so far.