Phoenix LiveView — frontend framework friendly for backend developers
By: Katarzyna Kobierska
Tags: Alpinejs, Elixir, Tailwind, Phoenix, Phoenix Liveview

Image by StartupStockPhotos from Pixabay

I would like to share with you how Phoenix LiveView lets me create reactive web content without writing code in JavaScript. It all started almost a half year ago when I joined a fintech project. I was very excited with the project and stack, which was on the backend — Elixir and Phoenix, on the frontend — Tailwind and AlpineJS. The main goal was to deliver fast, reliable, scalable and maintainable applications. Phoenix LiveView was supposed to be the heart of our web applications.

What’s a Phoenix LiveView?

It’s an Elixir library that enables rich, real-time user experiences with server-rendered HTML. If you want to read more about it I recommend Phoenix LiveView documentation or a new book Programming Phoenix LiveView (still in beta).

Why Phoenix LiveView?

I’m a backend developer who can write some JavaScript code with StackOverflow help but I wouldn’t describe myself as a frontend expert. To this moment I have left this part to people who know the subject better than me. I have never assumed that I will start to create reactive web pages on the server-side. With Phoenix LiveView, it is more likely than ever before.

The Phoenix LiveView library wasn’t new for me. I have used it in my previous projects. I’ve never used it to such an extent we are using LiveView in our current project. We were supposed to write all views with LiveView, not with React or a similar framework. When you have a team full of backend developers, using LiveView seems like a good direction. Of course, LiveView doesn’t style your views, so we used Tailwind. Tailwind is a CSS framework that can be composed to build any design, directly in your markup. Also, you need to remember that LiveView is not always the best choice. When it comes to animations or UI events that don’t need server integrations, it is better to use tools like CSS transitions or even integrate with UI toolkits like Bootstrap or Alpine.js. For this reason, Alpine.js found a place in our stack. It helped us to create datepicker and modals, we also added `select2` for select inputs. It was easier to implement these elements with JS libraries than trying to do it with LiveView.

Thanks to LiveView we were able to develop responsive and fast loading pages. With LiveView implementing real-time updates, immediately data validations, navigating without refreshing the page was very easy. The best part is that thanks to WebSockets, applications react faster, as there is less work to do, and the only part that has been changed is being updated, not a full page. But the most satisfying was all the final effects I achieved by writing only Elixir code on the server-side.

The description wouldn’t be complete if I hadn’t mentioned Phoenix PubSub. It’s an Elixir library to send events between servers. Since our application needs to fetch data from external providers, we wanted to do it asynchronously to shorten the page loading time. Thanks to Phoenix PubSub we could render views faster for users and update them when messages come from PubSub to our servers.

Conclusions

I think that the setup we have on our project is worth considering. Phoenix, Phoenix LiveView, Tailwind, Alpine.js and Phoenix PubSub — are complementary tools. If I had to choose again, I would use Phoenix LiveView instead of the JavaScript framework. Now it’s one of my favourite libraries.

It’s not that we don’t need anymore JavaScript, sometimes you need to write a couple of lines of JavaScript code as a Hooks, sometimes it is better to use an existing JavaScript library to wrap functionality and don’t waste time to invent something that is already done. You chose LiveView to remove JavaScript frameworks complexity but if there is a solution for your problem written in JavaScript, just use it, don’t try to reinvent the wheel. I’m happy we’ve used LiveView because I’m able to create reactive views. Most of the code I need to write is an Elixir function, and this is great because it’s something I’m best at.