How to write a browser game in pure Elixir — Part 1
Phoenix LiveView is an awesome technology that tries to push Elixir usage for web application way further than the basic Phoenix framework does.
It was presented on April 2019 at ElixirConf EU, and it was immediately a huge hit. It allows to develop real-time, highly interactive web applications, without leaving the realm of Elixir.
You start by defining an initial, server-side rendered .leex template, which is the extension for LiveView Templates, almost identical to Phoenix Eex Templates. Then, a websocket takes over and becomes the primary mean of communication with the backend: user events like clicks, keypresses, form submissions etc, they all pass through the socket.
All the state is kept within the socket, and lasts for the whole user session. When the state is updated, it is immediately reflected in the templates, and the changes are sent to the client through the websocket as HTML strings. Then LiveView performs DOM diffing between what’s in the actual DOM and the received string, and paints only what actually changed.
This means everything is kept on the backend: templates, state management, render logic, etc. Actually there is a tiny bit of JS you need to write in every project, but it‘s just setup code as we will see later.