A frequent goal of web development is to create meaningful, satisfying user experiences through robust web applications. Organizations trying to grow typically turn to their web presence to make connections with customers and foster communications and interactions. A meaningful user experience is often driven by how easily those interactions occur. But intuitive interactions often require complex yet efficient code behind the scenes.
What if there was a programming model that reduced the complexity of web development while still making sense? That’s Chris McCord’s goal in creating Phoenix LiveView, a declarative programming model built on functional Elixir data structures that uses Phoenix processes to update states and push server-rendered HTML to the browser in the most efficient manner possible.
Watch Chris demonstrate Phoenix LiveView use cases in this ElixirConfEU keynote presentation and read the summary below.
How LiveView Works
Because this stateful cycle is built on Elixir, a platform made for stateful systems that can handle millions of connections, updates can be pushed to the client in a cost-effective manner. This process can’t be done over stateless HTTP.
LiveView is initially rendered from a router or controller. When a view is rendered, the
mount/2 callback is invoked with the provided session data and assigns the LiveView socket that will be needed for rendering the view. After mounting,
render/1 is invoked and the HTML is sent as a regular HTML response to the client. Only changing, dynamic data is patched through to make updates on the web browser or user interface.
To track static versus dynamic data, and to know when updates must be sent, the
Phoenix.LiveView templates use the
.leex extension or
~L sigil, which stand for Live EEx. This extension splits static from dynamic data and minimizes the amount of data sent. When a
.leex template is initially rendered, it will send all of the static and dynamic parts of the template to the client. After that, the server pushes only dynamic data that has been changed to be updated to the browser.
Turn Up the Heat: LiveView Use Cases
This kind of use case is only one example of how LiveView can be used. Other types of interactions — such as dynamic forms, buttons that require data input, autocomplete functions, and notifications pushed from the server — also benefit from Phoenix LiveView.
Phoenix LiveView run on Elixir programming offers both seasoned developers or engineers and those new to Elixir a fresh approach to modern web development that fosters intelligent user experiences. Goals, completed.
DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering to bring brilliant digital ideas into being for innovative brands. With consultants nationwide, we’ve got experts in key markets across the United States, including San Francisco, Kansas City, New Orleans, Detroit, Nashville, Cincinnati, Raleigh-Durham, and New York.