Wrapping my head around Phoenix LiveView

One of my favorite things to do is make every project take longer by learning a new programming language or framework along with it. I have learned (and forgotten) React 3 times, learned Vue, Django, NodeJS, Flask, FastAPI, and I'm sure others I've forgotten because I love learning new things (possibly) or because I'm always looking for something that will make more sense to me or make it easier to make what I want.

A few years ago I read some survey on Hacker News that was about the programming languages people were using in their side projects. Like, what languages are people choosing to use for fun, and Elixir was one of the top of the list. I had never heard of it, but that stuck in my head for a while until I decided I wanted to give it a shot.

Elixir is a functional programming language, which makes it very different than the object oriented languages I was used to. I won't go into great depth here, but I've used Learn Functional Programming with Elixir and Exercism to get up to speed on how Elixir works as a language.

Phoenix is Elixir's most popular web framework (like Flask or Django for Python or Express for Node). It now includes an additional library called LiveView that makes real-time communication between the frontend and backend a first-class citizen of the language. This makes it ideal for things like live.chattr.io or chat applications where you want messages being passed between different users or chatbots to move around quickly.

This article isn't going to be a full tutorial, but a small collection of tidbits I've picked up that have helped me do what I want.

1. ChatGPT and other AIs are only okay at Phoenix programming. I think there just isn't as much training data in their datasets as their is for, say, Node or Python. So the hallucinations can become a problem. Part of the issue is that their training data is outdated. The Routes helper for URLs is deprecated and replaced with Verified Routes, so keep an eye out for that popping up when you're redirecting users.
2. PubSub is awesome. In a LiveView mount/3 you can subscribe to get notifications about any actions that happen, and then just update the context to send a notification when you change things. With Chattr Live, the feedback/questions page is subscribed to new and updated messages on that page, and can be immediately updated when a new messages is sent, no matter who it's from.
3. Authorization is a bit annoying. I'm sure I could make it better if I was a better programmer, but authorization currently needs to be done to access the page, and against every action that is sent so that someone can't delete a record they don't have access to. That means it's spread across a few files, but since I currently only have a limited number of models to worry about, it's no biggie.
4. The phx.gen.live views are pretty nice, but you have to add the relations yourself. You can use mix phx.gen.live to generate LiveView pages to manage resources. They're a pretty good default (certainly fancier than anything I'd build myself). But they don't include selectors to manage relationships between items. So you need to add those in yourself.
5. Make sure you set up belongs_to and has_many relationships in your schemas. This is another thing that isn't done when you generate a context or migration. It'll set up the foreign key for you in the database, but you need to update the schema to "know" about the relationship. But doing so makes preloading related items much easier.
6. The flow of things.

This took me a bit to wrap my head around, and I still probably don't quite have it right. The router.ex is the first stop - when a user visits a URL, the pattern is matched from router.ex to determine what view to call. Then from that view, mount/3 is called on the first load. Then handle_params/3 is called, and typically that function calls apply_action/3 to do whatever action got called from the router. These three functions are putting the page together, and populating the socket with the information it needs to render the page.

In the same LiveView file, handle_info/3 can respond to PubSub notifications, and handle_event/3 can respond to client-side events. Functions from the contexts are used to interact with the database and schemas.

7. Cool packages. There is a pretty good ecosystem of packages to help out with things, though Elixir seems to have a bit more of a build-it-yourself mindset than others. Cloak.Ecto is a super easy package for encrypting data at rest, so if you're dealing with things that should do that, use it. I'm currently also using the OpenaiEx package to connect to the ChatGPT API (and soon others) on the new site I'm building.
8. Ecto is a nice database layer. Super easy to use once you wrap your head around it. Simple to use the basic queries with your schema, or write your own queries to get exactly what you need.
9. Performance. Elixir is supposedly built to be super awesome and performant. I'm not cool enough to have built anything that tests the limits of performance, but someday maybe we'll test those performance claims.

Thoughts? Sign up for the site to comment below, or add to the conversation on LinkedIn or BlueSky.