Phoenix LiveView Round-Up: The Story So Far
At last year’s ElixirConf, Chris McCord stunned the keynote audience when he announced LiveView: a library for the Phoenix web development framework that would allow developers to perform real-time client-side updates using server-side Elixir.
Building upon the robust real-time communication provided by Phoenix channels, and the blazingly fast template rendering on the server, LiveView makes it possible to create user experiences that previously could only be accomplished with JavaScript. But now we can do it entirely with Elixir.
(If you need a refresher on LiveView, see this blog post that sums up the ElixirConf announcement).
LiveView was still in development at the time, but six weeks ago, Chris finally made the repo public, apparently succumbing to the throngs of developers who were eager to try it out:
Folks jumped on it quickly, and in a few short weeks, we’ve seen an impressive array of demos and tutorials that more than deliver on the potential we saw at ElixirConf.
In this post, we’ll take a look at a few of the projects that have popped up in these early days of this promising new tech.
And as you’re looking these over, bear in mind that the developers wrote absolutely no JavaScript to make them work!
Demos
A lot of fun demos started appearing shortly after the first release.
Ricardo García Vega created an ant farm consisting of 500 server-rendered ants:
Michael Ries built an SVG editor that renders the image in real-time as you type:
Erlang’s observer tool (which shows you the internals of an app running on the BEAM) got a fresh new look from Dimitris Zorbas:
And Nick Dichev put together a real-time markdown editor:
Games
Thanks to the efficiency of Phoenix’s channels and rendering engine, LiveView has proven to be performant enough to create simple games.
Richard Taylor implemented a Flappy Bird clone:
And Tommaso Pifferi recreated the classic Breakout game:
The programming model for LiveView appears to be quite straight-forward, as even self-proclaimed “Elixir newbies” are getting in on the fun.
Like Dan Carlo Maglasang with his multi-player Black Jack game…
…and Milada Majáková with her Hippo game:
Tutorials
If these demos have inspired you to give LiveView a try, there are some great tutorials to help get you started.
Dennis Beatty has two tutorials available, one which shows just the basics with a simple counter example:
And another more detailed tutorial that creates a multi-client todo list:
ElixirCasts also has a 3-part series on LiveView (the first two are free, but the third requires a subscription):
More?
This is by no means an exhaustive list of what’s out there. If you want even more examples, Leandro Cesquini Pereira is maintaining a Github repo with a list of demos and repos that put LiveView through its paces.
Edit: In the comments, Dimitris Zorbas (creator of Observer Live, shown above), mentioned that he’s also curating a list of examples and demos so be sure to check those out as well.
And finally, I strongly recommend watching Chris McCord’s keynote from the recent ElixirConf EU conference. He goes into more specifics about LiveView’s programming model, and how it’s implemented under the hood. The details are fascinating and possibly even more impressive than the demos themselves.
We’re still in the early days of LiveView. It is not yet at a 1.0 release, and much could change before it does. But what we’re seeing so far is really exciting.
Ready to dive in? Check out the Github repo and have at it. And be sure to post a link to your creation in the comments!
Darin Wilson is a principal software developer at Infinite Red, a web and mobile application company, and the co-author of Programming Ecto, published by Pragmatic Bookshelf. You can find him as @darinwilson on Twitter.
