Alpine.js: a lightweight framework for productive developers
Front-end web development has increased in complexity over the last decades.
Despite being well aware of this fact, we are still reaching toward JavaScript frameworks, and do you know why?
Because building good user interfaces is even more challenging than writing Vanilla JavaScript.
Luckily, Alpine.js is a good compromise.
Table of contents
- What is Alpine.js and how it benefits you
- Alpine.js VS. jQuery: gently modernize how you write JavaScript
- Setting up Alpine.js in any project only takes a copy and paste
- Set up Alpine.js in a Laravel project using Vite
- Don’t reinvent the wheel, use the official plugins
- Alpine.js also has dev tools
- Copy and paste components from libraries
- Learn, contribute and follow
What is Alpine.js and how it benefits you
Alpine.js is a tiny JavaScript framework for building interactive user interfaces.
Imagine Vue.js, but smaller, easier and even more pragmatic. It’s a collection of just 15 attributes, 6 properties, and 2 methods.
To me, it’s the best approach to modern JavaScript. Imagine Vue.js, but smaller and easier.
This is all it takes to build a dropdown menu with it:
<div x-data="{ open: false }" @click.away="open = false"> <button @click="open = ! open"> Toggle </button> <div x-cloak x-show="open" x-transition> … </div></div>No component to create and no build process. Pure awesomeness out of attributes. Like full-fledged frameworks, you know what’s going on just by looking at the HTML.
Alpine.js VS. jQuery: gently modernize how you write JavaScript
Most people still use jQuery in 2023 for a few reasons:
- Force of habits
- Perform Ajax requests
- Find elements in the DOM
- Apply styles and animate them
And they also probably fear the complexity of modern JavaScript framework (I can dig that).
Luckily, Alpine.js is none of this. It’s extremely easy to use and is as convenient as jQuery, while being modern.
Here’s how to switch from jQuery to Alpine.js:
- First, jQuery
$()function isn’t needed anymore. JavaScript has convenient ways to find elements in the DOM, such asdocument.querySelector()anddocument.querySelectorAll()methods. - Second, making Ajax requests can now be done with the Fetch API, using the
fetch()function like so:fetch('https://example.com/api/bar')
Now, if you need to apply styles conditionally to elements and animate the transitions, here’s how to do it with Alpine.js using the code snippet I shared at the beginning:
<div x-data="{ open: false }" @click.away="open = false"> <button class="dropdown-trigger" :class="{ 'dropdown-trigger--active': open }" @click="open = ! open" > Toggle </button> <ul x-cloak x-show="open" x-transition> … </ul></div>Notice how simple it looks?
I often saw terrible codebases using jQuery with code scattered all over the place, which made it difficult to maintain.
Alpine.js fixes this problem for good. ✓
Setting up Alpine.js in any project only takes a copy and paste
Alpine.js is one of the easiest JavaScript framework you will have to set up during your career.
Just copy and paste this code snippet in the <head> tag of your website, and you’re good to go. 👍
<!DOCTYPE html><html> <head> … <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body> … </body></html>(The URL in the src attribute redirects to the latest version of Alpine.js. For better performances, use the final destination instead.)
Same thing for plugins. Make sure they come before Alpine.js, though.
<script defer src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>Set up Alpine.js in a Laravel project using Vite
First, install Alpine.js in your project.
npm install alpinejsThen, in your main JavaScript file (in a Laravel project, it’s resources/js/app.js), import Alpine and boot it up.
import Alpine from 'alpinejs' Alpine.start()You can assign your Alpine object to a global variable. It’s extremely useful to be able to play with it right from the developer tools.
import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start()And in case you’re using plugins (learn more about them in this article), you have to register the plugin before calling Alpine.start().
import Alpine from 'alpinejs'import Intersect from '@alpinejs/intersect' Alpine.plugin(Intersect) window.Alpine = Alpine Alpine.start()Don’t reinvent the wheel, use the official plugins
The creator of Alpine.js blesses us with plugins that handle common tasks.
- Mask formats user’s input on the fly.
- Intersect, runs code once the user scrolled to a given point.
- Persist uses the Web Storage API to persist state.
- Focus, handles focus on your page.
- Collapse animates height transitions.
Alpine.js also has dev tools
Alpine.js dev tools help you visualize what’s going on. You can:
- Observe changes in the stores
- Modify values in the stores
- See warnings and errors
Alpine.js dev tools is available on Chrome and Firefox:
Copy and paste components from libraries
As you know now, Alpine.js is a minimal JavaScript framework. One of its key features is its simplicity.
This is achieved through a declarative syntax and a small set of directives that can be used to create dynamic behaviors right from your HTML.
This philosophy makes it easy for developers to create reusable components that can be easily integrated into a variety of projects without the need for complex configuration.
Here are a bunch of websites sharing Alpine.js component, mostly for free.
Learn, contribute and follow
- Alpine.js documentation provides a comprehensive overview of its features and directives.
- If you like Alpine.js and would like to contribute to the project, its GitHub repository is the best place to start.
- Alpine.js on Twitter is where you want to be for the latest news about the framework.
