Alpine JS, petit mais costaud !

Durée: 37m0s

Date de sortie: 11/01/2021

Dans cet épisode, nous allons parler d'un framework innovant qui apporte un peu de nouveauté dans le monde des frameworks Javascript. Alpine JS est un framework léger (moins de 9kb) qui vient se placer entre les frameworks/libraries complets type Vue JS et jQuery/Vanilla JS. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/javascript-alpine-js/

Bienvenue sur Double Slash, le podcast dédié aux outils et aux techniques pour le développement
web.
Bonjour à tous et bienvenue sur ce nouvel épisode de Double Slash, donc c'est l'épisode
numéro 18.
Comme d'habitude je suis Patrick et nous avons avec nous Alex.
Salut Alex !
Salut !
Donc si vous aimez le podcast et que vous voulez nous soutenir, laissez-nous une petite
note ou un commentaire sur Apple Podcast pour nous vous aider à remonter au classement
et évidemment partager les épisodes sur les réseaux sociaux.
On vous remercie d'avance.
Donc aujourd'hui, une fois n'est pas coutume, nous allons parler de JavaScript pour changer
un petit peu et plus précisément d'une solution qui s'appelle, alors on hésite
entre le nom, on a Alpine.js ou Alpine.
Donc je pense pour l'épisode on va dire Alpine.js, ce sera plus simple.
Qu'est-ce qui s'en pense ?
Alpine.js c'est très très bien.
Ok, puis on est en France donc on parle français.
N'est-ce pas ?
Alors Alpine.js, très honnêtement je ne connais quasiment pas, j'ai été sur la page
GitHub, j'ai lu vite fait le truc mais je ne connais pas.
Donc on va faire un épisode comme on avait déjà fait sur Tywin je crois.
Toi tu connais ?
Ouais.
Et ben on va en parler.
On va en parler.
Dis-moi pourquoi je devrais l'utiliser ?
Alors en fait je vais redire la même chose que je l'avais dit sur Tywin, je pense le
but c'est pas de vendre le framework mais c'est de dire ok quel est le parti pris de
ce framework et trouver le bon scope de projet pour qu'il puisse fiter parfaitement.
En clair déjà le concept c'est quoi ?
C'est un framework JavaScript alors tu dis ok mais il y a déjà React, il y a Vu,
il y a Angular, là il y a Svelte, il y en a encore un nouveau.
Oui et non.
Et en fait c'est vraiment un framework qui est beaucoup plus petit, qui a beaucoup
moins d'ambition de faire des grosses applications.
Pour moi en tout cas c'est pour un scope de projet beaucoup plus petit même si on
peut faire quand même beaucoup de choses.
Et il arrive aussi à un moment, il est en V2, ils ont une roadmap pour la V3 et tout
ça.
Il a déjà quasiment 12 000 stars sur GitHub donc c'est un projet qui vit, qui est déjà
utilisé.
Et en fait l'idée c'est d'utiliser tout ce qui a été déjà mis en place les directives
dans des gros frameworks, en fait les adapter et pour tous les utiliser dans le DOM directement.
Donc en fait on va l'installer de manière classique soit via un CDN, soit via un NPM
package et il y a même le support pour I11 avec des petits extra.
Mais dans l'idée en fait ça va monter, on va le monter et après on va utiliser des
directives.
Alors ceux qui sont vus ou réactes ils vont quand même assez très très vite comprendre
le truc.
Pour ceux qui ont fait du vus ou de langue du l'art c'est vraiment hyper hyper hyper
flippant.
Dans vus la directive c'est v tirer, if, machin.
Et là sur Alpine en fait ça va être x mais pour le coup c'est vraiment le même concept.
Donc c'est vraiment du déclaratif.
Donc on vient tout marquer dans notre markdown, c'est explicit, il n'y a pas de trucs cachés
et le gros avantage aussi c'est qu'il va être assez léger.
Il va être super léger donc ça va nous éviter en fait de mettre une grosse sur couche
d'un gros framework pour faire peut-être des petites animations de modales ou de la
navigation sur des détablations ou juste pour venir binder 3, 4 transitions et utiliser
des directives de JavaScript.
Voilà en fait on va pouvoir les utiliser assez facilement et évidemment il y a un
gros gros contributeur qui est le projet Tywin et en fait même le créateur en fait
de Alpine.js c'est un collectif par contre il y a quand même un contributeur qui est
vraiment marquant qui doit être le créateur.
Lui-même en fait il présente en fait le Alpine.js c'est vraiment le Tywin du JavaScript
donc pour ceux qui n'ont pas écouté l'épisode sur Tywin je vous invite à écouter l'épisode
sur Tywin et là le concept c'est vraiment toute la partie.js il nous faut un truc assez
light assez modulaire et c'est là en fait où Alpine intervient.
Donc du coup tu dis alors c'est light ok ça pèse combien à peu près quand je...
Je crois que sur le site là j'aurais 8K au jési millipé.
Ouais c'est vraiment petit et ce qui est intéressant c'est là où on va pas venir
surcharger les pages à outrance quoi.
Du coup tu l'utilises comment alors parce que donc tu l'inclures dans la page c'est ça ?
Ouais alors en fait je vais dans ma page classique...
Comme jQuery quoi je vais inclure un script.
Voilà et pour le coup en fait c'est peut-être un bon moyen de se passer de jQuery.
Ah bah ça en dit tout le temps mais dans l'idée en fait je vais l'importer soit
je l'installe via un cdn dans ma balise script soit via un npm package et après je vais
charger mon script.
Du coup si tu le rentres par un balise script ça veut dire que tu n'as pas besoin de
compiler en fait tu peux un site ou la classique tu l'inclures directement via le cdn et
tu peux utiliser sans compiler quoi que ce soit quoi.
Pas besoin d'npm.
Absolument donc en fait on n'a pas besoin tu peux l'utiliser direct si par exemple tu
as une page html et ton serveur il rend du html et tu n'as pas besoin de compiler,
tu n'as pas besoin de tous les, tu n'as pas besoin de tout ça et en fait tu profites de
toute la petite expérience de développement un peu plus facile où tu vas pouvoir déclarer
tes data.
Ok bah j'ai mes data, je déclare après c'est des objets clés valeurs et enfin objets ou
fonctions et après je vais pouvoir jouer avec comme je vais pouvoir le faire sur vue
ou sur react je vais avoir accessible dans mon dôme en fait tout ces data.
D'accord donc je viens de créer dans ma page là je peux m'amuser avec et du coup les directives
en fait c'est tout ce qui est attribué en quelque sorte dans les éléments html donc
xdata tout ça, xchow donc c'est les trucs encore trop voire comme tu dis sur vue.
Oui absolument en fait on va retrouver les vmodels les vchows les plus important exactement
les plus important bah ça va être les data c'est là où on va stocker l'objet ou notre
notre fonction on va on va avoir un comportement de condition donc on va avoir le xifxelse
du coup bah c'est notre condition qui va renvoyer dans notre template ou pas on va pouvoir afficher
des choses sur la condition pareil sur le xchow qui va être en fait un peu comme le
vif à la différence en fait que le show en fait il est monté sur le dôme mais il est en displanone
alors par contre le xif en fait il est enlevé du dôme c'est vraiment une, voilà il est pas présent
dans le dôme donc ça c'est vraiment un truc vraiment important on va avoir la grosse puissance
de xmodel donc qu'on va pouvoir mettre sur des inputs et avec le 2-way data binding ça passe
dans les deux sens et donc ça c'est assez rapide donc ça c'est assez facile à utiliser quoi
donc et après on va retrouver les les on va dire les les binding classiques c'est à dire
bah si on veut utiliser n'importe quel attribut en html mais par contre on veut lui mettre une
expression javascript à l'intérieur on va pouvoir le binder avec x tiré bind et là derrière on va
mettre notre notre attribut classique et par contre ça va nous renvoyer que du que du
javascript et de la même manière on a aussi toutes les toutes les directives en fait liées aux
événements donc en fait on va avoir des x tiré on qui là en fait va pouvoir nous attacher des
événements donc au scroll au clic donc en fait on vient attacher les événements alors vous allez
me dire ouais mais on pourrait faire tout ça en mode vanilla quoi pour elle faire ça fait
encore plus et c'est je suis ouais c'est sûr après en fait je pense que là ce qui est intéressant
c'est de trouver le bon équilibre en clair si on doit juste binder un bouton et mettre un
mettre un clic au bouton peut-être qu'on peut le faire en mode classique avec notre bon
document couvertis élector machin et on vient on fait un ad event machin et à listener et puis c'est
parti après en fait si on a un projet de taille peut-être intermédiaire bah ça va pouvoir nous
faciliter la vie et en fait on va gagner du temps à la rédaction et pour ceux qui sont habitués à
utiliser déjà vécu avec des prémoirs qu'en fait un petit peu plus conséquents bah alors on va
être on va pouvoir plus facilement passer sur sur alpin js et parce que c'est vachement plus c'est
j'exécute ma fonction bah dans dans ma dans ma balise script je vais déclarer ma fonction et
là je vais faire je vais déclarer ce que je veux quoi donc c'est pour ceux qui ont déjà l'habitude
de travailler sur des frameworks ça va être vachement facilitant et ça nous évite d'installer
une grosse usine à gaz bah pour rajouter un petit peu d'interaction en fait en gros si tu me fin
si ils disent que c'est le taiwin du javascript en gros ça veut dire que tu peux une fois que
tu as intégré le script dans ta page rendre dynamique des éléments sans écrire la moindre
ligne de javascript en gros quoi c'est ça un peu le principe non exactement exactement ouais par
exemple tu vois tu es le le truc le plus classique tu viens tu viens afficher en fait à mon bouton j'affiche
mon comment une page enfin tu vois une modèle par exemple excuse moi je clique sur sur un bouton
j'ai une modèle qui s'affiche bah clairement je vais faire je vais lui déclarer chaud selon
un clé valeur tu vois donc je vais chaud modèle égal false au clic bah chaud modèle est égal
trou et et après bah sur ma modèle je vais mettre une condition d'affichage il est model
fin tu vois et après bah ça va automatiquement donc oui tu peux tu peux en fait faire utiliser
ta wing sans presque pas taper presque pas à l'alpine à l'alpine excuse moi tu as raison comme
tu as raison et tu peux tu peux l'utiliser presque sans sans taper du javascript quoi tu
mets un voie tu sais ça après après n'oublions pas qu'il y a quand même plein de trucs que tu
seras obligé de faire il y a des limites évidemment une bonne compréhension de du javascript ça
est toujours à l'utilisation d'un un framework donc ça c'est ça c'est un autre truc qui est
quand on va en fait quand on va passer d'un élément à un autre bah peut-être que lors de
notre affichage de notre modèle on voudrait qu'il y ait une petite effet de transition que ça soit
pas un peu on off c'est un peu violent et vraiment vraiment trop trop rapide en fait on va pouvoir
jouer avec toutes ces transitions là et en fait bah alpine js nous donne accès à plein de transitions
qui sont un peu codées out of the box et donc bah ça nous permet d'être de faire des apparitions
beaucoup plus smooth c'est plus facile donc et une fois de plus toujours aussi customisable parce que
bah si on veut on met juste transition et après si on veut aller pousser le truc un petit peu plus
loin et bah on va avoir plein de plein de directives qui vont venir bah nous mettre des transitions de
scale de duration de de position de tout ça donc ouais tu vois tu sur la doc je vois c'est xx
chaud et après tu peux chiner en fait les les mots en fait transition point in point
ça c'est un scénario en fait en quelque sorte de défait en fait de transition à après on est
bien loin des timelines de de de jessas pas on a oui non non ça juste apparition de moda qui soit
voilà exactement faire un truc un petit peu plus fluide et enfin moi ce que je vois c'est que c'est
surtout hyper intéressant pour bah pour des petits projets où on veut on a l'habitude en fait et
peut-être c'est peut-être même là le gros intérêt c'est on a tellement l'habitude d'utiliser
des gros gros framework mais on n'a pas envie d'utiliser pour ce projet là parce que ça
en justifie en rien et bien on vient utiliser alpine on n'est pas perdu on va retrouver en
fait le même système de directive donc on va pas tellement changer notre manière de coder donc on
va rester assez productif on va pouvoir très vite mettre en place des choses sans pour autant
aller me taper à tout du javascript brut quoi donc c'est là où moi ça me semble assez intéressant
ok je vois qu'il ya des sur les directives il y en a 14 14 directives en fait si magique
properties ok et en fait il n'y a pas enfin s'il n'est pas énorme en fait il ya mais non c'est c'est
aussi pour ça qu'il est qu'il est reste simple en fait en fait il reste simple t'as l'essentiel en
gros quoi et exactement en fait c'est comme c'est comme tu prends la loi de pareto et tu dis ok
c'est quoi ton 20 80 des éléments que tu utilises dans ton dans ton gros framework en fait c'est
alpine js quoi donc ils vont pas avoir un niveau de granularité hyper avec des stores avec ok
lâche partage maintenant c'est c'est pas le but d'alpine js quoi c'est c'est vraiment des trucs
mais déjà en fait tu vas pouvoir utiliser les rêves pour aller récupérer ton ton ton
ton élément sur sur la page quoi donc bah pour ceux pour ceux qu'on l'habitude c'est d'utiliser
ça en vue bah c'est pareil après tu vas avoir pareil tu vas pouvoir écouter les rêves les rêves c'est
danser comme en comme dans un vu cible un élément c'est ça exactement en fait tu vas tu tu vas
tu vas faire x tirer rêve est égal le nom donc je sais pas par exemple modal ouais et en fait après
si tu vas pouvoir tu vas pouvoir cibler c'est ce nœud du dôme en fait avec la référence dollar rêves
et après tu vas faire point modal d'accord tu vois c'est pour ça t'évite en fait de faire un
gait élément baïaï dit ou un truc comme ça en fait tu et exactement exactement en fait c'est c'est
comme si tu mettais un pointeur et après bah tu vas récupérer cet élément là en fait le jeu de
ce de cette librairie en fait c'est de pas écrire déjà à strip en fait en fait si tu écris aucune
ligne de je vais c'est gagné en fait c'est ça bah ouais en fait c'est comme tout c'est vu que tu
utilises toujours la même chose bah autant autant utiliser un langage qui le fait directement
qui te fait gagner du temps parce que ouais tu peux faire gait élément baïaï dit ça marche tu peux
le faire bien bien sûr que ça marche bien et je dis pas le contraire par contre ce qui est sûr c'est
plus facile tu vois pour aller écouter un événement bon bah c'est quand même vachement plus facile de
faire dollar event que que justement de mettre un listener et de tout fin tu vois de de cacher
les événements donc non c'est c'est quand même vachement plus en fait c'est vachement plus fluide
plus facile quoi je vois qu'on peut chêner aussi un peu sur les événements quelques c'est quoi
c'est les stops préventes et choses comme ça aussi un peu comme vu ouais ou en fait tu tu vas
pouvoir ajouter alors je sais pas je m'en avais le plus le terme exact mais en fait par exemple
sur ton ad click en fait tu vas ce que tu vas souvent en fait ça démodifie voilà démodifier
exactement merci je cherche le mot et en fait ok et en fait tu vas tu vas pouvoir utiliser ça par
exemple un exemple typique c'est sur le ad click par exemple sur un formulaire bah souvent en fait
tu vas vouloir modifier le comportement par défaut de ton navigateur du coup tu vas faire un privé
default et en fait le modifier donc ad click point privé va te va automatiquement te rajouter
privé default ce qui fait que tu t'as pas le marqué dans ton code c'est que lui il va
automatiquement en fait faire le privé default sur sur ce clic là donc bah tu rajoutes point privé
et puis bah ça marche tout de suite donc c'est une fois de plus en fait c'est des conventions
quoi c'est des conventions et ce qui est moi je trouve plutôt bien sur alpine justement c'est
qu'ils reprennent les conventions des d'autres frémoire ce qui fait que la transition elle est
elle est hyper facile à faire et elle est pas en fait sur chaque frémoire qu'il ya un temps d'apprentissage
de son paradigme tout ça là pour ceux qui font du du angula qui viennent d'angula ou qui viennent
de vue c'est instantané c'est instantané c'est tellement plus simple en fait et et et le et le
truc c'est que bah on vient en fait on vient trouver la place entre l'intermédiaire quoi entre
l'intermédiaire de ok je fais mon projet en vue donc je mets vu partout parce que mon projet est
assez conséquent j'ai besoin d'un niveau de granularité hyper précis je vais vous voir je
veux utiliser le le lifecycle ou qui avec vraiment des des des événements où je vais pouvoir injecter
à des moments très particuliers ok très bien après j'ai un j'ai un mon autre projet où j'ai
juste une page j'ai juste une page ou deux pages bah là je vais pouvoir le faire en en html mais
je veux rajouter un petit peu d'interaction au clic où où je vais récupérer une donnée à droite
à gauche bah soit je le fais en vannia soit je le fais avec alpine et au final bah je gagne du temps à
l'utiliser avec alpine parce que comme je viens de vue c'est simple et fluide ok bon c'est je regarde
en fait j'étais en train à garder là x data et du coup tu peux ça veut dire qu'en gros x data c'est
un peu un state en fait avec des valeurs donc ça veut dire tu peux éventuellement faire un state pour
ta page complète oui je réfléchis déjà à l'utilisation du truc parce qu'en fait x data tu peux en avoir
plusieurs dans la page ou quoi c'est ça j'avais oui ouais ok mais comment il sait lui que et parce qu'il
n'y a pas de nom en fait x data égale après tu mets un objet mais du coup c'est en mets plusieurs
comment il sait lui que bien composants mais mais en fait ton composant c'est quoi un composant c'est
c'est un c'est un tag c'est un c'est un c'est une balise html dans laquelle dedans bah t'as mis du
javascript et tu l'as utilisé et bah là c'est exactement le même concept en fait c'est pareil tu
vois et donc en fait ton ton ton data il va être dans ton dans ta div dans ta div ou dans
dans ton tag et donc après bah tu si tu veux mettre ça dans ton body pourquoi pas si si si si tu
veux l'utiliser après tu as une tu as une tu as une dev tools qui est plutôt pas mal oui qui est
toujours inspiré bah qui est toujours inspiré des gros dev tools et donc bah pour vérifier en fait
quand tu quand tu dev et quand tu tu te bug il est vraiment bien fait aussi ce qui fait que tu peux
voir en fait où sont ces où sont tes data et comment elles sont accessibles et comment je peux les
utiliser d'accord donc un dev tools ok elle pince moi tu peux tu peux le retrouver tu peux le retrouver
à l'étendement ouais ouais tout simplement ils ont ils ont ils ont vraiment tout les kits
permet ils sont ça bouge beaucoup quand même ouais ils ils finent ce qu'en quand je dis que ça
bouge beaucoup il fixe des bugs il rajoute des des nouvelles des des nouvelles fonctionnalités et
ils sont sur une roadmap qui est assez assez sympa où ils veulent rajouter justement des
des des directives pour bah venir venir étendre en fait le frein le framework moi le le truc qui est
sympa c'est moi je suis assez fan de ça c'est clique au et clique point au et en fait c'est par
exemple on utilise ça pas mal sur les sliders des des menus c'est les droits à droite ou à gauche
là quand tu as un truc qui slide en fait quand tu cliques en dehors de cet élément alors ça vient
cacher le le le droire tu vois et bah ça en fait c'est une c'est une custom directive et en
fait bah il serait plutôt d'avis de l'intégrer et et peut-être changer de nom tu vois enfin c'est
du coup ça bouge ça vaut vraiment le coup d'essayer je trouve parce que c'est assez léger c'est
facile à prendre en main une fois de plus si on a fait si on a déjà fait du vu une fois de plus
on vient pas réinventer la roue et l'idée c'est pas d'utiliser un nouveau framework de créer un
nouveau framework mais pour moi il y a une vraie utilité et une un vrai positionnement entre le
gros qui est qui réacte ou vu angulaire et le truc vania js où je fais tout à la main et
bah là il y a vraiment une place intermédiaire ok ok bah du coup ouais après c'est alors toujours
la question tu l'as dit au début mais est ce que je me lance dedans est ce que le truc est robuste
est ce que c'est pas un petit projet dans un coin mais oui tu l'as dit au début il y a 12000 stars
bon après c'est un indicateur comme un autre mais je vois que c'est quand même donc ils sont à la
version 2.8 aujourd'hui qui est sortie à deux jours d'ailleurs et tu me parles de version 3 donc c'est
déjà un projet qui existe depuis un petit moment quand même ouais alors j'ai pas réussi à trouver
l'historique exact ouais j'ai pas tu vois il y a 70 relises donc ça c'est bien mais enfin dans 71
mais j'ai pas trouvé la jeunesse du projet j'ai cherché j'ai pas j'ai pas trouvé après je pense
qu'ils ont ils ont gagné vraiment de la notoriété je pense avec quand en fait taïwine est venue parler
de ce projet là et ils ont commencé à l'utiliser chez eux ouais c'est ça je pense je pense que
alpine a fait sa croissance sur le dos de taïwine qui a littéralement explosé quoi sur sur les deux
dernières années donc je pense que ouais alpine doit sa croissance c'est clair qu'on entendait
en en fin je ne connaissais pas du tout alpine js depuis j'ai entendu parler depuis quelques mois
ouais je crois que t'as raison c'est vraiment taïwine qui a fait la notoriété d'alpine
c'est clair ils ont fait leur croissance sur taïwine parce que les enfants la version 3 bientôt
et tu en découvres à peine le la librairie donc c'est quand même assez dingue ouais après je pense
que c'est c'est pas parce que c'est taïwine que c'est bien tu vois mais je pense que ça répond à un
vrai problème de classe intermédiaire quoi tu vois et mais pour le coup c'est super agréable de faire
un caroussel en 10 minutes quoi ça non je suis en train de remonter les tags de version je pense
je n'en ai pas un petit moment non non mais je pense que il est ouais il est enfin je pense que
il a toute sa place en fait j'ai entendu j'ai entendu pas mal de gens parler de d'alpine js et qui
le combo parfait entre guillemets c'est souvent j'entends parler d'eleventy de taïwine et d'alpine
js en fait les trois les trois outils voilà qui permettent vraiment de faire du statique hyper
light et j'entends souvent ces trois outils ensemble en fait et ça serait ça serait la petite
stack ultra light quand tu veux faire un site statique hyper simple hyper rapide hyper performant
bah ça semble être la stack idéale en fait d'accord mais pour le coup j'ai pas j'ai pas
bossé sur les trois en même temps c'est intéressant de checker un autre bon point aussi alors
tout est sur tout est sur github on mettra le lien évidemment sur la description par contre il ya
une documentation qui a été traduite en français et ouais ouais ouais justement j'allais dire il n'y
pas de voilà doc et c'est sûr j'allais parler de la doc alors la pas le rythmie du github il est
complet il ya tout il est expliqué je trouvais ça un peu le light quand même comme même si en même
temps il fait ça suffit pour ce qu'il fait ouais mais elle était pas indiquée voilà doc en français
sur le et en fait t'as le rythmie point fr point md qui qui en fait bah où tout est en français et
donc on sait on sait que bah c'est toujours plus facile et plus sympa de lire une doc et et sur
après la majorité est en anglais mais c'est toujours agréable d'avoir une doc en français
qui a été traduite et donc ça vient encore encore limiter la barrière à l'entrée quoi donc pour le
coup c'est plutôt alors j'ai remonté j'ai réussi à revenir au premier tag donc donc c'est une
bibliothèque qui a un an seulement en fait puisque la v0 point 1 point 0 date du 28 novembre 2019
voilà ouah donc donc en moins d'un an ils ont 12 000 stars et ok bah c'est pas mal c'est pas mal
donc je pense je pense que taille ils peuvent dire un grand merci à taïouine c'est clair même si je
je crois que taïouine en fait taïouine maintenant ils ont un projet de taïouine labs où ils viennent
ils dédient de la tune sur des projets à tout et donc je pense que ça fait partie de la
une de deux ouais ouais de leurs projets qui sont sur lesquels ils sponsorisent pour justement
développer bah tout leur tout leur écosystème et donc ça fait un peu et je pense que alpine fait
partie largement de leur écosystème ok donc c'est bon nous c'est bien ça nous crée ça nous
donne en fait des nouvelles librairies des nouvelles possibilités et d'avoir le bon outil
en fait pour le bon projet et ça c'est peut-être le plus important sans rentrer dans le côté dogme
de de vues de réacte de machin ouais de de de info machin et où personne ne se parle et tout
monde est convaincu et tout enfin là on est limite sur de la religion et du dogme en fait plus on
a d'outils et plus on peut choisir et c'est peut-être ça le plus intéressant en fait de choisir
l'outil le mieux calibré à notre projet quoi ouais bah moi ce qui moi ce qui me plaît enfin on a
déjà parlé on a parlé justement de podcast ce qui me plaît en fait c'est alors j'ai évoqué on
évoqué juste avant le javascript fatigue puisque cette semaine je me suis un petit peu embêté avec du
tout ligne javascript pour les compilations machin des problèmes de version ou et tout et quand
je vois alpine js là qui qui est tout simple en fait que t'inclues simplement dans la page tu fais des
trucs interactifs en deux secondes bah ouais ça fait du bien aussi je pense des fois de ne pas passer
deux heures sur la compilation sur le paquette je pense des zones ou des trucs comme ça et juste de
coder en fait exactement ça fait du bien et enfin moi j'ai tout je pense qu'on a toujours été sur
sur double slash de la développeur expérience elle est tellement importante elle est tellement
importante c'est super important de faire un truc fluide facile pour nous et que ça nous amène
ouais que ça facilite la vie quoi ça nous facilite la vie et je pense que alpine répond vraiment
à ça quoi donc ok donc pour résumer il faut l'essayer il faut l'essayer alors résumons
alpine js donc donc ce que j'ai compris c'est une librairie light donc neuf cas moins de neuf cas
qui logter je l'include dans la page et ça me permet en deux secondes de faire des éléments
interactifs donc ça va être des tables des des modales des choses comme ça en fait même des
formuleurs j'imagine que toutes les choses toutes les choses que tu vas rendre interactif dans une
page web classique html donc voilà et tout ça sans écrire quasiment de javascript j'écris
quasiment pas de javascript je mets des directives dans mes tags html ce qui les rend interactif
en fait en gros avec un langage assez simple des clics des rêves des data et puis voilà quoi en
gros c'est ça pour résumer alpine en fait c'est c'est vrai c'est vraiment ça c'est une version
c'est un framework light qui prend en fait le 20 80 de tous les gros frameworks et qu'il met
dans un truc tout petit condensé et et utilisable out of the box ok donc léger simple et fonctionnel
exactement et pour le coup je pense que même faire une toute petite page et jouer avec des
des clics des des trucs ultra simple ou faire un carousel en deux deux on peut le faire sur
avec avec alpine et pareil sur le sur sur la doc en fait il ya un ripot qui s'appelle osom alpine
comme derrière en fait vous avez voilà voilà le fameux osom et en fait bah vous allez avoir
bah tous les projets il ya beaucoup d'exemples il ya beaucoup de ouais de de showcase où voilà
on va pouvoir voir comment ils ont fait ça et ils font des trucs super chadés en très peu de
ligne de code sans développer une usine à gaz et ça c'est plutôt pas mal ok bon bah nickel
j'ai envie de dire il ya quoi moi c'est ouais exactement moi j'ai pas grand chose à dire de
plus sur sur ta wing si ce n'est de l'essayer quoi mais c'est ça qui est qui est bien aussi dans
c'est alpine toujours tu parles tu mélanges les deux mais c'est je pense qu'il faut mélanger
les deux en fait d'un côté non mais c'est tout se résume comme ça en fait c'est qu'il est tellement
simple que en fait l'essentiel est là et qu'il n'y a pas besoin d'en parler pendant deux heures en
exactement ok donc on mettra ouais donc on mettra tous les liens de façon on mettra le lien du
github plus les liens de au son alpine tout ça et pareil il ya un super article d'un blogueur français
qui a vraiment fait un truc hyper développé on mettra aussi le lien parce qu'il mérite il mérite la
publique quand même donc c'est quoi c'est pixand joy ouais je crois ok on mettra la note
pixandjoy.com il ya une article sur alpine.js très conséquent absolument ok bah super donc
bah parfait parfait on veut vous dire à bientôt pour un nouveau grand merci à tous d'être restés
jusqu'au bout et n'hésitez pas à partager le podcast à vos potes partager mettez des petits
stars des petits likes ça fait toujours plaisir yes à bientôt un grand merci à vous ciao ciao

Les infos glanées

Je suis une fonctionnalité encore en dévelopement

Signaler une erreur

DoubleSlashPodcast

Double Slash, un podcast sur le développement web. Retrouvez-nous régulièrement pour parler de sujets variés tels que la JAMStack, l’accessibilité, l’écoconception, React.js, Vue.js, Next.js, Nuxt.js, le CSS et des retours d’expériences sur des implémentations.
Tags
Card title

Lien du podcast

[{'term': 'Technology', 'label': None, 'scheme': None}, {'term': 'Technology', 'label': None, 'scheme': 'http://www.itunes.com/'}]

Go somewhere