Elm (0.18): A Refreshing Functional Programming Language For The Front End

I’ve really been enjoying my recent experience with the front end (functional) programming language called Elm for the following reasons:

• The Elm Architecture is great for single page apps (SPAs) as the rendered view will update automatically depending on the data model which gets manipulated when events are triggered.

• Immutable variables and Strong typing produces reliable and readable code, although slightly trickier to write (at first).

• The compiler is extremely smart and helpful (and a bit strict), often telling you exactly what went wrong and where to find it. Compiled Elm apps have slogan of “No Runtime Errors” since the Strict Typing allows the compiler to ensure there will not be any.

• It is compiled into javascript and easy to embed into any existing page/project.

Here is my guide to getting started (with vim as my IDE):

My prefered quick setup to initiate an Elm App

First, install elm.

That guide also recommends the following command line tools:

• elm-repl — play with Elm expressions
• elm-reactor — get a project going quickly
• elm-make — compile Elm code directly
• elm-package — download packages

I almost exclusively use elm-live instead of elm-reactor, but it required node 6.0+

Then, create a folder for your elm project, cd into it and get the elm project and package files with:

elm-package install elm-lang/html

That command will create the elm-package.json file and elm-stuff folder. Next, I create a Main.elm from my following boilerplate gist:

Then, if I go to the command line (inside the project folder) and use elm-live Main.elm, an index.html containing the resulting javascript etc. will have been generated and served.

However, I like to keep the resulting javascript in it’s own file, so I use elm-live Main.elm --output=elmApp.js along with this boilerplate index.html which will load the Elm App into a target Div:

The above index.html shows how we embed the elm app into an existing html/js project.

With that, we can just start updating Main.elm and see the live-updated results on our locally served page.

Vim is a first class editor for Elm

Elm dev is really good when using vim. The plugin ElmCast / elm-vim does everything I need via it’s features:

• Syntax highlighting
• Automatic indentation
• Function completion
• Build and package commands
• Code formatting and linting
• Documentation lookup
• REPL integration

( configuration is also provided to enable integration with common autocomplete plugins )

I particularly find the ‘Code formatting’ and ‘Automatic indentation’ features to be quite indispensable. Love it or hate it, Elm requires indentation to be via ‘4 spaces’ instead of a tab. I just live with it, and knowing that it’s universal gives me comfort knowing that all Elm code can be more readable. Also, with Code formatting and Automatic indentation, I can spew code out as I think of it, hit save and BOOM the formatting is updated to match the rest of the page - This saves time and keystrokes and keeps the code readable for the future.

But isn’t it much harder than Javascript?

I find Elm code to be extremely concise to write and it remains organized and readable even if you fall (way) behind on refactoring it.

There is a tiny extra effort to get your types defined correctly, handling json decoders/encoders (I’ll blog about those in the future as it is a main pain-point for many), and understanding how ‘side-effects’ happen in Elm requires a bit of mind wrestling. BUT, eventually all these concepts click in your mind and implementing this style of code becomes quite enjoyable - not to mention the benefits of stability and maintainability.

I highly recommend giving elm a try. I hope to discuss some of the things I’ve had to wrestle with while learning it in the near future.

EDIT: The above is valid for Elm 0.18, but I will create a post which will allow this to work for 0.19

---

#Elm   #FuntionalProgramming