React Conf 2024 : Toutes les annonces

00:09 La conférence React deux-mille-vingt-quatre vient tout juste de finir et on a été gâté par les annonces qui semblent plus prometteuses l'une que l'autre. Analysons-les ensemble. On va d'abord parler de la sortie imminente de React dix-neuf. L'équipe de React a beaucoup réfléchi avant de proposer cette nouvelle version. Ils nous rappellent les principes de React.

00:28 React sert à offrir une bonne expérience utilisateur tout en conservant une bonne expérience pour le développeur. La version dix-neuf de React va sortir dans les prochaines semaines. Elle est déjà disponible en bêta et on nous dit que l'impact sera minime pour la plupart des applications. Tu peux dès maintenant mettre à jour ton projet React en utilisant la version dix-huit point trois pour avoir des avertissements sur les API dépréciées ainsi que des conseils pour préparer la migration vers la version dix-neuf. Mais si tu es impatient et que tu veux déjà tester la version dix-neuf de React, tu peux lancer la commande suivante dans ton projet, donc NPM install react arobase bêta, react dom arobase bêta pour bénéficier des dernières fonctionnalités.

01:09 Bien sûr, si tu utilises TypeScript, tu vas devoir modifier le package JSON manuellement pour également télécharger les déclarations de type de React et de React demain. Mais tu retrouveras toutes ces informations sur le site officiel dans la description. La première nouveauté, c'est qu'il y a une meilleure gestion des erreurs. À l'époque, une erreur était déclenchée deux fois. Elle a été déclenchée une première fois, puis React l'attrapé et puis il l'a déclenché une deuxième fois, ce qui faisait que tu avais deux fois la même erreur dans ton terminal.

01:37 Dans la version dix-neuf de React, ce ne sera plus le cas et il nous donne une nouvelle API qu'on va pouvoir utiliser pour gérer les erreurs qui ont été attrapées et non attrapées par l'application. Un autre changement, c'est que les prop tips sont entièrement dépréciés pour de bon. Avant, quand tu les utilisais, tu avais encore un avertissement de React, mais maintenant, tu n'as plus du tout l'avertissement de React quand tu utilises les propetimes. Ça ne veut pas dire qu'ils ne vont plus fonctionner. Ça veut seulement dire que React ne va plus te mettre en garde par rapport à ces propetimes.

02:06 Il te conseille d'utiliser type script à la place. Ils nous ont partagé quelques chiffres. Déjà trente-six pour cent des développeurs apprennent à coder avec React, qui est quand même un chiffre pas négligeable. C'est énorme et c'est très encourageant pour l'équipe de développement. Ensuite, on a passé le cap des un milliard de téléchargements pour la librairie React sur NPM et l'extension Chrome de React Developer Tools a dépassé les quatre millions de téléchargements.

02:32 C'est des petites stats, mais c'est très cool de les avoir. On ne va pas entrer dans les détails de toutes les nouvelles sensibilités de la version dix-neuf de React. Mais il y en a quelques-unes qui sont très intéressantes. Par exemple, la possibilité d'ajouter une balise title ou une feuille de style à n'importe quel endroit dans notre composant React. Par exemple dans un article qui est très imbriqué dans notre application.

02:52 Ce qui va se passer au final, c'est que la balise title et la balise style vont remonter tout en haut de l'application React et ça va continuer de fonctionner. Il y a également quelques améliorations au niveau du chargement des fichiers CSS. Effectivement, on peut maintenant donner un ordre de priorité aux fichiers CSS qui sont chargés dans nos composants React avec un nouveau props qui s'appelle data preceedence. Et il sera même possible nativement de faire un préload, donc de précharger, par exemple, une police ou une feuille de style dans React en utilisant l'API préload que tu importes depuis React Dom. Encore une fois, tu peux retrouver toutes ces fonctionnalités dans la description sur le lien React Dom.

03:34 Mais il y a une annonce trop bien et qui adresse toutes les erreurs d'hydratation. À l'époque, il suffisait que tu renvoies une date côté serveur qui change côté client et tu avais une erreur d'hydratation. Mais ça ne s'arrêtait pas là. Tu avais aussi des erreurs d'hydratation sur les applis React si tu utilisais par exemple une extension Google Chrome ou une librairie tierce comme Google Analytics ou Centré. Perso, j'ai beaucoup d'erreurs d'hydratation quand j'utilise chaque CNUI et Radixe UI.

04:02 Eh bien, la version dix-neuf de React nous offre une meilleure expérience développeur avec une solution simple pour régler ces erreurs d'hydratation. Une comparaison beaucoup plus lisible entre ce qui a été rendu côté serveur ce qui a été rendu côté client. Mais le plus gros impact de la version dix-neuf de React sera les actions, la gestion des actions. React a été fortement inspirée par la librairie Remx qui a mis en place cette API des actions. Alors qu'est-ce qu'une action Une action, c'est tout simplement tout ce qui est formulaire d'édition dans ton application.

04:36 Quand tu crées ou que tu modifies de la donnée dans ta base de données, toute cette logique serveur est considérée comme une action parce que l'équipe est bien consciente que les utilisateurs actuels de ces applications s'attendent à un retour immédiat de leur interaction et ils s'attendent aussi à ce que l'application se souvienne des changements qui ont été effectués sur l'application. Donc il faut sauvegarder l'état de notre application, par exemple s'il y a un chargement, si un formulaire vient d'être renvoyé ou s'il y a eu une erreur. Ils nous comparent donc les formulaires html classiques et les formulaires React qui utilisent javascript. Un formulaire html classique va recharger toute la page. C'est plutôt simple, mais l'expérience utilisateur n'est pas incroyable.

05:19 Par contre, il fonctionne sans javascript, donc ça, c'est cool. Mais si tu recharges toute la page, c'est assez compliqué d'ajouter un feedback à ton utilisateur en cas d'erreur, et caetera. Par contre, les formulaires qui utilisent JavaScript peuvent tout de suite notifier l'utilisateur en cas d'erreur dans le formulaire, sauf qu'ils ne sont pas disponibles tant que JavaScript n'a pas fini de charger. Donc, les utilisateurs qui n'ont pas activé JavaScript ne pourront pas utiliser ton application. De plus, le deuxième désavantage, c'est pour la logique asynchrone, c'est-à-dire contacter ta base de données, ça prend du temps, ce n'est pas instantané.

05:51 Donc du coup, c'est compliqué. On ne peut pas rajouter cette logique côté client. Sauf que l'équipe de React veut le meilleur des demandes. Elle veut un formulaire html, mais avec l'interactivité d'un formulaire JavaScript. Et c'est là qu'il nous présente la nouvelle API avec les actions.

06:05 Il nous présente donc un composant de formulaires classique qui prend dans son action au lieu de prendre un string, ça va prendre une fonction call back asynchrone qui va effectuer le traitement. Par exemple, la modification des données côté serveur. Bien sûr, ils ont pensé à tout parce que cette action peut être asynchrone et elle peut être exécutée côté client, mais elle peut aussi être exécutée côté serveur avec la directive use serveur. Ce qui est cool avec ce changement, c'est que tu pourras quand même soumettre le formulaire même si Javascript n'a pas fini de charger et même si ton application n'a pas été hydratée. Et React a sorti plein de props que tu pourras utiliser avec cette nouvelle API pour connaître l'état du formulaire, pour savoir si le formulaire est en train d'être soumis, s'il y a un chargement en cours, s'il y a eu des erreurs avec les hooks use optimistik use farm status et use action state.

06:59 Voilà, je ne sais pas ce que tu en penses, mais moi, ça me hype beaucoup. J'ai vraiment hâte que la version dix-neuf de React sorte pour jouer avec ces AP. Pour rappel, la date de sortie de la version stable de React dix-neuf est prévue dans les prochaines semaines. On va voir ce que ça donne, j'ai hâte. Mais parlons maintenant d'un gros changement qui va avoir un impact sur la performance de nos apps.

07:19 Effectivement, ce n'est pas fini avec les annonces. Ils nous ont parlé également du React Compiler. React Compiler, c'est le nouveau compilateur qui va optimiser ton code React. Et il y a plusieurs choses à savoir. Il vient d'être open source par l'équipe de développement de React.

07:35 Donc, tu peux dès aujourd'hui inspecter le call source et regarder ce qu'il en a. Il est en bêta, donc tu peux déjà le tester avec React dix-neuf, mais surtout, il optimise automatiquement ton application React sans que tu n'aies rien à faire. Et ça, c'est vraiment génial parce qu'il va faire un diagnostic de ton app. Il va inspecter tous les composants de ton app et il va les optimiser en mettant des use mémo, des use call back, encore une fois sans que tu n'aies rien à faire. Et les statistiques parlent d'elles-mêmes.

08:04 Les applications en production qui utilisent React Compailer comme Facebook et Instagram voient des améliorations non négligeables. Par exemple, une vitesse de chargement améliorée de douze pour cent, une navigation plus rapide et surtout des interactions plus de deux fois plus rapides. Bien sûr, quand on utilise use mémo et use call back, il y a des désavantages. Par exemple, ça va utiliser plus de mémoire et donc il peut y avoir un contrecoup à ces améliorations. Cette fois, bonne nouvelle, il n'y aura pas de contrecoup à cette optimisation.

08:35 Donc, comment peux-tu tester ce compilateur React aujourd'hui Eh bien, le lien est dans la description de cette vidéo. En cliquant dessus, tu arrives sur ce site et tu peux voir qu'il y a plusieurs informations. Par exemple, il est possible d'activer ce compilateur, mais seulement sur certains fichiers. Si tu as un très gros projet, vu que le compilateur est encore en bêta, tu n'as peut-être pas envie de risquer des bugs. Du coup, ce que tu vas faire dans ce cas-là, c'est que tu vas limiter les fichiers que tu autorises le compilateur à optimiser.

09:04 Ce qui est cool aussi, c'est que tu peux activer plusieurs modes de compilation. Il y a notamment le mode de compilation annotation qui va te permettre d'optimiser au cas par cas, donc composant par composant en rajoutant cette fonctionnalité use mémo. Mais attention avec ce mode-là, ils nous disent bien ici que cette fonctionnalité est disponible en environnement de développement pour inciter les développeurs à tester le compilateur. Mais la fonctionnalité sera retirée lors de la sortie de la version stable. Effectivement, le principe, ce n'est pas de choisir un ou deux fichiers à optimiser.

09:35 Le principe, c'est d'optimiser tout ton projet React sans que tu n'aies à faire quoi que ce soit. Donc, pour pouvoir l'utiliser, la première chose que tu dois faire, c'est d'avoir installé la version dix-neuf de React, donc la version bêta. Et ensuite, tu pourras lancer cette commande sur le terminal. Cette commande va te renvoyer du coup ces trois phrases, donc le nombre de composants qui ont réussi à être compilés et optimisés, si l'utilisation du street mode a été détectée et si certaines librairies sont incompatibles avec le compilateur. Il existe aussi un plugin de Eas Lint que tu peux utiliser indépendamment de ce compilateur.

10:09 Il est présent ici, il s'appelle Eas Lint plug-in React Compyder et tu peux le rajouter ici pour générer des erreurs Eas Lint si ton code ne respecte pas les règles du compilateur. Bon alors, comment fait-on pour installer ce React Compiler Eh bien, tu peux l'installer avec Babel. Si tu utilises Babel, tu as la documentation sur cette page. Si tu utilises vite, ça sera un peu différent. Tu vas devoir importer la configuration du React Compiler dans le fichier de configuration de vite.

10:37 Si tu utilises NextEJS, tu pourras utiliser également le plugin Babel, mais tu devras installer la version Canaries de NEXT, qui utilise le release candidate de la version dix-neuf de React. Avec Remix, c'est pareil, tu vas devoir installer le plugin vite Babel et tu vas devoir rajouter cette ligne dans ta configuration vite. Et bien sûr, il est également possible d'utiliser ce compilateur avec Webpack, avec expo et avec React Native. Encore une fois, pour pouvoir utiliser le compilateur, tu es obligé d'utiliser la version dix-neuf de React, que ce soit la bêta ou la version stable. Maintenant, parlons un petit peu de l'annonce de Remix et de React Rotter.

11:14 Remix a rempli son objectif. Pour la version dix-neuf de React, l'équipe de React s'est inspirée de Remix pour proposer plein de nouvelles fonctionnalités. La gestion des transitions, les actions, les écrans de chargement, Optimistique QI, les métatags, toutes ces idées venaient à la base de Remix et React les a adoptés dans sa prochaine version stable. Donc, quand ils ont fait l'annonce que la version trois de Remix sera en fait la version sept de React Rotter, ça permettait des millions d'applications qui utilisent encore React Rotter aujourd'hui de pouvoir mettre à jour très facilement leurs applications, leurs call source et de bénéficier des dernières fonctionnalités de React. Le plus cool dans tout ça, c'est la nature incrémentale de ces migrations.

11:55 Parce que tu peux passer à la version de React Router sept, mais tu peux garder quatre-vingts pour cent de tes pages et continuer d'utiliser la version précédente. En fait, c'est toi qui choisis le nombre de pages que tu veux migrer et donc tu peux faire cette migration petit à petit, contrairement aux autres frameworks où tu dois tout mettre à jour d'un coup. Mais alors, sur quoi va travailler l'équipe de Remix s'ils sortent React Router version sept Eh bien, ils vont travailler sur un outil de développeur qu'on pourra utiliser en parallèle de notre projet React Router. Effectivement, ils appellent le projet Reverb et ça sera la version quatre de Remix. Tu peux retrouver tous ces détails dans un tweet de Reagan Florence.

12:34 Mais il nous dit que la version quatre de Remix n'est pas pensée pour remplacer React Router sept, mais pour être utilisée en parallèle. Maintenant, parlons un petit peu de React native parce qu'il y a eu quelques annonces concernant cette technologie qui nous permet de développer des applications mobiles avec React. La bonne nouvelle, c'est que le compilateur de React est disponible pour React Native. Donc, sans que tu n'aies rien à faire, juste en installant ce nouveau compilateur une fois qu'il sera stable, ça va optimiser ton code React Native pour t'offrir des chargements plus rapides, des interactions beaucoup plus rapides, sans effort et sans contrecoup. Il y a eu plusieurs présentations dédiées à React Native à la conférence React, notamment Amazon qui l'utilise pour son application mobile, mais aussi pour développer l'application Alexa, l'application Amazon photo et l'application Kindle.

13:20 Une chose est sûre, l'équipe nous assure qu'ils font des efforts pour réduire encore davantage l'écart entre la manière de coder une application React et la manière de coder une application React native, pour que ces compétences React puissent être utilisées pour les deux technologies. Mais ce qui a été impressionnant, c'est la présentation de Expo. Expo, c'est une suite d'outils qui te permettent de développer, de publier des applications en utilisant React Native très très facilement. On peut voir ici qu'il t'aide déjà durant le développement, durant la review et durant le déploiement de ton application, que ce soit sur Android, sur iOS et même sur le web. Et un des développeurs de expo, Evan Bacon, a fait une démo d'une nouvelle fonctionnalité, il va arriver très prochainement et elle a été très impressionnante.

14:04 On peut voir dans son exemple ici qu'il a recodé Chat GPT. Mais au lieu d'envoyer les réponses de l'IA sous forme de texte, il les renvoie sous forme de composants. Et c'est ce qui fait vraiment la différence avec le Chat GPT d'aujourd'hui. Parce que voilà, maintenant, on parle énormément des React serveur Compolents, donc de ces composants qu'on renvoie directement depuis le serveur au lieu d'effectuer le rendu côté client. Et ça va nous permettre à toutes ces IA de créer un composant React, donc une vue qu'elle va nous renvoyer sous forme de réponse au lieu de nous renvoyer tout simplement du texte.

14:36 Bien sûr, on va devoir s'impatienter un petit peu parce que cette fonctionnalité est prévue pour l'année prochaine, en deux mille vingt-cinq. Mais on n'est pas à bout de nos surprises parce dans les trois prochains jours, il va y avoir l'app point g s conférence à Krakao. Ça se passe du vingt-deux au vingt-quatre mai deux-mille-vingt-quatre et c'est une conférence entièrement dédiée à React Native et à Expo. Il y aura donc beaucoup de présentations qui vont avoir lieu et beaucoup d'annonces en ce qui concerne le développement d'applications mobiles avec React Native. Si ça t'intéresse, tu as bien sûr le lien dans la description.

15:10 Alors, qu'as-tu pensé de toutes ces annonces Est-ce que tu es content des nouveautés Est-ce que tu les attendais depuis longtemps Ou alors est-ce que tu es tout simplement pas trop impressionné N'hésite pas à me dire ce que tu as pensé de cette conférence et de cette vidéo en commentaire. Et on se retrouve très bientôt pour la prochaine vidéo. À plus.