Phoenix LiveView: from proof of concept to a game-changer.Elixir at Spotify: a need as a mother of invention.Elixir development at Spotify: A background.I mentioned earlier that LiveView isn’t able to handle Custom Events out of the box just yet, so we created a phoenix-custom-event-hook package to do just that. We can use this information to do a new search for airports that are within these bounds.įirst though, we need to get the event sent to LiveView. This is where Custom Events come to our rescue: the lit-google-map element emits a bounds_changed Custom Event with a payload containing the latitudes and longitudes of the four corners of the map. Of course, in order to be able to do that, we need the map to let us know the boundaries of the currently displayed map. Whenever the user zooms or pans, we need to fetch a different set of airports. This works great to render the map with airports, but we’ve got a problem. Using the lit-google-map element and its companion element lit-google-map-marker lets us add a google map with markers for each airport to our LiveView template: The lit refers to LitElement, a really nifty library to make creating Custom Elements easier. In order to do this, I’m using a web component that will give us custom elements to add a google map and markers to our page called lit-google-map. For this example, I am implementing a google map that renders general aviation airports within a given area. An exampleĪll this is easier to see by the example, so let’s look at a very common scenario that necessitates adding a javascript library to a LiveView app: adding a map. LiveView needs a little help to handle Custom Events, but we’ve got you covered.
It’s a great way for Custom Elements to communicate with their surroundings. In a nutshell, a Custom Event is DOM event you define with a payload of your choosing. The CustomEvent API is not usually lumped in with the rest of the Web Component APIs, but is still a great tool for building Web Components. In the case of Custom Elements, it often makes sense to dispatch a Custom Event. LiveView has support for many built-in events out of the box. I’ve become a huge fan of a simple approach to interacting with Custom Elements: pass data to your element via attributes (or properties), and allow them to interact with the rest of your application via dispatching events. Because Custom Elements are real DOM elements, they can be created from LiveView just like any other. With a web component, we get to choose the perfect abstraction for interacting with it: a Custom Element.
As such, it’s perfectly suited to managing DOM elements.
LiveView at its core is about updating the DOM without a page reload. While hooks are one way to interact with javascript in a LiveView app, I’ve found using web components to often be a cleaner solution. On most LiveView applications, there are typically cases where we want to bring in a javascript library that solves a common problem well. It lets us use Elixir to write our front end, but still get the high-performance interactivity we need.
We’ve been using Phoenix LiveView on several projects now and it’s safe to say we are pretty sold on its benefits.