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 Elixir 1.2.3 and Phoenix 1.1.4. So, if you're currently on those versions you can safely ignore this post and continue on to part 13. (elm-brunch will also be after the version discussed here)

Since the last post we have seen updates to both Elixir and Phoenix. Furthermore, as of Phoenix version 1.1.2, the version of Brunch that is used has been upgrade to ^2.1.1. This means that we will end up upgrading Brunch to version 2.1.3 or later, which affects the elm-brunch package that we use to build our Elm project.

Thanks to @ggerico and @tobyhede for raising the issue that alerted me to the Elm Brunch issue. Also thanks to @madsflensted for providing the quick fix to elm-brunch.

Upgrade to Elixir 1.2

This is the simplest part of the upgrade because it doesn't require any code changes to the application. The way you update Elixir will depend on your system. If in doubt see http://elixir-lang.org/install. In my case, on a Mac, I just did the following:

brew update
brew upgrade elixir

Upgrade to Phoenix 1.1.3

Getting to Phoenix 1.1.3 is a staged process. We'll start by upgrading to 1.1.0, then go from 1.1.0 to 1.1.2 and finally upgrade from 1.1.2 to 1.1.3.

Upgrade to 1.1.0

This is, perhaps unsurprisingly given the minor version bump, the most involved from the Phoenix side. phoenix-ecto gets a major version bump (making changes to its API), gettext support for I18n is added and the way that layouts render the views that they wrap changes. See https://github.com/CultivateHQ/seat_saver/commit/00016ae4b0d7328984a1556c4585dd1a36c3edfd for full details.

Upgrade to 1.1.2

This update changes some things on the JavaScript side of things. Most notably there is a major version bump to Brunch, and there is a change to the way that the phoenix and phoenix.html modules are imported.

Whilst upgrading to Phoenix 1.1.2 the Brunch version is upgraded to ^2.1.1. In Brunch version 2.1.3 an update was made that stopped the elm-brunch plugin, that we use to build our Elm project, from working. As such we need to upgrade to elm-brunch ^0.4.4 at the same time.

See https://github.com/CultivateHQ/seat_saver/commit/621f87b03815359f81871d008c7f1037c06986cf for full details (the update to elm-brunch is actually done in the next commit because the issue didn't appear when I first upgraded to Phoenix 1.1.2).

Upgrade to 1.1.3

The main change to note here isn't actually shown in the commit. The way that the phoenix-new hex package is installed has changed. Rather than installing a particular version of the package, you no longer need the version number.

For example:

# old way
mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v1.0.3/phoenix_new-1.0.3.ez

# new way
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

See https://github.com/CultivateHQ/seat_saver/commit/2b8de911db7a723a58f59ee6a559f62f0a0e9ac0 for more details.

Summary

That's us upgraded to the latest and greatest now. In Part 13 we'll deal with toggling a seat from available to occupied (and vice versa) over channels.