We are assuming that you are familiar with Elixir and Phoenix.
Understanding the technology ?īefore digging into the problem, let’s take a look at the technologies we are using. For example, we wanted administrators of the platform to be able to see, on a map, the sightings that the users of the app were reporting on certain places, as they happen. We have been building a platform where using LiveView made a lot of sense, since we wanted some of our features to use an interface that could be updated in real-time. And as soon as LiveView was announced, we could not wait to use it! There was a lot to like about that approach, but it’s difficult to scale up to a more complex UI.Howdy dear reader ??, hope you are safe and healthy during these troubled times.ĭuring the past 3 years, we have developed a few projects using the Phoenix Framework for Elixir. This sounds a lot like the early days of Web 2.0 where some pages got the jQuery treatment and others remained static. Most of your application is still server-rendered HTML views, but some pieces get a little “sprinkle” of JavaScript.
#Liveview elixir full#
To avoid the pitfalls of a full SPA, some are advocating for a “ sprinkles” approach to your JavaScript interactivity. This is both a frustratingly inefficient use of time and a maintainability nightmare. In practice, you often end up writing the same business logic in both places. Most of your application executes on the client-side, but some bits still need to live on the server-side. A more subtle issue is the duplication of domain representation that occurs.
#Liveview elixir code#
We’ve developed a number of techniques to get around this (bundling, compression, uglification, code splitting) but at the end of the day, you still need to regularly check bundlephobia to keep your code trim and slim. The simplest is that all this JavaScript requires sending a lot of code down to clients. The tooling has gotten really sophisticated and it's possible to build some fantastic interfaces. This is a very nice approach that has advanced incredibly far, incredibly fast.
#Liveview elixir how to#
The page fully reloads only on the first request to the server for every subsequent interaction, the server will send only the data requested and the framework figures out how to update the UI to match the new state. That's why the last several years have seen a dramatic rise in the usage of JavaScript frameworks like React ( our favorite!), Vue, Angular or Ember.js 4. For any decently complex application, this adds up to a lot of code to manage. In a full Single Page Application (SPA), the entire UI is written in JavaScript and interacts with the server through API calls. It falls down when we want the user to be able to interact in real-time with the application. This works great for many kinds of applications, particularly content sites that skew closer to the original vision of the web as a document delivery platform. The server renders the HTML and sends it over to a dumb client that does little more than present it to a user. Users click a link or other piece of interaction on the screen, and a request is sent to the server which responds with a complete new page representing the new state after the interaction resolves. This is the classic old style of web app. There are three main approaches to building a web app. The browser responds by opening a WebSocket connection for future updates: On the initial page request, your rendered template HTML and the LiveView JavaScript library is sent to the browser 2. Let's walk through a toy example to illustrate how this works at a high level. Where LiveView templates work differently is when that data changes. This is no different than a templating language in any other server-side language if you’ve written Twig in PHP, ERB in Ruby, or Jinja2 in Python, you understand the basic concept.
When you write a LiveView template, you include some pieces of dynamic data within your static markup. This is a huge improvement from having to imperatively tell the browser each step needed to change what it's displaying, and it’s great that LiveView has adopted this model. LiveViews are programmed declaratively: the programmer specifies the state of the program and how it can change and then LiveView figures out how to update the rendered page to match the new state. The LiveView programming model will feel very familiar to anyone who has worked with React or similar frontend frameworks, but with the rock-solid reliability that Elixir brings to the table.