Nouveautés d'ES2023 confirmées  - Actus JS de la semaine (03 juillet 2023) - Vidéo Dailymotion

DevTheory

15 Go gratuit sur kDrive d'Infomaniak : https://go.devtheory.fr/infomaniak-cloud-gratuit  125ème assemblée d'ECMA: https://www.ecma-international.org/news/ecma-international-approves-new-standards-at-the-125th-general-assembly-27-june-2023/ ES2023 - Array find from last: https://github.com/tc39/proposal-array-find-from-last ES2023 - Change array by copy: https://github.com/tc39/proposal-change-array-by-copy Actu: Ember v5.0.0 : https://blog.emberjs.com/ember-5-0-released/ Article: Vercel Skew Protection : https://vercel.com/blog/version-skew-protection Sponsor: 15 Go gratuit sur kDrive d'Infomaniak : https://go.devtheory.fr/infomaniak-cloud-gratuit   -------------------------------------------------------------------- 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:37 - 125ème assemblée d'ECMA 01:00 - ES2023 - Array find from last 03:32 - ES2023 - Change array by copy 06:40 - Actu: Ember v5.0.0 07:27 - Article: Vercel Skew Protection 10:02 - Sponsor: 15 Go gratuit sur kDrive d'Infomaniak 11:32 - Conclusion  Contact partenariat : https://go.devtheory.fr/partenariat

Transcript

00:00 les nouveautés Deckmascript 2023 sont à présent confirmées alors découvrons tout ça dans cette

00:05 édition des actualités de la semaine du lundi 3 juillet 2023. Mais avant ça place au sponsor de

00:11 la semaine Infomaniac. Infomaniac est une alternative éthique aux géants du web qui

00:17 est engagée pour le respect de la vie privée, de l'environnement et de l'économie locale. Cette

00:23 semaine en fin de vidéo on va parler de leur offre gratuite K-Drive qui vous permet en fait

00:28 une alternative à Google Drive ou à OneDrive. On en parle plus en fin de vidéo c'est parti !

00:33 Alors comme je vous disais on va parler donc des nouveautés Deckmascript 2023 car effectivement

00:42 il y a eu la 125e généraux l'assemblée de ECMA international donc ce 27 juin 2023 et ils ont donc

00:50 confirmé l'édition 2023 Deckmascript. Dans cette édition 2023 il y a différentes nouvelles

00:56 fonctionnalités au niveau du langage Javascript et on va parler de deux nouveaux proposals qui ont

01:02 été acceptés et dont je trouve qu'ils sont les plus intéressants au niveau de la vie d'un développeur

01:08 Javascript de tous les jours. Alors le premier c'est le proposal ERAI Find From Last. Qu'est-ce

01:13 que ce proposal permet ? Il permet deux nouvelles méthodes sur tous les tableaux donc sur tous les

01:18 ERAI qui sont .findlast et .findlastindex. Comme vous savez on avait déjà les fonctions .find

01:26 et .findindex qui permettent de trouver un élément en donnant une condition ici,

01:33 en donnant une fonction avec une condition ici et dès que celle-ci renvoie true sur un élément,

01:38 et bien alors cet élément là est renvoyé ou alors l'index de cet élément là est renvoyé.

01:42 Et le problème entre guillemets avec cette fonction c'est qu'en fait elle commençait

01:46 toujours de l'index 0 et elle allait donc en incrémentant vers le dernier index de l'ERAI.

01:51 Donc ça commençait par le début de ce tableau là mais parfois si jamais on a un certain ordre

01:56 chronologique ou autre ou alphabétique dans cet ERAI là, on peut avoir envie de commencer cette

02:01 recherche ce find ou ce findindex à partir de la fin. Et pour cela avant on était obligé de faire

02:06 un point reverse sur ce tableau là, ce qui faisait ça inverser tous les éléments du tableau et ensuite

02:11 faire un point find. Ensuite il fallait refaire un point reverse après coup afin de remettre le

02:16 tableau dans le vrai sens, dans le sens originel. Et donc ça c'était un problème, maintenant ce

02:20 problème est totalement résolu puisqu'on a le .findlast et le .findlastindex qui permettent

02:25 donc de commencer cette recherche là à partir de la fin de l'index. Donc en fait de faire du

02:31 dernier élément vers l'avant dernier et pour revenir vers le premier. Donc ça c'est vraiment

02:35 super. Voilà ici on a un petit exemple qui est en place, on a un ERAI d'objets avec des objets

02:41 qui ont différentes propriétés value qui valent de 1 à 4. Et donc avant ce proposal là, si jamais

02:47 on voulait chercher le dernier élément qui était impair, donc là vous voyez modulo 2 est strictement

02:53 égal à 1, pour faire ça il fallait d'abord faire un point reverse et ensuite faire un point find et

02:59 ensuite mettre ce modulo 2 est égal à 1. Et ensuite on trouvait la value 2 parce que ça commençait

03:05 donc par le dernier élément parce qu'on avait fait ce point reverse là. Et bien maintenant on fait

03:08 simplement un ERAI .findlast, on met la même méthode et on récupère directement value 3. Et

03:13 la même chose pour le findindex, vous voyez que ce findlastindex ça va nous récupérer 2, 0, 1, 2,

03:19 donc effectivement ça nous récupère bien l'élément 3 et non pas l'élément 1 si jamais ça commençait

03:24 par le sens originel du tableau. Donc voilà deux nouvelles méthodes qui sont très intéressantes

03:29 je pense pour certains cas particuliers mais toujours très intéressants. Autre nouveauté,

03:33 une grosse nouveauté je pense l'une des plus grosses de cette mise à jour, c'est le fait de changer un

03:38 ERAI en créant une copie. Alors ce proposal là, en fait il s'inclut un peu dans la mouvance du

03:44 functional programming qui signifie qu'on ne doit pas en fait modifier les variables, on ne doit pas

03:49 faire de mutation sur des variables, on doit seulement en créer des nouvelles. Et ça, et bien

03:53 il y a plein de nouvelles méthodes ici qui vont permettre ça, notamment quatre nouvelles méthodes

03:58 .toReversed, .toSorted, .toSpliced et .weave. Alors ces quatre méthodes là en fait elles sont

04:05 le reflet de méthodes qui sont déjà existantes sur les ERAI, qui sont donc .reversed, .sort,

04:10 .splice et ici c'est simplement le fait de modifier un élément d'un ERAI. Et donc si on regarde un

04:15 petit peu qu'est ce qui va se passer ? Ici vous voyez qu'on a une séquence, donc on a un ERAI de

04:19 1, 2, 3 et on va faire donc .toReversed dessus. Et ce qui va se passer c'est que cette fonction

04:24 là, cette méthode là, va nous renvoyer un nouvel ERAI 3, 2, 1 et l'ERAI de base, donc notre variable

04:30 séquence, ne sera pas modifié. Donc là vous voyez que c'est une grosse différence avec le .reversed

04:34 puisque le .reversed il va modifier l'ERAI sur lequel il est, donc c'est à dire que la séquence

04:39 là serait modifiée en lui-même si on mettait un .reversed, mais ici le .toReversed, il va créer

04:44 une copie du tableau et ensuite il va appliquer le .reversed sur cette copie là. Donc ça c'est

04:49 vraiment super pour ne pas modifier les éléments de base et vous voyez qu'on aurait pu servir de

04:52 ça justement pour un find last si jamais on n'avait pas eu le find last. Et de la même chose pour le

04:57 toSorted, ça va permettre donc de trier un tableau mais sans changer l'ordre de base, ça va trier

05:02 donc via une copie du tableau. Et de la même chose pour, c'était quoi l'autre ? C'était .toSpliced

05:09 qui va permettre donc de couper un ERAI mais de pas couper l'ERAI originel, de couper en fait

05:14 une copie de l'ERAI de base et donc ça va nous renvoyer un nouvel ERAI. Donc ça c'est encore

05:20 super. Et la même chose pour le .with, c'est vraiment bien parce que ça permet de remplacer

05:24 un élément par un autre. Ici donc le .with, ça veut dire qu'au niveau de l'index numéro 1, donc

05:29 cette valeur là, et bien je remplace par la valeur 2. Donc là on va avoir un nouvel ERAI qui va faire

05:34 1, 2, 3 à la place de l'ERAI originel qui était à 1, 1, 3. Et vous voyez que le ERAI originel ici,

05:40 et bien il vaut toujours 1, 1, 3 après le .with. On a simplement créé un nouvel ERAI avec une

05:45 nouvelle variable sur un certain index. Donc ça c'est vraiment encore une fois une superbe chose

05:49 pour tout ce qui est fonctionnel programming et pour tout ce qui est éviter des effets de bord,

05:55 éviter des side effects en modifiant une variable elle-même mais plutôt créer une nouvelle

05:59 variable à partir d'une ancienne valeur. C'est vraiment bien et personnellement je vais tout de

06:02 suite l'utiliser dans les différents projets parce qu'il faut savoir que déjà, parce que les

06:07 navigateurs s'y attendent, et bien la plupart de ces fonctionnalités là sont déjà en place. Si on

06:11 regarde ERAI pour un prototype, par exemple Find, et bien on va voir qu'il y a bel et bien FindLast

06:16 et FindLastIndex. Et si on regarde pour To, et bien il y a bel et bien déjà .toReverse, .sorted,

06:20 .spice, etc. sur Chrome. Donc je sais qu'il n'y a que Mozilla qui encore est un peu lent sur

06:26 quelques unes de ces méthodes là, mais ça va venir ou alors si vous utilisez certains outils

06:31 où vous allez avoir des polyfying qui se feront directement au niveau de votre bundle, donc il

06:35 n'y a pas de souci à se faire. Voilà concernant donc les nouveautés sur ECMAScript. Ensuite,

06:40 et bien on va parler de Ember, Ember 5.0. Alors pour ceux qui ne savent pas, Ember c'est un

06:45 framework, c'est un framework qui est même plus vieux que React, donc ça veut dire qu'il est là

06:49 depuis vraiment assez longtemps. Cette version 5.0, elle ne va pas inclure de nouvelles fonctionnalités.

06:53 C'est écrit un petit peu plus bas, tac, tac, tac, voilà. Donc au niveau des features, et bien il

06:58 n'y a aucune nouvelle feature. Alors qu'est-ce que sont les changements dans Ember.js 5.0 ? Et bien

07:04 c'est simplement quelques bugs fixes, mais surtout le fait un peu de clean, de rendre propre la code

07:09 base en supprimant toutes les méthodes qui étaient deprecated. Donc toutes les méthodes qui n'étaient

07:14 plus conseillées d'utiliser parce qu'il y avait des nouvelles alternatives qui étaient mises en

07:18 place, et bien elles ont toutes été supprimées. Donc maintenant dans cette version 5.0, il n'y a

07:21 plus aucune méthode de deprecated, et c'est pour ça qu'ils ont fait une nouvelle version majeure.

07:26 Au niveau de l'article de la semaine, on va parler de SqooProtection. Alors qu'est-ce que c'est que

07:31 ça ? Et bien c'est Vercel qui a introduit ce nouveau fonctionnement que je trouve extrêmement

07:35 bon et qui permet d'avoir des déploiements un peu plus reliable. Qu'est-ce qu'on veut dire par là ?

07:42 Par exemple, à l'instant où vous faites un déploiement en serverless, et bien votre backend,

07:47 donc le serveur qui va exécuter votre backend, va envoyer un mail ou quoi que ce soit,

07:52 et bien en fait il va être remplacé par la nouvelle version que vous allez déployer sur le moment.

07:56 Et le souci avec ça, c'est que vous pouvez avoir des clients, vos utilisateurs, qui vont avoir une

08:02 version de votre frontend qui va dépendre d'un ancien backend. Parce que si un utilisateur se

08:07 connecte, je ne sais pas s'il y a un petit schéma, non je ne crois pas qu'il y a de schéma, mais si

08:10 un utilisateur se connecte en fait sur votre application et que juste après vous faites un

08:15 déploiement et qu'ensuite il y a une nouvelle version de votre backend, mais que lui il va

08:19 faire une requête entre les deux, donc il y a eu le déploiement entre son chargement et le nouveau

08:24 backend, et bien c'est possible qu'il y ait des incohérences et donc des bugs qui vont arriver,

08:27 parce qu'il ne va pas pouvoir trouver une ressource ou autre. Exemple ici, il dit que sur

08:31 une version, un ancien déploiement, vous avez un name de email qui avait une typo,

08:36 donc c'était écrit email au lieu de email, et bien si dans votre déploiement vous corrigez ça,

08:42 mais au niveau de votre backend, et bien c'était bel et bien email que vous proposez, que vous

08:46 récupériez, et bien du coup ça va y avoir un bug quand lui il va envoyer le form, parce que le

08:49 backend serait mis à jour. Et donc qu'est ce que c'est que ce système de Sku Protection ? Et bien

08:54 c'est un super système qui va résoudre pas mal de certains bugs que j'ai eu moi en production,

08:59 et qui permet justement de lier un déploiement à un utilisateur. Et donc si un utilisateur a un

09:05 déploiement front-end, qui vient, enfin a un code front-end qui vient du déploiement numéro A,

09:10 et bien en fait il va forcément communiquer avec le backend numéro A. Et pareil pour l'utilisateur

09:16 numéro 2, s'il arrive après le déploiement, et bien il va forcément communiquer avec le

09:19 backend qui correspond au déploiement qu'il avait pour le front. Donc ça c'est vraiment super,

09:23 parce que ça permet d'éviter donc des erreurs d'incohérence, et des erreurs un peu bizarres

09:27 que vous pouvez retrouver dans vos erreurs manager comme Sentry. Alors pour l'instant,

09:31 hélas, ça ne fonctionne que pour Next.js, mais je sais qu'ils sont en préparation pour le mettre

09:37 également sur toutes les configs sous Vite. Donc ça veut dire que là, Svelte, Next, Vue.js en

09:42 général, Nuxt, Vue.js en général, tout ça, ça marcherait, mais pour l'instant c'est que pour

09:46 Next.js, hélas. Mais je trouve quand même que c'est une superbe feature, et c'est vrai que c'était

09:52 côté architecture qu'il fallait régler ça, et pas côté code de notre responsabilité. Donc c'est

09:58 super d'avoir cette nouvelle fonctionnalité en place. Maintenant parlons donc du sponsor de la

10:04 semaine Infomaniac, et surtout parlons de leur offre cloud gratuite, qui permet bien tout simplement

10:10 d'avoir 15 gigas sur leur K-Drive. Alors le K-Drive, qu'est-ce que c'est ? Et bien c'est tout

10:15 simplement une alternative à Google Drive ou à Microsoft OneDrive. Et en quoi c'est une bonne

10:20 chose ? Et bien en fait c'est parce que c'est justement une alternative à ces géants du web

10:24 qui vont avoir la main mise sur vos données. Et là, tous vos documents, vos photos, vos documents,

10:29 ou quoi que ce soit, seront hébergés directement dans des serveurs en Europe, puisque tous les

10:35 serveurs sont en Suisse. Et donc de plus, Infomaniac, c'est une entreprise qui ne va pas

10:40 gagner d'argent sur le fait que vos données soient gratuites et sur l'analyse de vos données ou quoi

10:44 que ce soit. Vos données sont totalement sécurisées et ils vont gagner de l'argent justement à l'instant

10:49 où vous allez donc prendre des plans avec plus de données. Si jamais vous êtes dans une entreprise

10:52 notamment, vous allez pouvoir prendre des plans payants et non plus un plan gratuit, ce qui va

10:57 donc permettre d'avoir cette offre de possible avec des plans gratuits. Et donc ce qui est

11:03 intéressant, c'est qu'ils ont même comme Google Drive ou OneDrive, un système de création et de

11:08 collaboration pour les fichiers Word, Excel ou PowerPoint. Et vous pouvez importer très facilement

11:13 tout ce que vous avez depuis Google Drive, Dropbox ou OneDrive vers justement ce K-Drive.

11:19 Donc voilà, c'est une offre assez intéressante qui vous permet de profiter de 15Go très sécurisé

11:23 et hébergé sur des serveurs en Suisse. Je vous mets le lien juste en dessous en description pour

11:29 pouvoir profiter de cette offre. Voilà tout concernant cette semaine. Je vous mets bien sûr

11:34 le lien de tout ce dont j'ai parlé, toutes les actualités, juste en dessous en description.

11:37 Quant à nous, on se retrouve la semaine prochaine. N'hésitez pas à vous abonner à cette chaîne

11:42 YouTube là et je vous souhaite une très très bonne semaine et un bon codage.

11:46 [Musique]

Nouveautés d'ES2023 confirmées - Actus JS de la semaine (03 juillet 2023)

Category

Transcript

Recommandée