The PETAL Stack in Elixir means:
While PETAL is also a pretty sounding name, this technology combination is extremely powerful and productive for the right kinds of projects.
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
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
- JSON serialization from client to server
The removal of entire layers that require design, testing, maintenance and coordination between multiple people and teams brings a huge boost to team productivity!
Alpine.js was created with this LiveView/LiveWire approach in mind. Because of that, it pairs really well with Phoenix LiveView.
In episode #20 of the Thinking Elixir Podcast, we interview Caleb Porzio about Laravel LiveWire, Alpine.js and how it fits with Phoenix LiveView.
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.
In episode #21 of the Thinking Elixir Podcast, we interview Patrick Thompson about the combination of TailwindCSS, Alpine.js and LiveView.
It was actually this conversation that convinced me to try it out!
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…
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!
In episode #24 of the Thinking Elixir Podcast, we talk with Chris McCord, the creator of Phoenix and LiveView about the PETAL stack. He shares his appreciation for the pairing with Alpine.js and TailwindCSS.
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
- 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
- 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
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.