Phoenix is a web development framework. It is written in Elixir, which is a multi-paradigm programming language (a paradigm being a way to approach computer programming). It runs on an Erlang virtual machine (BEAM) that allows applications written in Elixir to function. Its creator, José Valim, wanted to create a programming language for large-scale sites and applications. It was created to take full advantage of the multi-core processors that began to be fully democratized in the 2000s. It is particularly used to create low-latency and fault-tolerant distributed systems.
Phoenix therefore takes full advantage of Elixir's strengths, making it a powerful tool for development. This framework implements the MVC (Model View Controller) model on the server side. MVC is a software architecture pattern for graphical user interfaces that is very popular for web applications. It is composed of three types of modules with three different responsibilities: models, views and controllers.
This type of model allows a better distribution of tasks by separating the business logic and the display.
The strength of Phoenix is that it combines productivity and performance. Indeed, it offers a great development capacity and very high application performance. In addition, certain libraries allow it to be used to its full potential, such as LiveView.
LiveView is a library for Elixir and more particularly for its Phoenix framework. This one will allow more interactive pages or applications. Which will allow users to change the behavior of the page based on their actions. This one was imagined and created in 2018 by Chris McCord. He tells us more about LiveView in an article published on Dockyard.
In addition, LiveView uses WebSockets for bidirectional communication, i.e. between the client and the server. LiveViews react to client events, as well as to server-side events, and return their rendered updates to the browser.
A stateful application stores client session data. This data can be information about previous client requests, login/authentication status, etc. This data is stored on the server on which the application runs or on another server.
In contrast, a "stateless" application does not keep any data about the user session on the server from which it is running. The data can then be kept in the client's cache via cookies for example.
Both methods are widely used and each has its advantages and disadvantages. Nevertheless, rendering pages on the server side allows to lighten the client and therefore to increase the performance on its machine.
LiveView operation diagram
To use LiveView, you have two options :
mix phx.new my_app --live
mix phx.new my_app
Once LiveView is installed, we need to learn how to use it.
To start using LiveView, you need to understand that a LiveView is really just a module that looks like this :
A LiveView is composed of two functions. A "render" function which takes as parameter "socket.assigns" and a "mount" function which takes as input parameters, a session and a socket.
When our application receives an HTTP request pointing to a page using our LiveView, it will respond by displaying the static HTML page defined in our "render" function. To do this, the "mount" function will first be called. This function will assign default values to our socket which will then be used in our "render" function. These are steps 1, 2 and 3 of the diagram we saw earlier in this article :
Once the first 3 steps are completed, the client should normally have a static HTML page displayed. He will then send back his signed session (thanks to the signing salt defined previously in « config.exs ») to the server (step 4). The server will then open a stateful connection between itself and the client (step 5). This will have the effect of "updating" the page display each time the socket is updated.
Now let's take a closer look at our "render" function.
As you can see, this one contains a "~H" sigil. This sigil is used to define an HEEx (HTML + EEx) template. This is an extension of the Elixir EEx templates, with support for HTML validation, etc.
To use your newly created LiveView, you now have two choices to use it directly from your router in this way :
Or use the "live_render" function in your templates. You will then just have to import in your « Phoenix.LiveView.Helpers » view, and in your template and use "liver_render" like this:
Now that we have the basis of our LiveView, let's see how it works when it receives an update from the socket.
Let's say you have the following render function:
The "phx-click" button will send the "click" event to the server when the client has clicked on the button. This event will then be managed by the server and more specifically by our LIveView.
These events are managed by the "handle_event" function, so we can imagine a function that would look like this:
The "handle_event" function takes as parameters the name of the event, a value and the socket. This function will allow you to perform the action associated with the event. Here the temperature increases and the update of the text that will be displayed. Indeed, the value of the key " :status " will be updated in our socket. This will cause the part of the page that contains <%= @status %> to be updated. The user will then see "Status : No event" being replaced by "Status : Temperature increased".
After clicking on the button the page display will change from :
Status : No event
Status : Increased temperature
That's it! You have just created and used your first LiveView!