Bienvenue sur Double Slash, le podcast dédié aux outils et aux techniques pour le développement web.
Bonjour à tous, bienvenue dans ce nouvel épisode de Double Slash, épisode de spéciale news d'avril 2023.
Comme d'habitude, nous sommes avec Alex. Salut Alex ! Salut Patrick, salut tout le monde !
Comme d'habitude, nous allons faire beaucoup de news, expliquer un peu le sommaire, nous avons quelques news en fait,
des brefs en une seule ligne, des nouvelles versions etc. Donc on ne va pas assez vite faire dessus.
Et après, on va parler un peu de... Je me perds un peu dans le sommaire.
On va parler un peu de Github avec ses nouveautés de l'intelligence artificielle.
Alors on va essayer de ne pas trop déborder dessus. On s'est promis de ne pas trop déborder sur l'intelligence artificielle
et notamment on peut déjà en parler je pense, on fera certainement un épisode spécial de l'intelligence artificielle.
Car on doit voir tout l'impact que ça a pour nous devs parce que c'est hyper clivant, il y a des gens qui sont pour,
il y a des gens qui sont contre et on voit comment nous en tant que devs ça va impacter, je pense ça peut être super intéressant.
Oui carrément et puis après on va prendre une dernière partie avec deux articles et puis aussi beaucoup des outils qu'on a trouvé par ci par là.
Donc voilà, un super épisode news comme d'habitude.
Allez on attaque direct par Svelte qui est en version 3, qui va passer en version 4 par contre.
Oui, change directement leur système de package manager. Ils vont passer sur PNPM.
Oui ils ont fait la choix PNPM alors c'est aussi que tu m'as converti.
Je peux le dire. C'est plutôt yarn et en fait tu m'as converti à PNPM quand on a fait le nouveau site du podcast
et puis depuis je suis dessus, je travaille avec ça et Svelte dans la version 4, donc là actuellement c'est en version 3.
Dans la version 4 ça sera officiellement PNPM, le package official de Svelte.
Après est-ce qu'on pourra encore utiliser NPM ou yarn pour ceux qui veulent encore rester sur...
Aux chaux mais c'est juste appareil sur le niveau du projet.
Oui, c'est au niveau du projet.
Après oui, je pense qu'on peut toujours utiliser. De toute façon c'est tout compatible donc il n'y a pas de problème normalement.
Oui, ça évolue. Ça évolue aussi chez Melysearch qui a sorti sa version 1.1, ok.
Mais surtout une grosse refonte graphique de leur site internet.
Il est beau ce site.
Il est super beau.
Il est super beau, on a vu passer ça vite fait. Ils ont refait le site, il est magnifique.
Les tools, enfin les technos c'est Next.js13, Daywind, Radix UI.
C'est des bibliothèques de composants qui sont accessibles, Radix UI.
Pas mal du tout. Et puis voilà, ça fait un super site super beau.
Non seulement un système qui marche bien mais en plus c'est un beau site.
Et avec une doc, on peut le dire, avec une doc qui est vraiment bien faite, qui est super explicite.
Donc ça fait super plaisir.
C'est clair.
On parle de tous les épisodes en ce moment donc faut qu'on arrête.
Ah bon tu vas y nous sponsoriser.
PartiKit, je crois qu'on avait déjà parlé de PartiKit qui est un petit utilitaire qui facilite en fait la collaboration instantanée.
Donc pour faire vraiment de la collaboration en temps réel.
Et ça passe en open source.
Ouais j'ai vu passer la news.
Voilà c'est un système qui permet de faire du socket, machin, instantané.
Tout une librairie, une bibliothèque de fonction utilisables facilement.
On va en voir.
Si vous êtes sur YouTube vers le code, il est assez concier en fait.
C'est plutôt simple à installer.
Donc voilà, c'est devenu open source.
Bonne nouvelle.
J'ai pas le pourquoi du comment mais c'est cool.
C'est plutôt sympa carrément de pouvoir utiliser directement, direct ce système-là au lieu de recoder et d'implementer nous-même ce système par WebSocket.
On peut utiliser PartiKit qui a déjà nous facilite la vie énormément pour l'implémentation de cette future.
Là on voit sur la home, c'est encore embêté pour l'instant.
Ok.
Même on sait.
C'est bien avancé.
Par contre, gros avancé et gros changements pour Angular qui continue d'évoluer et qui vient implémenter un système de signal.
C'est quoi ce système de signal ?
Oui alors, alors on va essayer de parler.
Grosse.
Non, on va essayer de ne pas dire de conneries sur Angular parce qu'il va se faire allumer.
Bon, jusqu'à maintenant, c'est jamais fait allumer.
Angular, en fait, si tu veux, de ce que j'ai compris alors, parce que je disais pas Angular, je connais pas super bien.
Ce que j'ai compris depuis le début, enfin il y a un système qui est hérité depuis les premières versions, qui est une sorte de...
Voilà.
Pour simplifier une sorte de middleware, pour déclarer les rendus de l'application, tout ça, avec un système qui s'appelle Zone.js.
Enfin bon.
Et ça, c'est un truc qui devient un petit peu old school.
À la base, c'était bien parce que c'était... voilà, ça complétait un peu les manques des navigateurs.
Mais aujourd'hui, les broseurs ont évolué.
Et ce système devient un petit peu dépassé.
Donc voilà, ils ont ouvert une RFC d'implementer le signal qui nous vient en fait de Solid.js.
Et c'est un système d'événement pour re rendre avec une super granularité tout ça.
Je connais pas parfaitement le signal parce que je n'ai jamais utilisé Solid.js, mais voilà.
Ils sont en train de réfléchir à comment l'implementer pour pouvoir avoir des rendus plus précis tout ça, de l'application.
Donc ça, un gros nom parce que Angular, si tu veux, c'est...
Sachant que Angular évolue très, très, très, très, très lentement.
Ok.
Pour rester très solid et très fiable et tout ça.
Donc c'est un gros changement et c'est un changement radical au sein d'angular.
Ok. Donc là, par contre, ce que je vois, c'est que la RFC, elle est fermée, elle est bloquée.
Donc ça veut dire qu'ils ont statué quoi.
Ça va être fait.

Ah oui, ils ont statué.
Ils ont statué.
Le verdi qui est tombé.
Et ce qui est intéressant, c'est qu'on voit que les nouveaux frameworks font évoluer les anciens une fois de plus.
C'est ça.
Donc malgré les intéressants.
Je peux dire, parce que souvent c'est un peu une joke en fait.
Ouais, il y a un framework d'IJS toutes les semaines ou tous les jours.
En fait, non.
Finalement, ta raison, ça fait évoluer à tous les autres et ça monte vers le haut.
Donc c'est pas mal.
Ça pousse tout le monde vers le haut.
Donc c'est plutôt pas mal.
Une bonne solution.
Pareil, dans les mises à jour, Storyblocks, Story...
Non, Storybook, je m'y perds.
T'as AP1, t'as AP1, t'as AP1.
Ah, j'en ai zappé une.
Dis-moi.
Playwrights.
Alors Playwrights.
Exactement, je l'avais pas vu celle-ci.
Playwrights qui évoluent et qui passent en version 1.32, c'est ça?
Ouais, en fait, ils ont introduit une...
Une interface, en fait, qui n'existait pas.
OK.
C'est qu'on voit l'écran, justement, en fait, dans l'1.32.
C'est une nouvelle UI qui permet de lancer des tests, d'avoir la timeline et tout ça.
Donc Playwrights qui est un super outil pour lancer des tests, créer des tests...
Voilà.
Au niveau de l'UI, c'est faire un clic.
Alors c'est des tests end-to-end.
Donc c'est vraiment comportement utilisateur.
Global.
C'est-à-dire, je vais charger ma page, je vais attendre que ma page soit chargée, je vais
cliquer sur le champ, je vais remplir le champ.
Donc c'est vraiment une simulation d'un comportement utilisateur classique.
Et on va écrire tous ces tests-là.
Et maintenant, cet outil vient s'agrémenter d'une interface graphique pour justement
visualiser les tests et voir tous les temps de latence, quel code est exécuté et tout ça.
Ok.
Ouais.
Playwrights qui est super parce que tu peux tester tout type d'application pour voir les
régressions.
Voilà, tu fais un scénario.
Les scénarios sont hyper simples à écrire et tu peux même les enregistrer avec l'interface
là.
Et derrière, tu peux lancer ce test à chaque fois que tu vas déployer.
Mais peu importe, que ce soit une app JDS ou un site classique et tout ça.
Donc c'est vraiment un super outil et qui est open source.
Qui est en confrontation directe avec un autre outil qui s'appelle Cypress, qui est
connu aussi.
Et je pense que les deux se tirent la bourre et à voir en fait quel est l'avantage et
les inconvénients de chacun.
Ok.
Et je suis désolé d'avoir zappé cette news.
Non, c'est pas grave.
Patrick.
Bon du coup, on parle de Storybook qui passe en version 7.
Tu peux nous rappeler c'est quoi Storybook ?
Storybook c'est un outil qui te permet de faire une bibliothèque de composants.
En gros, tu as une interface où tu as tous tes composants et tu peux les voir en action,
les afficher, interagir avec eux etc.
C'est un outil qui est vraiment top parce que maintenant le développement il se passe
sous forme de composants, on a des blocs, voilà, séparés.
Et donc on peut afficher tous les composants.
Ça fait une sorte de style guide entre autres de toute ton application avec tous les composants
séparés, les afficher, les styles et tu peux même développer, ce qui m'est arrivé
de faire aussi c'est de développer directement dans Storybook un composant et après de l'intégrer
dans l'application.
Ok.
C'est vraiment top.
Storybook existe depuis un petit moment et donc qui arrive à ça version 7.
Et ils ont corrigé une grosse partie de ce qu'on leur reproche.
Alors au fil des versions, ils ont corrigé, déjà la version 6 avait vachement évolué
mais là ils corrigent de plus en plus, c'est la vitesse de chargement, le poids du bundle
final, etc.
Ce sont des choses là, donc ils sont passés sur vite évidemment.
Il y a zéro conflit quand tu le mets sur un Next.js ou un Svelte.kit.
Il y a un nouveau format de Story, donc encore plus petit que ce qu'on écrivait avant.
Enfin alors c'est tout est amélioré, voilà, tout est mieux.
Des tonnes d'améliorations comme j'avais marqué.
Des perfs, des perfs améliorés et tout.
Ok.
Non, c'est vraiment top.
Tu peux intégrer sur la copie sur YouTube si vous regardez.
Vous voyez, il y a des tests qui sont intégrés directement dedans.
C'est vraiment un super, super outil.
Pour justement intégrer directement tes compétences.
Ok, cool.
À tester ou à faire évoluer.
Est-ce que tu sais si la migration de la version 6, enfin de la version précédente
à la 7 est facile, il n'odore un color ou il y a quand même un peu de tweak à faire
ou ça va se faire assez facilement.
Honnêtement, je n'ai pas essayé mais ça se passe de mieux en mieux
puisque en fait la plupart, alors tu as des sortes de plugins que tu pouvais mettre
pour avoir des choses en plus dans le panel tout ça.
Et de plus en plus, ils avaient intégré en natif.
Du coup, tu n'avais plus de trop.
Normalement, ça se passe de mieux en mieux.
Donc je pense d'ailleurs, ils ont une commande, tu vois, Storybook, Upgrade.
Ils ont un guide de migration justement pour faire toute cette migration
et qu'ils expliquent de pas à pas.
Après, tu vois, je te disais, il y a un nouveau format de Story
mais c'est toujours compatible avec les anciennes.
Donc je pense ça aussi, ça casse pas trop les choses.
Normalement.
Ça marche pas énormément fou.
Yes, ok.
On parle de Node qui est sorti en version 20 officielle cette fois-ci.
Totalement officielle et qui vient intégrer un permission model
directement en mode natif.
Oui, encore.
Par contre, c'est encore en experimental je crois.
Oui, c'est ça.
C'est derrière l'expiration flag.
Il y a un flag d'une commande experimental, mais après, ça sera validé.
Mais en fait, c'est inspiré directement d'Oddenno.
Oui, c'est exactement ce que j'allais dire.
Là, les gars, ils ont regardé vraiment ce que Deno a fait.
Parce qu'on est quasiment sur la même syntaxe.
C'est ça.
Le principe, c'est de protéger la machine de ton file system,
de ne pas donner les permissions forcément au script
qui va tourner sur Node, de faire ce qu'il veut au niveau des fichiers.
Donc tu peux lui attribuer des droits, lui enlever tous les droits,
ou lui donner uniquement un folder.
C'est pas mal parce que c'est vrai que des fois,
c'est un petit peu tendu sur certains packages,
au niveau sécurité.
Avec ça, tu peux déjà restreindre un dossier spécifique.
Donc il y avait ça.
Et un autre truc que j'ai vu,
j'ai vu passer sur Twitter avec Westboss.
Westboss, salut.
C'est maintenant que tu peux compiler pour obtenir un exécutable.
C'est pas mal.
Ah, excellent ça.
Tu peux compiler ton script Node.
Et tu choisis ta plateforme.
C'est un exécutable JavaScript ?
Non, tu peux le lancer, je crois.
Enfin, c'est exécutable, je sais pas.
Après, je sais pas garder en détail, mais j'impose une code.
Mais je vais voir.
Il faisait un exemple.
Il a compilé pour obtenir un exécutable de son script.
Tout simple.
Et ensuite, il l'exécutait via un code PHP.
Il l'exécuta.
Et ça fonctionnait en fait.
Il a fiché la string.
Ok.
Tu peux regarder.
Ça veut dire que tu peux faire tourner un script
censé sur Node, sans Node, sur une machine.
Après avoir une notation, c'est pas mal.
Ok.
Donc ça veut dire que dans ton exécutable,
il vient récupérer toutes les commandes que ta fonction utilise
pour les intégrer dans son environnement.
Donc quelqu'un, même quelqu'un qui n'a pas Node
d'installer sur sa machine,
il pourrait exécuter ton code JavaScript.
Parce que au moment de la compilation
et de la création de ton exécutable,
il vient récupérer toutes les fonctions nécessaires.
Ouais.
Ok.
C'est pas mal.
Cool.
Amélioration de la performance.
Et amélioration du moteur du V8.
Donc c'est vraiment le moteur de Node,
le V8 qui passe en 11.3.
Ok.
Plus de performance.
Ok.
Toujours.
C'est la tendance un peu globale de toute façon.
Et après, il y a d'autres ajouts.
Il y a d'autres petits trucs tout ça.
Mais vraiment, le Node War, c'est le système de droit,
la compilation exécutable,
et puis un système de test aussi qui améliore.
Ok.
Cool.
Est-ce qu'il y a par ricochet,
on va dire, vite,
point 4.3 qui passe,
qui passe aussi sur un système qui est beaucoup plus rapide
ou rien à voir ?
Ok.

Ils expliquent en détail,
si ça intéresse les gens,
il y a un lien avec comment ils ont amélioré
de quasiment 50% la compilation.
C'est énorme.
Comment ils ont fait ?
J'avais lu, je me souviens plus.
C'est assez complexe.
Ok.
Les graphiques parlant de même,
c'est impressionnant.
C'est basé sur la performance,
la 4.3,
et c'est vraiment beaucoup plus performant,
il n'y a pas photo.
Donc voilà, si vous avez un truc qui tourne sur vite,
4.2, n'hésitez pas à faire la 4.3,
parce que c'est un gain énorme de pro de performance,
et en plus, ça n'a rien à faire
à part monter la version.
Facile,
ça ne coûte pas cher,
et derrière, ça pulse.
Allez, on attaque sur le sujet...
Mais t'as encore oublié deux liens.
C'est catastrophique.
Tu fais exprès.
La performance,
c'est important.
Et donc, c'est Richard UI, c'est ça ?
C'est le truc que j'ai vu ce matin.
C'est sur Chrome, version mobile,
94, il y a une amélioration,
tu sais, la pop-up pour installer une PWR,
où elle est assez basique en général,
et bien maintenant,
tu auras une pop-up qui sera un peu plus avancée,
tu pourras mettre une photo, etc.
Tu vois, on a un exemple en image.
Donc en fait, tu peux customiser cette pop-up ?
Oui, tu peux mettre une sorte de screenshot,
tu peux avoir un meilleur rendu de ça.
Ok.
Donc là, pour le coup,
c'est vraiment l'installation soit des PWAs,
soit de la création de raccourci
que tu mettrais directement sur ton téléphone.
Oui, et surtout, installer les apps.
Ou des Tunescreen.
Normalement, c'est pour les apps, pour les PWR.
Ok.
Ça marche.
Et...
Vas-y, je te laisse introduire.
Non, ça c'est une issue sur Astro,
qui est ouverte par un des fondateurs,
mais ce n'est pas vraiment un fondateur,
c'est des...
les gens qui sont à l'origine d'Astro,
pour faire un client-side routine.
C'est assez étonnant pour Astro,
qui est une application,
qui est multi-page application,
et qui est 0.js par défaut.
D'avoir cette idée en fait d'un client-side routine,
donc faire une SPA,
ça veut dire faire une SPA,
mais ce qui est marrant, c'est que quand tu regardes
dans le détail un petit peu,
le but c'est de faire ça,
mais toujours en 0.js par défaut.
Donc je ne sais pas comment ils vont faire.
Ah, là, c'est...
Là, ça commence à être très intéressant technologiquement parlant
de faire une SPA sans VS.
Ouais, alors en tout cas,
si VS, c'est pas défaut,
ça sera toujours...
enfin, ça sera quelque chose que tu activeras peut-être
explicitement par défaut.
Mais voilà, c'est intéressant à suivre,
parce que j'ai l'âte de voir comment ils vont faire.
OK.
Ça marche.
Allez, cette fois-ci, c'est la bonne.

On parle...
on parle de la révolution des IA
dans notre job de développeur
et comment elles peuvent nous aider à être meilleures.
On commence par Copilot X,
qui est en fait la version améliorée de Copilot.
On pourrait dire ça.
Ouais, alors ça va plus loin que ça.
Alors, on ne peut pas...
on n'a pas tout ça que ça, en fait.
Moi, je me suis inscrit,
j'ai toujours pas inscrit de l'amitation,
pour Copilot X.
En fait, Copilot X, déjà, ça va utiliser GPT4.
Et surtout, c'est un système un peu de...
c'est un peu la charge GPT, en fait.
Si tu veux, actuellement, on a Copilot
où tu vas lui demander quelque chose,
il va t'insérer le code...
Auto compléter.
Ouais, auto compléter tout ça.
Et là, ça va un petit peu plus loin.
Tu vas carrément à un champ, à un prompt.

Et tu vas lui dire ce que tu veux,
et lui va te proposer du code, etc.
Donc, ça va un petit peu plus loin que ça.
Je ne sais pas si il y a un copie d'écran
du prompt, tout ça, là.
Mais voilà, on voit un petit peu mieux.
Donc, c'est vraiment une autre dimension.
Et là, on a vraiment un assistant
qui va encore plus loin au niveau du code.
Ok.
Et qui va pouvoir justement expliquer, commenter.
Et faire de la route, actuellement.

Ouais, qui va t'aider à coder,
qui va te proposer des solutions,
si tu es bloqué sur un truc.
Enfin, voilà, ou des langages que tu ne maîtrises pas,
peut-être, qui va t'aider à coder avec ce langage.
Enfin, voilà, je trouve ça vraiment intéressant.
En tout cas, un copilote perso, je l'utilise au quotidien,
et je le trouve vraiment pas mal.
Même si on ne peut pas, alors...
Moi, je trouve qu'on ne peut pas se filer à 100% à copilote.
Il peut introduire des erreurs,
le code n'est pas toujours propre, etc.
Donc, il ne faut jamais se filer avec 100%.
C'est-à-dire qu'un développeur junior
qui va écrire du code avec copilote,
ou même senior, je ne peux pas attaquer le junior,
il a toujours besoin de relire ce code, etc.
Enfin, il a toujours de vérifier s'il est correct,
s'il est capable de t'inventer même des fonctions,
donc, qui n'existe pas, bah on fait.
Ah, OK, il l'appelle des API sur des tableaux,
par exemple, ou sur une string,
alors que cette fonction n'existe pas.
Enfin, cette API...
Ouais, ouais, tu vas être...
Si tu codes, je ne sais pas, moi, avec du NUX,
ou du WordPress, ou n'importe quoi,
il est capable de t'inventer une fonction qui n'existe pas, en fait.
Il use machin, alors que machin ne s'existe pas.
C'est inexotable, voilà.
OK.
Ouais, c'est... OK.
Donc, NUX a suffi à 100%.
Par contre, un usage qui peut être super intéressant,
c'est suant la rédaction des pull requests.
Bien. Ah, ça, c'est top.
Et donc, en fait, on va utiliser copilot,
et copilot, en fait, va écrire...
La description va écrire...
va expliquer de manière verbale
les changements qu'on a fait dans le code, c'est ça ?
Ouais, alors, c'est pareil, c'est une technique all-preview,
on n'a pas tout ça que c'est, moi, je n'ai pas que c'est encore pour l'instant non plus,
donc je ne peux pas vraiment en parler, mais ouais, c'est ça.
L'idée, c'est de...
C'est que lui, en fait, en fonction de...
Il va aller aligner le code, il va avoir les changements,
et puis il va être rédigé, en fait, voilà,
puisqu'il a changé, il va te commenter le truc.
Et ça, tu vois, pour ce genre de fonction, c'est vraiment...
Enfin, je trouve que l'attigéance artificielle,
pour ce genre d'usage, il est top, quoi.
Ça nous fait gagner du temps.
C'est plus efficace que si on l'écrivait nous-mêmes, puis...
Et là, pareil, je vois, il y a la génération des tests automatiques,
c'est-à-dire, on sous-mettrait le code,
la fameuse OK, OK, c'est nickel, mais tu peux écrire un test,
et là, le mec, ah non, je n'ai pas envie d'écrire le test,
là, on pourrait utiliser, en fait, LIA,
pour automatiser, en fait, la création, la génération des tests.
Ouais, ça, c'est une demande...
C'est quelque chose que je pense qu'on attend tous un peu
de pouvoir, ouais, d'avoir une génération automatique des tests,
parce que les tests, c'est chiant à faire, il faut le dire,
mais c'est nécessaire.
Voilà. C'est hyper...
En fait, le temps que tu vas perdre à écrire les tests,
tu vas le gagner plus tard, quand tu vas faire des évolutions,
tes tests vont montrer qu'il y a une erreur, etc.
Donc, c'est là où tu vas gagner du temps.
Ouais, mais là, on peut gagner deux fois plus de temps,
si on a plus de tests.
C'est ça.
On va dire, ta copilote, il fait déjà 80% du boulot du test,
et toi, tu n'as plus qu'à relire ce code, peut-être à modifier
trois, quatre trucs pour le rendre totalement pertinent et vraiment précis,
mais si la génération des codes, non, la génération du test
se fait automatique, ça peut être super intéressant.
Super intéressant. Ça, c'est clair, de toute façon,
c'est un gain de temps énorme, tu gagnes une grande qualité d'application.
Après, tu vois, quand tu fais des tests, ce qui est très difficile,
c'est pas tellement d'écrire le test, c'est d'imaginer
tous les quatre figures, en fait, qui peuvent y avoir, en fait,
en insertion, en input, en output.
C'est souvent ça le plus difficile.
Alors, est-ce que l'AI est capable d'imaginer tous les quatre figures,
parce qu'en fait, les utilisateurs, quand ils tient en désinformation
dans un truc, je ne sais jamais ce qui leur passe par la tête,
ils vont te rendre, rien n'importe quoi.
Est-ce que l'AI est capable d'anticiper tout ça,
parce que ça reste quand même qu'une machine ?
Avoir.
A tester, en tout cas.
Oui, mais c'est génial, franchement.
Je pense que ça peut, ça peut quand même
vachement faciliter et nous faire gagner du temps.
Alors après, on peut ouvrir le débat,
mais je ne pense pas qu'on va se faire croquer totalement
notre boulot, que la machine fera intégralement tout notre travail.
Par contre, moi, je le vois comme un super assistant.
C'est-à-dire, sur les créatures des tests,
sur les créatures des comites explicites,
sur expliquer, faire un résumé,
peut-être une sorte d'auto-documentation ou des choses comme ça.
Je pense que là, les IAP,
peuvent vraiment nous assister et nous faciliter le boulot
pour aller plus vite et augmenter la qualité globale du test
et minimiser le temps effectué,
enfin, le temps passé pour avoir ce niveau de qualité-là.
Mais c'est ça, en fait.
En fait, les intestines artificielles,
il faut vraiment les prendre comme une...
qui va être beaucoup plus performant.
Et tous les trucs vraiment casse-pieds,
les documentations, les tests,
tous ces trucs-là qui sont nécessaires
et qui sont même recommandés,
mais qu'on n'a pas envie de faire
ou qu'on n'a souvent pas le temps de faire,
si une AI peut te faire gagner du temps
et peut générer ça automatiquement tout ça,
c'est une gaine de productivité énorme, en fait.
Là, on est...
Ouais, clairement, c'est...
Il y a eu cette phase, en fait.
Ça va tous nous remplacer les machins midules.
Je pense qu'on est...
On a avancé un petit peu,
là, ça fait plusieurs mois.
Maintenant, on est arrivé un petit peu à maturité.
On se rend compte quand même comment ça fonctionne les AI.
On voit qu'on a une gaine de productivité.
Ça, c'est clair.
Moi, j'avais vu...
J'avais lu un article
où c'était un mec, un stadien, qui disait
ils ont donné à des étudiants une AI
pour écrire un devoir, etc.
Et ils se rendent compte qu'en fait,
les mauvais devenaient bons
et les bons devenaient excellents, en fait.
Beaucoup plus productifs, en fait.
Donc voilà.
On n'est pas du tout dans un remplacement,
mais on est plutôt dans une gaine de productivité.
Ça, c'est clair.
Ouais, après,
il y a peut-être des secteurs de métiers
qui seront bien plus touchés que nous dans la tech.
Mais je reste intimement convaincu
que dans la tech, en tout cas,
avant qu'il y ait une compréhension globale
de tout le contexte,
ça risque d'être quand même...
ça risque de prendre un peu de temps.
Donc moi, je vois plus comme un super assistant
qu'un outil d'envoi de substitution.
Ouais, d'accord.
C'est clair.
Vu qu'il y a copilot, ok,
mais il y a l'équivalent chez Amazon,
qui s'appelle Code Whisperer.
Ouais, ouais, Amazon a dégainé son copilot maison.
Ok.
Je ne sais pas, c'est...
Encore ?
Non, pas du tout.
Après, la question, c'est...
est-ce que...
est-ce qu'on donne...
Est-ce qu'on donne...
Ouais, non, c'est tout gratuit, tu vois.
Oui, là, c'est gratuit.
En plus, pour le coup, c'est vraiment gratuit.
Exactement.
Non, c'est le premier truc que je vois, c'est gratuit.
Est-ce qu'on fait confiance à Amazon, c'est ça qu'on prend de vous ?
C'est ça, c'est...
est-ce qu'on donne accès à tout notre code
et il scanne tout notre code ?
Comment c'est enregistré ?
Comment c'est...
Ouais.
On fait déjà confiance à Microsoft.
Donc, j'ai envie de dire...
Exactement, exactement.
Mais la question se pose pour Amazon,
mais la question se pose aussi pour copilot et...
Il nous a pris la chance.
Il nous a pris la chance.
On est complètement d'accord.
On est complètement d'accord.
Mais c'est marrant ce qu'il dit, parce que je ne sais pas s'il y a des...
Je ne sais pas s'il y a des entreprises en France ou n'importe
qui interdisent à leur développeur d'utiliser des outils tels que copilot ou...
C'est vrai qu'au niveau confidentialité,
peut-être qu'il y a des gens qui sont frileux, qui ont peur et qui se disent...
Je pense que...
Là, je pense que l'approche est plus légale, en fait.
Est-ce qu'il y a quelqu'un qui allait gratter dans toutes ces informations-là
pour nous dire, ouais, attention.
Là, légalement, ils ont un droit de lecture,
mais après, comment on peut prouver qu'ils ont réutilisé ce code-là,
après, enfin, ça devient super complexe.
Et là, c'est du pure droit, je pense.
Donc compliqué, je n'en sais rien.
Puis on se le...
Ouais, mais c'est...
En fait, c'est que le début, on n'a pas fini d'entendre part les copains.
Non.
On est complètement d'accord.
Petite feature qui vient d'être ouverte en beta sur GitHub toujours.
On en avait parlé, je crois, dans un vieux épisode sur GitHub
où on utilisait une petite extension qui s'appelait Octotree,
qui s'appelle toujours Octotree d'ailleurs,
qui nous permet d'avoir une navigation dans le code
avec une arborescence de fichiers, des dossiers sur le côté,
qui était assez sympa.
Et en fait, GitHub vient d'intégrer ça directement en mode natif dans GitHub.
Donc ça signe peut-être la mort de cette extension.
Mais je pense que ça signe la mort.
Mais en tout cas, c'était une fonctionnalité qui était quand même super sympa.
Et donc maintenant, elle est intégrée directement en natif dans GitHub.
Par contre, il faut aller l'activer volontairement.
On mettra le lien de toute façon dans les liens de l'épisode.
Mais en trois clics, on a activé cette feature qui est pour l'instant en beta.
Et on a directement la navigation.
On peut aller chercher un fichier directement.
On peut aller voir les dossiers, l'arborécence directement en colonne
sur le côté, comme on peut avoir dans un IDE classique.
Donc c'est quand même super pratique pour naviguer dans les fichiers.
C'est beaucoup plus rapide.
Le gros a copié ce que le petit avait fait.
Ouais, de toute façon, c'est normal.
Quand des bonnes choses sont faits, il faut les intégrer exactement.
C'est les gros qui copient et qui font mieux et qui intégrent en natif.
Et c'est terminé.
De toute façon, en interface GitHub, je trouve qu'elle est de mieux en mieux.
C'est vraiment de plus agréable, les recherches, tout ça.
C'est vraiment pas mal.
Totalement.
Le canadien Josh Como qui a fait une formation sur le CSS
pour vraiment tous les développeurs front.
Il nous revient avec un article qui dit qu'il annonce la mort du développement frontaine.
Justement, dans le pari, tu vas juste avoir avec les AIs et avec les IA.
En fait, c'est un titre qui est provocateur exprès.
Mais si tu lis l'article, il explique qu'on ne va pas être remplacé.
Mais qu'au contraire, c'est ce qu'on disait juste avant qu'on va être beaucoup plus productifs.
Donc l'article intéressant à lire.
Moi, j'aime bien ce qui fait que tout ces sites sont super classes.
Quand il écrit les articles, ils sont plutôt intéressant en général.
C'est juste qu'il ne faut pas se braquer et croire qu'on va être remplacé.
Au contraire, il faut...
On est beaucoup à dire qu'il faut apprendre à utiliser ces outils
et les utiliser pour être beaucoup plus productifs.
Pour être productifs et efficaces.
Et se différencier de ce...
Des autres.
En fait, on est dans un métier qui évolue tout le temps.
Donc on n'a pas le choix. Il faut s'adapter.
Il faut s'adapter.
Et en termes d'adaptation, pareil.
Et de titre un peu punchline.
Là, il y a... Je ne sais pas qui, je ne sais pas comment il s'appelle.
Il nous vient avec un article qui dit...
React, c'est le nouveau WordPress.
C'est quoi, ce truc ?
Ouais, non.
En fait, il réagit...
Henri et Levetica, en fait, durant la jam dev, c'est ça.
Ouais, je crois, une conférence en début d'année.
Il a sorti le React Developer of Today,
et le WordPress Developer of Yesterday.
Pour dire, en fait,
c'était élue, ça va faire agir un petit peu en disant...
Mais en fait, je suis tombé là-dessus,
et je me suis dit qu'il n'est pas totalement tort Henri et Levetica,
parce qu'il attaque, en fait, c'est qu'aujourd'hui,
on est beaucoup, je peux me mettre dedans aussi éventuellement,
mais sans se poser de questions,
on va prendre React ou Next.js et à l'utiliser
quoi que... enfin, n'importe quel projet,
toujours le même outil, etc.
Et en fait, c'est exactement la même chose qu'on a,
et qu'on avait sur WordPress.
Je vais mettre WordPress, je vais faire tous les sites en WordPress.
Je mets WordPress, React ou Next.js,
je vais tout faire avec ça, en fait,
même si ça ne correspond pas,
même si c'est over engineering, etc.
Ok.
Et oui, mais quand tu parles de React ou de Next.js,
bah moi, je suis plutôt de la team Vue
et justement, l'équipe de Next, en fait,
a sorti un DevTools qui est lui propre,
c'est-à-dire qu'on aura un DevTools spécifique pour Next,
avec, on va dire, plein d'outils
qui nous permet en fait de vraiment mieux analyser
notre application.
Donc ça, c'est plutôt sympa.
On va voir évidemment
l'intégralité des pages et l'arboréissance des pages
dans le contexte du build,
construite de la même manière
tous les composants qui sont chargés,
qui sont auto-chargés ou pas,
avec leur lien, avec les dépendances.
On va pouvoir évidemment les sélectionner
et en un clic, on va pouvoir les renvoyer directement
vers VS Code, si on a installé et si on dev sur VS Code,
ce qui nous permet en fait de visuellement
pouvoir sélectionner notre composant.
On va avoir, vu que sur Next,
on a beaucoup d'auto-imports,
que ce soit des composants
ou des fonctions, des composables
ou des choses comme ça.
On va pouvoir, en fait,
inspecter directement tout ce qui est déjà importé.
De la même manière, on a des modules
qui correspond à des plugins,
à des extensions, des features
qu'on vient adosser à Next.
Là, on va voir tous les modules
qui sont chargés dans notre application
et pareil, avec des liens directement vers la doc.
On va aller voir aussi tous les assets
qui sont chargés,
ce qui nous évite en fait de...
OK, l'image, elle ne charge pas correctement,
mais en fait, elle n'est pas l'odé
au bon endroit.
Donc là, on va pouvoir inspecter tout ça.
Pareil les plugins, les hooks.
On va voir aussi tout le fonctionnement
et le temps de chargement de notre page
et avec tous les hooks
et de voir combien de fois
on passe dans ce hook.
Donc en termes de performance,
c'est vraiment intéressant.
Il y a des tonnes de trucs en fait, c'est un truc ou quoi ?
C'est hyper poussé.
C'est vraiment hyper poussé.
Et en fait, on va pouvoir...
Ce qui est super intéressant,
c'est que pour les créateurs de modules,
on a même une possibilité
de venir intégrer
notre vue particulière
pour justement pouvoir utiliser ce module.
Et apporter des fonctions complémentaires
directement dans le contexte de développement
grâce à cette extension
de Nuxt DevTools.
Donc ça, c'est super intéressant.
Et pour avoir fait...
Allez, je fais de l'auto promo.
Vas-y.
Pour avoir fait le module Nuxt avec Melysearch.
Justement.
On peut intégrer directement
la page admine en fait
de notre instance.
Ce qui fait qu'on a la page admine directement
dans ce petit module
ce qui nous permet de vérifier que tous nos...
On va dire un, les clés
et que tous nos index sont bien intégrés
et que tous nos documents sont bien intégrés.
Donc c'est assez facile.
Et en plus, c'est facile à intégrer.
Donc si on a déjà fait un module Nuxt,
c'est facile à intégrer.
Par contre, pour un simple Dev
qui utilise Nuxt au quotidien,
ça amène quand même pas mal de choses
et donc ça vaut le coup de l'installer
et on a une vision un petit peu plus globale.
Et je pense que c'est pas fini de...
On va dire, la tendance est quand même
à l'amélioration continue dans l'équipe.
Donc je pense qu'il y aura encore d'autres fonctionnalités
qui seront bien plus intéressantes
et qui vont sortir.
Non, non, c'est impressionnant
toutes les fonctionnalités
disposent dans ce DevTools
qui est...
Je connais bien le DevTools React
et on est très, très, très loin
d'avoir tout ça.
Ils ont vraiment fait un truc super complet.
Donc bravo à l'équipe, beau travail.
En plus, ils ont pensé, comme d'habitude,
un peu comme les modules,
où il y a un kit, bah là, pareil,
ils ont intégré un système pour les gens qui développent.
Pour intégrer facilement des autres onglets, tout ça.
Donc c'est...
Ah, c'est beau travail.
Je félicite l'équipe.
On parlait d'analyse de performance
sur notre application Nuxt.
Et il y a un petit outil
qui a été mis à disposition
par Vercel
pour justement tester la performance.
Alors on va pas refaire
l'épisode sur les edges.
Le edge computing,
voilà, le edge fonctionne et tout ça.
Ouais.
Si vous avez pas encore écouté le dernier
épisode sur les database,
par le database, le plan de scale, tout ça.
Et ça correspond parfaitement
à ça.
Exactement.
Et là, en fait, on vient
exécuter
la database au plus proche
de l'utilisateur.
Et il y a un petit outil
qui a été mis à disposition justement par Vercel
avec les différents, on va dire,
les gros acteurs
de DB
que ce soit
Superbase,
Neon, Planetscale, Gravebase
ou Fona, on va dire, tout cet
écosystème
de database serverless.
Mais
qui pourra justement les mettre
en concurrence avec une version
globale ou une version
edge, c'est-à-dire au plus proche
de l'utilisateur.
Et on peut lancer des singles queries
des
plusieurs séries
de queries et on vient
analyser la performance
avec la différence entre
un résultat global
ou un résultat régional. Donc au plus proche
de l'usitateur.
Moi, j'ai impressionné par la différence entre
global et régional.
En niveau de l'intense, c'est phénoménal.
Bah ouais.
C'est du simple triple, en fait, c'est
ouf.
C'est important d'avoir un truc bien
situé par rapport à tes utilisateurs.
Eh ouais.
Bah ouais. Mais là, en fait, c'est
conceptuel, mais là on le voit
vraiment.
C'est quelque chose de
visuellement, on voit vraiment la différence
et donc on comprend
plus l'impact que ça peut avoir.
Yes, yes, yes, yes.
Tu as appris un lien, je ne sais pas
si tu l'avais vu, c'était
in-fiscal et physical.
Bah c'est...
Tu ne sais pas le cas.
Alors, un autre outil
exactement,
un autre outil
en fait, qui est
open source.
On sait que dans les équipes,
ça peut être super compliqué
en fait de partager
les variables d'environnement.
Donc, parfois, ça va être
fait directement sur le
repo
GitHub. Faut pas faire ça.
C'est pas bien.
Ou sinon, on ne veut pas
donner accès
à l'ADB
de Prod ou à
tel service. Et en fait,
ce que offre ce service-là,
c'est justement de
centraliser toutes ces données
de tous les secrets
et de les encrypter
de A à Z.
Et surtout, en fait,
de donner accès à des membres.
Et les membres ont accès
au service, mais pas
au...
pas au spécialement à la valeur,
en fait. La valeur ne leur
est pas toujours donnée. Donc, ils ont accès
au service, ce qui leur permet, en fait,
de centraliser toutes ces variables d'environnement
qui peuvent être assez complexes.
Et plus on a une équipe
dispachée et
parfois pas toujours
fiable. Ou en tout cas,
il y a peut-être des
variables d'environnement qui n'ont pas
prêt à partager avec tout le monde tout de suite.
Au moins, là,
ça vient mettre
une interface pour organiser, structurer
tout ça.
C'est un intervenant ponctuel qui vient
de travailler sur ton projet. T'as pas envie forcément du partager
tes clés, après, tu seras obligé de l'échanger, etc.
Donc, tu préfères pas les partages partagés.
Donc, le point n'outil est top. Il est open source.
Et surtout, j'ai vu aussi qu'on pouvait
les brancher au
Netlify, le Bercel, tout ça, en fait, directement.
Exactement. En fait,
ça vient
se brancher et ce qui t'évite, en fait,
d'aller faire du copier-coller sur
tous tes providers.
Donc, je sais pas s'il y a encore tout les
providers, mais
au moins, ils sont
déjà en place.
Et en termes de sécurité,
c'est quand même un cran au-dessus
que de passer
directement tes variables
d'environnement à ton stagiaire qui est là
pendant trois mois, qui demain,
pour X-Raison,
si ça se passe bien, c'est bien.
Si ça se passe mal, ça peut être compliqué.
En tout cas, ce service-là, en fait,
vient, justement,
organiser et structurer
toutes les variables d'environnement. Il peut être sensible
pour les boîtes.
Carrément. Après, c'est aussi pour éviter les...
ça peut être si pour éviter les erreurs,
si tu as les clés de base donnés,
pour pas que la personne
mette la prod en pensant que c'est la version
d'EV et quitte explosive de la base, tu vois.
Absolument. Non, c'est un super outil.
Et c'est surtout surprenant qu'il soit open-source.
Après, je connais pas
la maturité encore
de ce projet-là.
Ils ont une offre, évidemment,
une offre Cloud.
Je pense comme beaucoup
de solutions open-source,
c'est...
La technologie, en fait, est gratuite.
Et ils font leur beurre
avec une version hostée
en Cloud. Comme ça, on n'a plus besoin
de gérer. Et là,
pour le coup, tu payes
à l'utilisateur,
à l'utilisateur, quoi. Donc,
ça, au moins,
le mérite d'exister.
Et de... soit on l'héberge nous-mêmes,
soit on vient directement
le mettre sur le Cloud
et on gagne du temps, quoi.
Ah, super, hein.
Toujours le même modèle.
Allez, on passe sur des choses un petit
peu plus funky avec des couleurs
sympas.
Ouais, c'était... Alors comment...
FF-Fuel?
FF-Fuel.co
FF-Fuel.
C'est une ressource, en fait.
C'est des ressources en SVG.
Il y a plein de SVG avec
couleur, des formes, etc.
Donc, c'est une super ressource. Il y a plein
plein de choses, en fait. Donc,
on peut changer les couleurs.
Ça part
aussi bien des blobs
que des paternes
en SVG, c'est ça?
Ouais, il y a tout. Il y a vraiment
de tout. C'est vraiment pas mal.
Il y a vraiment... Tu peux faire des couleurs,
récupérer les codes, tout ça. Donc,
c'est une grosse ressource, hein. Une grosse ressource
avec des paternes, tout ça. Donc, on mettra le lien.
C'est pas mal.
A utiliser.
C'est une ressource en plus.
On va dire que c'est à la fois pour
les designers, mais aussi
pour les intégrateurs, peut-être.
Ouais, ouais.
Les deux, pour générer du code.
Ok. Ça marche.
Toujours en
SVG.
Toujours dans les couleurs
un petit peu plus funky.
Il y a
un nouveau, je crois qu'on en avait parlé
lors de la dernière
Google, il y avait
une introduction
des nouveaux codes couleurs, les
O, K, L, C, H.
Oui.
C'est un peu...
C'est nouveau.
Bon. Bon. Bon. Bon. Bon.
Pour moi, c'est super obscur, en fait.
C'est nouvelle propriété, qui sont
encore en expérimentale, enfin,
c'est vraiment implémenté dans tous les naviguiatres.
D'accord. Je... on en parlait avant,
mais moi je ne vois pas encore l'utilisation de ces propriétés de couleurs avec ces différentes color space, tout ça.
Donc il y a un outil qui est en version beta qui permet de faire des gradients avec ces nouvelles couleurs, etc.
Donc tu peux faire plein de choses.
L'outil est top.
Il est...
Mais après...
Ouais donc c'est un outil...
Je cherche en généralisation quoi.
Pour générer des gradients, ok, là pour l'instant on n'a rien de nouveau sur le soleil.
Il y en a on va dire 20 000 qui existent déjà.
Par contre il y a la possibilité d'utiliser ces nouvelles valeurs de couleurs et qui sont maintenant disponibles.
Et si d'ailleurs vous connaissez l'usage exact de ces couleurs là, en tout cas, de cette nouvelle unité de couleurs,
eh bien écrivez-nous, laissez-nous un petit message sur le Twitter ou sur le Discord
et à nous on est super preneurs de vous écouter pour savoir comment vous allez tirer parti de ces nouvelles couleurs.
Ouais, carrément, je pourrais bien savoir.
Toujours en termes de style, encore une nouvelle libaire y-le-composant.
Encore une autre.
Par contre, si elle met sa marque de fabrique, où elle est neutre et non stylisée et surtout elle est accessible.
Ouais, elle est accessible.
Alors comme Radix UI, celle-là aussi est accessible, ça est super important d'avoir aujourd'hui des sites accessibles.
Donc, exemple, la cordéon en dessous qui est accessible avec la navigation clavier et tabulation, etc.
Ça c'est hyper important, ça donne accès aux sites web, aux gens qui ont des soucis qui sont atteints de handicap.
Donc voilà, et celle-là, comme Radix, elle est non stylisée.
Donc après, vous faites ce que vous voulez au niveau du style.
Donc voilà, c'est une bibliothèque de composants que vous pouvez utiliser, styliser, etc.
Elle dispose de réactes vus et solides.

Et par contre, si on veut customiser tout ça, on peut le faire avec du CSS classique, avec Tywin, avec ce qu'on veut ?
Bonne question.
Ok.
Ce serait pas répondre.
D'accord. Il faudra regarder.
Donc en fait, c'est vraiment des composants aiglesques, c'est-à-dire, ils sont brut et il n'y a aucun style.

Alors oui, je dis, je parlais...
Pardon, je suis en train de vérifier parce que je parlais de Radix, mais Radix, en fait, c'est uniquement réacte.
Donc voilà, la différence avec Radix, au niveau de la bibliothèque, c'est que celle-là, elle est compatible aussi avec Vue et solide.
Ok.
Et après, il faut un choix de design.
Il peut potentiellement être customisable.
Disons que la difficulté, c'est vraiment de rendre les composants accessibles, en fait. C'est ça la plus grosse difficulté.
Donc après, rajouter un style, c'est classique.
Ok.
Ça marche.
Cool.
Et voilà.
Toujours en termes de design et de formulaire, il y a modular formes. C'est quoi, ça, exactement ?
Celle-là, c'est une bibliothèque de formulaire aussi, pareil. Alors tu me...
Je sais pas, je ne peux pas le souviendre plus de solide.
Je te prends des pourrures aujourd'hui.
Oui, tu me prends des pourrures, je ne me rappelle plus, mais...
Ok. Là, je vois que c'est en solide ou en quick.
Ah, c'est que solide ou quick, oui.
Ou en fait, on va justement interagir avec les formulaires.
Et en fait, on sait que les formulaires, c'est quand même assez compliqué à faire.
Et donc, du coup, là, c'est une API en fait de formulaire qui va nous servir.
Et on va avoir tous les états où on va pouvoir justement interagir avec ces hooks et ces validations.
Parce que dans les formulaires, il y a aussi les validations.
Par contre, c'est que du solid.js ou que du quick.
Oui, c'est ça.
Ça limite un peu.
Après, souvent, les librairies de formulaire sont spécifiques à certains frameworks.
Tant qu'il n'y en a qu'une sur React, il n'y en a d'autres qui sont que sur Vue.
C'est là, solide et quick.
Deux frameworks assez récents, notamment quick, encore, je crois, en version beta.
Je ne suis même pas sûr qu'ils sont en version...
Candidate, Re-Release, un truc comme ça.
Je crois qu'il y a encore un beta-quick.
Donc, voilà, c'est super.
Mais par contre, après, ça gère toute la validation, etc.
Enfin, classique, comme on peut trouver sur Vue, je ne sais pas lequel c'est le plus connu sur Vue.
Il y a Vue, oui, c'est Vue-Lidate pour faire les validations de formulaire.
Après, il y a aussi en Vue, il y a Formkit.
Oui, Formkit, voilà.
Qui est assez nouveau et assez récent et qui est vraiment solide en termes de construction.
Et là, c'est fortement inspiré de ça.
Ok, cool.
Voilà, ça marche.
Est-ce que tu veux rajouter quelque chose, Patrick?
Ecoutez, là comme ça, non?
Ecoutez, si si, n'oubliez pas, si vous pouvez soutenir le podcast.
Vous allez sur GitHub, enfin non, vous allez sur le site du podcast.
Vous pouvez sponsoriser via GitHub le podcast.
Le stress est même 1€, ça nous aidera pour financer le programme d'enregistrement, etc.
Et puis, n'oubliez pas, nous sommes indépendants, attachés à aucune agence, on ne fait aucune pub, rien du tout.
Et dans tous les cas, exactement, dans tous les cas, merci d'être encore là jusqu'au bout de l'épisode.
Pensez à partager l'épisode, discuter du podcast avec vos collègues et un petit pouce, un petit commentaire.
Ça fait toujours super plaisir.
Un grand merci à tous et à bientôt.
Ciao ciao.
Ouais, ciao.