Alpine.js Brings JavaScript Interactivity without Complexity to HTML – InApps 2022

When Caleb Porzio related how he built Alpine.js during last year’s Alpine Day conference, he described it in terms of summiting and descending a “JavaScript mountain.”

His ascent of JavaScript mountain began early on in his developer career with jQuery, reaching the summit, he said, when he began building single-page applications (SPAs) with Laravel and Vue.js. The summit of JavaScript mountain, however, was not all gumdrops and rainbows, and he ran into problems creating seemingly simple functionality.

“That precipitated my descent down JavaScript mountain, where I started to really question, like, how much more work I’m doing by creating an entire app in the front end and an entire app in the back end,” said Porzio, explaining that he then decided to challenge himself to create applications entirely without JavaScript. It was quickly aborted.

Zero JavaScript?

“Can you do this thing with zero JavaScript?” he asked. “The answer is no, not responsibly, because you end up doing crazy things for simple, like, dropdowns.”

It was at this point that he came up with the idea for Alpine.js, the minimalist framework that puts JavaScript behavior directly in your markup, which would offer some of the interactivity of Vue.js without any of the complexity.

“Alpine is the modern jQuery, that’s my vision for it,” Porzio explained in an interview. “When I started in web development, jQuery was what you did to sprinkle in stuff on your front end. Your whole front end wasn’t driven by a frontend framework, it was driven by something like Rails. I still like to write web apps that way. I’ve come full circle, I did the whole SPA thing and there’s nothing wrong with it, per se, but for a lot of use cases it’s just way too much complexity.”

While technology like jQuery was perfectly fine for adding interactivity, it was too imperative and manual for Porzio’s tastes. He said he enjoyed the declarative and reactive nature of frameworks like React, Vue, and Angular, and so he created Alpine with those ideas in mind. At the same time, those frameworks separated out functionality and design into many different files, which made it difficult to find what was happening where.

“I want it right in the template, rather than maintaining all these different files and having to organize my frontend logic and really think through that stuff,” said Porzio. “Sometimes it’s easier to just say, ‘When this button, on the button itself, is clicked, set open to true and then, on the div that you want to open, show if open is true.’”

Backlash against Complexity

Alpine does all of this with as little as possible — just 15 attributes, six properties, and two methods — and is as easy to start using as inserting a single <script> tag in the header of an HTML file. And while Alpine is part of a backlash against the complexity of big JavaScript frontend frameworks, it differs from many of the other HTML over-the-wire alternatives out there, like htmx, Hotwire, Unpoly, or LiveView.

“They all kind of rely on this concept of faking a live site, faking an SPA, where instead of actually having that all live on the frontend, it all lives on the backend, and the front end just makes calls to the back end to get the new HTML and swap it into the page,” said Porzio. “Where Alpine started was, like, ‘we need something for modals, tabs, and dropdowns, because you shouldn’t have to hit a server for those things.’”

In this way, Alpine finds itself in a sort of in-between land between many of the big JavaScript frontend frameworks and their backend, over-the-wire counterparts. Alpine lives entirely on the front end as a JavaScript framework, but focuses entirely on simplicity and remaining lightweight. In further keeping with those ideals, Porzio added the ability to create plugins last year.

“Something like React or Vue, they can add more features to core, and because there’s these complicated build steps, what ships to your browser is only what you use,” said Porzio.

Staying Slim

With Alpine, many users embed the framework using the <script> tag, which means the entire framework is included, and so, Porzio explained, “the more I add to Alpine, the bigger the bundle is that I’m just shipping to everybody, so I’m really careful about keeping the core slim, so that it’s still the lightest framework around.”

“There’s things that I would want to add, things that I think Alpine should tackle, but it would be just too many kilobytes, so I use plugins for those,” he added.

Moving forward, Porzio said he would like to see Alpine become “the tool for all of the backend frameworks” and part of his efforts will focus on education. To that end, he launched a components aspect to Alpine, which consists of educational videos and pre-built components for things like image carousels or radio buttons, all created with Alpine. Components are available on a single payment basis and currently offer 17 different components, with all future created components included.

Featured image via Pixabay.