Fancy a modern alternative to jQuery? Meet AlpineJS
Tags: javascript, html
Published: 2021-08-19 08:54:33

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](https://www.youtube.com/watch?v=cuHDQhDhvPE).

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.