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.
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.
Clone the elm-spa-example Repo
git clone https://github.com/rtfeldman/elm-spa-example.git
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.
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.
Referring back to
elm-spa-example/README.md, we’re going to use
-g flag when installing
npm install -g elm elm-live
That installs a package globally and puts executables on our path.
npm will attempt to use
/usr/local/bin, and if you’re not running as root
that’s going to fail with a
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
We just started elm-live, the dev server. Take a moment to notice a couple of things before we go further:
First, there’s a new file in the project directory,
elm.js. The Elm
if you’re so inclined, but you can’t make changes: they’ll be
Second, the app should be running in your browser now. The
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.
src/Main.elm and insert
this isn't going to work on the
second line. Save, and check out your elm-live process:
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!