Programming, Web Development, Elm

Elm is really cool

At the beginning of the summer, I wanted to challenge myself to work on a project in a technology I was entirely unfamiliar with. At the time, I wanted to actually architect my personal website, and functional programming flew across my radar. The programming language Elm, seemed to be a natural fit. In this post, I'm gonna try to succinctly describe my experiences using Elm this past summer.

What is Elm?

Elm is a functional programming language that compiles down to Javascript to be used in Web Applications. Elm is a fantastic technology that comes bundled with several tools to make the frontend web development experience much more tolerable. For instance, it comes packaged with its own virtual dom (similar to React) that shows very good runtime performance. It has a very well implemented compiler that uses type inference to detect nearly every issue at compile time, nearly eliminating run time issues. And it interops with existing Javascript code to make refactoring old codebases easier, or allowing for certain functionality that would make more sense to do with Javascript.

Elm is, well, functional

Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects.
Master the Javascript Interview

Elm is my first foray into functional programming, and, I must say, I'm quite happy with the experience. The benefits of Elm with respect to functional programming should be shared across other functional languages. Although my website was relatively simple, the functional programming paradigms were very practical. When debugging issues in my website, pure functions, shared state, and immutable data made the process much easier. I won't go into much detail here, but functional programming is lovely and I look forward to getting more experience using it in the future.

Elm's compiler is a game changer

Object is undefined
We've all been there. We have some sort of run time issue, so we open inspector and go down a rabbit hole of seemingly endless Javascript functions, only to find one object returns undefined once messing up the entire app. Perhaps that issue is indicative of poor design, (and functional programming reduces many of the issues in that sentence alone), but debugging Javascript is a messy nightmare, and it only gets worse when you add more to your stack (I'm looking at you, Angular). Elm promises that if your application compiles, it will just...work. And, for the most part, it does. The elm compiler truly is a work of art. If there's an error in your code, it points out exactly what is causing it, what might be the cause, and what a potential solution is. Coupling these features with good practices from Elm being functional, and the process of debugging is unbelievably simple. In fact, the compiler is so useful that whenever I'm working in other languages (whether it be Python, Java, C++, or Elixir), I miss working in Elm really badly. The compiler for Elm is easily one of, if not the, best features of Elm.
errors (Elm's Homepage)

The Rough Edges

While my experience with Elm has been overall positive, there were several times I got frustrated. Although many of these issues were due to growing pains with both the language and functional programming, they're nevertheless prevalent. To start, learning new things in Elm is a little tricky. There's not many guides on Elm as it's fairly new, so if there's something language specific that's hard to grasp, finding documentation is a bit harder than for well used languages like Python or Java. Personally, I had issues with routing and file management, initially, and only after spending some time in the Elm slack (which is excellent), googling, and experimenting, did I come up with something that I was comfortable enough to let sit as passable. Even then, there were many things I had questions about regarding Elm that was too much of a chore to ask about or spend a few hours finding the answer to. Finally, and perhaps this is the pettiest, but Elm takes a very hands off approach when it comes to conventions. While it encourages certain things (like syntax and camelCase), it's very loose about it. This is a relatively minor point, but I appreciate languages that have a way of doing things, as I find I focus less on relatively less important things like directory structure and more on writing code. With that said, the Elm slack is incredibly useful for troubleshooting, especially for beginners.

How do I get started?

Elm has a variety of resources to dip your toes into their ecosystem. The best place to start would be their website: elm-lang.org. They also offer a nice and succinct Introduction. NoRedInk is an EdTech startup that offers a variety of tutorials including a fantastic style guide. For project management, I personally used the bootstrapper create-elm-app which was inspired by create-react-app to setup my elm project. Finally, my favorite reference material/tutorial is elm-tutorial.

Elm is, in my opinion, the most enjoyable way to do build UIs and add business logic to webpages. The compiler is powerful and helpful, functional programming paradigms make debugging and testing much easier, and it has the performance to boot. I look forward to building more webapps with Elm in the future.

Author image

About Rakesh Chatrath

I'm a web developer, data science enthusiast and photography geek. I like to write about things pertaining to coding, taking photos and life in general.
  • Pittsburgh