Say No To Complexity With AlpineJS

Rate this content
Bookmark

Modern JavaScript is powerful, but big frameworks like Vue or React add an overwhelming amount of complexity to a developers' workflow. That’s why I wrote AlpineJS. It’s less than 10kb, requires no build process, takes almost no time to learn, yet gives you the declarative templating and reactivity you can’t live without. I can’t wait to show it to you.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

FAQ

Alpine.js is a minimalistic JavaScript framework developed by Caleb Porzio. It was created as a lightweight alternative to larger frameworks like Vue.js or React for simple projects where such heavy frameworks are not necessary. Alpine.js allows for direct behavior composition in HTML, making it easier to implement reactivity and interactivity on web pages without the overhead of more complex frameworks.

Alpine.js can be easily installed by including a CDN link directly into an HTML page. This approach eliminates the need for NPM installations or complex setups, aligning with the framework's simplicity mantra. Once included, you can start using Alpine.js by adding specific directives within your HTML to create interactive components.

Alpine.js offers a set of directives and magic properties that simplify the process of adding dynamic behavior to HTML elements. Key features include the x-data directive for initializing component data, x-on for adding event listeners, x-text for data binding, and x-model for two-way data binding. Alpine.js is designed to be robust yet simple, without using a virtual DOM, relying instead on direct DOM manipulations.

Alpine.js is designed for simplicity and speed, focusing on direct DOM manipulations rather than using a virtual DOM. This design choice makes Alpine.js generally faster for simple interactions and smaller-scale applications compared to more comprehensive frameworks like Vue.js, which use virtual DOM and are more suited for complex applications.

Yes, Alpine.js works exceptionally well with backend frameworks like Laravel. It is particularly suited for developers who prefer to handle HTML rendering on the server side and use Alpine.js to enhance the frontend with necessary interactivity, behaving as a 'sprinkling' of JavaScript to add dynamic features to the static HTML output from the backend.

Alpine.js is ideal for adding simple interactive elements to websites, such as dropdowns, modals, and counters. It is also well-suited for enhancing server-rendered pages with interactivity without the need for a full SPA (Single Page Application) framework. Common use cases include creating toggleable elements, handling form inputs dynamically, and building small components within existing web applications.

Alpine.js itself does not have built-in support for internationalization and localization. These aspects are typically handled by the backend or the server-side framework in use, such as Laravel, which manages the generation of localized content that can then be dynamically manipulated by Alpine.js on the client side.

Caleb Porzio
Caleb Porzio
33 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Alpine.js is a minimalistic JavaScript framework, sitting between jQuery and Vue, providing reactivity without the need for compilation or Webpack. It allows for behavior sprinkling directly in HTML, making it ideal for projects that don't require heavy frameworks like Vue.js or React. Installation is simple via a CDN link, and it works well with backend frameworks like Laravel. Key features include x-data for component state, x-on for event listeners, and x-text for data binding. Alpine.js is lightweight, perfect for adding dropdowns, modals, and counters. It also supports two-way data binding with x-model, similar to v-model in Vue. Upcoming versions promise performance optimizations. Alpine.js is like a Swiss army knife for JavaScript, weighing only 7.5 KB, and is great for controlling third-party libraries. For more information, visit the Alpine.js repository or consider sponsoring its development.

1. Introduction to Caleb Porzio and Alpine.js

Short description:

I am Caleb Porzio, a full-time open source maintainer and developer. I maintain LiveWire, a full stack framework for Laravel. I also host the No Plans to Merge podcast. Alpine.js is my ode to simplicity, perfect for projects that don't require Vue.js or React. Let's start from a blank slate and install Alpine.js via a simple CDN. Our first component will be a counter. Let's see what Alpine looks like with a basic component.

Hey, there. I am Caleb Porzio. I'm a full-time open source maintainer, developer. I maintain a few packages. One of them is LiveWire. It's a full stack framework for the Laravel framework for PHP. I also host a podcast called No Plans to Merge with my buddy Daniel. Every Friday we hang out and we talk about code and just hang out every Friday, so give that a listen if you care. And then also the other project I maintain is Alpine.js, which I'm here to talk to you about today.

Alpine.js is my ode to simplicity. It's basically for a lot of projects that I work on, like full stack framework type, like Rails, Laravel projects, and even static sites and small things. I don't always want something as big as Vue.js or React, but Vanilla.js just isn't enough. It doesn't give me the reactivity and the things that I've come to love with these bigger frameworks. So I basically wrote Alpine, and that's what I'm going to show you. We're just going to live code it, and I'll show you exactly how it works.

So the first thing, those slides that I just showed you, that's just an Alpine component. This is the entirety, a simple HTML page. So I'm actually going to get rid of that, and we're going to start from a totally blank slate. This is a simple HTML page loaded in a browser with a few base styles, so there's no magic happening here at all. So the first step is going to be installing Alpine.js. To go with that simplicity mantra, there's no NPM anything. You can NPM installed if you want, but personally, I love the good old days of a simple CDN, dropping it into a page and then getting up and running. So you can go to the Alpine repository on GitHub and just yank this CDN out, and then we'll paste it in, and now we are ready to go. Alpine is totally installed. It's 7.5 kilobytes of JavaScript minified, so it's extremely small.

Okay, let's get to it. So our first component, I'm just going to write a counter component. This is like the hello world of JavaScript frameworks. A counter, meaning we just hit a button, plus and minus, and see a number update, and then we'll kind of backfill some of the knowledge, but I just want you to see what Alpine looks like, a basic Alpine component. So we're going to create a div, and we'll create a button that's a plus, a button that's a minus, and a span tag for the actual number.

2. Creating an Alpine Component

Short description:

To turn the button into an Alpine component, we add xdata property and a JavaScript object literal of our state. The x text directive is used to bind the text value to the count. The x on directive listens for a click event and runs JavaScript code. We can increment the state using count++ inside the button.

So here's our button, plus and minus. And to turn this into an Alpine component, everything is in the markup. So we'll add this xdata property. xdata tells the markup, like here's going to be the Alpine component. Then inside of it, you put a JavaScript object literal of your state for the component. So for us, it's going to be count is zero.

Think of this like the data object inside of a view component. And the first directive we're going to see outside of xdata is x text. So x text, if you're familiar with Vue.js, a lot of these should be very familiar. This is V text in Vue. X text is saying, hey, whatever you put in here, we're going to put count in here. Whatever you put inside of this expression bind to the text value, the inner text value of this element. So if we refresh the page, we should now see a zero. Okay? And there we go. We refresh, we have a zero.

So now we need to wire up the plus and the minus buttons so that when we click them, we mutate that state. So here's the next directive. X on. So it's similar to Vue. V on. X on. You can specify any browser event. In our case, we want to listen for a click and then it'll run this JavaScript when you click. And just to be super clear, what's going inside of these quotations, this is just a JavaScript expression. So you can put any valid JavaScript, even stuff that needs the window or document object. So we can say, alert, hey, when we unclick that button. And, oh, let me refresh the page. We hit plus and then we get hey. Okay? So we also have access to the state inside this button. So we can say count plus plus to increment the state.