5 exemples réussis de sites Web construits avec React

Posted on

React a lancé sa dernière version React v18.0 en mars 2022. Les nouvelles fonctionnalités et améliorations telles que la concurrence, le suspense, le traitement par lots automatique, etc. permettent aux développeurs d’utiliser la planification. En conséquence, les performances de rendu côté serveur peuvent être hyper-optimisées. Les utilisateurs subissent moins de retard dans l’interaction avec le contenu et les performances perçues sont considérablement améliorées – Problème résolu pour les utilisateurs sur une connexion lente. C’est l’un des nombreux avantages des applications Web, des sites Web ou des PWA construits à l’aide de React.

Vous connaissez peut-être toutes les statistiques folles et les grandes entreprises comme Netflix, Facebook, DropBox, Asana, Walmart, etc. qui adoptent la bibliothèque React.js. Vous savez, la modularité In React a aidé l’équipe Netflix à poursuivre son obsession pour les tests A/B. Ici, nous avons sélectionné d’autres entreprises inspirantes qui ont opté pour React pour leurs applications Web.

1. Bonjour signe

2. Voyage culturel

3. tinder

4. Solutions de médias numériques de l’Ouest

5. Starbuck

1. Bonjour Signe

The Hello Sign propose des solutions de signature électronique pour les documents juridiques. Ses produits sont utilisés pour les contrats de vente, l’intégration des RH, les accords financiers, les documents d’assurance, etc. Il permet de préparer, d’envoyer et de suivre les formulaires de signature électronique via une API conviviale. Hello Sign peut même être intégré à Google Docs, Slack, Salesforce, Hubspot, etc. Il s’agit d’une société Dropbox et vous savez peut-être que Dropbox utilise également React pour sa SPA (Single Page Application) et sa version mobile.

Hello Sign a trois modules – l’éditeur, le signataire et le document final. Le défi consistait à fournir une interface utilisateur brillante des trois parties sur n’importe quelle résolution d’écran. D’autres défis comprenaient l’amélioration de la réactivité de l’éditeur et le maintien de la synergie entre l’éditeur, le signataire et le document signé.
Étant donné qu’il s’agit de documents juridiques, toute légère incohérence dans l’un des trois modules peut éroder la confiance des clients.

Initialement, seul Signer a été créé à l’aide de React, mais pour résoudre ces divergences, ils ont également conçu l’éditeur avec React en raison de sa fonctionnalité Virtual DOM et de son algorithme de comparaison efficace.

Hello Sign a été construit à l’aide de PHP, et React faisait partie de la pile technologique, il a été invoqué à partir de PHP. Cette stratégie présentait certaines limites. Pour le surmonter, le routeur React avec fractionnement de code a été déployé pour passer à un point où tous les éléments de l’interface utilisateur proviennent d’une seule base de code.

De plus, les développeurs ont utilisé une approche basée sur le contexte pour la gestion de l’état. Mais ils suggèrent d’utiliser Redux comme approche plus efficace.

Le nouvel éditeur a été construit sous une division de base de code, ce qui nous a permis de le déployer sur des comptes ou des groupes de comptes spécifiques sans affecter le reste de nos clients. De plus, cela nous a permis de déployer le nouveau code de l’éditeur tout en travaillant sur une refonte de l’interface utilisateur – celle que nous avions choisi de ne pas inclure dans le cadre de notre passage à React – simultanément. – Asa Ayers, ingénieur logiciel, Dropbox

2. Voyage culturel

Culture Trip est un site Web riche en contenu. Et son succès dépend d’une navigation intuitive et d’un référencement bien exécuté. Il fournit des informations utiles sur comment et où vous pouvez passer vos vacances, vous détendre et créer des souvenirs joyeux.

Au départ, Culture Trip était sur WordPress, et on s’attend à ce qu’avec l’augmentation du trafic, leurs performances soient durement touchées. Pour suivre une voie de croissance, ils ont changé leur pile technologique pour React, Next.js, etc. et ont utilisé WordPress comme CMS semi-headless.

L’équipe de Culture Trip a adopté React car vous pouvez créer un site Web isomorphe pour un bon référencement, utiliser des composants réutilisables pour un développement rapide, tester rapidement différents éléments d’interface utilisateur et, dans l’ensemble, créer un site Web dynamique avec des milliers d’éléments d’interface utilisateur.

3. Amadou PWA

Tinder n’a pas besoin d’être présenté. Pour étendre leur portée et offrir une expérience Tinder de base aux utilisateurs sur le Web, ils ont développé la version PWA. Vous pouvez en savoir plus sur les avantages de PWA sur.

En utilisant React pour l’interface utilisateur et Redux pour la gestion de l’état, ils ont expédié le MVP en seulement trois mois. En comparant la taille avec l’application Android native, qui est d’environ 30 Mo, la taille de PWA n’est que de 2,8 Mo.

Ils ont constaté des temps de session plus longs et plus de messages sur PWA que sur les applications natives. Avec PWA, en 5 secondes, leur application Web devient interactive. Des études après études ont montré à quel point il est crucial pour les sites Web d’engager les gens en quelques secondes. L’équipe de Tinder a utilisé React Router et React Loadable pour diviser en code d’énormes bundles JS qui retardaient le chargement du contenu. Vous savez, la taille de leur bundle JS n’était que de 101 Ko après le routage, qui était de 166 Ko auparavant.

4. Nouvelles Welt

Welt est un site Web de médias d’information allemand, une filiale d’Axel Springer. JavaScript, comme vous le savez peut-être, est le langage de programmation le plus recherché, mais ce n’est pas le plus efficace. Vous devez connaître et concevoir des stratégies pour l’optimiser pour des performances maximales, sinon la taille des fichiers JS peut devenir incontrôlable.

Pour un site Web d’actualités qui n’a pas d’éléments interactifs dans le même volume que Facebook ou Twitter, ou qui n’est pas complètement contrôlé par JavaScript, l’hydratation complète ou le rendu côté serveur où tous les composants de l’interface utilisateur sont livrés au navigateur du client ralentir considérablement le site Web. Les dépenses d’analyse et d’exécution sont inutilement élevées dans cette approche.

Au lieu de cela, l’équipe de Welt a opté pour une hydratation partielle, dans laquelle seuls les fichiers JS nécessaires sont envoyés au navigateur du client. Les performances sont améliorées car seuls les fichiers HTML et CSS simples et simples et quelques fichiers JS sont rendus. De plus, le fractionnement de code peut catapulter les performances au niveau supérieur.

Welt, à cette époque, utilisait Preact, une bibliothèque très légère qui est un concurrent de React, et Next.js pour le rendu côté serveur. Mais les développeurs peuvent également effectuer une hydratation partielle avec React.

5. Starbucks PWA

Une autre marque célèbre qui n’a plus besoin d’être présentée. Je vais donc en quelques lignes vous éclairer sur la relation entre Starbucks et PWA. Dans le podcast, Cher Scarlett, dit qu’ils ont migré vers React depuis Vue. Au départ, il était difficile pour l’équipe de s’y habituer, mais en utilisant React, Starbucks a conçu une PWA haute performance. Tout comme Tinder PWA, il y a une réduction astronomique de la taille de l’application. La version PWA fait 233 Ko tandis que la taille de l’application native est de 148 Mo.

Avec la gestion d’état basée sur le contexte de React, basculer entre les thèmes clairs et sombres est super facile, ce qui n’était pas le cas avant React. Auparavant, c’était une tâche assez fastidieuse. Pour gérer des données volumineuses, Starbucks a d’abord utilisé Redux.
Starbucks a beaucoup de formulaires et les fichiers de formulaire ont tendance à prendre beaucoup de place. React ‘Hooks’, des fonctions spéciales, sont largement utilisées par les développeurs de Starbucks pour gérer le cycle de vie des formulaires.

Les avantages des applications Web React.

Interface utilisateur réactive et transitions fluides

Pour rendre une application Web ou un site Web utilisable et agréable, ses éléments d’interface utilisateur doivent être très réactifs. Les micro-transitions et les animations telles que le balayage, les barres de chargement, etc. ne rendent pas seulement l’interaction agréable et humaine. C’est un moyen de fournir une rétroaction rapide sur l’état actuel.

Désormais, pour rendre ces éléments d’interface utilisateur transparents et sans décalage, tout framework ou bibliothèque doit être rendu à une vitesse fulgurante et effectuer une gestion d’état efficace. L’état est modifié chaque fois qu’il y a une mise à jour dans les éléments de l’interface utilisateur. Comme de nouveaux commentaires ou likes sur une publication, mettre à jour une photo de profil, discuter sur plusieurs fenêtres de discussion, etc. Visualisez simplement la fréquence de changement d’état sur un site Web avec des millions d’utilisateurs.

DOM virtuel et fonctions spéciales ‘Hooks in React library sont des solutions innovantes qui permettent de créer une interface utilisateur interactive ultra-fluide et de rendre l’expérience numérique amusante.

Approche basée sur les composants pour un développement plus rapide et intuitif des éléments de l’interface utilisateur

Chaque élément de l’interface utilisateur comme une fenêtre de discussion, un panier, un fil d’actualités, etc. est considéré comme un composant dans React. Ces composants sont indépendants et immuables en raison du flux unidirectionnel de données. L’effet est que les composants sont isolés et que le changement d’un composant ne modifie pas l’état des autres.

Tous ces composants sont réutilisables. Vous pouvez même utiliser des composants créés par des développeurs pour d’autres projets s’ils vous concernent. C’est une fonctionnalité étonnante pour les développeurs paresseux. Vous voyez, les bons développeurs sont des développeurs paresseux. React sait sans aucun doute leur faciliter la vie.

Avec une approche modulaire, il est relativement facile de gérer des milliers de composants dans plusieurs équipes de développement.

Flexibilité à combiner avec d’autres bibliothèques puissantes

React n’est pas un cadre opiniâtre. C’est une bibliothèque JavaScript déclarative. Cela signifie que les développeurs peuvent le combiner avec d’autres bibliothèques créatives pour améliorer radicalement les performances.

Supposons que vous pensiez que React n’est pas assez bon pour SSR (Server-Side Rendering), alors vous pouvez le combiner avec Next.js. Pour bénéficier du rendu sans serveur, Gatsby est votre option. Pour le routage, React Router ne correspond pas. De même, Redux pour une gestion d’état efficace. D’autres bibliothèques utiles sont Material UI, Semantic UI, React Motion, etc.

Le rendu côté serveur est meilleur pour le référencement que le rendu côté client

SSR est le chargement du bundle JS sur le serveur du site Web, tandis que CSR est le rendu du contenu à l’aide d’un navigateur via DOM.

Bien que la RSE soit peu coûteuse et réactive. Mais les bundles JS, en particulier le bundle Virtual DOM, ne sont pas légers, les gens peuvent rencontrer une page blanche ou un contenu incomplet car tout le fardeau du chargement de JS repose sur le navigateur du client et, par conséquent, le perçoit comme une mauvaise performance.

Un autre problème critique est que Google n’est pas en mesure d’indexer complètement une page Web tant que JavaScript n’est pas complètement chargé. Étant donné que le titre, la méta description, les mots-clés, etc. sont inclus dans le fichier JS, de plus, ce sont l’oxygène pour le référencement, vous pouvez imaginer à quel point un problème est grave lorsque le site Web n’est pas complètement chargé et que Google ne peut pas explorer ces aspects cruciaux.

Le rendu côté serveur ne réduit pas seulement le temps de chargement initial. Cela résout également les problèmes de référencement. L’effet net est que les gens peuvent interagir avec un contenu significatif sans percevoir de retard. Comme mentionné, React 18 dispose de fonctionnalités de planification pour garantir d’excellentes performances SSR. Ou vous pouvez même utiliser d’autres bibliothèques comme Next.js ou Gatsby.

Pour savoir plus en détail pourquoi vous devriez utiliser React pour le développement Web et certains de ses pièges, lisez notre blog sur Pourquoi réagir ?

L’innovation dans React ne ralentit pas. Merci au dévouement de l’équipe principale de React et de la communauté qui l’entoure. Les développeurs d’entreprises de toutes tailles et de tous types trouvent des solutions créatives pour optimiser les performances et créer une interface utilisateur hautement réactive et sans décalage.

Cependant, d’autres bibliothèques JS légères comme Preact sont des concurrents sérieux. L’intemporalité de React réside dans sa flexibilité. Les développeurs talentueux l’utilisent avec modération et l’associent à des bibliothèques plus performantes.

Leave a Reply

Your email address will not be published.