Fancy a modern alternative to jQuery? Meet AlpineJS

#javascript #html

Couple of days ago I stumbled upon a great video from Fireship on YouTube. It was about creating a same todo app in 9 JS frameworks and in vanilla JS. In my opinion it is a piece worth watching, you can watch it here.

I've also never been much of a fan of jQuery, yeah it gets the job done and it can pull you out from some difficult situations but it never really grew on me. That's why AlpineJS sounded so appealing at first.

It is ultra lightweight and consists of 15 attributes, 6 properties, and 2 methods. It has bindings, listening for events, looping, and even a store.
Without a further ado I'll guide you through some basic examples for you to see how cool and simple it really is.

Let's create a toggling dropdown.

Toggling Dropdown component

Let's start by creating a regular html file named something like baby-steps-alpinejs.html
You won't need any libraries from npm everything is imported through the cdn link like so:

<html>
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
</body>
</html>

As for structure we will need our main <div>, then a <button> that will do the toggling, and finally a <div> that will house our content.

...
<body>
  <div x-data="{open: false}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false">Our Dropdown contents</div>
  <div>
</body>
</html>

Now what is happening here, let's start from the beginning. The x-data is simply a directive in Alpine that declares the object of data, it is worth mentioning that every property inside this object is available to other directives inside that HTML element. Here we declare our variable open with the value false.

Next, there is a button that has an event listener expressed with x-on directive, in this case we are listening to the click event on this element. When this button is clicked we toggle the value of the previously declared variable open. So far so good.

Latest element is a div that houses the content. Here we see another Alpine directive x-show, what it does is showing and hiding a block of HTML on a page based on the input, in this case it is evaluating our variable open.

It might be a little confusing to see @click all of a sudden, it is a shorter way to implement x-on directive. Another thing is .outside attached to the @click directive. This is a modifier that is created for making your life easier. It will listen to the clicks outside of the element and apply given logic, in this case open = false.

Another handy modifier is used with submit event in forms to, you guessed it, prevent default behaviour upon form submission. It is applied simply as @submit.prevent="..." simple as that. Modifiers like window, document, outside, debounce and others are there to help you with implementations of behaviours that would otherwise be a little tricky to set. They are of great help, that's for sure.

I want to show you another directive that we didn't use here - x-text it is a directive that is used for setting the text content of the element. You can set it to the variable open in which case it will display textual boolean value true because the open is always true when it's open. We can also declare another variable in the x-data and use x-text to display it like so:

...
<body>
  <div x-data="{open: false, content: 'Our newest content'}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false" x-text="content"></div>
  <div>
</body>
</html>

This will show the text Our newest content when we toggle our element.

I hope you enjoyed a short glimpse inside the AlpineJS.

Thank you for reading and stay happy, productive, and safe.

Top comments (7)

Ben Sinclair • Aug 19 '21

This seems like HTML but with extra steps: your example is covered by the details/summary elements for the most part, except I imagine there would be a lot more work to bring this up to the same level of accessibility you get out the box.

What problem does this library solve?

Semir Teskeredzic • Aug 19 '21

Hey @baz94 thanks for the comment. Yes, that is the beauty of it, it is HTML powered by interactivity that JavaScript provides.
In my opinion it is much more readable to have methods and directives present right in the HTML element. It gives your HTML elements reactivity and interactivity with much more readable and modern code than jQuery selectors and event handlers. That said it is the same problem but solution is done in a better way.

Perhaps I didn't quite get what you wanted to say with the 'out of the box' sentence but essentially you said that you can do pure HTML without any JS to handle for example onClick events out of the box? Please, I'd love to see that code.

Once again thanks for the comment.

Ben Sinclair • Aug 19 '21

This HTML snippet:

<details>
  <summary>I am the title</summary>
  <p>I am hidden until the title is clicked</p>
</details>

will do what you're using Javascript to achieve, won't it?
I mean, I'm sure there are a lot of things that this library does that you can't do in plain old HTML, but that's not one of them. Could you give an example where it does something you can't do in HTML?

xorock • Aug 19 '21

I also switched to alpine but there is one problem if You have server side templates filled with some data (like form values after submit, when there were errors). Then You have to create some JS magic to fill component data and make it reactive.

Semir Teskeredzic • Aug 19 '21

Hei @xorock thanks for commenting. I'll be honest, I didn't use AlpineJS in that situation, it certainly has its own drawbacks I'm sure, thanks for sharing it!