I’m digging in to Elm because my front end skills need a refresh after years of plugging away on back end services and devops/cloud automation work. Today I’ll cover why I picked Elm and how I got the Elm SPA Example running.

Why Elm?

First, why Elm? Why not Angular, or Ember, or anything else? Elm is The New Rails led me down this path. Giles recalls the fun of discovering and using Rails over a decade ago. Do you remember where you were when you saw the 10 minute blog demo?

I remember. I was in my cubical at a government facility where I spent my days writing Java web applications with Struts and other tools of the time. I had to touch 3 or 4 files to wire up a new view. Everything was explicitly configured with XML in duplicate. We handled database migrations manually with ad hoc scripts executed by the Priestly Order of Database Administrators. Making any change in a Java app required a build and deploy cycle that could take minutes, while Rails hot deployed changes with every save. Rails turned web application development on its head.

If Giles says that Elm reminds him of Rails when Rails came out, Elm deserves attention.

On the other hand, without naming projects or speakers, I saw some really lackluster talks covering other JavaScript frameworks. The code reminded me of J2EE, and the speakers were actively complaining about the projects while introducing the audience to those projects. Transparency about a project’s flaws is good, but straight up whining and complaining while promoting a project is not.

And How?

Clone the elm-spa-example Repo

git clone https://github.com/rtfeldman/elm-spa-example.git

The README.md has all the info we’ll need to get started.

One quick detour: note that the elm-spa-example repo is a part of the realworld.io ecosystem. If you’ve never seen this, check it out now! There’s a Medium clone named Conduit, and that application has multiple front end and back end implementations. So you can see the front end working in Elm, or Angular, or React, and the back end has 6 working implementations and over 20 in progress implementations.

Install Node

Elm is a language all its own, and Elm compiles to JavaScript. Elm can interact with and be embedded in existing JavaScript code. Before we can build Elm code, we need to install Node and NPM.

I’ve installed Node and NPM from packages provided by my OS vendor before, and I’ve then uninstalled the OS vendor packages and installed from the upstream project due to the OS vendor package lagging behind the upstream version. This time around I’m going straight to the upstream version.

I chose Node.js v6.x as it is the current LTS release.

Windows and OS X users can download packages from nodejs.org.

I’m a linux on the desktop developer, and packaged binaries are available for many linux distros. I skipped over the “pipe a shell script from the internet into a root shell” installation option and did things manually. You can pipe shell scripts from the internet into root shells if you’d like, but maybe at least read the script first.

Configure NPM

Referring back to elm-spa-example/README.md, we’re going to use the -g flag when installing elm and elm-live:

npm install -g elm elm-live

That installs a package globally and puts executables on our path. With default npm configurations, npm will attempt to use /usr/bin or /usr/local/bin, and if you’re not running as root that’s going to fail with a EACCESS error.

It’s a common enough problem that there’s a page dedicated to fixing npm permissions. I think Option 1 is pretty bad, so I went with Option 2. Even on a single user system, changing ownership of directories in /usr/local/ seems like a pretty terrible idea. But just like with piping internet shell scripts to root shells, you do you.

Install Elm and Run elm-spa-example

If you’ve installed Node and configured NPM correctly, this should be easy:

npm install -g elm elm-live

elm-live --output=elm.js src/Main.elm --pushstate --open --debug

Look Around

We just started elm-live, the dev server. Take a moment to notice a couple of things before we go further:

Elm starting

First, there’s a new file in the project directory, elm.js. The Elm code gets compiled down to this JavaScript for in browser execution. It’s dense but totally legit JavaScript. You can read through it if you’re so inclined, but you can’t make changes: they’ll be overwritten.

Second, the app should be running in your browser now. The --open flag does that, so omit it if you’re annoyed by that behavior.

Make a Breaking Change

New Elm users remark on the friendly error messages, so let’s make an error message appear.

Open src/Main.elm and insert this isn't going to work on the second line. Save, and check out your elm-live process:

Make a breaking change

By spewing an English sentence into the file we’ve actually hit upon something that looks like a removed feature to the Elm compiler. It gives us alternatives, and advises us to remain calm while we work on the problem. Grizzled veteran programmers may think this is superfluous, but why should every programmer for all time deal with opaque error messages? Compiling code is an act that bridges the gap between humans and machines, and I think more helpful machines will nudge more programming students into programming pros.

Hit the Books

At this point we have a fully functional Elm application running, but I don’t actually know any Elm yet. I’m going to check out the following resources and I’ll be back with more information once I’ve absorbed them.

You may not be ready to install Elm. That’s OK, you can try it online, too!

Until next time!