a design and code exploration of an Elixir + Phoenix + Elm / Vue app
Built with Phoenix 1.3, Elixir 1.6, Elm 0.18, and Vue.js 2.5
What does it take to put together a full-stack application with:
- a highly-scalable Elixir/OTP app,
- a super-charged Phoenix app, and
- a front-end using either Elm or Vue.js?
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 the design, architecture, and code of a full-featured Elixir + Phoenix + Elm / Vue application layer-by-layer, giving you a jump-start on building similar applications.
A Real-Time, Multi-Player Bingo App The web application we explore lets you compete at buzzword bingo with multiple 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 app is built will inspire you to be gung-ho about building your own full-stack apps!
Unpacking The Design, Architecture, and Code By combining Elixir + Phoenix + Elm / Vue, you can build some really cool applications! But to reach the promised land, you’ll have to deftly navigate through MANY design decisions, including:
- How is the code organized and structured? How many OTP applications?
- When and where are GenServers used?
- What does the supervision tree look like?
- If a concurrent process crashes, how will its state be restored?
- What role does Phoenix play?
- What's the balance of power and responsibility between front-end applications and the back-end services?
- How do Elm and Vue.js front-ends communicate with real-time Phoenix channels?
We start with the completed app and unpack it layer by layer, answering these questions and much more. You'll come away understanding how all the pieces work in harmony together so you can jump right into building your own cool apps!
Here's how this 3.5-hour video series is unpacked:
Welcome! Before diving into our Elixir/OTP + Phoenix + Elm/Vue app....
...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.
And then get a high-level overview of how it's designed as three distinct applications working in concert through well-defined public APIs.
3. Elixir Game Mechanics (12:24)
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.
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!
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.
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.
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.
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.
It's the job of the SessionController to ensure everything is "remembered" and players are routed accordingly.
9. Spinning Up New Games (7:29)
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.
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.
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!
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.
13. Elm: Building with Brunch (3:36)
14. Elm: Embedding with Flags (3:40)
15. Elm: 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!
16. Elm: Model Design (6:00)
Now that our Elm app has joined the game, we dive into the design of the Elm model.
17. Elm: 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!
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.
18. Vue Front-End: App Overview (6:37)
Turning our attention to the version of the app that uses Vue.js as the front-end, we see how the Vue instance mounts to the game page and reacts to changes in the data to keep the view updated.
19. Vue: Joining a Channel (6:39 and 6:28)
To get the party started, our Vue instance joins a Phoenix game channel.
Upon successfully joining a channel, the Vue instance needs to update the game and presence-related data. We also start to unpack how data is rendered using Vue directives.
20. Vue: Marking and Chatting (6:46)
Now we're ready to play the game by marking squares and chatting up other players. The Vue instance handles various DOM events by pushing respective Phoenix messages to the channel, and then reacting to incoming messages.
For Experienced Developers
We assume you're already familiar with Elixir, Phoenix, and either Elm or Vue.js 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.
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…
What developers like you are saying about this course:
“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
“I love how you handled the foundational code as pure Elixir and then used Phoenix just as a web layer on top of it. And then the Elm integration via websockets was amazing. It's a very well thought out architecture. Keep up the good work. And count me in to buy your next Elixir/Elm stuff. Really worth the money!!” Lorenzo Lopez
“@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
“Mike is an awesome teacher. If you're interested in @elmlang and @elixirlang I would definitely get in on this!” Richard Feldman
“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
“@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
“Best $$ I ever spent on video training!” Robert Calco
“Just wanted to say thank you, I loved the Multiplayer Bingo course, especially the architectural explanations and top-down approach. Good pace, good explanations, good approach. I felt like I understood what was happening and why.” Russell Matbouli
“I loved the breakdown approach, which makes for a much more succinct (and approachable) course. I also loved the high quality of the material (nothing irrelevant in here) and the eloquence of the teachers. Thank you!” Guillaume Troppee