My Favorite Pattern Revisited

Written by Pete Corey on Feb 27, 2017.

A few weeks ago, I posted an article about my favorite pattern without a name. Surprisingly, this article got quite a bit of feedback, both good and bad.

People were quick to point out that this pattern did indeed have a name. It’s a fluent interface! It’s an interceptor, a la Clojure! It’s a lense! No wait, it’s just plain-old functional composition!

Some people pointed out that, regardless of what its called, it’s an awful pattern.

While all most of these comments were relevant and useful, I found one of the discussions around this article especially interesting from a practical point of view; my friend Charles Watson introduced me to the beauty of Elixir’s with macro!

Criticisms

The original example we started with in my previous article looked something like this:


user = get_user(sms.from)
response = get_response(sms.message)
send_response(user, response)

After constructing an all-encompassing state object and chaining it through our three methods, we were left with this:


%{sms: sms, user: nil, response: nil}
|> get_user
|> get_response
|> send_response

The main criticism of this approach largely boils down to the fact that we’re allowing our functions to know too much about the architecture of our final solution.

By passing our entire state “God object” into each function, we’re obfuscating the actual dependencies of the function. This makes it difficult to determine what the function actually does, and what it needs to operate.


From a practical standpoint, this chaining also presents problems with error handling.

Our original solution assumed that all of our functions succeeded. However, what happens if any of the functions in our chain fail? Can we even tell how they would fail in our example? Would they return an :error tuple? Would they throw an exception?

It’s hard to tell from reading the code, and even worse, both failure modes would lead to a less-than-ideal debugging situations.

Thankfully, we can refactor this solution to use the with macro and address both of these criticisms.

Using the With Macro

With Elixir’s with macro, we could have refactored our original example to look like this:


with
  user     <- get_user(sms.from)
  response <- get_response(sms.message)
do
  send_response(user, response)
end

So what’s the big deal? Arguably, this is much less clean that both our previous refactor and our original implementation!

While using the with macro does cost a few extra characters, it doesn’t come without its benefits.

In our original example, I happily glossed over any errors that might have occurred during our SMS sending process.

Imagine if get_response encountered an error. What does it return? Judging by the fact that a happy path call returns a response object, it’s easy to assume that an error would result in an exception. What if we wanted to gracefully handle that error, rather than having our process blow up?

Let’s pretend that we’ve refactored get_user, get_response, and send_response to return either an {:ok, result} tuple if everything went well, or an {:error, error} tuple in the case of an error.

We could then refactor our with-powered function pipeline to gracefully handle these errors:


with
  {:ok, user}     <- get_user(sms.from)
  {:ok, response} <- get_response(sms.message)
  {:ok, sent}     <- send_response(user, response)
do
  {:ok, sent}
else
  {:error, :no_response} -> send_response(user, "I'm not sure what to say...")
  error -> error
end

Our with assignments happen in order. First, we call get_user and try to pattern match it against {:ok, user}. If that fails, we fall into the else block where we try to pattern match against our known error patterns.

If get_user fails with an {:error, :user_not_found} error, for example, that error will match the error -> error case in our else block and will be returned by our with expression.

Even more interestingly, if get_response fails with a {:error, :no_response} error, we’ll match against that error tuple in our else block and send an error response back to the user.

Using with, we’re able to short circuit our function pipeline as soon as anything unexpected happens, while still being able to gracefully handle errors.

Another added benefit of using with over the pattern I described in my previous post is that it doesn’t artificially inflate the surface area of the functions we’re calling.

Each function is passed only the exact arguments it needs. This reduction of arguments creates a much more understandable, testable, and maintainable solution.

On top of that, by specifying arguments more explicitly, a natural ordering falls out of our function chain.

Final Thoughts

While this is a fairly contrived example, with can be used to gracefully express complicated functional pipelines. I’ll definitely be using the with macro in my future adventures with Elixir.

I’d like to thank my friend Charles Watson for pointing out the with macro to me and showing me just how awesome it can be.

If you’re interested in this type of thing and want to dive deeper into the world of functional composition, I highly recommend you check out this response to my previous article, left by Drew Tipson. He outlines many interesting topics which are all fantastic diving boards into worlds of amazing topics.

Happy composing!

Rendering Life on a Canvas with Phoenix Channels

Written by Pete Corey on Feb 20, 2017.

In a recent article, we wrote an Elixir application to play Conway’s Game of Life with Elixir processes. While this was an excellent exercise in “thinking with processes”, the final result wasn’t visually impressive.

Usually when you implement the Game of Life, you expect some kind of graphical interface to view the results of the simulation.

Let’s fix that shortcoming by building out a Phoenix based front-end for our Game of Life application and render our living processes to the screen using an HTML5 canvas.

Creating an Umbrella Project

Our game of life simulation already exists as a server-side Elixir application. We somehow need to painlessly incorporate Phoenix into our application stack so we can build out our web-based front-end.

Thankfully, Elixir umbrella projects let us do exactly this.

Using an umbrella project, we’ll be able to run our life application and a Phoenix server simultaneously in a single Elixir instance. Not only that, but these two applications will be able to seamlessly reference and communicate with each other.

To turn our Life project into an umbrella project, we’ll create a new folder in the root of our project called apps/life/, and move everything from our Life project into that folder.

Next, we’ll recreate the mix.exs file and the config folder and corresponding files needed by our umbrella application in our project root. If everything has gone well, we’ll still be able to run our tests from our project root:


mix test

And we can still run our life application through the project root:


iex -S mix

Now we can go into our new apps folder and create a new Phoenix application:


cd apps/
mix phoenix.new interface --no-ecto

Notice that we’re forgoing Ecto here. If you remember from last time, our Game of Life simulation lives entirely in memory, so we won’t need a persistence layer.

Once we’ve created our Phoenix application, our umbrella project’s folder structure should look something like this:


.
├── README.md
├── apps
│   ├── interface
│   │   └── ...
│   └── life
│       └── ...
├── config
│   └── config.exs
└── mix.exs

Notice that interface and life are complete, stand-alone Elixir applications. By organizing them within an umbrella project, we can coordinate and run them all within a single Elixir environment.

To make sure that everything is working correctly, let’s start our project with an interactive shell, and fire up the Erlang observer:


iex -S mix phoenix.server
:observer.start

If we navigate to http://localhost:4000/, we should see our Phoenix framework hello world page. Not only that, but the observer shows us that in addition to our Phoenix application, our life application is alive and kicking on the server as well.

Channeling Life

Now that our Phoenix server is set up, we can get to the interesting bits of the project.

If you remember from last time, every time we call Universe.tick, our Game of Life simulation progresses to the next generation. We’ll be using Phoenix Channels to receive “tick” requests from the client and to broadcast cell information to all interested users.

Let’s start the process of wiring up our socket communication by registering a "life" channel in our UserSocket module:


channel "life", Interface.LifeChannel

Within our Interface.LifeChannel module, we’ll define a join handler:


def join("life", _, socket) do
  ...
end

In our join handler, we’ll do several things. First, we’ll “restart” our simulation by clearing out any currently living cells:


Cell.Supervisor.children
|> Enum.map(&Cell.reap/1)

Next, we’ll spawn our initial cells. In this case, let’s spawn a diehard methuselah at the coordinates {20, 20}:


  Pattern.diehard(20, 20)
  |> Enum.map(&Cell.sow/1)

Lastly, we’ll return a list positions of all living cells in our system:


  {:ok, %{positions: Cell.Supervisor.positions}, socket}

Cell.Supervisor.positions is a helper function written specifically for our interface. It returns the positions of all living cells in a list of structs:


def positions do
  children()
  |> Enum.map(&Cell.position/1)
  |> Enum.map(fn {x, y} -> %{x: x, y: y} end)
end

Now that our join handler is finished up, we need to write our “tick” handler:


def handle_in("tick", _, socket) do
  ...
end

In our tick handler, we’ll call Universe.tick to run our simulation through to the next generation:


Universe.tick

Next, we’ll broadcast the positions of all living cells over our socket:


broadcast!(socket, "tick", %{positions: Cell.Supervisor.positions})

And finally, we return from our tick handler with no reply:


{:noreply, socket}

Rendering Life

Now that our "life" channel is wired up to our Game of Life simulator, we can build the front-end pieces of our interface.

The first thing we’ll do is strip down our index.html.eex template and replace the markup in our app.html.eex template with a simple canvas:


<canvas id="canvas"></canvas>

Next, we’ll start working on our app.js file.

We’ll need to set up our canvas context and prepare it for rendering. We want our canvas to fill the entire browser window, so we’ll do some hacking with backingStorePixelRatio and devicePixelRatio to set the scale, height and width of our canvas equal to window.innerWidth and window.innerHeight respectively. Check out the source for specifics.

Now we’ll need a render function. Our render function will be called with an array of cell position objects. Its job is to clear the screen of the last render and draw a square at every cell’s given {x, y} position:


function render(positions) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    positions.forEach(({x, y}) => {
        context.fillRect(x * scale, y * scale, scale, scale);
    });
}

Now that our canvas is set up and ready to render, we need to open a channel to our Phoenix server.

We’ll start by establishing a socket connection:


let socket = new Socket("/socket");
socket.connect();

Next, we’ll set up to our "life" channel:


let channel = socket.channel("life", {});

When we join the channel, we’ll wait for a successful response. This response will contain the initial set of living cells from the server. We’ll pass those cells’ positions into our render function:


channel.join()
  .receive("ok", cells => render(cells.positions));

We’ll also periodically request ticks from the server:


setTimeout(function tick() {
  channel.push("tick");
  setTimeout(tick, 100);
}, 100);

Every tick will result in a "tick" event being broadcast down to our client. We should set up a handler for this event:


channel.on("tick", cells => {
  render(cells.positions);
});

Once again, we simple pass the cells’ positions into our render function.

That’s it! After loading up our Phoenix application, we should see life unfold before our eyes!

Phoenix as an Afterthought

While Conway’s Game of Life is interesting, and “thinking in processes” is an important concept to grasp, there’s a bigger point here that I want to drive home.

In our first article, we implemented our Game of Life simulation as a standalone, vanilla Elixir application. It wasn’t until later that we decided to bring the Phoenix framework into the picture.

Using Phoenix was an afterthought, not a driving force, in the creation of our application.

Should we choose to, we could easily swap out Phoenix with another front-end framework with no fears about effecting the core domain of the project.


Throughout my career as a software developer I’ve worked on many software projects. Without fail, the most painful of these projects have been the those tightly coupled to their surrounding frameworks or libraries.

Loosely coupled applications, or applications with a clear distinction between what is core application code and what is everything else, are easier to understand, test, and maintain.

Some languages and frameworks lend themselves more easily to this kind of decoupling. Thankfully, Elixir’s process model, the concept of Elixir “applications”, and umbrella projects make this kind of decoupling a walk in the park.

Taken this as a reminder to build your framework around your application. Don’t build your application around your framework.

Build Your Own Code Poster with Elixir

Written by Pete Corey on Feb 13, 2017.

I recently finished up a long engagement with one of my clients, AdmitHub. To celebrate the work we had done together, I wanted to give them a going away gift.

I liked the idea of giving them a Commits.io poster, but I wasn’t comfortable handing out access to my client’s private repository to a third party.

Not to be deterred, I decided to use this opportunity to practice Elixir and build my own poster generator!

In the process of making the AdmitHub poster, I also made an Elixir poster to celebrate my ever increasing love for the language.

High-level Strategy

If we approach the problem of generating a code poster from a high level, we can break it into three distinct parts.

First, we’ll want to load a source image and a blob of source code. These pieces of data are the raw building blocks for our final poster.

Next, we’ll need to merge this data together. Our ideal outcome is an SVG filled with <text> elements. Each <text> element will contain one or more characters, or code points, from our source code blob, colored to match the corresponding pixel in our source image.

Once we’ve merged this data together in memory, we need to generate our final SVG and save it to disk.

With our SVG in hand, we can use a tool like Adobe Illustrator or Inkscape to render it into a more printer friendly format and then send it off to be printed!

Loading Our Source Data

Our application will make use of the Imagineer elixir library to load our source image. As an example, we’ll be using a beautiful version of the Elixir logo as designed by Bruna Kochi.

Before loading our image into our application, we need to consider a few things.

We’ll be using the Source Code Pro font to render the code in our poster. It’s important to realize that the characters in Source Code Pro, while monospaced, aren’t perfectly square. It turns out that the ratio of each character’s width to its height is 0.6.

This means that if we’re inserting a character of code for every pixel in our source image, and we want our final poster to maintain the aspect ratio of the original logo, we’ll need to scale the width of our source image by a factor of 1.667.

The total width and height of our source image also effects the outcome of our poster. More pixels means more (and smaller) code characters. A width and height of 389px by 300px gives good results.

Check out the scaled and resized source image to the right.

Once we’ve scaled and resized our source image, loading it into our Elixir application is a breeze:


{:ok, image} = Imagineer.load(image_path)

Within the resulting image struct, we’ll find a pixels field that holds all of the raw pixel data for the image in a two-dimensional array of tuples. Each tuple holds the RGB value for that specific pixel.


Now that we’ve loaded our source image, we’ll need to load the code we want to render onto our poster.

Rather than letting a library do the heavy lifting for us, we’ll take a more hands-on approach here.

We’ll use File.read! to load the file at code_path into memory, strip out any excess whitespace with the join_code helper function, and finally split the resulting string into a list of individual code points:


code = code_path
|> File.read!
|> join_code
|> String.codepoints

The join_code function simply replaces all newlines with leading and trailing spaces with a single space character, and replaces all non-space whitespace characters (tabs, etc…) with spaces:


def join_code(code) do
  code
  |> String.trim
  |> String.replace(~r/\s*\n+\s*/, " ")
  |> String.replace(~r/\s/," ")
end

And with that, we’ve successfully loaded both our source image, and our source code!

Merging Pixels and Code Points

The real meat of our application is in merging these two disparate sets of data.

Our goal is to build an in-memory data structure that places each code point from our source code blob in its correct position on the poster, and colors it according to the pixel corresponding to that same position.

Imagineer delivers pixel data in the form of a list of rows of pixels. Each pixel is a tuple of RGB values. The structure of this data influences how we’ll structure our solution.

Ultimately, we’ll map over each row of pixels and reduce each row down to a list of tuples representing each <text> element in our final poster.


The reduction of each row is probably the most interesting part of our application. When reducing an individual pixel from a row of pixels, there are three possible scenarios.

This might be the first pixel we’ve encountered in a row. In that case, create a new <text> element:


def merge_pixel_into_row(fill, character, x, y, []) do
  [{:text, %{x: x, y: y, fill: fill}, character}]
end

The current pixel might match the fill color of the previous pixel. In that case, append the current character to the body of the previous <text> element:


def merge_pixel_into_row(fill, character, _, _, 
                         [{:text, element = %{fill: fill}, text} | tail]) do
  [{:text, element, text <> character} | tail]
end

Notice that we’re pattern matching the current fill color to the fill color of the previously seen text element. Awesome!

Lastly, the current pixel might be a different color. In that case, create and append a new <text> element to the head of the list:


def merge_pixel_into_row(fill, character, x, y, pixels) do
  [{:text, %{x: x, y: y, fill: fill}, character} | pixels]
end

After flattening the results of our map/reduce, we finally have our resulting list of correctly positioned and colored <text> elements!

Building Our SVG

Now that we’ve built up the representations of our <text> elements, we can finally construct our SVG.

We’ll use the xml_builder Elixir module to generate our final SVG. Generating an SVG with xml_builder is as simple as passing an :svg tuple populated with our text elements and any needed attributes into XmlBuilder.generate:


{:svg,
 %{
   viewBox: "0 0 #{width*ratio} #{height}",
   xmlns: "http://www.w3.org/2000/svg",
   style: "font-family: 'Source Code Pro'; font-size: 1; font-weight: 900;",
   width: final_width,
   height: final_height,
   "xml:space": "preserve"
 },
 text_elements}
|> XmlBuilder.generate

Notice that we’re defining a viewBox based on the source image’s width, height, and our font’s ratio. Similarly, we’re setting the final width and height based on the provided final_width and final_height.

The "xml:space": "preserve" attribute is important. Without preserving whitespace, text elements with leading with space characters will be trimmed. This results in strangely chopped up words in the final poster and is a difficult issue to track down (trust me).

Lastly, we pass in the list of :text tuples we’ve generated and stored in the text_elements list.

The Final Poster

After the final SVG is generated and saved to disk, it can be loaded into Illustrator or Inkscape and rendered to a PNG for printing.

A 10500 by 13500 pixel image at 300 dpi looks fantastic when printed onto a 20x30 inch poster.

Overall, I’m very happy with the outcome of the final poster. It beautifully commemorates the work my client and I accomplished together over the past two years, and will hang proudly in my office and theirs.

The Elixir poster turned out very nicely as well. If you’re interested or want to print your own poster, you can download the full resolution output image here.


The application takes approximately one minute to generate a 20x30 inch poster, depending on the color variation per row. This performance can almost definitely be improved and may be the subject of a future post.

Was Elixir the tool for this project? Probably not. Was it still a fun project and a good learning experience? Absolutely.

If you’re interested in seeing more of the code, be sure to check out the entire project on Github.