Special Launch Price!  🚀 Save on Unpacked: Multi-Player Bingo thru April 30th.

unpacked
Multi-Player Bingo

a design and code exploration of an Elixir + Phoenix + Elm app

Built with Phoenix 1.3, Elixir 1.6, and Elm 0.18

What does it take to put together an application with:

  • the concurrency and fault-tolerance of Elixir/OTP,
  • the real-time communication of Phoenix channels, and
  • the friendly reliability of Elm on the front-end?

And how would you design it in a pragmatic, straightforward way?

Find out as we unpack an app together! Through a series of videos, we explore a full-featured application layer by layer to answer these questions and more.

Richard feldman
Mike is an awesome teacher. If you're interested in @elmlang and @elixirlang I would definitely get in on this!” Richard Feldman
Bill peregoy
“Their classes are always great, but this may be a new level of awesomeness.” Bill Peregoy

Course Overview

Real-Time, Multi-Player Bingo The web application we explore lets you compete at buzzword bingo with several players in real time. Why this app?

Because meetings without buzzwords (or friends) are humdrum.

Web apps without Phoenix Channels and Presence are ho-hum.

And because we hope that seeing how this Elixir + Phoenix + Elm app is built will inspire you to be gung-ho about building your own apps!

Unpacking an Elixir + Phoenix + Elm App, Layer By Layer The "application" is really three distinct applications working in concert through well-defined public APIs:

  • The game server is a standalone Elixir OTP application.
  • Layered on top of that, a Phoenix application provides a web interface to the game server.
  • Finally, the game web client is an Elm application that communicates with a game server process via a Phoenix channel.

It's a fairly substantial app, so there's plenty here to unpack. And you'll come away with a solid, practical reference implementation you can draw on for your own projects!

Q: What if I don't want to use Elm?

A: You can easily swap out Elm for any JavaScript framework! We've structured the videos to make it easy for you to imagine using a JavaScript front-end of your choosing (Vue.js, React, etc.) in place of using Elm. We don't unpack the Elm front-end application until the last set of videos. So even if you don't want any part of Elm, we think you'll still find these videos highly valuable.

Course Outline

Here's how this 3-hour video series is unpacked:

  • Welcome! Before diving into our Elixir/OTP + Phoenix + Elm app....

    01

    ...let's make sure you have your development environment set up so you can explore the code and design with us.

  • The web application we'll unpack lets multiple players compete at buzzword bingo in real time. We'll start with a quick overview of the various game features.

    02a

    And then get a high-level overview of how it's designed as three distinct applications working in concert through well-defined public APIs.

    02b
  • 3. Elixir Game Mechanics (12:21)

    Now that we have a lay of the land, we'll dive deep into the functional, sequential Elixir code that handles the ins and outs, ups and downs (and diagonals!) of the game.

    03

    We'll also answer the question "Why not put the game mechanics inside the Phoenix app?"

  • 4. Concurrent Games (14:31 and 9:07)

    Each game server process runs in its own (stateful) GenServer. The more, the merrier!

    04

    And to identify a process by its unique game name, we take advantage of Elixir's built-in Registry.

  • 5. What's Up, Supervisors? (8:29)

    Who wants to lose their bingo game in the middle of a meeting? No one! A supervision tree that includes a DynamicSupervisor adds a fault tolerance layer to our app.

    05
  • 6. ETS to the Rescue (10:39)

    What happens to the state of a game process if it crashes? Well, that depends on the requirements of the app. In this case, we call upon Erlang Term Storage (ETS) to restore the game state.

    06
  • 7. Phoenix Bingo Hall (5:14)

    It's time to crack open the Phoenix app! We start with a quick lay of the land, discuss umbrella projects, and look at our dependencies.

    07
  • 8. Player Sessions (7:13)

    To play the game, a player first needs to enter a name and color, which we then store in an HTTP session.

    08

    It's the job of the SessionController to ensure everything is "remembered" and players are routed accordingly.

  • 9. Spinning Up New Games (7:53)

    Once a player is in a session, the GameController takes over. It renders a form for selecting a game size and then spins up a new game server process.

    09
  • 10. Talking On Channels (13:57 and 13:31)

    If the leader of your meeting drops a lot of buzzwords, then you're likely to have a fast-paced bingo game. So to keep everyone updated with near real-time updates, we rely on Phoenix Channels.

    10a
    10b

    There's a channel topic for every game, and by subscribing to a topic, a web client maintains a stateful, persistent connection to the corresponding game server process.

  • 11. Who's Playing, Presently? (13:30)

    It can be tricky to track who has joined a game, who is presently playing a game, and who has left a game for a meeting with tastier donuts. Thankfully, Phoenix Presence is really clever about keeping all the players in sync... and it's easy to use!

    11a
    11b
  • 12. Elm Front-End App Overview (4:06)

    Now it's on to unpacking the Elm app! A high-level overview reveals our Elm app is comprised of two buckets of code, and a handful of dependencies.

    12
  • 13. Building with Brunch (3:36)

    When it comes to compiling all our Elm code to JavaScript, packaging it up with all the other JS code in our app, and then building all our assets, we can relax over a leisurely breakfast because the Brunch tool does all the hard work.

    13
  • 14. Embedding with Flags (3:40)

    To kick off our Elm app, we use a dash of JavaScript to embed the app in a specific element of the page.

    14
  • 15. Sockets and Channels (12:03)

    It's time to get the conversation started and discover how our Elm app talks on Phoenix channels. Ready. Set. Join!

    15a
    15b
  • 16. Model Design (6:00)

    Now that our Elm app has joined the game, we turn our attention to the design of the Elm model.

    16
  • 17. Handling Messages (10:53, 5:56, and 4:58)

    Upon successfully joining the channel, our Elm app gets three Phoenix messages right off the bat. We have to be ready to swing at them all!

    17a

    What happens when a square is clicked? Or when someone types in a chat message like "I'm going to win this game!" The app handles the associated Elm messages and pushes Phoenix messages down the socket to the channel.

    17c
High-Quality Videos
Access to streamable and downloadable, DRM-free videos on any device.
Notes and Resources
Installation instructions, supplemental footnotes, alternate design techniques, and handy tips and tricks.
Source Code
Of course, you also get all the source code for the completed app.
Instant, Lifetime Access
No monthly subscription or time limit. Revisit all the material whenever you want!

Unpacked bingo large

21 Videos • 3 Hours

Bingo elixir elm package large

Bingo, Elixir, and Elm Bundle

For Experienced Developers

We assume you're already familiar with Elixir, Phoenix, and Elm and now you want to apply that knowledge in a broader context. This isn't an introductory course focused on syntax, vocabulary, and basic concepts. Rather, we take things up a notch to focus on design, integration, and advanced features.

If you're new to Elixir or Elm, we recommend starting with our popular introductory courses where you'll learn all the fundamentals by building an application from the ground up.

Elixir large
Elm large

From Mike & Nicole

Let's do something different! You're likely familiar with our single-topic, step-by-step courses on Ruby, Rails, Elm, and Elixir. But what happens when you smash (pragmatically, of course) different languages, technologies, and frameworks together? Well, you can create some very cool applications! We're excited to unpack these kinds of applications with you in the Studio. Find out more about us…

Mike nicole framed

What developers like you are saying about this course:

Bill peregoy
Their classes are always great, but this may be a new level of awesomeness. Expecting [a basic knowledge of Elixir] allows the course to focus on how to architect an app and teaches OTP concepts in a nice way. I find that most Elixir/Phoenix training focuses on replicating Rails projects rather than getting into the real magic of OTP. I think OTP is the real "secret sauce" of Elixir/Erlang and it's nice to have a course that demonstrates that in an effective way.Bill Peregoy
Paul fioravanti
“@pragmaticstudio I am *loving* the Multi-Player Bingo course so far, and will be looking forward to every module update!” Paul Fioravanti
“You are always so lucid in your commentary and code. I love how concisely and effectively you get to the point of what you are demonstrating. I feel like I need to reexamine all of my code after watching your videos. :-) You guys are just the best!” Sam Marten
Richard feldman
Mike is an awesome teacher. If you're interested in @elmlang and @elixirlang I would definitely get in on this!” Richard Feldman
Przemyslaw kaminski
“@pragmaticstudio Thank you for the great "Unpacked: Multi-Player Bingo" course on #elixir #elm #erlang. Concurrent and functional from top to bottom :) ” Przemyslaw Kaminski, aka @CoolGenie
Naji chammas
The graphics are great! I've been curious about understanding the supervisor, processes, threads, and nodes better. Your graphics helped me to understand how they all relate to each other. The ability to download the code and follow along is great. This is definitely a high quality course! Thank you! :) ” Naji Chammas