Subscribe
Share
Share
Embed
Dans cet épisode, Baptiste et Paul explorent les nouvelles capacités d'Astro depuis les versions majeures 3 et 4, en discutant notamment de la nouvelle API des View Transitions et du support des Single-Page Applications (SPA).
Creators & Guests
What is Parlons Dev?
Dans Parlons Dev, Paul Rastoin et Baptiste Devessier explorent le monde du développement, du web et de la tech, et parlent des sujets qui les intéressent sur le moment.
Baptiste: [00:00:00] bonjour à tous. Nous nous retrouvons dans un nouvel épisode Parlons d'Eve dans lequel aujourd'hui nous allons parler d'astro principalement. Je suis Baptiste de WS, je suis accompagné de de Paul Rastoin. Nous sommes tous les deux développeurs web et je crois que nous aimons tous les deux cet outil qui est Astro.
Donc nous allons en parler amoureusement. Salut
Paul: Baptiste Salut, Parlons d'elle pour ce petit rendez-vous où aujourd'hui donc, comme l'a dit Baptiste, on va discuter Astro. c'est un peu de toute façon c'est vrai par reviens parler
Baptiste: parce que il y a à la fois astro, l'outil, mais aussi comme on le déploie quoi?
C'est effectivement la est-ce que tu peux nous rappeler ce que c'est Paul
Paul: c'est comment rendre à tous ces sites statiques dans des c d N principalement? C'est vraiment euh vulgarisé hein? Et chacun de ces sites à sa manière de se builder et de miner son code par la suite. Mais l'idée c'est ça, hein?
C'est de rendre des pages à la [00:01:00] volée Euh sans parler de SPA mais même d'ailleurs voilà, on pourra parler par la suite de de de cette nouvelle nouvelle technologie que propose maintenant Astro avec plus ou moins un semblant de s PS et je ne suis même pas je ne suis pas sûr qu'on puisse parler de SP.
Je ne sais pas si le terme est
Baptiste: approprié. Ouais c'est vrai que jusque là Astro était surtout destiné à faire des des sites avec du contenu très statique. Euh astro était principalement fait pour des des sites avec que du contenu. Euh c'était pas fait pour faire un par exemple. Mais c'est vrai que avec de nouvelles fonctionnalités qui ont été ajoutées récemment, plus plus d'usage s'ouvre aux développeurs.
Astro effectivement Et donc tu parlais de de SPA? Pour ceux qui ne sauraient pas ce qu'est une spa, une SPA, c'est un site rendu intégralement côté client. Single, page, application ou grosso modo l'utilisateur arrive sur une page. Souvent c'est index html Pour [00:02:00] ceux qui ont regardé de la doc concernant ça et cette page va ensuite laisser la main au javascript qui aura été écrit par les développeurs pour euh construire tout le contenu de la page.
Le HEADER les paragraphes intégralement javascript avec des comme réac comme vu et astro au contraire des SPA utilisait plutôt une une une technologie que certains ont nommé age application qui est le fait d'avoir plusieurs points d'entrée à la place de juste un nombre d'expos HT m l et de laisser le serveur construire le HT m l de ces pages là donc
Paul: le serveur ou enfin quel quelconque quoi?
Enfin je sais pas, on parlait aussi de c'est pas forcément du c'est ouais ouais mais euh d'ailleurs le le l'exemple de l'index HT m l est assez parlant en règle générale pour tous ceux qui ont vu et ouvert des des de bulles de peu importe bah il y a toujours un seul fichier HT [00:03:00] M l d'ailleurs si vous tenez euh au moins injecter vous-même manuellement des verres d'environnement.
Bon, ce qui est plus trop fait maintenant, il y a pas mal d'outils matiques pour le faire dans chacun des C'était là que que venaient s'intégrer ces trucs là dans des balises spécifiques de de chargement, de script dans le C'est un ancien hein? C'est un peu pourquoi pas ou même pas d'ailleurs en vrai ça peut, ça peut, ça peut le faire si
Baptiste: tu veux dire bien comprendre que il y a des outils qui venaient modifier le le fichier index point HT M l.
Pour injecter les d'environnement.
Paul: pas pas pas réellement. En réalité, ce que je voulais dire ici, c'est que par exemple, imaginons dans ton site angulaire ou tu as toujours dans ton public le index HT M L dans lequel tu peux ajouter par exemple des liens pour télécharger des fontes euh des contenus euh par exemple du C N du de J S divry des trucs comme ça pardon et ça en gros c'est vraiment le point d'entrée dans ton application où d'ailleurs tu pourras toujours trouver ta ton avec son pour du où va être toute la logique métier le et cetera mais aussi euh d'ailleurs, [00:04:00] et on sous-estime assez souvent parce que les hyperliens existent euh même sur des SPA c'est-à-dire que le routeur saura retrouver une vue spécifique sur un lien donné, même si la point d'entrée est la même quoi.
Mais il va quand même passer par le par là. J'entends que si tu envoies ton site, tu vas arriver sur le profil de du et cetera, même si c'est une, mais ça passera que c'est le routeur qui va gérer. Ça écoute bien la différence d'ailleurs de gérer des routeurs par at Euh pardon de gérer des vues par le routeur et non par des comme on peut souvent voir dans des projets web au début où le routeur n'est pas du tout utilisé, il s'agit vraiment d'un état.
euh qui peut qui disparaît lors dans
Baptiste: les quoi? Pour donner un exemple, par exemple, on a souvent vu des sites avec un, un formulaire wizard, un formulaire avec plusieurs étapes et certaines personnes. Certains développeurs intégraient donc l'étape en cours. L'étape une deux trois dans une variable, que ce soit du réac ou avec un ou du quoique S, [00:05:00] plutôt que de mettre ça en L U R L.
et euh bon c'est vraiment un exemple parmi tant d'autres mais le le fait de mettre ça dans le ne permet pas ensuite quand on prend l'U R L et qu'on la copie colle ailleurs de de retourner précisément sur cette page quoi. après c'est pas
Paul: parce que tu le stockes pas forcément dans l U R L mais tu peux avoir des des sauvegardes en base de de de ton formulaire en brouillon.
Ça dépend de la complexité de ton ton, hein mais dans des cas très précis ou je sais pas le truc a par exemple. Enfin par exemple une commande Amazon, j'en sais rien, tu vois c'est c'est des qui sont qui sont enregistrés par exemple dans le cas d'un ça peut ça peut être ça peut s'adapter aussi, mais sur des très
Baptiste: courts.
Oui je suis d'accord, c'est vrai. Donc le regarder du c'est, c'est pas un très bon exemple parce que c'est c'est un flot et t'as plein de choses qui sont stockées que côté donc euh oui c'est ça l'idée Donc tu
Paul: t'es en réalité l'état de ton, tu le retrouves côté serveur, ça a vraiment côté du lien. Mais euh mais après tu veux pouvoir peut tard peut-être partager des étapes spécifiques de ton oui oui pour faire de la de [00:06:00] données euh si t'as besoin de plusieurs testeurs ou j'en sais rien, oui c'est utile.
Baptiste: bon en tout cas beaucoup de développeurs, c'est des choses que personnellement j'ai aussi vu et je recommandais de ne pas faire stocker donc tout ça dans le plutôt que dans le ah oui donc oui donc l'uu R L c'est une fonctionnalité des SPA d M P a Euh il y a beaucoup de travail qui doit être fait par le routeur des SPA pour pouvoir intégrer l'aspect U R L Comme tu le disais Paul, il faut stocker enfin quand t'arrives sur une SPA euh il faut qu'elle détermine quel est le point d'entrée en fonction de LR K t P.
Parce que il n'y a qu'un seul fichier d'entrée dans X HT M L qui a chargé du jpt pareil pour toutes les pages Et euh la question se pose comment le routeur va être en mesure de faire ça et dans le cas précis d'astro Euh comme tu le disais Paul, un nouveau mode type SPA a été intégré et il se base sur une fonctionnalité que je trouve très intéressante, qui s'appelle les je ne sais pas [00:07:00] si t'en as déjà entendu parler Paul bah du coup oui
Paul: deux par
Baptiste: toi en effet.
Donc pour parler brièvement de de ça, les sont une fonctionnalité ajoutée dans les navigateurs actuellement c'est implémenté dans dans chrome euh et donc les permettent de laisser le navigateur gérer des transitions complexes d'un état à l'autre. Donc si par exemple je je passe d'une page A à une page B, je peux dire au navigateur.
Voilà une fonction qui va mettre à jour le dôme, donc passer de la page A à la page B. Génère moi une transition automatiquement entre la page A et la page B, le navigateur. Ce qu'il va faire, c'est qu'il va prendre un shot de la page A. Ensuite il fait la modification du dôme. il prend un autre shot et avant d'afficher la modification de la page B, il va appliquer une transition entre la page A et [00:08:00] la page B.
Donc ça peut être du fading. euh avoir un vrai de la page A à la page B des choses comme ça et euh
Paul: et c'est tu décris cette transition ou cette par rapport à des animations? C s S c'est que ça se transcrit comment c'est c'est du
Baptiste: C S S que t'écris effectivement
Paul: d'accord Euh donc c'est vraiment euh clairement modulable quoi?
Tu peux vraiment faire ta propre tambouille?
Baptiste: Exactement et c'est tout à fait modulable. Il y a énormément de choses qui peuvent être configurées tu peux configurer via du C S S. euh juste l'ancienne page ou juste la nouvelle, tu peux les avec vraiment L I C S S Tu peux aussi target l'entièreté du groupe qui va faire la transition, c'est c'est un peu spécifique.
Euh
Paul: et l'entité du cours, c'est à dire qu'imaginé dans une dans un site classique avec un barre en haut est-ce que tu peux faire seulement transitionner le contenu. ton truc, par exemple du Imaginons que tu es sur une tu passes d'un objet A à un objet B seulement le titre. Les images [00:09:00] changent le tout le reste du squelette, la structure globale de ton site change pas est-ce que tu peux faire l'image.
Enfin, peu importe le la finalité a il y a ça c'est beau ou pas beau est-ce que c'est est-ce que c'est possible de faire muter seulement ce une partie spécifique de ton
Baptiste: alors il y a deux choses à distinguer. Il y a l'implémentation de d'astro dont on va parler un peu plus tard d'accord. Et il y a l'API en elle-même implémentée par le navigateur d'accord qui elle-même permet de faire n'importe quoi c'est-à-dire que sur une même page.
Je ne sais pas si tu cliques sur un bouton, tu peux t'en servir pour créer une animation directement sur cette page. plutôt que d une vraie animation entre deux pages. Sauf que dans le cas d'astro euh Astro euh a choisi de donner un vrai support euh important pour la transition entre les pages et enfin avec ça tu vas pas forcément faire des des transitions qui soient.
Enfin [00:10:00] beaucoup trop quoi tu vas pas t'es pas obligé de faire des transitions qui soient. qui soit. Tu peux très bien faire une petite transition par défaut. La transition appliquée par Astro est une transition de de donc la page B et la page A. Euh, il n'y a pas de d'animation de mais la page B va venir remplacer la page A et tous les éléments qui ne qui ne sont pas les mêmes.
Par exemple, je ne sais pas si le le le contenu de la page en lui-même si si le et le restent les mêmes il n'y a pas d'animation mais toutes les parties qui sont différentes vont venir faire un un effet de par exemple d'accord mais
Paul: du coup les quel est quel était le support qui a été développé pour euh par astro pour ça c'est-à-dire que dans leur euh sucre syntaxique.
Même si j'aime pas ce mot, ils permettent via des balises spécifiques dans le c'est le je sais plus comment dans le haut de ton fichier là euh où tu peux dire bah voilà, c'est c'est si je viens à tel endroit je transition je transition pas
Baptiste: [00:11:00] avec astro Euh pour mettre ça en pratique il faut que tu importes Un composant qui s'appelle ce composant est exporté par des par des modules internes d'astro et tu peux les rendre dans la balise de Tess Pages et ça va activer les pour cette page là.
Dans le cas où tu veux les avoir sur toute la page, t'auras sûrement un composant. Euh je ne sais pas qui sera utilisé par toutes tes pages et qui viendront par conséquent rendre sur chacune d'entre elles et tu peux appliquer
Paul: une transition euh sur une origine spécifique seulement. ou c'est vraiment chaque peu importe d'où tu viens dans ton site, sur telle page, il y aura une vue
Baptiste: tu peux, tu peux le configurer.
Tu peux dire que pour la page X euh tu veux telle transition? Tout est tout est configurable Euh
Paul: c'est c'est je me suis mal exprimé, je veux dire imaginons que je veux faire une transition si le vient de la page [00:12:00] B Oui mais je veux pas que il y ait de vue transition si le vient de la page B euh de la page A pardon oui.
tu peux est-ce que tu peux dynamiquement dire non, je ne veux pas de ici.
Baptiste: Si tu ne veux pas de vieux transition du tout, tu peux juste ne pas rendre le composant. Vieux transition. À noter que le composant que tu rends dans ton ne fait pas que je me
Paul: suis Euh j'ai mal répondu Non, non non, non c'est moi. Ma question n'est pas pertinente dans le dans le contexte d'astro.
En réalité,
Baptiste: voilà ce qu'il faut noter avec le composant. c'est qu'il active deux choses. Il active cette transition entre les pages mais il active aussi le mode SPA et le mode SPA fait que quand tu cliques sur un lien dans ton site astro, il y a plus ce rechargement de pages qui était si caractéristique.
Et euh ça pour tout
Paul: le site, toutes les pages si si, j'ai une seule page qui consomme les transitions. Tout mon site est enfin la globalité de mon site est active
Baptiste: alors euh ça. Si tu veux activer les sur l'intégralité de ton site, il faut que tu le mettes [00:13:00] dans toutes les balises de tes pages. Mais effectivement, tu peux te Je pense que si l'utilisateur arrive sur la page B et que c'est uniquement sur la page B que t'as les vieux comme ce que ce truc là fait, c'est ajouter du javascript à ta page Euh peut-être que le routeur de SPA que astro apporte sera actif surtout.
Mais l'idée c'est d'accord l'acti de l'activer pour toutes tes
Paul: pages de toute façon ouais, ça ne ferait pas de sens d'avoir une route spécifique qui ne recharge pas entre guillemets. Toutes les autres qui rechargent dans
Baptiste: ce cas possible, c'est en tout cas c'est possible. Euh ça se ça se fait avec la pays d'astro Euh après d'accord j'ai pas de de en tête mais c'est possible ok?
voilà
Paul: d'accord mais donc c'est astro qui permet de de de le rechargement de la page ou c'est vraiment les qui le
Baptiste: font comme on le disait au début de notre conversation il faut que pour gérer une SPA t'es un routeur qui prenne la main sur les API du [00:14:00] navigateur donc l'api qui permet de contrôler l'historique et astro a implémenté donc un routeur pour ce mode SPA d'accord qui qui fait ça?
les c'est un peu le nom générique qu'ils ont donné à la à l'intégralité de la fonctionnalité, parce qu'en réalité il fait deux choses. Il y a ce mode SPA, mais il y a aussi le fait que tu puisses avoir des transitions directement entre tes pages, ce qui n'était pas possible jusque là. Mais en réalité,
Paul: du coup, si j'ai bien compris euh ou nativement les n'ont pas réellement de rapport avec la route actuelle,
Baptiste: c'est
Paul: c'est tout à fait ça.
En fait ce sont des transitions C S S de D à DOM
Baptiste: c'est c'est ça la d'accord la P de que tu utilises en javascript c'est euh tu fais pour un et cette cette fonction, tu lui passes une autre fonction, un dans lequel tu vas venir mettre à jour ton donc je ne sais pas d'accord, modifier l'emplacement de de ton image ou ce genre de [00:15:00] chose ou dans le cas de D'astro venir récupérer la page la page suivante et modifier le pour y appliquer le la nouvelle page c'est comme ça que ça marche, c'est vraiment modification du dôme dans la fonction et derrière c'est le navigateur en fonction du C S S que t'as défini Qui va venir faire cette cette transition automatique entre les deux états?
Mais ça n'a pas de lien direct avec les pages. Tu peux très bien utiliser les dans une page astro sans que tu en charges une autre quoi
Paul: d'accord d'accord? d'accord cool mais du coup le routeur Astro vient la prochaine page. Euh lorsque tu cliques mais il ne fait pas de redirection, juste il t'affiche, il vient mettre à jour ton ta page actuelle mais du coup aussi ton U R L.
Sans faire de rechargement en réalité, c'est en fait il vient muter le
Baptiste: document, c'est c'est tout à fait ça. Ah et c'est C'est d'ailleurs un sujet qui est assez intéressant parce que euh le enfin l'écosystème javascript [00:16:00] jusque là euh prenez beaucoup les solutions J S euh donc je sais pas le routeur enfin next J S N tout ça viennent avec un routeur euh javascript qui réimplantent la navigation du navigateur alors que le navigateur a toujours su faire ça.
Naviguons entre des pages avec une balise A et euh ce qui est assez intéressant c'est que même les P H P côté ont toujours voulu. permettre aussi d'avoir une navigation qui ne nécessite pas de rafraîchissement ou de formulaire qui puisse être envoyé sans que la page recharge ce genre de choses et donc les avec.
Avec la Ravel, des solutions ont été créées pour éviter ça, mais intégrées dans le PHP dans le Ruby et on a par exemple des outils dans comme qui qui permettent de faire ça depuis depuis [00:17:00] longtemps. Et ce qui est intéressant, c'est que Astro réimprimé la même chose avec un disque dans l'écosystème Javascript.
Donc comme tu le dis, ce que ça fait c'est que quand tu cliques sur un lien, ça va récupérer le contenu de la page suivante, donc ça fait une requête. H DT P. donc si tu sers ton site via un C D N ça va récupérer la page du C D n. Sinon si tu utilises un serveur avec du serveur, tu vas effectivement recut la prochaine page côté serveur.
Donc je ne sais pas s'il y a l'authentification tout ça ce sera géré côté serveur. Euh ouais ouais et euh ensuite une fois que t'as le HT M L. Tu modifies le pour inclure le contenu de la nouvelle plage donc tu remplaces le contenu dans l'ancienne page par le nouveau. Et si t'as aussi des choses dans le qui ont changé, le routeur d'astro va par exemple ajouter du style si dans la page B t'avais du du style en plus je ne sais pas du ça [00:18:00] pose pas de problème au navigateur de de muter le alors directement, ça ne pose pas de problème.
Mais disons qu'il ne faut pas retirer des choses qui étaient présentes ou des choses comme ça.
Paul: Et du coup, si tu retranscris dans ce cas là, ça
Baptiste: va quand même la page à nouveau. de ce que de ce que j'ai pu voir. Euh donc si tu vas à un bac ça ne va pas choper la page précédente dans le cash ça va refaire une requête sur sur ton serveur sur ton c D N pour récupérer cette page là comme elle est de ce que j'ai compris peut-être changer depuis que j'ai regardé le code le code
Paul: source mais ouais de toute façon c'est des c'est des des des cas très spécifiques mais c'est sûr que enfin instinctivement c'est c'est bizarre de se dire que le but oui euh, tel quel quoi, il y avait des outils je je sais plus si tu confonds avec I s t je crois qui permettait de faire ça?
Euh je me rappelle, j'avais utilisé un truc comme ça [00:19:00] avec non M je crois. J'avais utilisé ça pour euh du Facebook pixel dynamique ou un truc comme ça, je ne sais plus franchement c'est très très vieux, mais en gros il fallait faire des mutations du comme ça, mais c'était pas c'était pas quelque chose de, de natif et de d'instinctif pour le pour le pour l'élément quoi Oui, il faut que ça soit assez stable.
Baptiste: d'accord. Déjà, ce que tu peux modifier c'est le titre de ta page. Euh tu modifies ça en javascript, tu peux aussi modifier. Euh après si c'est des questions, un peu plus de d'images tu sais pour les réseaux sociaux, pour Twitter, pour Facebook tout ça Euh là pour le coup euh Enfin quand tu postes ton ton quand tu postes ton article sur sur Facebook, ça va juste récupérer le premier ça fait pas de navigation astic historique quoi!
Mais en tout cas ces outils prennent en charge la modification du que ce soit ajout du style ou même insertion de de nouveaux script, des choses comme ça donc euh
Paul: donc voilà, c'est vachement cool ça c'était un voilà quand je [00:20:00] parlais de astro avec certains certaines personnes on va dire euh avec des amis euh souvent était rétorqué le fait que bah ce était très désagréable et faisait faisait P H P.
Et c'est vrai que P H P. Enfin, moi, j'aime beaucoup. Enfin rien contre la techno, mais c'est assez symptomatique. Chez P H P. Les gens n'aiment pas P H P et du coup n'aiment pas ce que fait P H P et P H P. Fait recharger les pages, donc les gens disent non. P H P. C'est mal. Recharger les pages, c'est mal. Bon bah c'est pas forcément vrai et du coup là, on a les les deux et deux revers de la médaille, j'ai envie de dire, c'est à dire qu'on a le l'avantage de de d'un rendu statique de ce que peut faire Astro tout avec une fluidité dans les différents utilisateurs.
Ça va pas le perturber Voilà d'ailleurs je ne sais pas pourquoi j'y pense comme ça, mais un site qui m'a enfin c'est vrai que c'est assez rare de trouver des sites qui ont des maintenant je trouve. Euh enfin après sur des gros réseaux sociaux non j'en vois pas souvent. Euh c'est des routeurs. euh, mais il y a un gros site que que sur lequel j'avais itéré, c'est carte [00:21:00] market.
C'est un site de revente de de carte T C G. Enfin de je sors un peu du Scop mais de la collectionner qui lui est entièrement. Alors je ne peux pas regarder en quoi il était fait mais peu importe quand t'appliques un filtre. Euh il y en a beaucoup, ça recharge la page et c'est vrai que c'est assez. Ça peut être parfois un peu un peu rustre si t'as pas trop l'habitude, mais faudrait il faudrait un peu pousser à savoir comment ils font ça, parce que c'est vrai qu'il y a d'énormes volumes et beaucoup de choses sur ce site.
Ouais je te je te l'enverrai si tu veux jeter un oeil avec ton là je pense que c'est du P H P Enfin bon, ça c'était pour les SPA et les vitres. Transition du coup. Et les je sais enfin sans sans trop tarder non plus dessus. Parce que le prince le but c'est quand même de parler d'astro mais est-ce que ça, ça commence à euh euh résulter en d'autres outils que t'as pu voir sur d'autres précisément
Baptiste: Euh déjà beaucoup de méta comme Astro ou intégrer les trans assez rapidement d'accord, Slit a intégré aussi les [00:22:00] pour le changement de page.
Parce que ce que les outils de enfin ce que les méta ont à faire grosso modo, c'est juste faire ça pour le changement de page. Parce qu'après, c'est aux développeurs de de d'en faire ce qu'ils veulent de cet outil. Ouais, c'est vraiment un outil agnostique. De toute façon de s'en servir, tu peux t'en servir pour n'importe quoi.
Par exemple, un usage que j'ai vu sur Twitter. Euh, quand tu quand tu envoies un formulaire, le formulaire à un bouton, donc le bouton de. Et en termes de design, j'ai déjà vu que ce bouton pouvait changer de changer de forme, donc passer par exemple de ensuite ensuite à et un usage des transition, peut être de gérer la transition entre ces États avec le pays du navigateur.
Paul: Et euh, j'ai du mal à voir exactement comment Target un élément [00:23:00] spécifique de ton Dom dans dans le secteur de de du En gros, ma crainte, c'est ma crainte, ma préoccupation. Si je venais à utiliser cette fonction là, c'est le meilleur qui va reconstruire entièrement toute ma page. mais en fait même si techniquement même si tu lui donnais un sélecteur ouais enfin de toute façon le truc est donc à mon avis c'est optimisé.
Tu
Baptiste: en fait tu lui donnes pas de sélecteur Euh ce que tu donnes au navigateur? Euh c'est une fonction qui va modifier le D donc le navigateur d'accord
Paul: très bien d'accord
Baptiste: ok j'avais pas bien compris Ouais ok donc que tu sois avec réac ou avec vue euh il faut que tu trouves un moyen de dire Voilà, cette fonction va modifier le le dôme, donc le vrai contenu de la page que le négateur connaît auquel il a accès.
Donc cette fonction, ça peut être je ne sais pas une fonction de rendu alors je précisément je ne sais pas comment ça peut s'intégrer avec réac ou avec vue et dans des plus Losc. Ah je vois bien ou si tu dois appeler une [00:24:00] fonction je ne sais pas pour rendre toi-même ta page quand il y a des choses qui enfin des choses qui ont changé Euh et ben ça peut appeler cette cette fonction là Euh pour modifier avec du style avec une animation en plus quoi
Paul: parce que du coup on est d'accord c'est un le ça va être un qui va avoir un impact sur le D c'est pas forcément quelque chose qui va venir à window ou je ne sais pas quoi c'est ça c'est imaginons un cette enfin cette qui vient modifier la valeur de de mon mouton, de son statut quoi!
Mais du coup je vois pas la différence entre une transition C S S classique sur euh d'un élément spécifique. Après je pense que sur par exemple, dans le cas d'un mouton, je vois pas où où serait la plus value d'utiliser le lieu de transition plutôt que d'avoir des des transitions entre sur sur cet élément précisément mais sur son style
Baptiste: alors déjà euh, pour parler de la façon dont la transition est et exécuté.
Euh c'est enfin dans le [00:25:00] colback que tu passes à à tu vas pas forcément lui lui passer un ce qu'il faut lui passer Euh c'est une fonction qui va faire vraiment la modification dans le DOM. Donc avec ce serait plus un ou des choses comme ça qui t'assure que de manière synchrone tu refais un rendu de ta page et une fois que la fonction est terminée Euh t'es certain que le DOM a changé comme ça, ça va faire une sur sur l'état du DOM avant et après.
Et euh, venir faire l'animation que que t'as déclaré d'accord
Paul: ok ok ok c'est c'est c'est pas vrai en fait c'est pas c'est vraiment pas quelque chose qui va déclencher sa défaite. C'est vraiment une, c'est presque du c'est du c'est à dire à l'instant t à la fin j'aurais j'aurais un un DOM avec euh
Baptiste: c'est ça bac plus un quoi?
Tu fais vraiment l'amif de ton de ton dedans Et euh, une fois que la fonction est terminée, euh ça déclenche
Paul: la transition, c'est la transition effectivement [00:26:00] d'accord. Du coup, il faut quand même réussir à synchroniser le de ton avec le Ouais, c'est intéressant. Moi je jette un oeil ici à voir ce qui se fait parce que c'est en réalité je ne pensais pas.
Euh je pensais que c'était je ne pensais pas qu' astro euh apportait autant dans son utilisation des transition euh sur par exemple typiquement sur le le des redirections dans son routeur donc c'est c'est intéressant de voir dans quel domaine tu peux appliquer l'utilisation du transition en dehors de Du coup la plus-value qu'a trouvé Astro qui est largement qui est top hein?
C'est vraiment une très très bonne idée Et c'est vrai que dans un cadre plus bah déjà dans une SPA déjà existante, comment utiliser les oui c'est c'est c'est un sujet intéressant.
Baptiste: après. Euh à voir si c'est pertinent parce que comme tu le dis tu peux aussi appliquer des transitions C s s classiques C'est pour ça que le bouton ça se fait aussi.
Mais
Paul: euh j'ai ouais, je sais pas ce que je tout de suite je vois du dans une dans le d'une transition. Je commence à avoir peur un peu toujours dans le respect des technologies, hein.
Baptiste: Mais oui [00:27:00] bon, il faut voir comment ça s'intègre avec les outils qu'on a l'habitude d'utiliser. Oui, tout à fait tout à fait.
carrément Mais euh hop, par rapport à ce que tu disais sur l'utilisation euh enfin sur comment est implémenté euh le support des vieux dans je suis allé voir le code source même dans la sans avoir à aller dans le code source et une explication assez détaillée de de ce que de ce que fait le code et euh ça pourrait être implémenté avec une machine très honnêtement, parce que envoie leur un
Paul: message.
Oui,
Baptiste: pour d'implémentation, je ferais peut-être plutôt une vidéo expliquant comment ça avec. Mais c'est un bon usage parce que c'est il y a des conditions, il y a des états, des étapes séquentielles, c'est un bon usage. voilà je veux bien
Paul: que tu m'envoies le le bon j'irais voir sur le tu m'as dit que il y avait des liens vers le code source directement
Baptiste: de de la doc.
Euh non il n'y a pas de lien vers le code source non? Si tu vas dans astro même pour ceux qui nous écoutent Euh il [00:28:00] faut aller dans le package corps d'astro et dedans chercher routeur ou je ne sais plus précisément d'accord mais ils implémentent leur routeur voilà ou même juste chercher. et euh tout le monde tombera directement sur le code concerné.
Voilà très bien super
Paul: Euh il me semble que t'avais un deuxième sujet concernant Astro et sa nouvelle un nouvelle doc même hein? Oui absolument puisque c'est sa
Baptiste: nouvelle version donc euh juste pour terminer sur transition sera rapidement oui excuse moi je voulais pas te non non, on a principalement parlé de fonctionnalités qui ont été ajoutées dans Astro trois qui est sorti en septembre deux mille vingt trois.
Donc il y a quelques mois. mais euh depuis Astro quatre est aussi sorti il y a quelques semaines. Et euh avec ça est venu le support des vieux pour les formulaires aussi parce que jusque là c'était juste pour les liens et ce qui faisait que quand ouais cliquer sur un [00:29:00] lien Bon voilà, il n'y avait pas de il y avait pas de rechargement de la page mais si tu envoyais un formulaire HT M l natif sans intercepter la navigation, il y avait une navigation du navigateur et donc la page rechargeait.
avec la V quatre, les formulaires sont aussi supportés et ça va, ça va venir faire ce euh automatiquement aussi pour les pour les formulaires Voilà,
Paul: c'est à dire que
une redirection suite à insite de Formule un
Baptiste: c'est ça c'est ça? Si tu en formulaire ça astro va enfin le routeur d'astro va prendre en charge l'envoi de la requête post ou à ton serveur. et ça veut dire faire la diff ensuite du de l HT M L. Qui est retourné par le serveur avec la page la page actuelle Voilà très bien d'accord
Paul: Ah oui
Baptiste: d'accord et ça c'est vachement puissant.
J'ai fait une petite démo d'un site e-commerce assez basique mais avec de l'authentification [00:30:00] pour montrer ce que peut faire Astro maintenant. Et euh c'est assez impressionnant parce que dans le j'ai une petite icône avec ma photo de profil et quand je clique dessus sur un menu avec un bouton déconnexion Et quand je clique sur ce bouton déconnexion qui est un formulaire qui tape une route d'Api aussi faite par Astro et ben du coup ce truc là ne fait que deux choses.
Enfin la route d'Api ne fait que deux choses. Elle cire le cookie et ensuite elle redirige vers la page principale et du coup quand j'habite dessus en tant qu'utilisateur euh ça fait cette requête qui redirige vers la page principale donc côté médiateur l'appel à ce qu'il il va retourner la page principale.
Ah et ça peut faire cette diff en haut dans on voit que le le menu et l'icône disparaissent instantanément avec un accord de Voilà quand Ouais
Paul: ouais ouais, ça peut amener à des mécaniques assez puissantes
Baptiste: et sans vraiment coder grand
Paul: chose quoi c'est Bah oui en réalité, t'as même pas besoin de checker si le cookie a été [00:31:00] et à savoir s'il est clair ne pas afficher l'image
Baptiste: c'est ça et c'est ouais oui
Paul: de toute façon c'est le principe d'avoir des pages rendu en fonction de l'état de c'est ton truc, hein?
C'est ça ça t'évites de faire du du spaghetti code entre très gros guillemets. C'est juste d'éviter des conditions sur ce genre de
Baptiste: truc quoi Ouais, je te rejoins totalement et c'est pour ça que j'aime aussi faire des sites qui sont construits côté serveur parce que il y a moins de codes à écrire. Au final, tu fais une redirection vers une page après être identifié ou après t'être déconnecté.
Et euh, t'as pas à venir modifier dans ton je ne sais pas si tu utilise par exemple euh venir dire que l'utilisateur maintenant c'est ça que dans le en conséquence, il faut qu'il y ait les informations d'utilisateur, ça se fait tout seul,
Paul: ça évite d'avoir des des champs optionnels tout le temps dans l'état de ton de ton client quoi C'est ça même si ta permet de beaucoup aider à la compréhension.
Ah
Baptiste: oui quand, quand Est-ce que tu met pas un épisode sur [00:32:00] sur et
Paul: vous êtes bien trop gros. Déjà, on s'est frotté aux tests de manière trop haut niveau, On va dire non, non, mais il y a des trucs très intéressants dans qu'on pourra qu'on pourra checker. Mais je pense que je vais me faire surtout une petite liste de de que je n'aime pas voir dans des tests config
Baptiste: intéressant.
ouais
Paul: intéressant Bon après c'est totalement personnel et il faut vraiment réussir à comparer cette utilisation ou pas des à savoir pourquoi certaines personnes utilisaient d'autres noms. J'ai l'impression que dans la plupart du temps c'est des migrations qu'on qui auraient été trop strictes euh vers du natif vers du et du coup c'est plus de la qu'autre chose à voir si Euh euh mon instinct dit vrai ou si euh juste je fais faux bond sur l'utilisation de certains d'accord
Baptiste: Voilà Parce que JC est arrivé sur un projet avec qui est à Oui
Paul: je n'aime pas non plus, je n'aime pas du tout même Euh non non clairement pas c'est c'est c'est ben typiquement dans ce genre de cas [00:33:00] euh que ton cookie ou pas soit défini euh tu tu ne peux pas le savoir parce que nul était enfin tu peux pas, Nul n'existe pas n'existe pas, Tout est toujours défini, ce qui n'a pas de sens.
Euh en tout cas à mes yeux aujourd'hui à un instant T peut-être vais-je réussir à trouver un un projet euh qui utilise vraiment ce ce? Il faudrait que je je je fasse des petites recherches sur quitte à voir un peu mais je je pense. Pour moi c'est c'est vraiment juste à un moment donné une direction qui a été prise dans un projet.
qui a nécessité vers migration mais elle était trop rude avant d'arriver à un bip du coup paf mais c'est c'est, c'est symptomatique, pour moi c'est source de bug monumental ce comme d'autres hein. par exemple le qui est parfois nécessaire assez très souvent du moment que t'installes des mais qui est parfois trop facilement activé sur des problèmes qui sont en réalité et qui ne viennent pas du tout des des que tu consommes, mais plutôt de ce que t'as fait ça de nouveau, il faut Voilà, je dis ça avec des pincettes, parce que je ne suis pas sûr de ce que
Baptiste: [00:34:00] voilà.
Ouais bah ça, ça serait très intéressant de parler de ça. Ouais ouais.
Paul: c'est du on pourra mettre ça dans un short peut-être. Ouais ok,
Baptiste: tu trouves un petit surnom, hein? Bon, le on a déjà fait la blague, le est déjà pris. Mais euh ah oui, c'est un petit
Paul: surnom non, non, non, non, j'ai aucune. J'ai aucune prétention d'expert en quoi que ce soit d'ailleurs juste j'aime, J'aime des choses et j'aime bien bien faire dans ce que j'utilise.
On va dire comme beaucoup de gens, j'imagine. juste savoir rester où on est. Enfin bref écoute, tu voudrais pas nous parler de l'époque préhistoire de certains dinosaures? Et tu veux que
Baptiste: on se transforme en historique? Non
Paul: non non non non, je parlais plutôt de du fameux dinosaure docus russe. Et euh oui putain, j'ai cherché.
Il y a pas un groupe qui s'appelle Starlight.
Baptiste: il y a une chanson qui s'appelle comme ça Ouais
Paul: voilà, je voulais faire une blague là-dessus mais [00:35:00] du coup j'ai pas d'inspiration Ouais mais du coup donc si j'ai bien compris qui est le nouveau? Euh plus ou moins le nouveau bébé d'astro euh concurrent à docus russe sur la génération de doc euh et de tout ça basé sur astro donc je te laisse nous en parler dessus tu es bien plus au
Baptiste: courant que moi, c'est ça.
Donc euh, qui est sorti avec la V quatre d'astro qui est un peu un par dessus? Astro pour faire très spécifique très spécifiquement des sites de documentation. Euh donc, les pages sont écrites en il n'y a pas vraiment moyen de créer des pages en HT M l. Des trucs comme ça quoi? L'objectif c'est vraiment tout le contenu de chaque page écrit en avec une architecture de fichier qui est encore plus rigoureuse.
Qu'ave Castro pour parce que l'outil est est est restreint pour son besoin précis. Mais euh ça ressemble beaucoup à docus russe comme tu l'as dit ou à nux con qui avait aussi implémenté [00:36:00] les même choses. Donc l'idée c'est de faire un site de documentation le plus rapidement possible, avec un outil très spécifique.
Mais comme c'est Astro, il y a énormément de choses très cool qui viennent avec, comme par exemple la possibilité d'utiliser n'importe quel pour faire des composants spécifiques. Je ne sais pas si dans ta doc, t'as besoin de mettre un composant avec de l'interactivité. Tu peux utiliser ce que tu veux, c'est euh, c'est c'est dispos, c'est disponible.
c'est euh c'est plutôt cool ça.
Paul: D'ailleurs j'ai une question c'est Qu'est ce qu'on attend d'un de documentation face à un que je qualifierais de blog? Euh pour moi je ne vois pas trop la différence instinctivement entre les deux T'as
Baptiste: un exemple de de blog?
Paul: Non non je suis du mais tu t'attends ou astro? Ouais tu veux faire un blog? Bah vas-y astro mais ce que je veux dire par là c'est que ben le le même le M D X maintenant à un [00:37:00] moment maintenant que le le est compatible avec Astro euh tu peux faire pas mal de choses pour en te composants, même dans tes dans tes fiches.
Euh ce que t'as l'air de décrire avec Starlight, c'est plus ou moins l'utilisation que j'ai d'astro pour par exemple ou ce genre de chose ou par exemple, c'est c'est pas la même la meilleure manière de faire mais euh quand je voulais avoir des enfin des des, des liens qui cliquables pardon euh pardon des des champs de texte, des titres euh copier coller pour pouvoir les partager avec un prédéfini.
J'utilise un avec un peu de style du et un peu de logique que t'as pas envie d'avoir à dupliquer à chaque fois. Et j'ai. J'ai l'impression que ce que tu dis avec c'est plus ou moins ce qui est, ce qui est faisable.
Baptiste: Disons que je pense qu'on peut résumer comme étant ton ton, mais euh que n'importe quel développeur peut ensuite utiliser, il y a beaucoup de choses qui viennent préd- d'accord.
il y a par exemple des thèmes euh de de qui euh qui avec lesquels vient donc t'as pas à choisir toi même le le, [00:38:00] la couleur du fond, la couleur du texte, tout ça Il y a des thèmes que tu peux déjà utiliser. Ok, ok, il y a, il y a plein d'outils aussi pour directement changer le enfin ton logo ou par exemple les liens vers tes réseaux sociaux.
Il y a des composants de base, comme par exemple un composant Tabs. euh qui qui te permet d'avoir des petites tables dans tes dans tes pages à g sur la gauche? Ouais enfin plutôt Euh je sais pas pour faire une diff entre je ne sais pas réac vu tu sais, t'as un petit composant où tu cliques dessus Acte vu pour bon bref mais euh des composants comme ça c'est dans le que t'as vu non ce que je veux dire c'est que enfin je sais pas si j'ai un autre exemple pour pour les taps quand tu es sur le site de t'as une partie et une partie oui d'accord, des trucs comme ça oui oui oui très bien comme deux versions du même composant quoi pour voir les différents
Paul: fichiers aussi?
Il y a parfois c'est ça? Ah d'accord très bien Ah oui ça c'est top et aussi tout ce qui va être installation par exemple sur ça va être un peu [00:39:00] pénible pour ma part d'un d'un d'un pour les codes bocs enfin les les codes bocs pas vraiment des blocs mais oui les éléments code avec du tout ça
Baptiste: aussi je crois oui c'est un autre effectivement ouais Mais euh, comme comme tu le dis Chiki qui est un très bon outil, J'ai d'ailleurs utilisé sur mon blog euh je de ce que j'ai compris.
Il y a un outil qui a été créé par dessus Chiki, qui s'appelle Expressive Code qui permet de faire des blogs de code encore plus jolis euh avec. C'est d'ailleurs ce qu'il disait sur la dans la Doc das Doc Das où, par exemple, il y a le nom du fichier au-dessus du bloc de code ou du par exemple quand tu veux mettre un bloc de code de code pour montrer les changements entre l'étape A et l'étape B.
Et puis tu mets un petit plus un petit moins pour dire ce qui a changé. Sauf que le le problème souvent c'est que ça ne se combine pas avec le du code en lui-même, ça veut dire que si tu utilises du javascript et que tu fais ta diff en tout cas, comme [00:40:00] j'utilisais chiki, j'ai pas réussi à le faire marcher.
Euh la DIF c'est un langage à part entière et donc tu ne peux pas avoir pour le javascript en plus de la diff. mais d'accord expressive code le gère et ça je trouve ça plutôt cool.
Paul: Un peu comme Euh euh
Baptiste: non euh pour euh ouais
Paul: entre les diaporamas, tu sais Ouais oui ben tu peux sélectionner des lignes de code pour transitionner dans ton truc tu peux donner un index je je sais pas si c'est ça dont tu parles
Baptiste: euh bah avec tu peux lui dire Euh pour la un j'ai le
Paul: le de co Je
Baptiste: viens de comprendre ce que tu dis.
Enfin je veux dire précisément par exemple t'as tu vois quand tu fais ça?
Paul: Je pensais que c'était une histoire de transition dans le dans le déroulé de la page Ouais non, là il n
Baptiste: y a pas. Oui oui d'accord OK un d'accord c'est un appliqué pas forcément une OK mais mais voilà. Ah ouais c'est top! Ah
Paul: ouais ça c'est bien, c'est vachement [00:41:00] stylé ça!
surtout pour des et ce oui absolument
Baptiste: cool ça c'est un super exemple. Euh et donc c'est code fonctionne directement avec Starlight, ça peut aussi être utilisé dans n'importe quel site Astro même sans astro c'est une ba part mais Starlight vient avec et je trouve que si je devais faire de la documentation pour un projet ou quoi?
Euh j'utiliserais très sûrement Starlight parce que tout est géré de base. Les valeurs par défaut ont l'air d'être de bonne qualité, donc ça me paraît pas mal. carrément
Paul: Ben je pense que l'utilisation de monsieur D'astro actuellement euh tendrait plus vers ce que est maintenant Euh Starlight en réalité enfin l'utilisation en réalité si je
Baptiste: parle de mon blog hein d'accord
Paul: donc je pense que l'immigration c'est totalement possible et je trouve ça cool aussi.
Qu'as s'émancipe un peu de cette étiquette euh de par défaut astro ben en fait c'est pour faire de la des blogs avec des marques et cetera et ben en fait en réalité ça prouve que non parce que maintenant ils ont leur propre outil qui permet de le faire donc ça permet en fait astro. euh
Baptiste: [00:42:00] devient quand même
Paul: oui donc c'est cool, c'est ça montre une direction quand même.
Baptiste: euh après je ne sais pas si précisément pour ton blog, ça pourrait être bien de partir sur ça non
Paul: mais mais je ne sais pas, je sais pas, à vrai dire, j'en ai aucune idée. Mais euh par exemple tu vois l'intégration des tables et cetera c'est des trucs que dont t'as envie, même sur des articles ou bien sûr je dis ça, mais en réalité ça fait un bon siècle que j'ai rien fait sur mon blog, hein?
Euh si ce astro tous les deux mois, même plus tous les quatre mois, c'est bien ça
Baptiste: mais
Paul: oui voilà, non non mais c'est cool, c'est cool de de c'est cool, ça donne envie de de tester
Baptiste: quoi? Oui, franchement ça bouge beaucoup dans cet écosystème. La communauté sur discorde aussi est très active. C'est euh c'est vachement bien et une autre un autre ajout à Astro quatre dont j'aimerais aussi parler brièvement c'est la def tout le bar qui est un nouvel outil euh installé par défaut dans ton site et [00:43:00] quand tu vas sur ton site en mode développement.
tu vois une barre avec des outils intégrés sur ta page par exemple pour visualiser quel composant de ton site Astro a été rendu avec si sa directive c'est des choses comme ça, c'est c'est plutôt bien foutu,
Paul: c'est cool et du coup tu peux muter l'état de tes Si c'est des ça
Baptiste: ça je pense pas à vrai dire j'ai j'ai pas testé ça mais euh mais en tout cas ça te permet de si par exemple tu vois ton composant tu ne sais pas trop à quoi il est rendu.
Plutôt que de venir faire un qui sera rendu par le serveur dans ton navigateur, il faut le voir quoi? C'est vrai Ouais
Paul: ouais ouais très bien d'accord vachement cool et il y a moyen de ils ont ils exposent les de cette
Baptiste: là ou pas? Il y a une API documentée pour effectivement créer ses propres Euh sur un sur une partie du site D'astro, il y a une liste des qui existent déjà pour [00:44:00] la je sais que le premier à avoir fait une intégration c'est euh d'ailleurs astro quatre est sorti avec la et une intégration pour mais il y a il y a d'autres qui se créent.
Tu peux en créer toi-même pour c'est c'est
Paul: mais d'ailleurs les on parle vraiment d'une intégration qui vient euh modifier la la le bar alors c'est pas vraiment un nouveau terme, c'est
Baptiste: pour euh en fait c'est pour tu peux créer un qui? Euh qui modifie la son style tu peux ajouter des créer de la HT m n dans la des choses comme ça mais tu peux tout
Paul: ce que je veux dire c'est que c'est une comme peut l twin et cetera
Baptiste: Ah euh pas vraiment non c'est euh non c'est c'est vraiment à part c'est vraiment à part ouais il y a une vraie A P qui te permet d'exporter.
quelque chose qui marche avec avec la barre donc c'est pas par exemple N P X Astro Euh je ne sais pas précisément quelle commande il [00:45:00] faut taper pour installer un comme ça, mais en tout cas, c'est c'est c'est distinct, mais ça te permet ensuite de d'interagir avec la page d'interagir avec les composants.
Euh c'est c'est assez stylé à tester.
Paul: ouais vachement cool mais surtout les gens vont faire des choses stylé oui de base du coup c'est quand tu laisses la porte ouverte
Baptiste: là quand c'est le principe de l'en source quoi un peu? Bah
Paul: carrément même presque du j'ai envie de dire mais voilà d'ailleurs c'est clairement de l cent pour cent mais d'accord Ben écoute, je te remercie, c'était super intéressant
Baptiste: ben écoute euh à une prochaine fois Paul alors?
Bah ouais
Paul: hein sur les prochaines nouveautés d'astro hein
Baptiste: merci. et euh, à bientôt peut-être pour un nouvel épisode sur le pa Bah
Paul: ouais, peut-être pas peut-être pas tout de suite tout de suite mais c'est prévu, il faut
Baptiste: que tu te prépares un peu,
Paul: non mais j'ai d'autres trucs qui m'intéressent un peu plus dans les médias.
Agnès
Baptiste: Bah écoute désormais, je [00:46:00] crois qu'on a décidé d'avoir un rythme un peu mensuel pour le podcast Peut-être même avoir si on a le temps, plusieurs épisodes par mois. En tout cas, ça va devenir quelque chose d'un peu récurrent. et on va peut-être essayer de s'améliorer
Paul: entre chaque prise et cetera, on va tester des trucs.
On est vraiment parti de rien, d'une envie de de discuter, quoi faire évoluer le format, la qualité audio vidéo Voilà, j'ai des efforts à faire là-dessus, mais j'en ai conscience. Le principal hein, c'est ça. Mais voilà, bah écoute, merci à à tous et
Baptiste: à une prochaine Alors à la prochaine Paul, la prochaine Allez où?