Perhaps one of the most minimalist libraries for JavaScript. According to the developers, Alpine.js is an alternative to JQuery. It connects as an external script via CDN and provides access to 15 attributes, 6 properties and two methods to help add dynamics and logic to your HTML document.
The idea is to inline-integrate JavaScript code directly into HTML elements without having to write everything into a separate block or external files.</p>
When should you use Alpine.js?
The power of Alpine.js is in the ease of manipulating the DOM. Think of the things you’ve been using out of the box with Bootstrap – Alpine.js is great for them. Examples here are:
Displaying and hiding DOM nodes under certain conditions,
Mandatory user input,
Listening for events and changing the user interface,
Adding classes.
You can also use Alpine.js for templates if your data is available in JSON, but that’s a topic for a separate article.
If your project is much larger, however, it’s worth looking at Vue, React, and Angular.
Alpine.js syntax is almost entirely adopted from Vue.js. There are a total of 13 directives.
Like Vue and jQuery, the build process is not completely optional. Unlike Vue, Alpine.js initializes itself, so there’s no need to create a new instance. Just load Alpine, and you’re all set.
Capturing user input
The x-model allows us to synchronize any input element with the values set with x-data. In the following example we set the name value to an empty string (inside the form tag). Using x-model, we bind that value to the input field. Using x-text, we put the value in the innerText element of the paragraph.
This highlights key differences between Alpine.js and jQuery and Vue.js.
Updating a paragraph tag in jQuery will require us to listen for certain events (keyup?), explicitly identify the node we want to update, and the changes we want to make. Alpine syntax, on the other hand, simply specifies what should happen. This is what is meant by declarative programming.
While this may not seem significant, it highlights the first major benefit of Alpine. There is no context switching here. Everything is done directly in HTML–no additional JavaScript needed.
Click events, logical attributes, and class switching
As with Vue, : serves as shorthand for x-bind (which binds attributes) and @ shorthand for x-on (which indicates that Alpine should listen for events).
In the following example, we create an instance of the new component with x-data and set the default value to show false. When the button is pressed, we toggle the show value. When this value is true, we command Alpine to add the aria-expanded attribute.
The x-bind works differently for classes: we pass an object where the key is the class name (active in our case) and the value is a logical expression (show).
Hide and show
The syntax for show and hide is almost identical to Vue.
It will set this DOM node to display:none. If you need to remove the DOM element completely, you can use x-if. However, since Alpine.js doesn’t use Virtual DOM, its x-if can only be used for the tag that wraps the hidden element.