“I created an AI assistant for Laravel developers that handles all the boring work.”
Learn more
Smousss
Benjamin Crozat The art of crafting web applications

Alpine.js: a lightweight framework for productive developers

Benjamin Crozat — Updated on

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

Alpine.js: a lightweight framework for productive developers

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:

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:

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 alpinejs

Then, 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.

Alpine.js also has dev tools

Alpine.js dev tools

Alpine.js dev tools help you visualize what’s going on. You can:

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

Recommended

This is the most comprehensive tutorial about Tailwind CSS. Learn how to make front-end development great again.

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Knowing which Laravel version you are running is important before you start writing code on a new project. There are multiple ways to do so.

Take your code to the next level, thanks to exceptions. Handle errors in a more graceful way within try and catch blocks.

I show you how to upgrade your Laravel 9 project to version 10 and help you decide whether the return on investment is worth it.

Offer new ways to interact with your app to your users. Learn how to build a ChatGPT plugin with Laravel.

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

I show you how to upgrade your Laravel 8 project to version 9 and help you decide whether the return on investment is worth it.

Start leveraging the power of AI today. It enables developers to do incredible things, and many startups build products around it.

Laravel 10 has been released on February 14, 2023. Let's dive into every relevant new feature and change.

Powered by