If you are a front-end developer, you already know that there are tons of JavaScript-powered frameworks out there.
For most of us, it is all learning a new framework to get the work done efficiently.
Meet Alpine, a fairly new front-end JavaScript framework that provides a unique way to tackle UI problems.
In this article, we will get familiar with Alphine.js and learn how to get started with it.
More About AlphineJS
It is a minimal front-end development framework that lets you add JavaScript-powered behavior to your HTML code. The only difference here is that you do not have to load other similar frameworks and libraries such as Vue, React, and Angular, which can be quite heavy for the web app. Alpine provides a low-cost variation for those libraries as it sits at just 4KB gzipped size.
However, Alpine is not created to replace those libraries, but to provide an alternative for your project. This way, you can use minimal JavaScript to customize different aspects of your site, including tabs, sidebars, dropdowns, image selection, and so on!
In the case of Alpine, the behavior and the DOM are separated so that you can use it in a minimal amount to modify your site’s functionality. The decelerative approach also makes it a good choice for integration purposes while keeping the footprint as low as possible.
To summarize, the key features of Alphine.js include:
- Offers a minimalistic approach when it comes to JavaScript development
- Separate DOM and Behaviour are separated for maximum efficiency
- It works similar to how you would use JQuery in your projects
- Similar to Vue when it comes to syntax
- Inspired by TailwindCSS
- Aimed at developers who want to build multi-page applications and want to keep their applications lightweight.
What Makes Alpine different?
To better understand Alpine, we need to go through its approach and how it makes it all work. From what we have learned until now, Alpine replaces jQuery and utilizes a Vue template flavor. It gives the developer the flexibility to add features without the need to use a complete framework to do so.
So, how does Alpine does it? Let’s try to learn its approach by comparing it with jQuery.
Binding vs Quering
One of the biggest differences in the approach is how they interact with the DOM. jQuery utilizes a cross0browser compatibility layer that is built on top of DOM APIs. Technically, it is known as jQuery Core which the developers can utilize to manipulate the DOM.
Alpine.js utilize it in a different way. They use the x-bind attribute binding directive to interact with the DOM. Once bound, it then reacts with the component and uses x-ref to direct access them.
Handling events
Alpine utilizes the x-on directive to handle events as per your liking. jQuery, on the other hand, has its own way to handle events. For triggering purposes, Alpine.js uses $dispatch magic property to trigger the events.
Effects
When it comes to effects, jQuery utilizes its properties such as slideDown, fadeOut, and others to provide the effects. Alpine utilizes x-transition directives to add effects to the element.
Getting Started with Alpine
GitHub Repo: https://github.com/alpinejs/alpine
Mini Zipped size: 7.61 KB
Contributors: 66
Languages: 99.5% JavaScript, HTML: 0.5%
Just like other JavaScript frameworks and libraries, you can use the CDN to include it in your project. Alpine can also be installed using npm.
For npm
npm i alpinejs
CDN, include it in the <head> section
<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js” defer></script>
Basic Components
At the core, the basic idea is to define a “state.” The state can be used within the scope of the HTML selector. To get a clear understanding, let’s see an example below.
<html>
<head>
<!– This is the script CDN for Alpine –!
<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js” defer></script>
</head>
<body>
<div x-data = “{isOpen: false}”>
<button x-on:click =”isOpen = !isOpen”>ClickMe</button>
<h1 x-show = “isOpen”>HomePage</h1>
</div>
</body>
</html>
In the above code, we first include a CDN to import the framework to our project. As you can see, we used the x-data attribute to the div tag. It takes an object as input where you pass the state value.
The x-show attribute simply hides or shows the DOM element depending on the value of isOpen.
Lastly, we have an x-on directive, which is used to listen for events. Here, we are listening for the click action from the user. It changes the value of isOpen from true to false.
To get a better understanding, check the video tutorial for the above code.
You can also implement Alpine to other sections of your web page, including tabs and dropdown/Modal.
Check the code sample for tabs to get a better understanding.
<html>
<head>
<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js” defer></script>
</head>
<body>
<h1>Tabs Example</h1>
<div x-data=”{ tab: ‘new’ }”>
<button :class=”{ ‘active’: tab === ‘new’ }” @click=”tab = ‘new'”>New</button>
<button :class=”{ ‘active’: tab === ‘old’ }” @click=”tab = ‘old'”>Old</button>
<div x-show=”tab === ‘new'”>Tab New</div>
<div x-show=”tab === ‘old'”>Tab Old</div>
</div>
</body>
</html>
The following GIF shows the behavior of the above code.
For these kinds of behavior, you can also use frameworks such as Angular, React, or JS. However, they can be taxing on your project if you are not going to utilize them completely. Also, the frameworks make use of virtual DOM, which means more memory consumption. Here, you do not have to do it as it works with the “real” DOM.
In the end, you get to use an easy-to-use framework with feature decorative code support.
When to use Alpine?
As you can see, Alpine offers a good way to interact with DOM. You can use Alpine in the following use cases:
- Binding user input
- Appending classes
- Showing or hiding DOM nodes using conditions
- Listening for user inputs and changing the UI based on it
This also means that Alpine is not a good pick for projects that require additional functionality such as data management, validation, and complex UI behavior. For those requirements, you need large frameworks such as Vue, React, or Angular.
Common Alpine.js directives
In this section, we will look at the other directives that Alpine has to offer. Right now, it offers 14 directives including:
- x-data → used to declare a new component scope.
- x-show → toggles expression (true or false)
- x-bind → set attribute value to JS expression result
- x-on → attaches one event-listener to any given element.
- x-init → , when a component is initialized, runs an expression
- x-if → helps remove the component from DOM
- x-model → used to add two-way data binding elements.
- x-for → uses each array element to create new DOM nodes
- x-text → used to update the element innerText; works similar to x-bind
- x-html → used to update the element innerHTML content
- x-ref → used to retrieve the raw DOM elements
- x-transition → used to apply classes to element transition stages
- x-cloak → used for hiding pre-initialized reusability
- x-spread → offers better reusability when binding Alpine directives to an object
Let’s discuss five directives n more detail below.
1. x-data
The syntax for x-data is as below.
<div x-data="[JSON object]">...</div>
Here, the x-data utilizes the scope state for the new component and then attaches it to an HTML element. Doing so means that the data object now has access to all the child HTML elements.
2. x-show
The syntax for the x-show is as below.
<div x-show=”[expression]”></div>
Here the x-show looks at the CSS display property and checks whether the value is true or false. So, the expression can be isOpen where it checks whether the element is open or not.
3. X-init
The syntax for x-init is as below:
<div x-data="..." x-init="[expression]"></div>
x-init is utilized to run an expression during component initialization. It also lets components pass a callback function.
4. x-bind
The syntax for x-bind is as below:
<input x-bind:[attribute]="[expression]">
The x-bind directive is utilized for binding value, class attribute, or boolean.
5. x-model
The syntax for the x-model is as below:
<input type="search" x-model="[data item]">
Here the x-model lets you add a two-way data binding capability where the values between and component data and input element are synchronized.
What’s Next?
This leads us to the end of our Getting Started With Alpine.js article. Here, we looked at Alpine’s basic idea and how it can be used in different scenarios. Overall, Alpine is useful if you are looking for small behavioral changes to your code without the need to use large frameworks out there.
So, what do you think about Alpine? Are you going to use it for your next web project? Comment below and let us know.
