Les 8 et 9 novembre 2022, j’ai assisté au React Global Online Summit, un événement organisé par l’équipe Geekle. J’ai déjà écrit un article sur la piste junior du React Global Online Summit – mais cette fois, je voudrais me concentrer sur les discussions seniors.
« Réaction et performance » – Balram Singh
La première conférence que je voudrais partager est celle de Balram Singh, qui est manager chez Publicis Sapient. Balram a commencé son exposé en récapitulant l’évolution du Web. Puis il a commencé à comparer Gatsby et Next.js sur diverses fonctionnalités car les deux proposent les techniques de rendu les plus récentes, SSG et SSR.
Plugins et modèles
Les plus de 3000 plugins et modèles stables fournis par Gatsby permettent de gagner beaucoup de temps de développement par rapport à Next.js.
Espace de déploiement préféré
Le Gatsby Cloud est l’environnement de déploiement idéal pour Gatsby, tandis que Vercel est la zone de déploiement préférée pour Next.js. Si vous choisissez l’option suggérée, vous bénéficierez d’un certain nombre de fonctionnalités qui accéléreront le développement.
Récupération de données
Gatsby promeut les avantages de GraphQL et conseille à ses utilisateurs de l’utiliser, contrairement à Next.js.
Fonctionnalités de réaction
Bien que React 18 soit encore en version bêta, Next.js propose des exemples pour son composant React Server. Malheureusement, Gatsby ne nous a pas encore donné de nouvelles informations à ce sujet.
Docker
Contrairement à Next.js, qui peut être déployé sur n’importe quel fournisseur d’hébergement prenant en charge les conteneurs Docker, Gatsby Docker peut déployer des sites Web dans un conteneur Docker.
MonoRepos
Monorepos nous propose de partager du code et des composants entre différentes applications frontales. Par exemple, Lorna et Travis sont habitués à créer des dépôts mono dans Gatsby, tandis que le dépôt Turbo peut être utilisé pour produire des dépôts mono dans Next.js.
Il a conclu son exposé en expliquant quand utiliser Next.js et Gatsby. Gatsby est la meilleure option si nous voulons GraphQL, nous devons construire notre site rapidement en utilisant les plugins et modèles Gatsby, et la stabilité et la cohérence des données sont cruciales pour nous. D’autre part, Next.js doit être utilisé si nous avons besoin d’un contrôle complet du code et de mises à jour fréquentes du site Web, et les fonctionnalités les plus récentes de React sont essentielles pour nous.
« Écrire des tests fantastiques ! » – Abhighya Jain
La deuxième conférence du React Global Online Summit a été donnée par Abhighyaa Jain, ingénieur logiciel chez DisneyPlus Hotstar+. Elle a souligné l’importance d’écrire des tests et a discuté des différences entre les tests E2E et les tests unitaires et comment combler l’écart entre eux.
Abhighyaa a déclaré que les tests unitaires sont simples et rapides à développer, leurs composants de test sont isolés et détaillés, mais leur portée est très limitée. Bien que les tests E2E n’aient pas ces restrictions et incluent l’ensemble du système dans leur champ d’application, ils ne nécessitent pas non plus de moquerie. Mais ils sont chers et entrent très tard dans le cycle de développement.
Selon elle, il y a un écart entre les tests unitaires et E2E, et nous avons besoin de quelque chose entre les deux pour avoir confiance dans l’application globale. Pour ce faire, nos tests doivent être simples à comprendre et rapides à construire, apporter une confiance suffisante, réussir le test de refactoring, entrer tôt dans le cycle de développement et éliminer les dépendances.
Elle a montré les options de test de page fournies par Next.js. Next.js considère une page comme une unité distincte et vous permet de tester cette page. Elle a conclu en suggérant à ceux qui développent des tests que la rédaction de tests en toute confiance et couvrant tous les cas d’utilisation est plus cruciale que la quantité de tests et le pourcentage de couverture.
« Soutenir React, une perspective de fournisseurs de bibliothèques » – Niall Crosby
La troisième conférence a été donnée par Nial Crosby, fondateur de Ag Grid, une bibliothèque de grilles de données utilisée dans divers cadres pour afficher les données en lignes et en colonnes. Nial a démontré pourquoi la grille Ag n’avait pas bien fonctionné avec React, les problèmes auxquels ils ont dû faire face et les changements qu’ils ont apportés. Il a également évalué sa nouvelle approche avec SolidJS pour la comparer avec les solutions ReactJs et JavaScript.
Le projet de grille agricole a commencé en 2015. Niall s’était créé une grille agricole dans son travail précédent. Étant donné que le code était open-source, il pouvait voir qu’il y avait de nombreux téléchargements du projet, il a donc décidé de quitter son emploi pour démarrer son entreprise. Ag-grid a une version entreprise avec plus de fonctionnalités ; aujourd’hui, dix mille entreprises l’utilisent. Malgré de nombreuses modifications en temps réel, Niall a déclaré que les performances de la grille sont bonnes.
Le problème auquel ils ont été confrontés avec ReactJs
Pour prendre en charge autant de frameworks que possible, ils avaient deux options : l’une consistait à encapsuler le composant (le même code Js à utiliser pour chaque framework), et l’autre à écrire un composant de grille Ag pour chaque framework. Ils sont allés avec la solution d’emballage, en écrivant le code JS et en l’enveloppant pour le livrer à d’autres frameworks. Ensuite, ils avaient la liberté de personnaliser le cadre qu’ils avaient choisi.
Ils avaient un problème avec l’approche React. Pour expliquer le problème, il a ajouté la propriété suppressReactUI={true} dans le composant AgGrid. Il y avait une div supplémentaire dans la console qui s’appelait ag-react-container. La structure du composant de grille n’était pas non plus visible. Avec l’accessoire donné, ils ont utilisé des composants js au lieu de React. D’un autre côté, ce n’était pas une bonne expérience de doubler le nombre d’éléments div dans DOM pour les performances.
La solution consistait à découpler la logique métier des opérations DOM, laissant les composants uniquement chargés d’interagir avec le DOM. Le contrôleur affecte l’opération DOM au composant.
Après avoir supprimé cet accessoire qu’il a ajouté au début de son exposé, nous avons pu voir les composants de ligne et de cellule dans la console, et il n’y avait plus de div supplémentaire.
Il a démontré que redimensionner la largeur des colonnes dans React prend plus de temps (60 ms) que de la changer dans JS (11 ms). En effet, React utilise le Virtual Dom pour styliser, contrairement à JS. Par conséquent, react fonctionne bien lorsqu’il s’agit de modifier des données.
Il a ensuite découvert SolidJS, un framework de type React sans Virtual DOM. Il a créé le moteur de rendu SolidJS et a vu qu’il était beaucoup plus rapide que ReactJs en termes de style et similaire en ce qui concerne la mise à jour des données.
« Réagir Remixé Avancé » – Daniel Afonso
Daniel Afonso, le défenseur des développeurs chez OLX Group, a commencé son discours en conseillant au public de regarder son discours React-Remix au JS Global Summit en 2022, car c’était la suite de ce dont il parlait à ce moment-là. Daniel a affirmé que parce que Learning Remix fait les choses comme le Web les fait depuis 20 ans, cela ressemble à l’apprentissage du Web.
Il nous a expliqué comment créer des messages conviviaux avec des composants d’interface utilisateur, vérifier les erreurs d’état et les gérer avec le crochet useCatch. Il a dit que les cas ErrorBoundry peuvent être utilisés lorsque nous oublions de les ajouter à CatchBoundaries. Nous pourrions également ajouter des messages personnalisés tels que « une erreur inattendue s’est produite ». Il a également montré le crochet useTransition pour rendre un composant d’interface utilisateur lorsque notre formulaire est soumis.
« Gestion de session à l’aide de React Router V6 » – Anton Kalik
Au cours de son discours, Anton Kalik, ingénieur logiciel senior chez Amenitiz, a présenté les nouvelles fonctionnalités de gestion de session dans React Router v6.4. Il nous a conseillé de savoir où se trouvent le site protégé et le site public. Lorsque nous avons besoin d’accéder à des informations protégées, nous ne pouvons pas l’obtenir si nous n’avons pas de sessions, mais sur les voies publiques, nous sommes libres d’afficher ce que nous voulons, même si nous n’avons pas de sessions.
Dans la V6.4, il y a de nouvelles fonctionnalités, et elles nécessitent l’utilisation d’élément prop et d’avoir un MainLayout avec navigation et toutes les pages requises à l’intérieur. De plus, l’utilisation de requêtes et d’actions asynchrones facilite également la vie. Anton a indiqué que lorsque nous démarrons un nouveau projet en utilisant la version 6.4 comme celle-ci, nous pouvions fournir une valeur commerciale rapidement.
Conclusion
C’était formidable de participer au React Global Online Summit. Bien que je ne puisse pas inclure un résumé de toutes les conférences, je les ai appréciées. Si ces sujets vous intéressent, je vous encourage fortement à participer à la prochaine édition qui aura lieu les 18 et 19 avril. Pour plus d’informations, n’hésitez pas à visiter le site de l’événement.