While magic tricks can mystify and entice audiences, there is always some sleight of hand, hidden mechanism, or illusion used to make impossible feats seem possible. Like a magician’s captive audience, programming can have a similar impact on end users who experience impeccable web applications, without ever knowing how they were developed.
At ElixirConf 2019, DockYard Engineering Manager Alex Garibay revealed some of the “secrets” behind Phoenix LiveView, an exciting new way to build interactive, real-time web applications in Elixir that requires little or no custom JavaScript.
LiveView, built on Phoenix’s excellent WebSocket report, harnesses the Erlang VM’s ability to run millions of tiny, isolated, stateful processes. It simplifies development by keeping the view logic server-side, yet achieves stunningly fast updates and low latency.
While LiveView may seem like magic at first glance, Alex discussed what makes it possible, from the server to the browser. LiveView is built on the tools already available to programmers via Elixir and Phoenix with a little help from client-side JavaScript (courtesy of LiveView’s creator and DockYarder Chris McCord). This empowers programmers with a range of skill sets by lessening the technical burden and reducing the need to learn JavaScript.
In his presentation, Alex shared tips and tricks to make the most of LiveView applications while outlining the three core elements that make it all possible: Live EEx, Phoenix Channels, and JavaScript. LiveView is an abstraction over GenServer and uses LiveEEx templates and Phoenix Channels to power the internals. It then interacts with JavaScript to provide communication of events between the server and the browser.
- Live EEx (LEEx): is responsible for rendering templates and dynamic changes in a stateful mode based on any data that changes within the process. Built on Phoenix’s regular EEx template, programmers can use a familiar syntax for LEEx if they are already using the templating system.
- Phoenix Channels: are the abstraction that serve as mechanisms for bi-directional communication between the browser and the server. This opens an entry point into the application for the WebSocket endpoint and uses Phoenix LiveView’s own socket implementation within a single channel with the topic prefix of “lv”. This is then the topic that’s used for all LiveView communication.
- JavaScript: While Phoenix LiveView relies on little JavaScript, it is still necessary to bring everything to life. JavaScript serves as the glue to make LEEx and Phoenix channels work together, reliably, and in real time.
With Phoenix LiveView, programmers can use less code to develop flawless real-time web applications that are nothing short of magical for users.
LiveView eliminates the need to immediately reach for a front-end library or framework to deliver rich user experiences, Alex said in the presentation. “You can truly write rich, interactive user interfaces using the tools you are already familiar with in the Elixir ecosystem — all without needing to write JavaScript.”
Regardless of your Elixir experience level, this presentation offers a look behind the curtain to show how Phoenix LiveView works to empower programmers to create stunning, real-time user experiences from server-rendered HTML.
Watch the full ElixirConf 2019 presentation below to learn more about how Phoenix LiveView works and be sure to enter the Phoenix Phrenzy coding challenge to show us what you can do with Phoenix LiveView.
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 using Ember.js and Elixir. With consultants nationwide, we’ve got experts in key markets across the United States, including San Francisco, Kansas City, New Orleans, Indianapolis, Chicago, Nashville, Cincinnati, Raleigh-Durham, and New York.
