Serveur Discord de DevTheory : https://go.devtheory.fr/discord
Actu: Prisma v5 - Bien plus rapide : https://www.prisma.io/blog/prisma-5-f66prwkjx72s
Actu: Prettier v3 - Ré-écrit en ESM : https://prettier.io/blog/2023/07/05/3.0.0.html
Actu: Driver.js v1 : https://driverjs.com/
Lib: Threads API (non officiel) : https://github.com/junhoyeo/threads-api/tree/main
--------------------------------------------------------------------
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:30 - Actu: Prisma v5 - Bien plus rapide
03:42 - Actu: Prettier v3 - Ré-écrit en ESM
04:52 - Actu: Driver.js v1
07:34 - Lib: Threads API (non officiel)
08:54 - Conclusion
Contact partenariat : https://go.devtheory.fr/partenariat
Actu: Prisma v5 - Bien plus rapide : https://www.prisma.io/blog/prisma-5-f66prwkjx72s
Actu: Prettier v3 - Ré-écrit en ESM : https://prettier.io/blog/2023/07/05/3.0.0.html
Actu: Driver.js v1 : https://driverjs.com/
Lib: Threads API (non officiel) : https://github.com/junhoyeo/threads-api/tree/main
--------------------------------------------------------------------
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:30 - Actu: Prisma v5 - Bien plus rapide
03:42 - Actu: Prettier v3 - Ré-écrit en ESM
04:52 - Actu: Driver.js v1
07:34 - Lib: Threads API (non officiel)
08:54 - Conclusion
Contact partenariat : https://go.devtheory.fr/partenariat
Category
📚
ÉducationTranscription
00:00 Prisma qui devient beaucoup plus rapide avec sa version 5.0 ainsi que Prettier 3.0 qui
00:06 a complètement réécrit sa codebase.
00:08 Bienvenue dans les actualités de la semaine du lundi 17 juillet 2023.
00:13 Il s'agit également des dernières actualités avant une petite pause estivale.
00:18 On reviendra donc en septembre.
00:19 C'est parti pour les actu !
00:21 Bonjour à tous, c'est Bryan de Dev Theory, la chaîne pour devenir et rester un développeur
00:29 JavaScript.
00:30 Alors comme je vous le disais, on va tout d'abord parler de Prisma.
00:32 Effectivement, Prisma est devenu faster by default, donc plus rapide par défaut.
00:37 Pourquoi ça ? Parce qu'en fait, entre la version 4.0 et la version 5.0, il y a eu quelques
00:41 changements.
00:42 Mais il faut savoir qu'il faut déjà savoir qu'en fin de version 4.0, donc la version 4.11,
00:48 il y avait déjà eu une grosse amélioration au niveau de la vitesse.
00:51 Mais dans cet article de blog, ils font un peu en sorte que ce soit inclus dans la v5,
00:55 même si c'était déjà le cas en fait dans la 4.11.
00:58 Alors de quelle amélioration il s'agit ?
01:00 Et bien ici, vous pouvez voir le temps total pour la mise en place, le call start de Prisma
01:07 et ça sur AWS.
01:08 Donc là, on parle de serverless et donc on parle de performance en termes de serverless,
01:14 qui peut être différent de d'autres performances sur les serveurs qui sont toujours allumés
01:18 en fait tout simplement avec notre application.
01:20 Parce que là, c'est des serveurs qui vont se réallumer de temps en temps quand il n'y
01:23 a pas eu beaucoup de connexions.
01:24 Donc on parle de call start de temps en temps.
01:26 Et ici donc, on est sur la connexion de Prisma et on voit que c'est quasiment 2,7, 8 secondes
01:32 pour un schéma qui est très gros.
01:37 Il y a plus de 500 modèles dans ce schéma-là si je ne me trompe pas.
01:39 Voilà, il était écrit juste ici.
01:40 Il y a plus de 500 modèles.
01:41 Donc on est vraiment sur quelque chose d'assez gros, d'assez conséquent en termes de modèles.
01:45 Et vous voyez qu'avant, on était sur du 2,7 secondes et maintenant, à partir de cette
01:50 version 4.11 et donc également en version 5, on est arrivé à une amélioration à
01:55 quasiment 300 millisecondes.
01:57 Donc c'est vraiment énorme comme amélioration.
02:01 Et comment ils ont réussi à faire ça ?
02:02 Et bien en fait, c'est en changeant de protocole.
02:05 Avant, il y avait un protocole qui était GraphQL Lite, donc une manière de parler
02:10 entre deux programmes.
02:12 Et donc ça, c'était entre le Prisma Client et le Query Engine.
02:15 Et bien en remplaçant ce GraphQL Lite protocole par tout simplement un JSON protocole, ils
02:21 sont arrivés à avoir toutes ces performances-là.
02:23 Donc c'est vraiment assez impressionnant d'avoir ça.
02:26 Et surtout dans le terme de serverless, parce qu'en termes de serverless, le call start,
02:30 c'est un peu le démon.
02:31 C'est vraiment ce qu'on veut réduire au maximum parce que ça va faire une grosse différence
02:35 quand l'utilisateur va arriver, au début c'est notre utilisateur, et que ça va charger
02:38 beaucoup et ensuite notre site web va arriver.
02:40 Donc ça, c'est un vrai point d'amélioration incroyable.
02:43 Et ensuite, ils ont réussi encore une fois à diminuer tout ça.
02:47 Tout d'abord en réduisant les dépendances du Prisma Client, ensuite en optimisant tout
02:51 simplement le Query Engine, et enfin également en mettant plus de choses en parallèle, notamment
02:56 lors des connexions.
02:57 Donc ils ont réussi à passer, on peut le voir en tout cas un peu mieux, ils ont réussi
03:01 à passer de 300 millisecondes à 100 millisecondes.
03:04 Donc vraiment, on est sur quelque chose de très très petit.
03:07 Donc voilà, par rapport à l'échelle d'avant, c'est présent tout en haut, c'est présent
03:12 juste ici, on est dépassé de 2,7 à 100 millisecondes sur la V5.
03:17 Donc c'est une très grande amélioration au sein de la vitesse.
03:20 De ce que j'ai compris, c'est surtout lié au serveur iOS parce que ça joue avec le
03:24 cold start, etc.
03:25 Mais je pense que ça quand même bénéficie à tout le monde au sein des utilisateurs
03:29 de Prisma.
03:30 Donc si jamais vous souhaitez mettre à jour, vous pouvez mettre à jour.
03:32 Il n'y a pas de gros breaking change, je n'ai pas vu de breaking change concernant Prisma.
03:37 Donc vous pouvez déjà mettre à jour et bénéficier de ces performances.
03:40 Également autre chose au sein de Prettier.
03:44 Prettier 3.0, une majeure pour Prettier.
03:47 Et qu'est-ce qui se passe ? Et bien ce qui se passe, c'est qu'ils disent
03:49 "Hello" aux ECMAScript modules.
03:51 Effectivement, ils ont réécrit toute leur codebase afin d'être en ESM, donc avoir des
03:57 import/export et non pas des require, tout simplement.
04:02 Et donc dans le cas de CommonJS.
04:04 Et donc maintenant, quand on utilise Prettier, on peut l'utiliser à la fois sous forme de
04:09 ESM, mais aussi à la fois sous forme de CommonJS.
04:11 Ils font les deux en fait.
04:12 Et ça c'est important de le savoir pour ceux qui écrivent des plugins parce qu'il y a quelques
04:18 breaking changes si jamais vous écrivez un plugin de Prettier.
04:21 Donc avant de passer à Prettier 3.0 en Peer Dependency, il faut faire quelques choses,
04:27 notamment quatre étapes pour être sûr que ça va marcher à cause de cette réécriture
04:31 en ESM.
04:32 Mais vous pouvez également totalement réécrire votre module en ESM si vous le souhaitez.
04:35 Avant, vous ne pouviez que l'écrire en CGS, donc CommonJS, parce que Prettier a été
04:41 écrit en CGS.
04:42 Mais maintenant, vous avez le choix.
04:43 Ça c'est une superbe chose.
04:44 Il y a également quelques breaking changes, mais c'est des choses assez précises dont
04:47 je ne vais pas forcément vous en parler ici.
04:49 Mais je vous mets le lien, bien sûr, juste en dessous, en description.
04:52 Et maintenant, parlons de Driver.js version 1.0.
04:55 Alors c'est une superbe librairie qui vient de sortir sa version 1.0.
05:00 Et ça faisait des années qu'elle était en version 0.9, depuis 2017 je crois.
05:03 Et là d'un coup, ils sont arrivés et ils ont mis tout plein de choses incroyables,
05:06 comme par exemple le fait que ce soit écrit en TypeScript, donc c'est typé.
05:10 C'est utilisable pour tout type de JavaScript.
05:12 Ce n'est pas framework locked.
05:14 C'est accessible, c'est framework crédit.
05:16 Effectivement, ça marche sur tous les principales navigateurs.
05:19 Également, c'est très lightweight et il n'y a plus de dependencies.
05:23 Donc, c'est vraiment une superbe librairie.
05:25 Mais qu'est-ce qu'elle fait cette librairie ?
05:26 Eh bien, en fait, elle fait des tours.
05:27 Vous savez, c'est ce genre de tour d'animation quand on va venir onboarder un utilisateur
05:31 dans notre application.
05:32 Eh bien, ce tutoriel-là, Driver.js le fait super bien.
05:35 Donc là, vous voyez qu'on va highlighter un certain élément, en se tombant en highlighter
05:39 un autre, etc.
05:40 Et ce qui est bien, c'est qu'il peut vraiment se superposer à tous les éléments.
05:44 Parce que le problème qu'on avait dans d'autres librairies de tutoriels comme ça, c'est qu'en
05:48 fait, à cause des z-index, eh bien parfois le tutoriel était tout de même en dessous.
05:52 Eh bien là, il est toujours au-dessus, quel que soit l'élément.
05:54 Et ils ont réussi à faire ça en mettant un SVG.
05:57 Alors, je ne sais pas exactement comment ils ont fait ça, mais en mettant un SVG par-dessus
06:01 les éléments, eh bien, ils arrivent à être toujours par-dessus.
06:04 Donc ça, c'est vraiment super.
06:05 Et donc, vous n'aurez pas de bug ou quoi que ce soit à cause de vos z-index.
06:08 Et ça marchera directement.
06:10 Ce qui est sympa, c'est qu'il y a vraiment plein de manières de faire.
06:12 Vous pouvez également show le progrès.
06:13 Voilà, un sur trois pour que tout le utilisateur soit au courant.
06:15 Vous pouvez vous en aller en cliquant autre part.
06:17 Vous pouvez également confirmer le fait de vous en aller, si jamais vous voulez vous
06:20 en aller, donc du tutoriel, etc.
06:22 On peut faire un simple highlight de quelque chose.
06:24 C'est également intéressant de ne pas avoir forcément un tooltip qui se mette par-dessus.
06:29 Et on peut gérer la position du popover avec du side et du line dans du top, left, right,
06:34 etc, bottom.
06:35 Donc voilà, c'est une superbe librairie pour faire ce genre de petit tutoriel.
06:39 Elle est très simple à utiliser si on regarde un peu au niveau du code.
06:42 Alors voilà, ce n'est pas au niveau du code, c'est au niveau de la documentation tout simplement.
06:45 Donc on a juste à importer driver.js.
06:48 On importe également le petit CSS qui va avec.
06:50 Puis ensuite, on initialise l'objet et on va venir highlight.
06:53 Donc ça, on peut le faire au moment du clic d'un bouton ou quoi.
06:56 On va venir highlight un élément en mettant une popover avec un title et une description.
07:01 Et donc en faisant ça, tout simplement, ça va venir highlight en mettant popover.
07:04 Donc vous voyez, c'est très simple d'utilisation.
07:06 Et on peut donc mettre ça au clic d'un bouton et ensuite, on a notre petit tutoriel qui
07:10 est fait.
07:11 On a bien sûr tous les exemples avec l'exemple du tour.
07:12 Ici, vous voyez que quand on a un tour, on a un objet step qui se met en place et ensuite,
07:17 on a les éléments qu'on connaît.
07:18 Donc element et popover à chaque fois.
07:20 Donc avec l'élément, avec un CSS sector et ensuite le popover à chaque fois.
07:24 Donc ça, c'est vraiment super et on peut show de progress ou non.
07:27 Driver.js, c'est une librairie que je vous conseille et que personnellement, j'utiliserai
07:30 si jamais j'ai affaire à ce genre de tutoriel en ligne.
07:33 Dernière chose cette semaine, c'est un paquet pour utiliser l'API de Threads.
07:40 Threads, vous savez, le nouveau concurrent de Twitter qui a été mis en place par Meta,
07:44 donc par Facebook.
07:45 Alors ce paquet-là n'est pas officiel, mais il utilise l'API officielle de Threads qui
07:50 est utilisée dans l'application également au sein du site web.
07:53 Ce qui est intéressant, c'est que ça marche très bien.
07:55 C'est-à-dire qu'on peut vraiment utiliser de base Threads API en initialisant un nouveau
08:02 Threads API avec username et password.
08:04 Et ensuite, on fait un point publish et ça publish directement un nouveau Thread.
08:09 Et ça va même plus loin.
08:10 On peut publish avec une image, on publish avec une URL, avec un "répondre" donc un
08:15 autre poste tout simplement.
08:17 On peut "quote" un autre poste, on peut "like", "unlike", "follow", "unfollow", "repost",
08:22 "unrepost", "delete".
08:23 On peut vraiment quasiment tout faire de ce qu'on fait sur l'application mobile si jamais
08:27 vous avez déjà accès.
08:28 Et on peut également récupérer des données.
08:29 Ça peut être intéressant de récupérer des données à partir d'un username ou à
08:32 partir d'un username.
08:33 On récupère le profile, les différents threads, les "replies" ou les choses comme
08:37 ça.
08:38 Donc ça peut être intéressant tout simplement pour créer des robots, des bots.
08:41 Si jamais vous voulez créer des bots sur Threads et non plus sur Twitter parce que
08:45 ça devient plus compliqué de faire des choses sur Twitter en ce moment, vous pouvez utiliser
08:48 cette petite librairie qui fonctionne très bien pour faire un site project un peu marrant.
08:53 Voilà tout concernant cette semaine.
08:56 Je vous mets bien sûr le lien de toutes ces actualités juste en dessous en description.
09:00 Quant à nous, on ne se retrouve pas lundi prochain pour une fois, mais on se retrouve
09:04 fin août, début septembre pour sûr.
09:06 J'espère que vous avez apprécié toutes ces actualités de la semaine pendant ces quelques
09:11 mois que j'ai mis sur YouTube assez récemment.
09:14 Ça ne fait que je pense 4-3 mois que je commence à mettre ça sur YouTube.
09:17 Avant, c'était dédié au club Dev Theory.
09:20 Et donc voilà, je pense que je vais continuer à les mettre sur YouTube.
09:23 Au débarque, c'était simplement une petite expérience pour savoir si ça a attiré plus
09:26 de monde.
09:27 Finalement, oui, ça attire plus de monde, mais également, c'est tout simplement plus
09:30 sympa d'avoir ça en public.
09:32 Donc, je vais totalement continuer à faire ces actualités de la semaine-là en public.
09:35 Et donc, on se retrouve fin août ou début septembre.
09:38 N'hésitez pas à parler aux développeurs que vous connaissez de cette chaîne YouTube,
09:43 de ce format-là, de ces actualités de la semaine, afin de contribuer à leur veille
09:47 technologique.
09:48 En attendant, on se retrouve d'ici un mois, un mois et quelques.
09:51 Je vous souhaite une très bonne continuation et un très, très bon codage.
09:55 À très vite.
09:56 Ciao, ciao.
10:09 ♪ ♪ ♪