Alpine.js, a tiny JavaScript framework

Today i’m writing about the new minimal js library Alpine.js, A rugged, minimal framework for composing JavaScript behaviours in the Html markup.

Think of it like Tailwind for JavaScript. Alpine.js is a tiny JavaScript framework that makes declarative rendering super easy, without the weight of larger frameworks like Vue or React.

If you’re looking for a full featured javascript framework with routing, state management, and a bit more complexity. Then, Vue or React may be a better fit.

Instead, if you’re looking to a little javascript, add two-way data binding, and create simple components in your web pages.
Then, AlpineJS is the library you will want to reach for, which fits simple and better way of handling js in modern way.
It puts simplicty back into javascript.

Creator Caleb Porzio (Creator of Alpine.js, Laravel Livewire) has kept much of the syntax is like Vue.js,

Probably the most attractive things about Alpine for me is its syntax, if you already know Vue, you basically know Alpine,

Alpine is designed to be used with a CDN script, rather than any complex Webpack setup, so all we need is a single HTML file with the script pulled in in the head.

Check the Alpine GitHub page for the latest version CDN script.

https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js

“You may also wish to include Alpine via NPM, which you can learn how to do from the Alpine Github repo.”

Creating some example components,

Creating the first Alpine component is super simple. All need to do is add the x-data attribute to any element like so:

<div x-data=”{}”></div>

Example 1:

The example will create a new Alpine component with an empty object {} as its data. let’s create a new one with some data into it.

<div x-data="{ title: 'Hello World' }">
<p x-text="title"></p>
<button @click="title='Alpine rocks'">Click to change</button>
</div>

Example 2 | x-on:click

<div x-data="{ count: 1 }">
<p x-text="count"></p>
<button @click="count++">Count Up</button>
<button @click="count--">Count Down</button>
<button @click="count=0">Reset</button>
</div>

Example 3 | x-init

<div x-data="{ countdown: 60 }"
x-init="setInterval(function(){
countdown--;
}, 1000);
">
<h1 x-text="countdown"></h1>
</div>

Example 4 | x-show

<div x-data="{ show: false }">
<button @click="show=!show">Toggle me</button>
<br><br>
<div x-show="show">Hello!!</div>
<div x-show.transition="show">Hello!!</div>
</div>

Example 5 | x-model | 2-way data binding

<div x-data="{ title: 'AlpineJs is awesome' }">
<p x-text="title"></p>
<input type="text" x-model="title" />
</div>

Example 5 | x-html

<div x-data="{ code: '<p>Dynamic values</p>' }">
<div x-html="code"></div>
</div>

Example 6 | x-ref

<div x-data=”{ code: ‘<p>Dynamic paragraph</p>’ }”>
<div x-ref=”sentence”>I am a sentence</div>
<button @click=”$refs.sentence.innerText=’I just changed'”>Change Sentence</button>
</div>

Example 7 | x-if

<div x-data="{ age: 29 }">
<template x-if="age > 30">
<p>I am 30+ years old.</p>
</template>
<template x-if="age < 30">
<p>I am less than 30.</p>
</template>
<button @click="age=32">Change Age</button>
</div>

Example 8 | x-for

<div x-data="{ groceries: ['milk', 'eggs', 'cheese'] }">
<p>Groceries</p>
<ul>
<template x-for="item in groceries">
<li x-text="item"></li>
</template>
</ul>
</div>

There are 14 directives available to you: visit the following link

https://github.com/alpinejs/alpine#learn

Note:
Wondering why Alpine uses x- instead of a-, before deciding on a name, Alpine was known as “project-x”, a nod to it’s past.