Fervent utilisateurs de jQuery depuis de nombreuses années, et à force de faire du JavaScript avec des Single Page Application (SPA), nous cherchions un digne successeur à jQuery pour faciliter nos développements et c’est en Alpine.JS (ou AlpineJS) que nous l’avons trouvé
jQuery ? Alpine.JS ? mais qu’est-ce ?
Ces noms barbares de produits, où l’un fait penser à la montagne et l’autre à une demande sont en fait des “framework”, autrement dit, des outils cadrant le travail du développeur (framework) lui permettant, normalement et quand ils sont bien faits … de se concentrer sur son travail et d’éviter de réinventer toujours des choses d’ores et déjà existantes (Rappelons qu’un développeur est là pour faire gagner de l’argent par rapport à des problématiques business en se servant de la technique).
jQuery et Alpine.JS(alpinejs), développé en JavaScript (langage que tout navigateur internet peut exécuter) permettent à tout développeur d’ajouter du dynamisme dans une page ou bien de charger dynamiquement des données ou d’en soumettre … (par exemple, le fait qu’on vous dispute car vous avez mal renseigné votre nom / prénom ? dans un formulaire)
jQuery : le vieillissant mais non sans moins encore utilisé framework
jQuery, digne successeur de Prototype a connu ses heures de gloire grâce à notamment Bootstrap qui l’utilise depuis les ses prémisses. Au fur et à mesure du temps, jQuery a grossi et la technologie a évolué vers plus de réactivité, notamment avec les framework permettant de faire des Single Page Application. (L’application JavaScript tient dans une seule et même application toute écrite en JavaScript, plutôt que des morceaux de JavaScript éparpillés par-ci par là avec une contrainte, une indexation par les moteurs de recherches compliquées voire impossible … )
Les framework SPA ont introduit une notion de réactivité facilitant le travail de mise à jour des données et jQuery n’est pas très fort dans ce domaine.
Alpine.JS : le framework léger alternatif à jQuery
Tous les amoureux du two-way binding et de la réactivité vont apprécier de pouvoir facilement utiliser cette interactivité pour par exemple cacher des blocs HTML ou tout autre élément. Le framework s’ajoute comme toute librairie JavaScript et s’utilise assez facilement. Il est ainsi inutile de faire appel à des sélecteurs comme on le ferait avec jQuery, tout se passe le plus aisément possible comme dans VueJS par exemple
- Dropdown Body
Ici, on définit une données réactive nommée open, qui en fonction de sa valeur, va permettre à des éléments HTML de dynamiquement se cacher ou s’afficher (x-show=”open”) quand on clique sur le bouton.
On pourrait tout à fait faire la même chose avec jQuery mais c’est un peu plus “barbare” et ça produit du code à part, alors qu’ici, le code HTML porte la réactivité et il n’est plus nécessaire d’écrire beaucoup de code JavaScript pour arriver à nos fins.
Dans un de nos projets, nous avons utilisé TailwindCSS et adossé Alpine.JS à celui-ci. Nous avons pu facilement, récupérer des Articles WordPress à l’aide de fetch, jouer avec la réactivité pour afficher dynamiquement la liste de ceux-ci et enfin afficher l’article dans une modale en l’affichant ou la cachant selon le cas.
En conclusion
Nous allons utiliser AlpineJS quand nous aurons besoin de morceaux simples et pas le besoin de faire une application complète en JavaScript. Nous continuerons à utiliser jQuery si nous trouvons un composant déjà existant et complet et enfin nous nous réservons React ou bien VueJS pour les applications complètes.
