- Build on top of Elixir and Phoenix Channels ensures great performance and scalability. Elixir (or more specifically Erlang and its virtual machine that Elixir runs on) is a language used for building massively scalable soft real-time systems with requirements on high availability. It is more than capable of handling hundreds of thousands or even millions of connections;
- offers a simpler programming model than JS frameworks backed by APIs. There is no frontend framework or explicit communication between server and client which reduces complexity. LiveView templates are the same as standard server-rendered HTML templates;
- LiveView is first rendered statically as part of HTTP response, which provides quick time to "First Meaningful Paint" and plays nicely with search engines. Succeeding communication is over WebSocket connection;
- changes in HTML are tracked by LiveView and only difference is send to the client instead of whole HTML. This results in smaller size of the data transfered than typical hand-crafted JSON. In future LiveView will offer External Term Format - a binary encoding format used by Erlang/Elixir - resulting with even smaller payloads at the cost of decoding the data in browser;
- ligther than JS frameworks - only 29KB minified, compared to Vue.js 88KB and React + ReactDOM 112KB (that doesn't include additional JS libraries like router, state management etc).
- it can't replace every frontend application. For full blown applications with desktop like features you are better with JS framework;
- because it requires constant WebSocket connection to the server it doesn't support offline applications;
- there is a latency caused by communication with server.
So where does LiveView shine? When you need a bit of interactivity such as real-time autocomplete, validation, dashboards, data tables, multi-step forms or simple games.For more information and examples you can check introduction to LiveView by Chris McCord, author of Phoenix Framework and LiveView. You can also read project's GitHub and documentation.
In this tutorial we will implement yet another version of TodoMVC. To keep it short some similar features will be omitted. Here are few commands to get you started.
App is available at http://localhost:4000.
The first thing we do is to define struct describing todo.
Now it's time for LiveView module. It must implement 2 callbacks:
Then we mount LiveView directly in the router. LiveView can also be mounted from controllers.
Live links and filtering todos
First, we define a second route that will match against different filters in the URL.
Here is the final result in action:
Look at the payloads
Let's check communication between LiveView and browser. First the initial HTTP response contains todos rendered as plain HTML.
You can find finished application https://github.com/alukasz/todo_live_view/tree/part-two