In Elixir community, there are a lot of talks about PETAL stack for dynamic websites. It stands for Phoenix, Elixir, Tailwind CSS, Alpine.js, and LiveView. The order of components doesn’t make sense (except making it sound cool), so I’ll cover them out of order:

  • Elixir is a functional programming language that has out-of-the-box scalability, hot reload, and other cool features that each big project needs.

  • Phoenix for elixir is like Ruby on Rails for Ruby. The default web framework. Big, powerful, and popular. Even if you write a very simple and small Elixir web app, you’re likely to still use Phoenix for some of the conveniences inside.

  • LiveView is now part of Phoenix. And this is a huge game changer in web development. If you know PHP, it’s similar to LiveWire. It allows you to have dynamic web pages where all content is rendered on the server side. LiveView will take care of sending data in both directions through websocket and make sure everything is stable and accounts for tons of corner-cases. At the end of the day, you will have a modern reactive website without writing a line of JS.

  • Alpine.js is for cases when you still need a bit of JS for some frontend-only logic. It’s a micro framework. With LiveView, you don’t really need React or anything huge like this because LiveView provides you with all nice logic, state management, components, and all that stuff. And alpine.js covers the rest. I used it for filters on my personal website and it works well. Well, it eats too much resources which is noticeable on a phone but it was easy and fun to code. So, I guess, worth it.

  • Tailwind CSS is a controversial one. It’s basically CSS in your classes. When I need something low-level, I use CSS. When I need something high-level which takes care of nice defaults and adaptivity, I use bootstrap. And when I mix bootstrap with some custom CSS, I get all the same things that Tailwind CSS promises but with less boilerplate. IDK, I just don’t understand yet what Tailwind tries to solve.

Someone even made petal_components Elixir library which contains Phoenix and LiveView components on top of Tailwind CSS and Alpine.js.