Alpine.js brings JavaScript interactivity without complexity to HTML – The New Stack

When Caleb Porzio talked about how he built Alpine.js at last year’s Alpine Day conference, he described it in terms of going up and down a “JavaScript Mountain”.

His climb up the JavaScript mountain started early in his developer career with jQuery, reaching the top, he said, when he started building single-page applications (SPAs) with Laravel and Vue.js. The top of the JavaScript mountain, however, wasn’t all gumballs and rainbows, and it had trouble building seemingly simple functionality.

“It precipitated my descent into the JavaScript mountain, where I started to really wonder, like, how much work am I doing building an entire application in the front and an entire application in the back,” said Porzio, explaining that he then decided to challenge himself to create apps entirely without JavaScript. It was quickly aborted.

Zero JavaScript?

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

That’s when he came up with the idea for Alpine.js, the minimalist framework that puts JavaScript behavior right in your markup, which would offer some of the interactivity of Vue.js without any complexity.

“Alpine is modern jQuery, that’s my vision for it,” Porzio explained in an interview. “When I started in web development, jQuery was what you do to sprinkle things 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 this way, I’ve come full circle, done the whole SPA thing and there’s nothing wrong with that, per se, but for a lot of cases. use, it’s just way too complex.

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

“I want it right in the model, rather than keeping all these different files and having to organize my front-end logic and really think about all of that,” Porzio said. “Sometimes it’s easier to just say, ‘When this button, on the button itself, is clicked, set open to true, then on the div you want to open, set whether 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 use as inserting a single tag.

"Ils s'appuient tous en quelque sorte sur ce concept de simuler un site en direct, de simuler un SPA, où au lieu d'avoir tout cela en direct sur le frontend, tout vit sur le backend, et le frontend fait juste des appels au back-end pour récupérez le nouveau code HTML et insérez-le dans la page », a déclaré Porzio. "Là où Alpine a commencé, c'était, par exemple, 'nous avons besoin de quelque chose pour les modaux, les onglets et les listes déroulantes, car vous ne devriez pas avoir à contacter un serveur pour ces choses.'"

De cette façon, Alpine se retrouve dans une sorte d'entre-deux entre de nombreux grands frameworks frontaux JavaScript et leurs homologues backend, sur le fil. Alpine vit entièrement sur le front-end en tant que framework JavaScript, mais se concentre entièrement sur la simplicité et la légèreté. Conformément à ces idéaux, Porzio a ajouté la possibilité de créer des plugins l'année dernière.

"Quelque chose comme React ou Vue, ils peuvent ajouter plus de fonctionnalités au noyau, et parce qu'il y a ces étapes de construction compliquées, ce qui est livré à votre navigateur n'est que ce que vous utilisez", a déclaré Porzio.

Rester mince

Avec Alpine, de nombreux utilisateurs intègrent le framework à l'aide de la balise

“There are things I would like to add, things I think Alpine should tackle, but that would just be too many kilobytes, so I use plugins for those,” he said. -he adds.

Going forward, Porzio said he would like to see Alpine become "the tool for all backend frameworks" and part of his efforts will focus on education. To that end, it launched a component aspect for 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 one-time payment basis and currently offer 17 different components, with all components created in the future included.

Featured image via Pixabay.

Sharon D. Cole