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.
The best part: Using Phoenix LiveView means programmers no longer having to write JavaScript and manage complex client-side interaction development to build web apps. For organizations looking for fast, high-performing software to power their websites, Phoenix LiveView provides rich, real-time user experiences while reducing costly development processes.
Watch Chris demonstrate Phoenix LiveView use cases in this ElixirConfEU keynote presentation and read the summary below.
How LiveView Works
LiveView-powered applications are stateful on the server with bidirectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives.
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
Modern web application development often requires many layers of complexity to make something happen on a web page. Take, for example, a simple thermostat. It’s a counter, but once a user wants to interact with it — say, turn up or down the heat — now developers have to make decisions and calculations about what will happen when the thermostat is clicked up or down, where the data is sent, how many more interactions the user will require, and so on. Typically developers have had to turn to JavaScript to make determinations. Now Phoenix LiveView can make all those decisions.
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.
