00:00:00Bonjour à tous ! Bienvenue à cette nouvelle session de la communauté Basel.
00:00:29Je suis Maya Avendano, ingénieure DX ici chez Basel.
00:00:32Si c'est votre première fois parmi nous et que vous ne voyez pas le chat,
00:00:35n'hésitez pas à nous rejoindre sur [community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live).
00:00:41Vous pourrez y utiliser le chat et poser des questions, ce que nous vous encourageons vivement à faire.
00:00:45Si vous nous suivez sur X ou une autre plateforme, n'hésitez pas non plus.
00:00:49J'attends avec impatience la session d'aujourd'hui car, pour la petite anecdote,
00:00:53j'ai été développeuse Svelte pendant quelques années et j'ai créé plein de projets avec.
00:00:58Je suis donc une grande fan, j'ai même le t-shirt !
00:01:01Alors, pour les fans de Svelte et les curieux,
00:01:06nous accueillons une partie de l'équipe Svelte aujourd'hui. Bienvenue.
00:01:12Salut. Bonjour tout le monde ! Voulez-vous nous dire un peu qui vous êtes ?
00:01:21Bien sûr. Enchanté, je m'appelle Rich.
00:01:24Je travaille sur Svelte depuis 10 ans, puisque j'ai lancé le projet en 2016.
00:01:32Au départ, c'était pour mon travail de journaliste en datavisualisation,
00:01:38pour utiliser JavaScript afin de traiter l'actualité. Puis, il y a un peu plus de quatre ans,
00:01:44j'ai rejoint Basel et c'est devenu mon travail à plein temps depuis lors.
00:01:53Oui, je crois que personne d'autre ne peut revendiquer autant d'années que toi.
00:01:57De mon côté, ça fait environ cinq ans que je suis contributeur Svelte.
00:02:02Je m'appelle Simon. Je travaille aussi chez Basel sur Svelte,
00:02:08et j'ai découvert Svelte lors d'un hackathon dans mon ancienne entreprise.
00:02:13Je voulais essayer autre chose. À l'époque, je faisais surtout de l'Angular.
00:02:18J'ai testé Svelte pour un hackathon et j'ai eu un coup de foudre immédiat, tout en sachant :
00:02:22« D'accord, je ne peux pas utiliser ça dans mon travail quotidien, alors comment garder le contact ? »
00:02:29C'est très geek, je sais. Mais c'est ainsi que je suis devenu contributeur à temps partiel.
00:02:34Quelques années plus tard, j'ai eu l'opportunité de rejoindre Basel pour y travailler à plein temps.
00:02:39Et j'en suis ravi depuis.
00:02:43Moi c'est Elliot. Comme j'aime le rappeler à Rich de temps en temps,
00:02:46j'ai eu mon bac l'année où il a lancé Svelte.
00:02:49Je ne suis donc pas contributeur depuis aussi longtemps.
00:02:54Mais j'ai commencé, je ne sais plus si c'était fin 2021 ou début 2022.
00:02:59C'est pendant la bêta de SvelteKit que j'ai découvert et rejoint la communauté Svelte.
00:03:04Puis j'ai fini par commencer chez Vercel peu de temps après Rich, je crois.
00:03:09C'était à l'automne de la même année, si je me souviens bien.
00:03:12Mais je travaillais sur d'autres choses, notamment le site web de Vercel.
00:03:16Et puis, ce qui me semble incroyable maintenant, il y a un an et quelques mois,
00:03:23j'ai pu passer dans l'équipe Svelte. J'y travaille donc à plein temps depuis.
00:03:27Récemment, le projet cool sur lequel je travaille est l'implémentation de l'asynchronisme SSR pour Svelte.
00:03:36C'est le genre de développement logiciel complexe et passionnant que j'adore
00:03:43et que j'ai toujours aimé chez Svelte.
00:03:48Génial. C'est un plaisir de vous avoir tous ici.
00:03:51Pour ceux qui ne connaîtraient pas, pouvez-vous expliquer brièvement ce que sont Svelte et SvelteKit ?
00:04:00On peut essayer. Svelte, c'est beaucoup de choses.
00:04:04C'est une communauté, un mode de vie, mais c'est aussi un framework de composants déclaratif.
00:04:11Si vous avez utilisé React ou Vue, vous connaissez le concept de base :
00:04:15au lieu d'écrire « document.createElement » et « setAttribute »,
00:04:21vous décrivez votre application sous forme de composants déclaratifs.
00:04:25Ensuite, le rôle du framework est de traduire cette intention déclarative en ce qui s'affiche à l'écran.
00:04:33Svelte se distingue par sa conception axée sur la compilation.
00:04:40Essentiellement, c'est un langage transformé en JavaScript natif très performant.
00:04:48À l'usage, c'est assez proche des autres frameworks, mais grâce à sa structure,
00:04:53on peut faire les choses de façon un peu plus élégante et compacte.
00:04:58Et en plus de Svelte, qui est la couche de base,
00:05:02nous avons ce framework superposé appelé SvelteKit,
00:05:08qui est un peu notre équivalent de Next.js pour le monde React.
00:05:13Il apporte tout le reste : le routage, le rendu côté serveur, le chargement de données, l'outil de build...
00:05:18Tout ce dont on a besoin pour construire une application sans avoir à
00:05:24s'embêter à tout assembler soi-même.
00:05:28Parfait, merci beaucoup.
00:05:29Et vous n'avez pas chômé en coulisses dernièrement.
00:05:32J'aimerais en savoir plus sur ce que vous avez fait ces derniers mois.
00:05:37Il paraît que vous avez même des démos ?
00:05:41Oui, nous avons quelques démos.
00:05:43Je devrais peut-être commencer ?
00:05:44Car logiquement, il vaut mieux parler du développement du Svelte asynchrone,
00:05:51puis passer aux éléments que nous construisons par-dessus.
00:05:55Ça marche.
00:05:55D'accord, donc depuis plus d'un an environ, je ne suis plus très sûr,
00:06:02nous travaillons sur ce qu'on appelle vaguement « Svelte asynchrone ». Si je partage mon écran,
00:06:12je peux vous montrer de quoi il s'agit, puis on verra ses applications.
00:06:20Il faut juste que je me rappelle où se trouve le bouton de partage d'écran.
00:06:26Passer par toutes les boîtes de dialogue de permissions.
00:06:28Un instant.
00:06:30Partager tout l'écran.
00:06:33Et voilà.
00:06:34OK, je crois que je partage mon écran.
00:06:35C'est bon, ou c'est encore en attente ?
00:06:38Oui, on voit bien.
00:06:40D'accord, pour ceux qui ne connaissent pas, voici Svelte.dev.
00:06:43C'est notre site web.
00:06:44Voici le « playground » où vous pouvez tester Svelte sans rien installer
00:06:49ni toucher à la ligne de commande.
00:06:51Vous pouvez écrire du code directement ici.
00:06:53C'est l'environnement par défaut que vous obtenez.
00:06:55Je vais agrandir un peu pour que tout le monde voie bien.
00:06:58Ici, nous avons un état.
00:07:03Ces trucs bizarres, ce sont des « runes ».
00:07:05C'est ainsi qu'on indique qu'un élément du composant Svelte va changer,
00:07:10et qu'il faudra déclencher un nouveau rendu lors de ce changement.
00:07:12On a donc un nom et un compteur.
00:07:15On affiche le nom en haut,
00:07:17et on lie sa valeur au contenu de cet élément.
00:07:21On peut faire ça.
00:07:24On peut cliquer sur ce bouton et faire grimper le chiffre.
00:07:27Tout cela est très classique, n'importe quel framework
00:07:29sait le faire d'une manière ou d'une autre.
00:07:35Ce que Svelte asynchrone apporte, c'est la possibilité d'utiliser le mot-clé « await » directement
00:07:41à l'intérieur de vos composants.
00:07:45Disons que... débarrassons-nous du nom et de tout le reste.
00:07:49Transformons ça en un ID qui commence à 1.
00:07:56Et je vais récupérer du JSON
00:08:01depuis une source externe.
00:08:04Je commence par créer quelque chose de dérivé de l'ID.
00:08:10Cette URL sera donc recalculée dès que l'ID change.
00:08:16On voit que si j'affiche l'URL ici, quand l'ID change,
00:08:22l'URL change aussi.
00:08:24Ensuite, je vais récupérer des données avec cette URL :
00:08:28« my data equals derived ».
00:08:30Et là, je peux faire « await fetch(URL) ».
00:08:36Ensuite, on veut prendre la réponse et la convertir en JSON.
00:08:41Je suis sûr que tous les développeurs ont déjà vu ça
00:08:43un million de fois.
00:08:47En bas, créons une citation
00:09:00pour afficher les données récupérées.
00:09:03Si on regarde ce qu'on obtient...
00:09:06ça ne marche pas.
00:09:13Voilà ce qu'on va recevoir, et on veut pouvoir l'afficher.
00:09:16Donc ici, je vais mettre « data.quote ».
00:09:21Oh, quelque chose est cassé.
00:09:23Simon, Elliott, si vous voyez l'erreur, n'hésitez pas.
00:09:28Ah non, c'est juste le délai de chargement.
00:09:30D'accord.
00:09:31Et en dessous, on va ajouter l'auteur de la citation.
00:09:40On va peut-être supprimer ce délai pendant qu'on travaille.
00:09:44Je ne sais pas.
00:09:46Ça aiderait si je mettais les accolades.
00:09:50Maintenant, si je clique ici, le contenu disparaît,
00:09:55il va chercher de nouvelles données et les affiche.
00:09:58Ça peut paraître basique et trivial,
00:10:01mais si vous regardez comment on doit faire ça dans presque tous les autres frameworks,
00:10:08ça devient vite incroyablement complexe.
00:10:10Il faut un état local, puis
00:10:13un effet (un « useEffect » ou son équivalent
00:10:16dans d'autres frameworks) pour faire le fetch.
00:10:20Quand le fetch aboutit, on l'assigne à l'état local,
00:10:25en gérant les erreurs et tout le reste.
00:10:27C'est vraiment complexe à coordonner.
00:10:32Mais ici, ça fonctionne tout seul.
00:10:36Et s'il y a un délai...
00:10:43ça continue de fonctionner.
00:10:45Mais vous pourriez vous dire : attendez,
00:10:46si je clique plusieurs fois sur le bouton,
00:10:49je veux juste voir le résultat final.
00:10:51Je ne veux pas traiter toutes les étapes intermédiaires.
00:10:53On peut aussi faire ça.
00:10:54On peut importer cet utilitaire appelé
00:10:58« getAbortSignalFromSelf » et passer ce signal au fetch.
00:11:11Cette fois, quand je clique sur le bouton,
00:11:15il va ignorer toutes les requêtes intermédiaires
00:11:19pour passer directement à la dernière,
00:11:21car les requêtes précédentes arrivent trop tard.
00:11:26Entre-temps, nous avons déjà changé l'ID.
00:11:28On annule donc les signaux existants.
00:11:33Quoi d'autre ?
00:11:34On voudrait peut-être voir ce bouton se mettre à jour immédiatement.
00:11:38On peut utiliser « state.eager » pour sortir
00:11:43de l'attente asynchrone.
00:11:47C'est aussi très utile.
00:11:49Et on peut ajouter des styles.
00:11:51Disons que « dataLoading » est vrai si « effect.pending »
00:11:58est supérieur à zéro.
00:11:59Et si nous sommes en cours de chargement,
00:12:04on peut faire un fondu pendant que les données arrivent.
00:12:11Encore une fois, si vous deviez
00:12:13coordonner tout cela vous-même,
00:12:15ce serait un cauchemar.
00:12:17On peut aller encore plus loin.
00:12:19Disons que je veux ajouter une photo pour accompagner la citation.
00:12:28Ça ressemblerait à ça.
00:12:37Si je change, je vais avoir
00:12:41plein de photos différentes." Apparemment,
00:12:42que des ordinateurs portables, je ne sais pas pourquoi.
00:12:46Ah, en voici une plus sympa.
00:12:48Vous remarquerez tout de même
00:12:50un petit décalage.
00:12:52On a le texte de la citation, puis l'image apparaît.
00:12:57C'est parce qu'on affiche l'image,
00:12:58puis on doit solliciter le réseau
00:12:59pour la charger, ce qui n'est pas idéal.
00:13:02Si on remplace ça par une fonction de préchargement,
00:13:07que je vais importer de mon module d'utilitaires,
00:13:17cette fois, on verra que l'image et la citation
00:13:24arrivent exactement en même temps.
00:13:27Je viens de découvrir un petit bug.
00:13:28Il faudra qu'on le corrige.
00:13:30Mais vous voyez l'idée.
00:13:31On peut utiliser « await » dans nos calculs
00:13:34et directement dans notre template.
00:13:36Toutes ces choses sont parfaitement coordonnées
00:13:40et fonctionnent avec plusieurs composants,
00:13:44travaillant chacun de leur côté suite aux mêmes événements.
00:13:47Cela fonctionne avec le rendu côté serveur (SSR).
00:13:49Tout cela, sans Svelte asynchrone,
00:13:52serait extrêmement
00:13:55pénible à réaliser.
00:13:58Grâce à cette base, on peut construire
00:14:02des fonctionnalités géniales, et je vais laisser
00:14:05les deux autres vous en parler.
00:14:09Oui.
00:14:10Je vais faire une démo rapide des fonctions distantes,
00:14:17qui seront construites sur cette base.
00:14:19L'asynchrone dans Svelte est vraiment puissant.
00:14:24Mais SvelteKit, le méta-framework au-dessus,
00:14:27est encore un peu dans l'ancien monde, pour ainsi dire.
00:14:30Nous avons ces fonctions de chargement dans un fichier séparé.
00:14:34Et avec cela, nous ne pouvons pas vraiment profiter
00:14:38de toutes ces nouvelles choses cool qu'on vient de voir.
00:14:41Ce sur quoi nous travaillons actuellement, ce sont les fonctions distantes.
00:14:45Elles sont déjà disponibles dans SvelteKit.
00:14:48C'est expérimental, mais vous pouvez déjà les utiliser.
00:14:50Je vais vous montrer la façon la plus simple
00:14:55d'utiliser des fonctions distantes ici, pour gagner du temps.
00:14:59Ce que je vais faire, c'est
00:15:01créer un compteur très simple où,
00:15:04chaque fois que je clique, la valeur augmente,
00:15:08mais le compte résidera sur le serveur.
00:15:10Je vais implémenter cela dans ce fichier counter.remote.ts.
00:15:16Je commence par une variable count.
00:15:18Puis je crée get count.
00:15:20On va utiliser une requête provenant de $app/server.
00:15:26Il s'agit d'une requête distante.
00:15:29Et nous allons simplement retourner le compte ici.
00:15:31De l'autre côté, nous pouvons ensuite l'utiliser
00:15:37et faire un await get count depuis le fichier importé.
00:15:44Cet import ressemble à un import TypeScript classique.
00:15:48Sauf que nous importons une fonction,
00:15:52que nous l'appelons, et qu'elle renvoie une promesse.
00:15:54Nous utilisons donc await.
00:15:56Mais en réalité, cela traverse la frontière client-serveur.
00:16:01Ce get count vit réellement sur le serveur.
00:16:05Ce qui se passe, c'est que le client
00:16:08envoie une requête à un point de terminaison caché
00:16:14et récupère les données de là-bas.
00:16:17Et bien sûr, cela gère aussi le rendu côté serveur.
00:16:19Au chargement initial, il ne sollicitera pas le backend,
00:16:23mais le fera directement.
00:16:25Maintenant nous avons ce compte, mais on ne peut rien
00:16:29en faire pour le moment.
00:16:29Nous voulons l'incrémenter.
00:16:31Ce sera l'autre utilité d'une fonction distante.
00:16:34On va implémenter ça vite... sans Copilot.
00:16:38Ce n'est pas la bonne commande.
00:16:40On veut command de $app/server.
00:16:45Ici, on va simplement mettre à jour l'état du serveur.
00:16:49En soi, cela ne suffit pas encore,
00:16:52car comme c'est une commande, il faut lui dire
00:16:55d'envoyer aussi une mise à jour.
00:16:58On appelle get count, notre fonction distante,
00:17:03et on appelle refresh dessus.
00:17:05Avec ça, on lui dit essentiellement :
00:17:08fait une mutation en un seul passage.
00:17:10À l'appel, incrémente le compte de un,
00:17:14puis renvoie au client l'information
00:17:19que, dès que get count est utilisé sur cette page,
00:17:22il doit maintenant être incrémenté,
00:17:24car un nouvel état est disponible.
00:17:27Si j'ajoute cela ici,
00:17:29je vais faire un on click et juste incrémenter le compte.
00:17:37C'est tout ce que je vais faire.
00:17:38On dirait un appel de fonction normal.
00:17:40Mais encore une fois, cela appelle réellement le serveur.
00:17:43Et quand je clique, j'incrémente la valeur.
00:17:49C'était un aperçu très rapide
00:17:53des fonctions distantes.
00:17:55On peut faire bien plus de choses avec.
00:17:58Cela fonctionne aussi merveilleusement avec l'IA.
00:18:01Par exemple, cinq minutes avant le début,
00:18:06j'ai demandé à ce Copilot : "Hé, construis-moi
00:18:12un bloc de base sur le thème de Portal
00:18:18pour montrer quelques fonctions distantes."
00:18:20Et j'ai précisé d'utiliser Svelte 5 avec le MCP.
00:18:25Elliot en parlera un peu plus tard.
00:18:29Utilise ça, les fonctions distantes et l'asynchrone.
00:18:32Et il a réussi du premier coup.
00:18:34C'est pré-rendu.
00:18:35Le bloc est pré-rendu.
00:18:37Et je peux maintenant taper ici—
00:18:42sauvegarder par là.
00:18:43Et ça se met à jour.
00:18:49Sous le capot, c'est essentiellement la même chose.
00:18:53En jetant un coup d'œil rapide,
00:18:56on utilise await get posts.
00:18:59Get posts est une fonction de pré-rendu,
00:19:01ce qui signifie qu'elle est exécutée au build
00:19:05plutôt qu'au moment de l'exécution.
00:19:06On a une section de commentaires en bas
00:19:12où on charge les commentaires et on utilise un formulaire
00:19:15pour poster un nouveau commentaire, etc.
00:19:19Tout cela utilise des fonctions distantes, sans load functions.
00:19:23Nulle part.
00:19:24Et l'IA a fait ça en une seule fois.
00:19:27Elliot va en parler un peu plus en détail
00:19:32maintenant, je crois.
00:19:34Ouais, ça marche.
00:19:37Je dois faire la même chose que Rich Harris
00:19:41au début avec le partage d'écran.
00:19:46Ok, voilà.
00:19:52Je vais prendre une minute pour vous parler de l'IA,”
00:19:57et du développement que nous avons fait récemment.
00:19:59Et par "nous", je veux dire que ce n'est pas moi.
00:20:02C'est surtout un gars nommé Paolo et d'autres
00:20:06contributeurs de Svelte.
00:20:09En fait, la plupart des choses liées à l'IA récemment
00:20:13viennent d'eux.
00:20:14Un immense merci à eux.
00:20:15Ils ont fait un travail incroyable.
00:20:18Et oui, laissez-moi zoomer ici.
00:20:24Et voilà.
00:20:27Je pourrais passer beaucoup de temps à expliquer
00:20:28ce que nous avons construit pour y arriver,
00:20:31car nous avons un serveur MCP.
00:20:32Il possède des fonctions vraiment cool.
00:20:36Nous avons publié certaines compétences.
00:20:38Mais heureusement, vous n'avez pas
00:20:41besoin de savoir en détail comment ça marche,
00:20:43car nous avons aussi publié des plugins
00:20:47pour Open Code et Cloud Code.
00:20:48Je vais installer le plugin Open Code ici,
00:20:52ce qui consiste simplement à copier cette configuration
00:20:55et à la coller dans un fichier Open Code.json
00:20:58dans votre bibliothèque.
00:21:00Et je vais demander à Open Code de me créer un site.
00:21:06On va voir ce que ça donne.
00:21:10Je vais lui demander.
00:21:11J'ai fourni quelques images dans les assets.
00:21:17Laissez-moi zoomer là aussi, malheureusement.
00:21:28Malheureusement, on dirait que je ne peux pas zoomer.
00:21:34Ah, voilà.
00:21:34OK.
00:22:00[TAPOTEMENTS]
00:22:06Et on va voir ce qu'il se passe.
00:22:09Pas d'erreurs.
00:22:11Ouais, exactement.
00:22:12C'est très important.
00:22:13Si vous ne mettez pas ça à la fin de vos prompts,
00:22:15ils ne fonctionnent pas aussi bien.
00:22:18Pendant que ça tourne, je peux vous
00:22:21en dire un peu plus sur ce qu'ils ont fait.
00:22:25Si vous allez sur le site de Svelte,
00:22:28dans la doc sur l'IA, vous aurez une vue d'ensemble.
00:22:32Nous avons publié un MCP, avec son propre CLI.
00:22:36Et il possède un certain nombre de—
00:22:40oh, il a corrigé ça ces cinq dernières minutes.
00:22:43C'est différent de ce que c'était il y a cinq minutes.
00:22:46Mais nous avons plusieurs outils activables sur votre machine.
00:22:51La plupart d'entre eux servent—
00:22:53ou les deux premiers servent à obtenir des infos fiables
00:22:58sur Svelte.
00:22:58Cela apprend à votre agent comment lire la documentation,
00:23:03et spécifiquement comment la lire
00:23:05pour extraire l'information précise
00:23:08qu'il recherche sans avoir à tout charger,
00:23:11ni à explorer et perdre
00:23:12du temps et du contexte.
00:23:15Il y a aussi cet incroyable Svelte autofixer
00:23:17qu'ils ont construit et qui détecte les schémas
00:23:21que les LLM ont tendance à utiliser et qui ne sont pas bons.
00:23:26Il y a aussi une intégration avec notre playground
00:23:33que vous pouvez utiliser juste ici.
00:23:37L'autre chose cool que nous avons,
00:23:39c'est l'une de nos décisions de conception majeures
00:23:44quand on regarde tout ce qui touche à l'IA :
00:23:46comment rendre cela utile tant pour les agents que pour les gens ?
00:23:52Nous ne voulons pas que ce soit opaque,
00:23:55où votre agent saurait des trucs magiques.
00:23:59Vous ne le sauriez pas.
00:24:00Ce serait difficile à comprendre.
00:24:01Donc, fondamentalement, tout ce que nous faisons,
00:24:04nous essayons de l'intégrer aussi dans la documentation.
00:24:07Ainsi, nos compétences publiées,
00:24:09qui font partie de ces plugins Open Code ou Cloud Code,
00:24:12publient également
00:24:15tout leur contenu dans la doc.
00:24:18Vous pouvez donc toujours savoir
00:24:20quelles bonnes pratiques nous transmettons à votre LLM.
00:24:25Vous pouvez aller les lire vous-même.
00:24:27Elles seront toujours sur notre site, comme ceci.
00:24:31Revenons voir où en est
00:24:34notre machine.
00:24:35Pas grand-chose pour l'instant.
00:24:39Peut-être beaucoup, en fait.
00:24:45Oui, il y a beaucoup de styling en cours.
00:24:56Je suppose que je vais juste lancer mon localhost
00:25:00pour voir ce qu'il a fait.
00:25:03Rien.
00:25:07OK, bon, je ne veux pas faire traîner
00:25:10pendant qu'il réfléchit à tout son processus.
00:25:12Ça peut prendre un moment.
00:25:13Si on a le temps à la fin, on reviendra voir
00:25:15ce que le LLM a pondu pour notre business
00:25:19artisanal de canons à patates.
00:25:20Mais voilà pour le développement de l'IA
00:25:25ces derniers mois.
00:25:26Fantastique.
00:25:32Oui, super pertinent dans cette nouvelle ère.
00:25:37J'aimerais beaucoup savoir ce qui arrive ensuite.
00:25:40Qu'est-ce qui vous enthousiasme ?
00:25:46La prochaine sortie sera SvelteKit 3.
00:25:51On travaille activement dessus en ce moment.
00:25:53Mais ce ne sera pas un truc énorme
00:25:56avec des tas de nouvelles fonctionnalités.
00:25:57C'est essentiellement l'occasion de supprimer
00:25:59beaucoup de vieilles choses, pour faire table rase
00:26:02afin de pouvoir construire tout ce qui est nouveau et excitant.
00:26:06Le plus grand changement est l'utilisation de l'API
00:26:09d'environnement, maintenant que V8 est sorti il y a deux heures.
00:26:15Et cela nécessitera Svelte 5 comme version minimale.
00:26:21Vous pourrez donc toujours utiliser Svelte 4.
00:26:25Et au-delà de ça, nous nous concentrerons
00:26:29sur la stabilisation de Svelte asynchrone et des fonctions distantes.
00:26:33Ça a l'air super.
00:26:37Et j'ai entendu dire par le bouche-à-oreille que
00:26:41je vais passer la parole à Elliot car le LLM a
00:26:44bien travaillé.
00:26:46Tu veux nous montrer ce que tu as ?
00:26:47Comme souvent avec ces choses-là, il a fini
00:26:49environ une milliseconde après notre transition.
00:26:55Alors, allons-y.
00:26:59Oui, voici notre boutique artisanale de canons à patates
00:27:03que nous venons d'obtenir pour environ 1 $ de tokens.
00:27:07Et en fait, en jetant un œil au code,
00:27:13il a fait du très bon travail sans rien faire de fou
00:27:17et en utilisant ce que je considère comme les meilleures pratiques Svelte.
00:27:22Alors, essayez-le.
00:27:25Dites-nous ce que vous en pensez.
00:27:27J'ai été vraiment impressionné par le travail
00:27:29de Paolo et des autres sur tous ces trucs d'IA.
00:27:33Et nous aimerions continuer à nous améliorer.
00:27:35Faites-nous part de vos commentaires.
00:27:38Merci.
00:27:40J'adore, les dieux de la démo sont avec nous aujourd'hui.
00:27:45Et si nous passions aux questions ?
00:27:47Je crois qu'il y en a déjà dans le chat.
00:27:51Je vais commencer, d'accord ?
00:27:53On en a une sur les fonctions distantes.
00:27:57Y aura-t-il du streaming pour les fonctions distantes ?
00:28:00L'expérience développeur des fonctions distantes est géniale.
00:28:03Je veux en utiliser partout.
00:28:05Oui, je pense que Richard peut répondre
00:28:06car c'est son domaine.
00:28:10Oui, c'est drôle que vous en parliez.
00:28:12Parce que je développe justement une application
00:28:15qui a vraiment besoin de cette fonctionnalité.
00:28:17Et on a... Simon a travaillé sur une PR il y a quelque temps,
00:28:22qui en implémentait certaines parties.
00:28:23Nos idées sur la conception
00:28:28ont un peu évolué depuis.
00:28:31Mais c'est quelque chose qu'on a hâte de reprendre.
00:28:35Donc, si nous faisions cela dans une semaine,
00:28:40nous pourrions probablement dire : "voici la pull request".
00:28:43On n'y est pas encore tout à fait.
00:28:44Mais rassurez-vous, c'est une priorité absolue.
00:28:47Et nous sommes très impatients de sortir cette fonctionnalité.
00:28:49Pour ceux qui ne sont pas familiers, il s'agit
00:28:51essentiellement d'avoir une version en temps réel
00:28:55de la fonction de requête. Quand vous demandez
00:28:59des données au serveur, il renverra un itérable asynchrone,
00:29:04qui, à chaque fois qu'il y a de nouvelles données,
00:29:09les transmettra directement au client.
00:29:12Vous aurez donc des données en temps réel sans aucun polling
00:29:15ou quoi que ce soit de ce genre.
00:29:16Et dès que la page n'affiche plus ces données,
00:29:21la requête s'arrête.
00:29:23Et l'itérable asynchrone se nettoie tout seul.
00:29:26C'est une manière vraiment élégante d'aborder
00:29:28ces problèmes de temps réel.
00:29:31Oui, j'ai hâte de voir ça.
00:29:33Et pour être tout à fait clair, je veux
00:29:35juste préciser que quand Rich dit "bientôt",
00:29:38c'est parce qu'Elliot m'empêche actuellement
00:29:40de travailler dessus.
00:29:41J'attends qu'il finisse quelque chose.
00:29:43Dès que j'aurai terminé ce que je fais en ce moment,
00:29:45on s'y mettra.
00:29:46Parfait.
00:29:50Nous avons une autre question.
00:29:52Pourquoi choisir Svelte plutôt qu'un autre framework ?
00:29:55Évidemment, on pense que c'est le meilleur et le plus performant.
00:30:07Mais la vraie raison de choisir n'importe quel framework
00:30:11à notre époque, c'est parce que vous
00:30:13l'appréciez plus que les autres, honnêtement.
00:30:18C'est bien plus une question de préférence personnelle
00:30:20que de n'importe quoi d'autre.
00:30:22Et surtout aujourd'hui, alors qu'il est
00:30:24très facile de passer d'un framework à l'autre,
00:30:28vous avez un magicien à votre disposition qui peut vous apprendre :
00:30:32"J'ai l'habitude de faire comme ça en Vue."
00:30:35"Comment je ferais en Angular ou autre ?"
00:30:37Ils savent faire ça.
00:30:38La courbe d'apprentissage a été considérablement aplatie
00:30:43de nos jours.
00:30:45Vous devriez donc utiliser l'outil avec lequel vous êtes le plus productif
00:30:49et que vous êtes le plus heureux d'utiliser.
00:30:53Et cela dépend aussi de la communauté autour du projet.
00:30:57Cela dépend de la philosophie globale du projet.
00:31:02Mais je ne pense pas qu'il faille aujourd'hui
00:31:05décider en fonction de quel framework peut faire ceci ou cela.
00:31:11Parce qu'ils peuvent tous faire les mêmes choses,
00:31:13ni en fonction de l'écosystème le plus large.
00:31:16Parce que ce n'est plus vraiment un problème.
00:31:18Alors, choisissez juste le framework le plus amusant.
00:31:21Et nous pensons qu'évidemment, c'est Svelte.
00:31:26Réponse fantastique.
00:31:27J'adore.
00:31:29Ensuite, on nous demande : du nouveau concernant le cache ?
00:31:35Oui, je pense que c'est au sujet des fonctions distantes.
00:31:38Dans le contexte des fonctions distantes,
00:31:41nous n'avons pas encore d'API de cache.
00:31:45Il y a une proposition interne.
00:31:48C'est un travail en cours.
00:31:51Mais mis de côté pour l'instant avec tout le reste.
00:31:55Mais ça va reprendre bientôt.
00:31:58Et nous aurons une API de mise en cache vraiment sympa
00:32:01qui s'intégrera aux fonctions distantes.
00:32:05Incroyable.
00:32:06On a une question un peu plus légère.
00:32:08Où se situerait le lieu de rêve pour un Svelte Summit ?
00:32:10Oh, wow.
00:32:13On fait un tour de table improvisé ?
00:32:16Ton micro est coupé, Elliot.
00:32:22Si on parle de sommets,
00:32:24on a l'Everest, le K2...
00:32:28Non, mais pour moi, l'endroit n'importe pas tant que ça.
00:32:34Parce que je passe surtout du temps
00:32:36avec les autres développeurs Svelte.
00:32:38C'est un peu cliché, mais n'importe où serait génial.
00:32:43Mais l'Europe est vraiment cool.
00:32:46Il y a plein d'endroits là-bas où
00:32:48je ne suis jamais allé et que j'aimerais visiter.
00:32:51Toutes les excuses sont bonnes pour voyager à l'étranger.
00:32:56Il y a une tendance dans le monde Svelte
00:33:01à utiliser le préfixe SV pour tout.
00:33:04Quel que soit le mot que vous utilisez
00:33:06pour créer une bibliothèque ou un concept,
00:33:08vous mettez juste SV devant.
00:33:11Et je pense que si on poussait l'idée jusqu'au bout,
00:33:12on ferait notre conférence au Svalbard.
00:33:15Pas mal.
00:33:20C'est un archipel norvégien.
00:33:23Tu viens de chercher ça sur Google ?
00:33:27C'est revenu dans une conversation l'autre jour.
00:33:31Oui, par hasard.
00:33:35Oui.
00:33:38Pour ma part, si je peux vraiment rêver,
00:33:41mon lieu idéal serait sur un bateau.
00:33:45Juste en pleine mer.
00:33:47Par beau temps.
00:33:49Passer trois jours sur un bateau.
00:33:52Ce serait cool.
00:33:55Toutes ces idées sont super.
00:33:57J'ai hâte de voir quand sera le prochain Svelte Summit.
00:34:00Et concernant la communauté et les événements,
00:34:03on nous demande comment les gens
00:34:05peuvent s'impliquer dans Svelte, s'il y a des événements
00:34:07ou des opportunités communautaires ?
00:34:11Il y a des événements tout le temps.
00:34:13Si vous allez sur sveltesociety.dev,
00:34:15vous pourrez voir le calendrier des événements.
00:34:16Il y a aussi beaucoup de ressources sur les meilleurs moyens
00:34:19de s'impliquer, surtout s'il n'y a rien
00:34:22dans votre région et que vous voulez créer
00:34:25une antenne de Svelte Society. sveltesociety.dev
00:34:28est le site où trouver toutes les infos.
00:34:33Et si vous débutez, allez sur le Discord
00:34:36et venez saluer sur l'un des nombreux salons.
00:34:41Il y a aussi des salons dédiés aux différentes antennes
00:34:47locales.
00:34:49Ce sont principalement des renvois vers d'autres
00:34:55serveurs Discord dans chaque langue respective.
00:34:57Par exemple, il y a un salon Discord Svelte Society
00:35:00pour l'Allemagne.
00:35:01Rejoignez le serveur et le salon Discord,
00:35:06et vous pourrez commencer comme ça.
00:35:08Sinon, les salons liés à Svelte
00:35:12sont aussi des endroits sympas où passer du temps.
00:35:16Oui, les gens de Svelte sont adorables.
00:35:18Alors allez les voir.
00:35:22On a une autre question liée à l'IA.
00:35:24Elliot, tu en as parlé.
00:35:26Quelqu'un demande : c'est génial de voir les frameworks s'adapter
00:35:29au monde des agents et de l'IA.
00:35:31Avez-vous des stats sur les agents qui choisissent Svelte par défaut ?
00:35:36Non, pas vraiment.
00:35:37On pourrait peut-être avoir
00:35:44un signal via des outils comme v0,
00:35:46où l'on voit ce genre de télémétrie.
00:35:49Mais Svelte, en général...
00:35:53Enfin, je dis Svelte, mais ceux qui travaillent dessus
00:35:57ont adopté une approche plutôt négative
00:36:01quant à la collecte de télémétrie.
00:36:06Donc, pratiquement, les seules données qu'on a
00:36:08sont celles qui sont publiques.
00:36:10On peut regarder les tendances de téléchargement NPM,
00:36:14qui s'envolent en ce moment sans qu'on sache trop pourquoi.
00:36:18Alors ne les prenez pas pour argent comptant.
00:36:20Oui, ne vous inquiétez pas.
00:36:22Mais oui, nous ne collectons aucune donnée
00:36:25sur nos utilisateurs pour des raisons de confidentialité.
00:36:27On ne veut pas s'immiscer dans vos machines.
00:36:30Les données qu'on a sont donc celles qui sont publiques
00:36:35et peut-être des infos utiles via certains canaux Vercel.
00:36:43Anecdotiquement, si vous demandez aux LLM quoi choisir,
00:36:46quel est le meilleur, Svelte est souvent mentionné.
00:36:51C'est déjà une bonne chose.
00:36:53Mais est-ce que ça se traduit par un choix réel de Svelte,
00:36:56si vous ne le précisez pas dans votre prompt, c'est une autre question.
00:37:01Oui, c'est très intéressant.
00:37:03Dès qu'on les pousse à réfléchir à l'outil idéal,
00:37:06ils citent souvent Svelte.
00:37:08Mais si vous ne dites pas : "Je veux que tu utilises ce framework"
00:37:11ou "Je veux que tu utilises le meilleur framework",
00:37:12juste "crée-moi une appli", ils choisiront React par défaut.
00:37:17Et on ne peut pas faire grand-chose pour changer ça.
00:37:21Nous avons donc concentré notre attention
00:37:23pour que les équipes qui choisissent Svelte
00:37:27bénéficient de la meilleure expérience possible.
00:37:29Et que les agents IA soient les plus aptes possible
00:37:31à parcourir la doc et à comprendre les erreurs.
00:37:36Oui, et comme on l'a vu avec le blog sur Portal et le site
00:37:42Potato Cannon, ils deviennent vraiment
00:37:46bons pour gérer le contexte, le MCP et le reste.
00:37:50On peut donc aller très loin, très vite, maintenant.
00:37:56Super.
00:37:57Oui, c'est génial de voir tout ce travail
00:37:58que vous faites là-dessus, en pensant aussi bien
00:38:01à l'audience humaine qu'aux agents IA.
00:38:04On a encore quelques questions plus spécifiques
00:38:06sur les fonctionnalités de Svelte.
00:38:08L'une d'elles est : peut-on appeler plusieurs fois
00:38:11la même fonction distante dans le balisage,
00:38:14ou faut-il une seule référence dans la balise script ?
00:38:17Oui, c'est possible.
00:38:20Tu travailles dessus en ce moment, je te laisse répondre.
00:38:24Ce qui empêche Rich de bosser sur les requêtes en direct
00:38:26en ce moment est justement lié à cette question.
00:38:29Oui, c'est tout à fait possible d'appeler la même fonction
00:38:35distante plusieurs fois et d'y faire référence
00:38:39à différents endroits.
00:38:41Quand vous utilisez des fonctions distantes,
00:38:44votre modèle mental pour les requêtes doit être :
00:38:46quand j'appelle une requête avec un argument,
00:38:50j'obtiens une référence à cette requête,
00:38:54et la requête est distincte des données elles-mêmes.
00:38:57Si j'appelle getUser avec l'ID 1 n'importe où dans l'appli,
00:39:04je vais en réalité obtenir la même instance
00:39:07de cette requête partout.
00:39:08Les appels sont dédupliqués à l'échelle de l'application
00:39:11pour n'avoir au maximum qu'un appel par jeu d'arguments.
00:39:16Des arguments différents donnent des résultats différents.
00:39:19Les mêmes arguments donnent la même requête.
00:39:21C'est dédupliqué partout dans l'application.
00:39:24Il y a quelques exceptions bizarres pour le moment,
00:39:28et c'est ce sur quoi je travaille : corriger, codifier
00:39:33et rendre tout cela un peu plus clair
00:39:37ces deux dernières semaines.
00:39:39Et j'espère que ce sera bientôt disponible.
00:39:41Mais oui, pour faire court : la réponse est oui.
00:39:44Appelez-les et utilisez-les où vous voulez.
00:39:47Oui, et pour approfondir un peu,
00:39:48la raison pour laquelle on fait tout ce travail
00:39:51avec le mot-clé await, entre autres, c'est
00:39:54qu'on veut que vous puissiez, autant que possible,
00:39:57exprimer tout ce dont votre composant a besoin
00:39:59directement à l'intérieur de ce composant.
00:40:00L'époque où l'on récupérait les données tout en haut
00:40:04pour les transmettre prudemment à tout ce qui en a besoin,
00:40:08c'est bientôt terminé.
00:40:10Mais si vous deviez garder une référence à une requête
00:40:14pour ensuite la faire circuler, on n'aurait
00:40:15pas vraiment atteint cet objectif.
00:40:17L'idée, c'est que si ce composant a besoin de données
00:40:20et que celui-ci en a aussi besoin,
00:40:22ils n'ont pas besoin de communiquer entre eux.
00:40:24Ils demandent simplement les données au système
00:40:28via l'interface de requête.
00:40:29Et le système s'occupe de s'assurer
00:40:32que cela ne génère qu'une seule requête réseau
00:40:34sans créer d'incohérences entre ces deux
00:40:36composants.
00:40:40Génial, merci.
00:40:42Celle-ci concerne l'API d'animation et de transition.
00:40:47그 부분에 대한 전면적인 개편이 계획되어 있나요?
00:40:49L'utilisateur dit : "C'était laborieux de passer flip
00:40:54depuis/vers les tailles via les attachments."
00:40:57Je meurs d'envie de travailler là-dessus.
00:41:02J'attends ça avec impatience depuis longtemps.
00:41:04Il y a tellement à faire.
00:41:06Oui, tout le reste nous ralentit.
00:41:09En gros, quand on a conçu l'API attachments,
00:41:12c'était précisément avec ça en tête.
00:41:16Les transitions et les animations, c'est super.
00:41:19Et elles sont intégrées au framework
00:41:21de manière à faciliter énormément certaines choses.
00:41:25Mais dès que vous franchissez un certain seuil,
00:41:28elles ne peuvent plus vraiment vous aider.
00:41:29Vous avez besoin de plus de contrôle programmatique.
00:41:33C'est là qu'une API programmatique
00:41:36pour définir les transitions et animations serait utile.
00:41:42Et l'API attachments est...
00:41:46l'idée est qu'à l'avenir, cette API,
00:41:49combinée à une API permettant de dire :
00:41:52"Hé, quand je suis éjecté du DOM,
00:41:54attends une minute que je fasse un petit fondu
00:41:58ou un petit mouvement avant de disparaître."
00:42:00Ensuite seulement, tu pourras me retirer du DOM.
00:42:02C'est ce qui permettra ces scénarios
00:42:06de transitions et d'animations plus avancés.
00:42:09Mais on n'y est pas encore.
00:42:11C'est prévu. Ça va se faire.
00:42:12Mais je ne peux pas vous donner de date.
00:42:13Certainement pas dans les deux ou trois prochains mois.
00:42:16C'est noté. Au moins, c'est sur votre radar.
00:42:22On adore entendre ça.
00:42:22Cool.
00:42:24Je pense qu'on a le temps pour une dernière question.
00:42:25Alors, la toute dernière.
00:42:25Svelte est agnostique, mais quelle est
00:42:27la base de données préférée des membres de l'équipe ?
00:42:29Encore un tour de table.
00:42:32SQLite.
00:42:34J'ai utilisé Neon par le passé pour un test rapide,
00:42:37et c'était vraiment sympa.
00:42:37Oui, SQLite est bien.
00:42:47Ce que j'attends vraiment, c'est que ces moteurs de synchro
00:42:50deviennent excellents et largement accessibles pour qu'on
00:42:53puisse faire du "local-first".
00:42:59Et à partir de là, peu m'importe,
00:43:02honnêtement, la base de données utilisée en arrière-plan.
00:43:05Oui, je pense que...
00:43:09je ne sais pas si j'en ai vraiment une préférée car...
00:43:13quand on demande juste "quelle est ta base préférée",
00:43:15il y en a tellement de différentes qui
00:43:18excellent dans des domaines différents.
00:43:22Il faut vraiment savoir pourquoi on en choisit une
00:43:24avant de dire laquelle est sa préférée.
00:43:26Je trouve Convex très intéressant pour tout ce qui est
00:43:28synchro local-first.
00:43:31C'est vraiment cool, ils ont plein de bons atouts.
00:43:36Ma base de données généraliste préférée,
00:43:38c'est probablement Dynamo.
00:43:41Elle peut être frustrante à prendre en main,
00:43:42mais elle est vraiment très rapide.
00:43:45Et elle passe extrêmement bien à l'échelle.
00:43:47Mais j'aime aussi beaucoup SQL.
00:43:49Si je peux faire fonctionner une base SQL sur un projet,
00:43:51je vais probablement foncer parce que ma carrière a débuté
00:43:55dans l'analyse de données.
00:43:58Le SQL, c'est ce avec quoi j'ai grandi, en gros.
00:44:04Donc oui, je n'ai pas d'élue absolue,
00:44:07mais c'est ma façon de voir les choses.
00:44:09Sympa.
00:44:14Et on a un commentaire de Paolo.
00:44:16Je sais que vous l'avez salué tout à l'heure.
00:44:20Il dit : "Je vois trop de couleurs.
00:44:20Est-on sûrs que Rich, Simon et Elliot travaillent pour Vercel ?
00:44:23Ma chaise est noire."
00:44:24Oui, mais Paolo me poussait à mettre le sweat Vercel,
00:44:27sauf qu'il fait trop chaud ici.
00:44:32Très bien, les gars.
00:44:35Mais je l'ai dans mon placard et je le sors
00:44:38quand il fait plus froid.
00:44:40C'est ce qu'on aime entendre, on porte les couleurs !
00:44:45Génial.
00:44:48Oui, je suis tellement impatient pour l'avenir de Svelte
00:44:51et je vous remercie vraiment d'avoir été avec nous
00:44:54pour tout votre travail acharné en coulisses.
00:44:55Merci aussi énormément au reste de l'équipe Svelte
00:44:58qui n'est pas sur le live, les mainteneurs de Svelte.
00:45:01Et un grand bravo à la merveilleuse communauté Svelte.
00:45:03Oui, merci Rich, Simon, Elliot de nous avoir rejoints.
00:45:05Merci.
00:45:09Salut !
00:45:11C'était un plaisir.
00:45:16OK, et vous, public, ne partez pas tout de suite
00:45:17car avant de conclure, nous avons une invitée spéciale.
00:45:18Voici Eve, de l'équipe éducation de Vercel.
00:45:20Bonjour.
00:45:23Comment ça va ?
00:45:26Bonjour, Eve.
00:45:31Ça va.
00:45:32Et toi ?
00:45:33Ça va super.
00:45:33Merci.
00:45:34C'est vraiment une équipe de choc, des pointures.
00:45:35Oui.
00:45:36C'est un vrai régal.
00:45:36D'accord.
00:45:40Voudrais-tu nous en dire plus sur l'Academy
00:45:41et sur ce que vous nous préparez ?
00:45:44Oui, avec plaisir.
00:45:45Alors, si vous ne le saviez pas, Vercel a désormais son Academy.
00:45:47On a déjà 11 cours en ligne.
00:45:49Le plus récent vient de sortir aujourd'hui,
00:45:50et c'est... tadaaa... le cours "Svelte on Vercel".
00:45:55L'équipe nous a vraiment aidés à
00:45:57finaliser tout ça.
00:46:03Dans ce cours, on construit une appli d'alertes météo de ski.
00:46:10Si vous skiez...
00:46:13oh, oui.
00:46:15Je partage mon écran, je vais vous montrer ça.
00:46:18Super.
00:46:23Ah, voilà.
00:46:25Et voilà.
00:46:28C'est plus parlant comme ça.
00:46:29Le cours Svelte sur Vercel est donc disponible.
00:46:30On y bâtit une application d'alertes pour le ski.
00:46:31De nos jours, si vous skiez,
00:46:34vous savez que la saison a été assez rude.
00:46:36Très peu de neige.
00:46:40Il a fait chaud partout.
00:46:43C'est donc crucial d'être prévenu
00:46:47quand les conditions sont bonnes.
00:46:48On construit donc cette appli au fil du cours
00:46:50pour que ça devienne réalité.
00:46:52On peut configurer différentes alertes
00:46:54selon les conditions recherchées pour
00:46:58qu'au moment venu, on soit sur place,
00:46:59sans gâcher une seule journée possible.
00:47:02Le cours couvre Svelte,
00:47:06comment le déployer sur Vercel,
00:47:10comment utiliser l'IA SDK,
00:47:13comment utiliser les workflows,
00:47:17avec quelques conseils pour la production au passage.
00:47:19Génial.
00:47:21Merveilleux.
00:47:23Je suis convaincue que c'est en forgeant qu'on devient forgeron.
00:47:27C'est vraiment top.
00:47:28Merci beaucoup.
00:47:29On ajoutera un lien vers le cours
00:47:31dans les ressources du live.
00:47:33Merci d'avoir été avec nous aujourd'hui, Eve.
00:47:34Parfait.
00:47:36Merci beaucoup.
00:47:38Très bien.
00:47:41C'est ainsi que s'achève notre session en direct.
00:47:41Un grand merci à notre communauté
00:47:42d'avoir passé ce moment avec nous.
00:47:46Je ne vais pas mentir, le chat était en feu aujourd'hui.
00:47:49C'est génial à voir.
00:47:51On espère que ça vous a plu.
00:47:52Et pour reprendre les mots de Rich Harris, "Svelte est un art de vivre".
00:47:54Alors allez vous amuser avec.
00:47:56Continuez à créer des choses avec Svelte.
00:47:58Si vous voulez nous rejoindre pour nos futures sessions,
00:48:02vous trouverez tous les détails sur notre plateforme
00:48:03à l'adresse [community.vercel.com/live](https://community.vercel.com/live).
00:48:05Merci à tous.
00:48:08À bientôt.
00:48:11Au revoir.
00:48:13C'était un plaisir.
00:48:15Prenez soin de vous.
00:48:16À la prochaine !