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.

  1. More About AlphineJS
  2. Getting Started with Alpine
  3. When to use Alpine?
  4. Common Alpine.js directives

Getting Started With AlpineJS

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.

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.

AlpineJS Tutorial
Caption: Another example showing how to use Alpine

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:

  1. x-data → used to declare a new component scope.
  2. x-show → toggles expression (true or false)
  3. x-bind → set attribute value to JS expression result
  4. x-on → attaches one event-listener to any given element.
  5. x-init → , when a component is initialized, runs an expression
  6. x-if → helps remove the component from DOM
  7. x-model → used to add two-way data binding elements.
  8. x-for → uses each array element to create new DOM nodes
  9. x-text → used to update the element innerText; works similar to x-bind
  10. x-html → used to update the element innerHTML content
  11. x-ref → used to retrieve the raw DOM elements
  12. x-transition → used to apply classes to element transition stages
  13. x-cloak → used for hiding pre-initialized reusability
  14. x-spread → offers better reusability when binding Alpine directives to an object

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.