AlpineJS: a Framework for Building Fast and Functional Frontends

What is AlpineJS?

A rugged, minimal framework for composing JavaScript behavior in your markup.

Basically when we need to make an interactive application and React or Vue is too much for us (not development-wise but time-wise) we can easily use AlpineJS which uses all the features of Vue for HTML behavior.

We can think of AlpineJS as the TailwindCSS for JavaScript.

What can AlpineJS do? 🧐

1. Dropdown:

2. Tabs:

These are basic examples, but they illustrate very well the power of Alpine to add interactivity to our web sites. Now, how can we add animations? Very easy, we add TailwindCSS to our project and we can do something like this 👇

Weird and easy right? Well let's explain the magic behind it

1. We have our basic HTML:

   <div x-data="{ open: false }">
     <button @click="open = true">Open Dropdown</button>
   
     <ul x-show="open" @click.away="open = false">
       Dropdown Body
     </ul>
   </div>
   

   x-data would be our state, it can be anything, an array, an object, a string, numbers; any kind of value. @click would be our action and what it will do. x-show is a property that will display the element when its state is equal to true, but by default the element will have as property display: none; @click.away is a bind in which if we click outside the element it will close.

2. Now, the animations can be added through the property x-transition in this way:

   <ul
     x-show="open"
     @click.away="open = false"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform scale-90"
     x-transition:enter-end="opacity-100 transform scale-100"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100 transform scale-100"
     x-transition:leave-end="opacity-0 transform scale-90"
   >
     Dropdown Body
   </ul>
   

   As we can see step by step we are telling it with TailwindCSS classes what it is going to do when entering and exiting in its different states, and AlpineJS will know when to apply these classes of x-transition based on the property of x-show

Now, how we would make an animation for a tab 🧐👇

---

Thanks to AlpineJS properties we can manipulate JavaScript and interactivity through HTML.

I've been using it for about two months now and I'd like to show you all what I've learned in this time, so if you'd like more content on how to do more complex things with AlpineJS subscribe to the newsletter below this blog and stay tuned for more updates as they become available 😎.

See you at code 🤓