Elixir liveview
![elixir liveview elixir liveview](https://www.reidys.com/images/elixir-nanoweb-80-20-bronze-custom-light-11-52-p4959-11689_image.jpg)
The mount/3 callback wires up socketĪssigns necessary for rendering the view. The session always contains private data setīy the application itself. With the current params, the current session and the LiveView socket.Īs in a regular request, params contains public data that can be When LiveView is first rendered, the mount/3 callback is invoked
![elixir liveview elixir liveview](https://i.ytimg.com/vi/57b4iSi1FM4/maxresdefault.jpg)
You begin by rendering a LiveView typically from your router. Guaranteeing a regular HTML page even if JavaScript is disabled.Īny time a stateful view changes or updates its socket assigns, it isĪutomatically re-rendered and the updates are pushed to the client. Uses more memory on the server compared to stateless requests.Ī LiveView begins as a regular HTTP request and HTML response,Īnd then upgrades to a stateful view on client connect, This allows LiveView applications to react faster to userĮvents as there is less work to be done and less data to be sentĬompared to stateless requests that have to authenticate, decode, load,Īnd encode data on every request. Then a persistent connection is established between client and Paint", in addition to helping search and indexing engines. HTTP requests, which provides quick times for "First Meaningful LiveView is first rendered statically as part of regular Internal application messages (usually emitted by Phoenix.PubSub) The state itself is nothing more than functionalĪnd immutable Elixir data structures. Process that receives events as messages and updates its Work of tracking changes and sending the relevant diffs toĪt the end of the day, a LiveView is nothing more than a This means developers write LiveView templates asĪny other server-rendered HTML and LiveView does the hard To the browser, which updates itself in the most efficient Re-render the relevant parts of its HTML template and push it Saying "once event X happens, change Y on the page",Įvents in LiveView are regular messages which may causeĬhanges to its state. The LiveView programming model is declarative: instead of LiveView provides rich, real-time user experiences with
#ELIXIR LIVEVIEW CODE#
Later, we can write some code on the front-end to respond to a specific event by changing the chat box’s scroll height: channel.Settings View Source Phoenix.LiveView behaviour (Phoenix LiveView v0.17.11) If you’re familiar with Phoenix Channels, you might reach for something like this: channel.on("new_message", (msg) => )Ĭonnect to and start the LiveView process running over the socket This is easy enough to do with just one or two lines of JavaScript: grab the height of the chat window, and set the scrollTop accordingly. The chat window needed to scroll down to accommodate and display the new message.
![elixir liveview elixir liveview](https://pentacent.com/_nuxt/be32c8196d3ec494dc6920a502ac0743-1991.jpg)
When new chat messages were appended to the chat window, they appeared just out of frame. We implemented nearly all of the necessary features (live updates as users type in new messages, a list that keeps track of users in the chat room and who is typing!) with only 90 lines of LiveView code. In a recent post, we built a straightforward chatting application backed by LiveView, PubSub and Presence. But what happens when our need for a responsive UI surpasses what LiveView seemingly offers? When the demands of a particular feature have us reaching for JavaScript? It is possible to incorporate custom JS into the LiveView life cycle with the help of a custom LiveView channel and a Registry. LiveView has given us the ability to implement flexible and responsive UX almost entirely with server-side code.