Phoenix with Elm

I gave a talk at ElixirConf 2015 on combining the Phoenix web framework with the Elm programming language. This is the tutorial that was referred to in that talk.

The tutorial walks through the creation of a very basic seat saving application, like one you'd use when booking a flight for example. The application will do just enough to demonstrate the mechanisms for getting the two technologies talking to each other.

There is an accompanying repo for this tutorial. Each of the numbered steps has an associated commit so that you can just look at the diffs if you'd rather not read through the whole thing.

PLEASE NOTE: Since this post was written I've re-written the previous posts to use Elm 0.16.0. So, if you're currently on Elm version 0.16.0 you can safely ignore this post and continue on to part 11.

Upgrading to Elm 0.16.0

OK, so I know that I promised that I'd be looking at Phoenix Channels in this post, and don't worry, that post is coming soon. However a shiny new version of Elm was just released, and so we should upgrade for all of the goodness that it brings. Please do check out the blog post announcing the release, it is a thing of beauty in itself. :)

But first ...

Before we start, let's rewind our efforts from the last post. We don't need most of the code that we added and it could serve to confuse things. We can re-add what we do need when we need it. If you created a branch in your own version of the project then you can just dump it, or do whatever you need to do to get back to the pre-HTTP state. If you can't do that, then checking out the pre-http branch of the SeatSaver repo should get you to where you need to be.

The upgrade

Getting the latest elm platform

Easiest way I've found to do this is through brew cask, but if you're not on a Mac, or you are but you don't use Homebrew, then follow the instructions on the Elm site instead.

brew cask update
brew cask install elm-platform

I ran into an issue where it wouldn't install the first time I ran this. But removing the existing elm binaries from /usr/local/bin and then re-running it did the trick.

You can check that you now have the correct version of elm by running elm repl. Type :exit to exit the repl.

Upgrading elm packages

Navigate to the seat_saver project's web/elm folder. If you try to run elm package install in the project root then it will install the packages there instead of in your Elm application.

Update the elm-package.json file to look like the following:

// web/elm/elm-package.json
{
    "version": "1.0.0",
    "summary": "An example app for learning about using Elm with Phoenix",
    "repository": "https://github.com/cultivatehq/seatsaver.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "3.0.0 <= v < 3.1.0",
        "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
        "evancz/start-app": "2.0.2 <= v < 3.0.0"
    },
    "elm-version": "0.16.0 <= v < 0.17.0"
}

Note that we added a proper URL to the "repository" key. Elm requires that we do not have UPPER CASE letters in here now and will throw an error if we do. You can make this anything that makes sense for you, as long as there are no UPPER CASE letters.

We then updated the versions on each of the "dependencies" that we are using to be the latest versions that are compatible with Elm 0.16.0.

Finally, we update the "elm-version".

Run elm package install. This will update your packages to the right version.
Return to the project root folder, cd ../...
Run the tests to make sure that we haven't broken anything mix test (you should have 4 passing tests).
Start up the Phoenix server (iex -S mix phoenix.server) to compile the Elm application. If you completed part 6 of this tutorial before Elm 0.16.0 came out then you may get the following error:

This is because Elm 0.16.0 changed the way that record updates are done. The syntax has changed from <- to =. Change line 75 of web/elm/SeatSaver.elm to match the following:
```
{ seatFromModel | occupied = not seatFromModel.occupied }
```
If you still have the server running, this should now recompile without error.

I, and others, from time to time see a race condition occurring in the Brunch pipeline. You'll see an Unexpected end of input error that is then almost immediately superseded by a successful compile.

Most of the time this causes no issues, but sometimes it can prevent the assets from loading properly. A server restart will resolve this. If anyone finds a solution to this, please do let us know in the seat_saver repo issues. Thanks :)
Go to http://localhost:4000 in your browser. The application should display as before and let you click seats to toggle them between occupied and available.

toggling a seat

Summary

Now we're all up-to-date. We'll start to use Phoenix's Channels to get our data (as previously promised) in part 11.