AlpineJS: a Framework for Building Fast and Functional Frontends

AlpineJS: a Framework for Building Fast and Functional Frontends
Daniel Esteves

Daniel Esteves

April 4, 2020

3 min read

––– visits

Si estás buscando la versión en español

Entra aquí

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:
  1. 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 🤓

Want to be the first to read my posts?

Subscribe to the newsletter and you will get tutorials, news and first-hand posts.

0 people have subscribed to the newsletter

Person programming animated through a GIF

Do you have an idea?

Get in touch through this button so I can learn more about your product or service and we can discuss the best way to make it happen.

I want to realize my idea