La nouvelle réactivité de Svelte 5 ! - Actus JS de la semaine (25 septembre 2023) - Vidéo Dailymotion

DevTheory

Serveur Discord de DevTheory : https://go.devtheory.fr/discord  Actu: Nouvelle réactivité de Svelte 5 : https://svelte.dev/blog/runes Actu: Next.js v13.5 : https://nextjs.org/blog/next-13-5 Actu: Documentaire sur TypeScript : https://www.youtube.com/watch?v=U6s2pdxebSo Ressource: Vue UI Lib Picker : https://ui-libs.vercel.app/  -------------------------------------------------------------------- DevTheory   Formations : https://devtheory.fr/?utm_source=youtube&utm_medium=yt_description Discord : https://go.devtheory.fr/discord Twitter: https://go.devtheory.fr/twitter LinkedIn : https://go.devtheory.fr/linkedin  -------------------------------------------------------------------- Informations  00:00 - Introduction 00:21 - Actu: Nouvelle réactivité de Svelte 5 07:16 - Actu: Next.js v13.5 08:29 - Actu: Documentaire sur TypeScript 09:04 - Ressource: Vue UI Lib Picker 10:15 - Conclusion  Contact partenariat : https://go.devtheory.fr/partenariat

Transcript

00:00 nouveau système de réactivité pour Svelte version 5 ainsi que de meilleures performances

00:05 sous Next.js. Bienvenue dans les actualités de la semaine du lundi 25 septembre 2023.

00:11 C'est parti !

00:12 Bonjour à tous, c'est Brian de Dev Theory, la chaîne pour devenir et rester un bon développeur

00:20 JavaScript. Cette semaine, on va commencer par parler de Svelte 5. Svelte 5 n'est pas

00:25 encore sorti, mais ils ont déjà livré une partie des nouveautés qu'il y aura dans

00:33 cette version 5 de Svelte, dans cette nouvelle version majeure, notamment l'introduction

00:38 des runes. Les runes, qu'est-ce que c'est ? C'est un nouveau système pour gérer la

00:43 réactivité au sein de Svelte. Comme vous le savez, Svelte a principalement été connu

00:48 parce qu'il permettait d'écrire du JavaScript assez naturel et ça fonctionnait de base

00:53 avec la réactivité. Pour une variable count qu'on définit simplement avec let, on peut

00:58 à tout moment faire un +=1, l'incrémenter via un bouton qui exécute cette fonction-là.

01:05 Et derrière, au niveau du DOM, ça va faire en sorte d'update le DOM, de re-render cette

01:12 partie-là et d'avoir la variable count qui est mise à jour pour l'utilisateur. Et ça,

01:18 ce n'est pas aussi simple qu'on le croit. C'est vraiment Svelte qui détecte que là,

01:21 il y a un let et donc va englober ce count à travers un autre objet pour détecter

01:25 quand est-ce qu'il change, etc. Et alors, il re-render le HTML.

01:30 En fait, il commence à avoir maintenant un nouveau système de réactivité, il y aura

01:36 un nouveau système de réactivité sous Svelte 5 qui va consister à cette fois-ci englober

01:43 la variable qu'on veut qu'elle soit réactive via ce $state. On met la valeur, le 0, dedans.

01:50 Donc, tout le code va rester le même, c'est juste cette initialisation-là qui va changer.

01:54 Alors là, vous me dites "mais attends, on revient en arrière, le but avec Svelte, c'est

01:58 de ne pas faire ça". Effectivement, on peut croire qu'on revient un peu en arrière,

02:02 mais en fait, il y a une justification. La justification, elle est qu'on va aller au-delà

02:08 des components. On va également écrire du code Svelte dans des fichiers .js ou .ts,

02:13 un peu comme des composables ou .js ou autres. On va écrire des fonctionnalités dans des

02:17 fichiers externes aux components. Et là, vous pouvez encore me dire "mais attends,

02:22 ça existait déjà avant". On avait cette fonction là, "writable" dans les Svelte

02:27 Store, qui nous permettait d'écrire des variables réactives. Et dans cette variable réactive-là,

02:32 on avait deux choses qui étaient intéressantes, c'était "subscribe" et "update". Et cette

02:36 variable "update"-là nous permettait justement de mettre à jour le contenu de la variable.

02:42 Et le "subscribe" permettait de récupérer la valeur actuelle. C'était un fonctionnement

02:47 assez bizarre, que je trouve assez bizarre, parce que ce "createCounter", on renvoyait

02:52 donc ce "subscribe"-là. Et à l'instant où une variable, ici "counter", avait cette propriété

02:57 "subscribe"-là, on pouvait directement la mettre dans le DOM et ça faisait en sorte

03:02 qu'elle se rechargeait dès qu'elle changeait de valeur. Et vous voyez qu'on a également

03:06 une autre variable, ici "increment", qui est donc une fonction et qui permettait d'incrémenter

03:11 via "update" ici de ce "writable". C'est comme ça qu'on faisait avant pour écrire

03:14 du code réactif en dehors des components. Et donc ici on peut voir que c'est un peu

03:20 bizarre, pourquoi ? Parce que justement ce point "subscribe", on ne l'utilise pas vraiment,

03:25 mais il est utilisé par Svelte, donc ça peut amener à certaines incohérences. Et donc

03:29 ici, avec cette nouvelle manière de gérer la réactivité avec cette run $state, on

03:36 remplace totalement le "writable", qui n'existera donc plus. Et ensuite, on va faire en sorte

03:41 d'avoir une fonction "increment" qui va simplement faire "count" += 1. Et derrière, on va rajouter

03:46 un "getter" de "count" qui va nous retourner la dernière valeur de "count". C'est une

03:50 fonction pour que justement ça retourne la dernière valeur de "count" et pas la valeur

03:53 à initialisation. Et donc maintenant, en ayant ce "createCounter" là, cette variable

03:58 "count", on va pouvoir faire en sorte qu'au niveau du DOM, on affiche bien ".count", donc

04:03 là on est conscient de ce qu'on affiche, c'est bel et bien la propriété qu'on a

04:06 définie juste au-dessus. Et ensuite, on utilise également le ".increment" qu'on

04:09 avait juste avant, mais qui est plus simple, on n'utilise pas cette fois-ci le "update".

04:12 Donc ça, effectivement, c'est plus naturel. Au niveau de ce code externe au component,

04:18 c'est plus naturel. Mais par contre, pour le code interne au component, ça peut paraître

04:23 un peu plus de "boilerplate" pour pas forcément grand-chose. Il faut savoir que les deux systèmes

04:29 vont rester. Il va y avoir le système de base qui va toujours fonctionner, mais également

04:33 maintenant ces runes qui existent. Et parmi ces runes, on va également avoir d'autres

04:37 fonctions, comme par exemple le "$derived", qui va permettre d'update à l'instant où

04:41 l'une des deux valeurs s'update. Donc si "width" ou "height" changent, alors ARIA va être

04:46 recalculée parce qu'en fait c'est une "derived", elle utilise la rune "derived" de "width"

04:51 ou de "height", en fait c'est une "computed". On a également un "$effect", qui est une

04:55 fonction qui va se réexécuter à l'instant où une des variables à l'intérieur va

05:00 se mettre à jour. Et donc là, vous pouvez voir des choses qui vraiment ressemblent beaucoup

05:04 effectivement à Vue.js. Il y a eu pas mal de tweets par rapport à cette nouvelle version

05:09 de la réactivité sous Svelte 5, qui ont fait voir un comparatif très net avec Vue.js 3.

05:15 Notamment ici, en fait ce "$state", c'est l'équivalent de "ref", le "$derived", c'est

05:20 l'équivalent de "computed" et le "$effect", c'est l'équivalent de "watch_effect". Donc

05:24 là, si vous voyez ces deux codes-là, ils font exactement la même chose, sauf que

05:27 l'un est sous Svelte et l'autre est sous Vue.js. Donc ça se ressemble vraiment beaucoup. La

05:33 grosse différence, c'est qu'au sein du code, ici à l'intérieur, le "count" sous Vue.js,

05:38 on doit utiliser le ".value" parce qu'en fait c'est toujours du JavaScript un peu natif,

05:41 alors qu'ici ce n'est quand même pas du JavaScript natif, donc on peut utiliser "count" tout seul.

05:46 Donc voilà un peu pourquoi la communauté a réagi pas mal la semaine dernière en voyant

05:52 Svelte 5, parce qu'en fait ça ressemble beaucoup maintenant à Vue.js. Et donc voilà, il faut

05:58 savoir que l'ancien système va toujours exister, mais qu'il va probablement exister dans

06:03 un "title", enfin dans une partie de la documentation qui sera un peu "old stuff",

06:09 c'est-à-dire que ce sera les choses en ce qui est de la nouvelle manière d'apprendre Svelte,

06:12 ce sera via ces "runes" là. Donc ça fait un peu comme si c'était "options API" et "composition

06:17 API" également à travers Vue.js. Et c'est intéressant de voir à quel point ces frameworks

06:22 développés par des communautés, Svelte et Vue.js, à l'instant où ils commencent à devenir plus

06:27 populaires, créent une nouvelle manière de gérer la réactivité parce que justement,

06:31 des applications plus complexes ont besoin de ces systèmes-là. Et c'est marrant de voir

06:36 justement que Svelte et Vue.js convergent un peu dans cette évolution de leur cycle de vie.

06:42 Donc voilà un peu pour résumer, ce que vous utilisez toujours sur Svelte sera toujours

06:47 utilisable, mais en fait ce sera un peu obsolète en quelque sorte, parce qu'ils veulent plutôt

06:52 pousser les runes à voir après si la communauté réagit bien ou non à ça, donc à voir avec le

06:58 temps comment ça se passe. Bien sûr, Svelte 5 n'est pas encore en production, donc on peut l'utiliser,

07:03 mais il n'est pas du tout encore sorti en production, donc à ne pas mettre sur vos

07:06 sites web. Voilà tout concernant cette grosse nouvelle de la semaine. Plusieurs petites nouvelles

07:11 pour terminer ces éditions de la semaine. Donc on a Next.js version 13.5 qui est sorti et qui vaut

07:16 le coup d'être mis à jour parce que ça va pas mal changer vos performances, notamment au niveau

07:21 de votre temps de startup qui va gagner 22%. Également le fast refresh, donc à l'instant où

07:26 vous changez quelque chose dans votre code, ça va se recharger 29% plus rapide et également moins

07:32 d'usage de la mémoire. Ce qui est également intéressant de voir dans ce petit article de

07:39 blog, c'est qu'on voit l'adoption du dossier app par rapport au dossier pages. Comme vous le savez

07:44 peut-être depuis quelques versions maintenant, je ne sais plus à quelle version, il y avait

07:49 l'introduction d'un nouveau dossier dans Next.js qui permettait de gérer les pages, donc la création

07:55 de pages, de sous-pages, etc. Ce dossier-là c'était le nouveau dossier app et avant c'était

07:59 seulement pages. On peut voir l'évolution depuis janvier 2023 de la proportion de sites web qui

08:04 utilisent app-router ou page-router. Ici 113 par rapport à 12 000, on est à peu près à 1% des

08:11 sites web qui utilisent app-router et maintenant 6000 par rapport à 79 000, on est à peu près à

08:16 7%. On voit vraiment que ça augmente, ils disent que ça augmente de 80% par mois le fait d'utiliser

08:21 app-router par rapport à pages-router tout simplement. Il faut voir si c'est une tendance

08:26 qui va continuer ou non. Autre nouvelle, c'est un documentaire. Effectivement, il y a un documentaire

08:32 qui est sorti par rapport à TypeScript, l'histoire de TypeScript, comment ça a été conçu et comment

08:36 petit à petit ça a été adopté par les plus grands projets, notamment JetBrains, Deno, VS Code,

08:43 Teck & Goodmerg, etc. On a vraiment l'adoption de TypeScript qui s'est fait à peu près partout.

08:46 On a même l'histoire de TypeScript par rapport à sa relation avec Microsoft dans ce documentaire.

08:51 Alors je ne l'ai pas encore vu, j'ai seulement vu un peu le début, mais il faut, je pense,

08:55 le voir. Pas mal de personnes l'ont conseillé sur Twitter, donc ça peut être intéressant si vous

08:59 avez un peu de temps pour connaître un peu l'histoire de TypeScript par curiosité bien sûr.

09:04 Dernière chose pour cette semaine, c'est un site web créé par David qui fait partie de la

09:09 communauté de Dev Theory, qui est également présent sur le serveur Discord et qui nous a

09:12 donc partagé un site web qu'il a lui-même créé pour aider à décider quelle UI/Library choisir

09:19 quand on est sur Vue.js 3 ou alors sur Nuxt 3. Par exemple, si vous voulez uniquement des

09:24 librairies d'UI pour Nuxt, vous cliquez sur votre petit filtre ici Nuxt et vous voyez qu'il y a

09:29 seulement Nuxt UI qui est vraiment fait pour Nuxt. Ensuite pour Vue.js, il y en a d'autres

09:33 qu'on peut bien sûr utiliser pour Nuxt également. Et ensuite il y a d'autres files, voilà, est-ce

09:37 que vous voulez que ce soit stylisé ou pas stylisé, etc. Avec Tailwind CSS en plus, etc.

09:41 Donc il y a vraiment pas mal de choses avec également des features par rapport au fait

09:44 qu'il y ait Figma, il y a un Dark Mode, il y a ce soit Accessible, etc. Donc c'est vraiment

09:49 assez bien avec même un nombre de components minimum, etc. Donc c'est un bon petit piqueur

09:53 et si jamais vous voulez l'améliorer, mettre plus de données dessus, et bien vous pouvez

09:57 totalement aller sur le GitHub, faire une petite PR et voilà vos nouvelles données donc par rapport

10:02 à un UI/Library que vous connaissez qui n'était pas présent, et bien ce sera également rajouté.

10:06 Voilà, merci à David et n'hésitez pas à créer des projets comme ça que je pourrais présenter

10:10 également directement à vous. C'est assez intéressant. Voilà tout concernant cette

10:16 semaine. Bien sûr, je vous mets le lien de tout ça directement juste en dessous,

10:19 en description. Quant à nous, on se retrouve dès lundi prochain. Je vous

10:23 souhaite une excellente semaine, très bon codage et à très vite !

10:26 [Musique]

La nouvelle réactivité de Svelte 5 ! - Actus JS de la semaine (25 septembre 2023)

Category

Transcription

Recommandations