First impressions with Alpine.js
Tags: webdev, javascript
Published: 2020-03-29 00:44:42

If you can't get behind the big JavaScript frameworks or like using tools with a philosophy similar to [Tailwind](https://tailwindcss.com/), then you may find interest in [Alpine.js](https://github.com/alpinejs/alpine/).

### What is Apline.js?
Alpine.js is, as described on their GitHub repo, a rugged, minimal framework for composing JavaScript behavior in your markup. In other words, Apline offers reactive and declarative functionality of the big frameworks in a smaller package. 

Alpine doesn't offer <i>everything</i>, however it offers the in-HTML features of the big frameworks. There is no built-in component engine like with Vue or Angular. There is no router. It's a <i>minimalist</i> framework.

### Let's look at some code!
Alpine is heavily influenced by Vue, so if you know basic Vue.js, then Alpine will be immediately familiar to you.

##### Dropdown
Here's how you could implement a drop down menu with Alpine:
```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>
```
Let's examine this to understand how this works.

In the `div` element, you'll notice the `x-data` attribute. The `x-data` attribute is similar to the `data` property in Vue. It takes a JavaScript object. `x-data` is available to all elements within the `div`. In this case, there is a property called `open`, which is set to `false` by default. 

In the `button` you'll see the `@click` attribute. This works the same as in Vue. This can also be written as `x-on:click`. It's pretty simple, when the button is clicked, it will execute the expression given. So, when the button is clicked, it resets the value `open` from `x-data` to `true`.

Finally, in the `ul`, when have two attributes to cover. First, `x-show`. `x-show` receives an expression. In this case, it's just `open`. If `open` resolves to `true`, then it will show, if `false`, it won't. Second, `@click.away` (also written as `x-on:click.away`). Also very simple. If/when the mouse clicks outsude of the `ul`, it executes the expression. In this case, it sets `open` to `false`, in turn, closing the dropdown.

You'll notice that there is no JavaScript. That is because Alpine initializes itself.

#### Using JavaScript
For more complex tasks, we won't want to be writing our JavaScript in our HTML. So let's take a look at our previous example again:
```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>
```
Instead of having everything in our HTML, we can move things into our JavaScript. For example, we can move our `x-data` into a function in a JavaScript file:
```html
<div x-data="dropdownData()">
    <button @click="open()">Open Dropdown</button>

    <ul
        x-show="isOpen()"
        @click.away="close()"
    >
        Dropdown Body
    </ul>
</div>
```
```javascript
function dropdownData(){
    return {
        open: false,
        open() { this.open = true },
        close() { this.open = false },
        isOpen() { return this.open === true }
    }
}
```
In this situation, it's not very practical, but you can see how it can be done.

### Conclusion 
Apline.js is a simple, useful JavaScript framework that gives you the basics. <i>Just what you need, nothing you don't</i>. For a large project, you would probably appreciate the extra utility of the big frameworks. But maybe all you want is a simple, no-nonsense, small framework for your project. That's where Alpine comes in. 

If you want to read the docs for Alpine, head over to their [GitHub repo](https://github.com/alpinejs/alpine/).