PETAL Stack in Elixir

The PETAL Stack in Elixir means:

• Phoenix
• Elixir
• TailwindCSS
• Alpine.js
• LiveView

While PETAL is also a pretty sounding name, this technology combination is extremely powerful and productive for the right kinds of projects.

What kinds of projects? Web applications (or SaaS) with a responsive and reactive UI. This isn’t for building an API first service like Stripe or a mobile application you download in an App Store. This is specifically for building a web application with a responsive and reactive user experience that would otherwise require a SPA (Single Page Application) Javascript front end to enable the user experience you wanted.

If that sounds beneficial to you then read on! If you’re already sold on this approach, jump to the bottom for a collection of resources.

It’s about the layers

First, the base foundation of Elixir + Phoenix + LiveView is powerful. It has been the inspiration for other projects like Laravel LiveWire and Rails Hotwire.

What the Elixir + Phoenix + LiveView approach shares with LiveWire and Hotwire, is a removal of many layers that people assumed were required. In order to offer a smooth, responsive UI experience, we must build a Javascript frontend SPA (Single Page App), right? For awhile now, that has been true.

But what if I could build an interactive web application that felt immediate and was very responsive and reactive to the user without building a SPA? If I could do that, then I could eliminate the following layers:

• JSON serialization from server to client
• GraphQL types, resolvers, queries and mutations
• REST controllers
• Javascript routers
• Javascript data stores
• JSON serialization from client to server

I choose to go the LiveView route not because Javascript is “bad” or because “I don’t want to use javascript”, but because I can completely eliminate all those layers! Front to back testing also becomes a much easier!

Removing those layers means maybe I don’t need a separate and dedicated front-end team to manage the complexities of our continually changing Javascript build pipeline. This means a smaller team can deliver compelling solutions faster than rival products built by much larger teams.

The removal of entire layers that require design, testing, maintenance and coordination between multiple people and teams brings a huge boost to team productivity!

Still using javascript

There are still elements of the UI that need javascript. A clear example is opening a popup menu. Clicking to open or close a menu should not require communication with the server!

This is where Alpine.js comes in. Alpine.js was created by Caleb Porzio, the creator of Laravel LiveWire. While creating LiveWire, he realized that some lightweight Javascript was still needed. He liked the Vue.js style so he created Alpine.js specifically to fill that role.

Alpine.js was created with this LiveView/LiveWire approach in mind. Because of that, it pairs really well with Phoenix LiveView.

Alpine.js is a very clean approach that adds just enough javascript to smooth the lines between what should stay client side and letting LiveView do what it does best.

Making it pretty

The last part of PETAL we haven’t covered is the T for TailwindCSS. Tailwind is a new “utility first” approach to CSS. Your first reaction when seeing it is probably going to be, “Yuck! I don’t like this!”. That was my first thought too. You should give it a chance though.

How do I feel about it now? Now I don’t want to style my applications the “old way” again!

There is a separate TailwindUI website that is commercial. You pay for access to pre-built or pre-designed components, sections, layouts, or even whole pages.

The benefits that I see from TailwindCSS and TailwindUI is what it enables individuals and small teams to do. I used to spend hours tweaking my UI CSS and succeeding in making it only marginally less crappy. The benefit I got from TailwindUI (the paid for designed components), is that I could rapidly build something that looked great. Trading my money for time is a good exchange in my book! However, that only describes the benefit of paying for designed components. How’s that different than buying something like Bootstrap designed components and pages?

That’s where the other, less tangible benefits of TailwindCSS come in. I’ll try to explain some here:

• It doesn’t take long to get the hang of it. Then I became much more productive when designing new things myself.
• The classes are very focused in what they do. I can “compose” what I want and don’t have to worry about changing a class style and having it mess up something elsewhere in my application.
• Co-locating the CSS styles (by use of classes) feels more natural. I’m not switching files and jumping my focus around when working on the UI.
• Co-locating the CSS styles directly in my markup means that when I delete a component I’m not using, I’m not left with orphaned CSS classes and files.
• It makes it really easy to put different media query breakpoints on your layouts. Tailwind makes it easier to have responsive layouts that better support a variety of screen dimensions.

PETAL together now!

With all the PETAL pieces introduced, I can explain the appeal of the fully combined stack. Using this development approach…

I can build a compelling, sleek, responsive web application by myself.

This is huge!

Going back to the early days of Rails with the “15-minute blog” videos. It got people excited that a single developer could build a web application and deliver it by themselves! Then, over time, user expectations shifted to expect experiences that only a SPA could bring. That required ever more technology and layers to enable. Soon it required larger teams of specialized developers to create a competitive web application.

When I use the PETAL Stack, I have a competitive advantage. I can create a service that has an audience willing to pay money, but it’s never going to be the next Twitter, Facebook or Uber. A business could be successful but never to a scale where it supports a large team of developers and designers from the revenue. However, it starts to make business sense when only 1 or 2 people are needed to build and deliver it. Many business ideas can provide more than enough revenue for that!

It doesn’t have to be a smaller business idea though. This technology stack also enables a small team (like 4-5 developers) to create and maintain a service that only much larger teams and companies would otherwise take on. The more people you add to a team the more time is spent on administration, communication, and coordination. Being able to keep a team small becomes an additional competitive advantage!

There is a lot to love when you build using the PETAL Stack. If it fits the kinds of problems you aim to solve, then it can be your competitive advantage and a powerful enabling force.

Resources for learning PETAL

Tailwind

• https://tailwindcss.com/
• https://tailwindui.com/ 
• https://tailwindcss.com/course – Official Tailwind screencast on designing with Tailwind CSS.
• https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix – Adding Tailwind to a Phoenix project.
• https://nerdcave.com/tailwind-cheat-sheet – Searchable cheat sheet

Alpine

• https://github.com/alpinejs/alpine – Alpine GitHub and documentation
• https://dockyard.com/blog/2020/12/21/optimizing-user-experience-with-liveview – Chris McCord blog post about using Alpine.js with LiveView
• https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/ – A good introduction to Alpine

Coming Soon

I hear you say, “So I get it. As an individual or as a small team, I can be more productive by eliminating the need for those other tech stack layers. Why choose Elixir over Rails Hotwire or Laravel LiveWire?”

This is where Elixir pulls ahead and really differentiates itself!

A look at why the Elixir + Phoenix + LiveView part of the stack is a powerful solution.