Phil Smith est un développeur indépendant basé à Brighton, au Royaume-Uni. Son agence, amillionmonkeys, s'associe à des designers, des entrepreneurs et des agences pour créer des sites Web et… En savoir plus sur Phil …
Avez-vous déjà construit un site Web et atteint jQuery, Bootstrap, Vue.js ou React pour obtenir une interaction utilisateur de base? Alpine.js est une fraction de la taille de ces frameworks car il n'implique aucune étape de construction et fournit tous les outils dont vous avez besoin pour construire une interface utilisateur de base.
Comme la plupart des développeurs, j'ai une mauvaise tendance à trop compliquer mon flux de travail, surtout s'il y a une nouvelle chaleur à l'horizon. Pourquoi utiliser CSS quand vous pouvez utiliser CSS-in-JS? Pourquoi utiliser Grunt quand vous pouvez utiliser Gulp? Pourquoi utiliser Gulp quand vous pouvez utiliser Webpack? Pourquoi utiliser un CMS traditionnel quand on peut se passer la tête sans tête? De temps en temps cependant, la nouveauté rend la vie plus simple.
Récemment, la montée en puissance d'outils basés sur Tailwind CSS l'a fait pour CSS, et maintenant Alpine.js promet quelque chose de similaire pour JavaScript.
Dans cet article, nous allons examiner de plus près Alpine.js et comment il peut remplacer JQuery ou des bibliothèques JavaScript plus grandes pour créer des sites Web interactifs. Si vous créez régulièrement des sites qui nécessitent une pincée sur Javascript pour modifier l'interface utilisateur en fonction d'une interaction de l'utilisateur, cet article est pour vous.
Tout au long de l'article, je me réfère à Vue.js, mais ne vous inquiétez pas si vous avez aucune expérience de Vue – ce n'est pas nécessaire. En fait, une partie de ce qui rend Alpine.js génial est que vous avez à peine besoin de connaître le JavaScript.
Maintenant, commençons.
Qu'est-ce que Alpine.js?
Selon l'auteur du projet Caleb Porzio :
«Alpine.js vous offre la nature réactive et déclarative de grands frameworks comme Vue ou React à un coût beaucoup plus faible. Vous pouvez conserver votre DOM et saupoudrer de comportement comme bon vous semble. "
Décompressons un peu.
Considérons un modèle d'interface utilisateur de base comme Onglets . Notre objectif ultime est que lorsqu'un utilisateur clique sur un onglet, le contenu de l'onglet s'affiche. Si nous venons d'un arrière-plan PHP, nous pourrions facilement réaliser ce côté serveur. Mais l'actualisation de la page à chaque clic sur l'onglet n'est pas très «réactive».
Pour créer une meilleure expérience au fil des ans, les développeurs ont choisi jQuery et / ou Bootstrap. Dans cette situation, nous créons un écouteur d'événements sur l'onglet et lorsqu'un utilisateur clique, l'événement se déclenche et nous indiquons au navigateur ce qu'il doit faire.
Voir le stylo Affichage / masquage avec jQuery par Phil sur CodePen . [19659017] Cela fonctionne. Mais ce style de codage où nous disons exactement au navigateur ce qu'il faut faire (codage impératif) nous met rapidement dans le pétrin. Imaginez si nous voulions désactiver le bouton après avoir cliqué ou si nous voulions changer la couleur d'arrière-plan de la page. Nous aborderions rapidement un code spaghetti sérieux.
Les développeurs ont résolu ce problème en recherchant des frameworks comme Vue, Angular et React. Ces frameworks nous permettent d'écrire du code plus propre en utilisant le DOM virtuel: une sorte de miroir de l'interface utilisateur stockée dans la mémoire du navigateur. Le résultat est que lorsque vous «cachez» un élément DOM (comme un onglet) dans l'un de ces cadres; il n'ajoute pas d'affichage : aucun; attribut de style mais il disparaît littéralement du DOM "réel".
Cela nous permet d'écrire plus de code déclaratif, plus propre et plus facile à lire. Mais cela a un coût. En règle générale, la taille de l'ensemble de ces cadres est grande et pour ceux qui viennent d'un arrière-plan jQuery, la courbe d'apprentissage est incroyablement abrupte. Surtout quand tout ce que vous voulez faire est de basculer entre les onglets! Et c'est là qu'Alpine.js intervient.
Comme Vue et React, Alpine.js nous permet d'écrire du code déclaratif mais il utilise le «vrai» DOM; modifiant le contenu et les attributs des mêmes nœuds que vous et moi pourrions modifier lorsque nous ouvrons un éditeur de texte ou des outils de développement. Par conséquent, vous pouvez perdre la taille de fichier, la magie et la charge cognitive d'un cadre plus large, mais conserver la méthodologie de programmation déclarative. Et vous obtenez cela sans bundler, sans processus de construction et sans balise de script. Chargez simplement 6 Ko d'Alpine.js et vous êtes parti!
Alpine.js
JQuery
Vue.js
React + React DOM
Style de codage
Déclaratif
Impératif [19659022] Déclaratif
Déclaratif
Requiert un groupeur
Non
Non
Non
Oui
Taille du fichier (GZipé, minifié)
6,4 Ko
30 Ko
32 Ko
5kb + 36kb
Dev-Tools
Non
Non
Oui
Oui
Quand dois-je atteindre Alpine?
Pour moi, la force d'Alpine est dans la facilité de manipulation DOM. Pensez à ces choses que vous avez utilisées avec Bootstrap, Alpine.js est idéal pour elles. Par exemple:
Affichage et masquage des nœuds DOM sous certaines conditions,
Liaison de l'entrée utilisateur,
Écoute des événements et modification de l'interface utilisateur en conséquence,
Ajout de classes.
Vous pouvez également utiliser Alpine. js pour le modèle si vos données sont disponibles dans JSON, mais gardons cela pour un autre jour.
Quand dois-je chercher ailleurs?
Si vous récupérez des données ou si vous devez effectuer des fonctions supplémentaires comme la validation ou le stockage de données , vous devriez probablement chercher ailleurs. Les cadres plus grands sont également livrés avec des outils de développement qui peuvent être inestimables lors de la construction d'interfaces utilisateur plus grandes.
De jQuery à Vue à Alpine
Il y a deux ans, Sarah Drasner a publié un article sur Smashing Magazine, « Remplacement de jQuery avec Vue .js: Aucune étape de construction nécessaire », sur la façon dont Vue pourrait remplacer jQuery pour de nombreux projets. Cet article m'a lancé dans un voyage qui m'a amené à utiliser Vue presque chaque fois que je crée une interface utilisateur. Aujourd'hui, nous allons recréer certains de ses exemples avec Alpine, ce qui devrait illustrer ses avantages par rapport à jQuery et Vue dans certains cas d'utilisation.
La syntaxe d'Alpine est presque entièrement retirée de Vue.js. Au total, il y a 13 directives. Nous en couvrirons la plupart dans les exemples suivants.
Mise en route
Comme Vue et jQuery, aucun processus de construction n'est requis. Contrairement à Vue, Alpine s'initialise lui-même, il n'est donc pas nécessaire de créer une nouvelle instance. Chargez simplement Alpine et vous êtes prêt à partir.
La portée d'un composant donné est déclarée à l'aide de la directive x-data . Cela lance les choses et définit certaines valeurs par défaut si nécessaire:
...
Capture des entrées utilisateur
x-model nous permet de garder tout élément d'entrée en synchronisation avec les valeurs définies à l'aide de x-data . Dans l'exemple suivant, nous définissons la valeur du nom sur une chaîne vide (dans la balise du formulaire ). En utilisant le modèle x nous lions cette valeur au champ de saisie. En utilisant x-text nous injectons la valeur dans le innerText de l'élément de paragraphe.
Cela met en évidence les principales différences avec Alpine.js et jQuery et Vue.js.
La mise à jour de la balise de paragraphe dans jQuery nous obligerait à écouter des événements spécifiques (keyup?), Identifier explicitement le nœud que nous souhaitons à mettre à jour et les changements que nous souhaitons apporter. La syntaxe d'Alpine, en revanche, spécifie simplement ce qui doit se produire. C'est ce que l'on entend par programmation déclarative.
La mise à jour du paragraphe dans Vue, bien que simple, nécessiterait une nouvelle balise de script:
new Vue ({el: '#app', data: {name: ''}} );
Bien que cela ne semble pas être la fin du monde, cela met en évidence le premier gain majeur avec Alpine. Il n'y a pas de changement de contexte. Tout se fait directement dans le HTML – pas besoin de JavaScript supplémentaire.
Cliquez sur Événements, attributs booléens et classes à bascule
Comme avec Vue, : sert de raccourci pour x -bind (qui lie les attributs) et @ est un raccourci pour x-on (qui indique qu'Alpine doit écouter les événements).
Dans l'exemple suivant, nous instancier un nouveau composant à l'aide de x-data et définir la valeur par défaut de show sur false. Lorsque le bouton est cliqué, nous basculons la valeur de afficher . Lorsque cette valeur est vraie, nous demandons à Alpine d'ajouter l'attribut aria-extended .
x-bind fonctionne différemment pour les classes: nous passons dans l'objet où la clé est la classe -name ( actif dans notre cas) et la valeur est une expression booléenne ( afficher ).
Ceci définira un noeud DOM donné sur l'affichage : aucun . Si vous devez supprimer complètement un élément DOM, x-if peut être utilisé. Cependant, comme Alpine.js n'utilise pas le DOM virtuel, x-if ne peut être utilisé que sur un (balise qui enveloppe l'élément que vous souhaitez masquer).
Propriétés magiques [19659002] En plus des directives ci-dessus, trois propriétés magiques offrent des fonctionnalités supplémentaires. Tous ces éléments seront familiers à toute personne travaillant dans Vue.js.
$ el récupère le composant racine (la chose avec l'attribut x-data);
$ refs vous permet de saisir un élément DOM;
$ nextTick garantit que les expressions ne sont exécutées qu'une fois qu'Alpine a fait son travail;
$ event peut être utilisé pour capturer une nature événement de navigateur.
Il est temps de construire quelque chose pour le monde réel. Dans un souci de brièveté, je vais utiliser Bootstrap pour les styles, mais utiliser Alpine.js pour tout le JavaScript. La page que nous créons est une simple page de destination avec un formulaire de contact affiché dans un modal qui se soumet à un gestionnaire de formulaire et affiche un joli message de réussite. Juste le genre de choses qu'un client peut demander et attendre pronto!
Remarque : Vous pouvez voir le balisage d'origine ici .
Pour que cela fonctionne, nous pourrions ajouter jQuery et Bootstrap.js, mais cela représente un peu de surcharge pour pas beaucoup de fonctionnalités. Nous pourrions probablement l'écrire dans Vanilla JS, mais qui veut faire ça? Faisons-le plutôt fonctionner avec Alpine.js.
Définissons d'abord une étendue et des valeurs initiales:
Maintenant, faisons en sorte que notre bouton définisse la valeur showModal sur true:
Lorsque showModal est vrai, nous devons afficher le modal et ajouter quelques classes:
Lions les valeurs d'entrée à Alpine:
Et désactivons le bouton «Soumettre», jusqu'à ces valeurs sont définies:
Enfin, envoyons des données à une sorte de fonction asynchrone et masquons le modal lorsque nous avons terminé:
Lors de la construction sites Web, j'essaie de plus en plus de me demander ce que serait "juste assez de JavaScript". Lors de la construction d'une application Web sophistiquée, cela pourrait bien être React. Mais lors de la construction d'un site de marketing, ou quelque chose de similaire, Alpine.js se sent assez. (Et même si ce n'est pas le cas, compte tenu de la syntaxe similaire, passer à Vue.js ne prend pas de temps du tout.)
Il est incroyablement facile à utiliser (surtout si vous n'avez jamais utilisé VueJS). Il est minuscule (<6 Ko gzippé) . Et cela signifie qu'il n'y a plus de changement de contexte entre les fichiers HTML et JavaScript.
Il existe des fonctionnalités plus avancées qui ne sont pas incluses dans cet arti. cle et Caleb ajoutent constamment de nouvelles fonctionnalités. Si vous voulez en savoir plus, consultez les documents officiels sur Github .
