


It offers bi-directional communication via WebSockets between the server and client without using JavaScript on the front end. Route = Routes.todo_path(socket, TodoWeb.TodoLive, filter) With Phoenix LiveView, developers can use server-rendered HTML to create a rich, real-time user experience. # lib/todo_web/views/todo_view.exĭef filter_todos(todos, "all"), do: todosĭef filter_todos(todos, "active"), do: Enum.reject(todos, &(&1.completed))ĭef filter_todos(todos, "completed"), do: Enum.filter(todos, &(&1.completed))ĭef filter_link(socket, filter, active_filter) do We will add 2 functions filter_todos/2 and filter_link/3 in TodoView to help us generating HTML. Then we need to make changes in the template. The first thing we do is to define struct describing todo. 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).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 This results in smaller size of the data transfered than typical hand-crafted JSON. It’s not just about the template in the render/1 function, we could easily move it into a.
PHOENIX LIVEVIEW CODE
changes in HTML are tracked by LiveView and only difference is send to the client instead of whole HTML. Phoenix.LiveComponent livecomponent/4 Stateful components We’ve just started to build our CryptoDashboardLive view, and we already have the feeling that the we are piling up a lot of code into the single CryptoDashboardLive module.Succeeding communication is over WebSocket connection LiveView powered applications are stateful. LiveView is first rendered statically as part of HTTP response, which provides quick time to “First Meaningful Paint” and plays nicely with search engines. Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML.LiveView templates are the same as standard server-rendered HTML templates There is no frontend framework or explicit communication between server and client which reduces complexity. offers a simpler programming model than JS frameworks backed by APIs.It is more than capable of handling hundreds of thousands or even millions of connections 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. Build on top of Elixir and Phoenix Channels ensures great performance and scalability.
