Alpine.js apporte l’interactivité JavaScript sans complexité au HTML – The New Stack

Lorsque Caleb Porzio a raconté comment il avait construit Alpine.js lors de la conférence Alpine Day de l’année dernière, il l’a décrit en termes de sommet et de descente d’une “montagne JavaScript”.

Son ascension de la montagne JavaScript a commencé au début de sa carrière de développeur avec jQuery, atteignant le sommet, a-t-il déclaré, lorsqu’il a commencé à créer des applications monopage (SPA) avec Laravel et Vue.js. Le sommet de la montagne JavaScript, cependant, n’était pas que des boules de gomme et des arcs-en-ciel, et il a rencontré des problèmes pour créer des fonctionnalités apparemment simples.

“Cela a précipité ma descente dans la montagne JavaScript, où j’ai commencé à vraiment me demander, par exemple, combien de travail je fais en créant une application entière à l’avant et une application entière à l’arrière”, a déclaré Porzio, expliquant que il a alors décidé de se mettre au défi de créer des applications entièrement sans JavaScript. Il a été rapidement avorté.

Zéro JavaScript ?

« Pouvez-vous faire ce truc sans JavaScript ? » Il a demandé. “La réponse est non, pas de manière responsable, car vous finissez par faire des choses folles pour des listes déroulantes simples, comme.”

C’est à ce moment qu’il a eu l’idée d’Alpine.js, le framework minimaliste qui place le comportement JavaScript directement dans votre balisage, qui offrirait une partie de l’interactivité de Vue.js sans aucune complexité.

“Alpine est le jQuery moderne, c’est ma vision pour lui”, a expliqué Porzio dans une interview. “Quand j’ai commencé dans le développement Web, jQuery était ce que vous faisiez pour saupoudrer des éléments sur votre front-end. Tout votre front-end n’était pas piloté par un framework frontal, il était piloté par quelque chose comme Rails. J’aime toujours écrire des applications Web de cette façon. J’ai bouclé la boucle, j’ai fait tout le truc SPA et il n’y a rien de mal à ça, en soi, mais pour beaucoup de cas d’utilisation, c’est juste beaucoup trop complexe.

Alors que la technologie comme jQuery était parfaitement adaptée pour ajouter de l’interactivité, elle était trop impérative et manuelle pour les goûts de Porzio. Il a dit qu’il appréciait la nature déclarative et réactive de frameworks comme React, Vue et Angular, et il a donc créé Alpine avec ces idées à l’esprit. Dans le même temps, ces frameworks séparaient les fonctionnalités et la conception dans de nombreux fichiers différents, ce qui rendait difficile de trouver ce qui se passait et où.

“Je le veux directement dans le modèle, plutôt que de conserver tous ces différents fichiers et d’avoir à organiser ma logique frontale et à vraiment réfléchir à tout cela”, a déclaré Porzio. “Parfois, il est plus facile de dire simplement :” Lorsque ce bouton, sur le bouton lui-même, est cliqué, définissez open sur true, puis, sur la div que vous souhaitez ouvrir, indiquez si open est true.”‘

Contrecoup contre la complexité

Alpine fait tout cela avec aussi peu que possible – seulement 15 attributs, six propriétés et deux méthodes – et est aussi facile à utiliser que l’insertion d’une seule balise