To highlight the capabilities of Phoenix LiveView, DockYard created and is running Phoenix Phrenzy, a contest for developers to build with Phoenix LiveView. The voting period ended on October 20, 2019.
Source code for each submission is currently publicly visible. This provides us a great opportunity to see the implementation details of deployed LiveView apps. The submissions can be clustered into a few categories.
Games (18): Tetris Kachori, LiveView Tetris, Space Birds, Unox, crack the cregg, Archmagi, Phoenix Royale, Demon Spirit, Ground Control to Major Tom, Never lose Tic Tac Toe, Geo Racer, Answercast, Roll & Music together, ETE, Pentomino Game, Live Chess, Live View Math, CodeBreaker!
Data (4): Visualixir, Fprefs, SimpleBet MLB Pitch-By-Pitch Viz, Pie Chart Maker
Business/Productivity (4): Elixcel, Pomodoro Timer, Kanban LIVE!,
Writing and Drawing (4): Haiku Live, LiveDraw, TypoPaint, LiveView PixelArt Editor
Utilities (4): gluster-dashboard, Elixir Console Live, Phoenix Commander, Elixir Regex
Music (2): MIDI LiveView Demo, LiveTracker
Other (2): Baby Age Calculator, Flame of Life
Some of the submissions caught my attention. I’m certain the other entries also do a good job of highlighting the power of LiveView and are worthy of your time. Here are a few that happened to catch my eye.
This entry caught my eye with its simplicity and visual appeal that lets you easily understand what the app does with just a short gif. Elixcel is narrowly focussed on LiveView functionality (this is a LiveView contest afterall), yet I was impressed by its thoroughness. The author didn’t just stop at entering cell values and making basic calculations (though that would have been illustrative enough of the LiveView use case). Instead he added keyboard support for: arrow key navigation, bold/italics, cancel via esc, delete via backspace, etc. as well as add-row and add-column buttons in less than 400 lines of code.
Good job @joerichsen.
LiveView templates can be rendered inline (via the ~L sigil) or they can be rendered via a separate .leex html template (docs). .leex templates can render and nest standard .eex templates (aka “partials”).
I think the .leex template is more familiar, approachable and maintainable for developers than the embedded approach so I looked through some of the entries to find some that use the .leex html template approach with nested templates. CodeBreaker! is one of those.
Besides being a demonstration of .leex templates, it’s a fun game to play.
On the other end of the complexity spectrum, GeoRacer is such an ambitious entry that it just had to have a mention. The scope of the effort is impressive. “The racing game helps you track down waypoints with an interactive hot/cold meter. But beware, your friends will gain hazards along the way that will make your race more difficult. Be the first to collect a courses’s waypoint and win the day!”
This project has a mix of standard controllers and views combined with live views. It goes well beyond LiveView functionality though. The GeoRacer team created Plugs and also uses Channels. It leverages :geo, :geocalc, and :geo_postgis for geo support. There’s an impressive amount of Elixir and Phoenix packed into this project in such a short timeframe. Theres lots beyond LiveView to dig into and learn from the GeoRacer repo.
The Elixir Community and Ecosystem
The PhoenixPhrenzy contest highlights the friendly and supportive nature of the Elixir and Elixir Phoenix community. In tweets, participants talk about their work as fun and enjoyable. When promoting their submissions, app authors do so in a friendly way that is not ego-centric rather humble and encouraging of folks to look at not just their apps but also at the contest and entries in general.
Some of these projects also demonstrate the power of leveraging existing Elixir community packages. For example, Elixcel uses the Abacus parser for mathematical expressions. Developers seem reluctant to use Elixir Phoenix because the ecosystem is not as mature as Ruby’s so the library of packages available is perceived as lacking. Let me assure you that is not the case. Whatever tasks you are working on as an Elixir developer, do not assume you have to write it from scratch. Instead, search hex and you might be surprised.
Go Take a Look and Vote!
In the time I spent reviewing entries and writing this, another 10+ votes have been cast! If you’re interested in Phoenix LiveView – or just want to see what some folks are building with Elixir and Phoenix, go check it out (requires sign in via GitHub).