Getting Started with LiveView
We’ll start this section by covering the basics of LiveView. We’ll see more of what it is, the programming model it uses, and how it compares to Channels. We’ll then implement the Sneakers23 product page in LiveView instead of the Channel-based approach that we used previously. This will be a fun one—let’s jump in!
LiveView has scratched an itch for real-time applications that seems obvious in hindsight. Libraries like it have existed in different languages over the years, but Elixir and Phoenix are perfectly aligned to satisfy LiveView’s goals. Developers have expressed boosts in productivity and satisfaction when coding with LiveView, which is a good indicator of a solid library to have in our development toolbox.
LiveView is new and innovative, but we’ll be able to get started in no time because it’s built on a foundation that we already know. We’ll go over this strong foundation and LiveView’s benefits from it. We’ll then look at how data flows in a LiveView application, from the front-end to the back-end and then back to the front-end. Lastly, we’ll see situations where LiveView thrives and what trade-offs we should consider when using it.
Let’s jump into an overview of LiveView before looking at a basic LiveView demo.
LiveView is based on existing technologies we’re familiar with: Channels and Sockets. It takes these tools a step further by providing a rich front-end client and server-side rendering engine that work together to offer a full-stack development experience. The following figure captures the flow of LiveView: