Pourquoi utiliser React<span class="wtr-time-wrap after-title"><span class="wtr-time-number">11</span> min read</span>
Schéma illustrant pourquoi utiliser react

Pourquoi utiliser React11 min read

Pourquoi utiliser react

React JS est une librairie développée par l’équipe de facebook. Elle se base sur le principe de la programmation par composants. C’est à dire le fait de développer un site web par le biais de composants interchangeables et combinables. Un exemple classique de composants serait : Un header, Un footer , une navbar.

L’avantage de la programmation web par composants c’est le SPA. C’est à dire single page app. C’est un concept qui permets de charger une page web une seule fois et ne plus jamais avoir a actualiser. Allez sur le site de facebook, c’est ce système qu’ils utilisent.

Comment ça fonctionne le SPA ?

Pour comprendre comment fonctionne une single page app, il faut d’abord comprendre comment fonctionne un site web normal. C’est à dire les site webs comme on les fait depuis des décénies.

Le fonctionnement d’un site web “classique”

J’entends pas web classique, ce qu’on fait depuis la création des site web. Pour les débutants qui n’ont aucune idée du fonctionnement d’un site web, je vais expliquer. Le web est basé sur le protocol HTTP (hyper text transfer protocol) qui est une surcouche du protocol TCP

Les site web classiques fonctionnement assez simplement, l’utilisateur envoi une requête a une url, par exemple “lesite/boutique” et le serveur web va aller envoyer les ressources correspondante a l’url boutique.

Avec le temps sont apparu les gestion de bases de données, d’utilisateurs et celle-ci se font a l’accession de la requête, lorsque l’utilisateur demande une ressource via l’url, le serveur va aller récupérer les données dans la base de donnée et les envoyer a l’utilisateur.

Globalement le modèle est toujours le même, l’utilisateur accède a une url appelée route, le serveur web va récupérer les information nécessaires dans la base de donnée et envoyer ces données avec de l’html.

Pourquoi ce modèle fonctionnait bien ?

Au début du web, on utilisait des page html statiques, c’est à dire que le serveur envoyait simplement le contenu a l’intérieur du fichier. Avec le temps on as ajouté des accessions aux bases de données et on as simplement crée un système pour que l’html puisse intégrer des informations dynamiques c’est à dire provenant d’une base de donnée.

Mais aujourd’hui on crée des pages web de plus en plus complexes, qui demandent de charger de plus en plus de donnée et surtout de faire des modifications dans les bases de donnée très souvent, par exemple si vous êtes sur youtube et que vous likez une vidéo, et bien vous allez envoyer une requête via javascript qui va dire a youtube de modifier la base de donnée.

Ce système ajoute énormément de complexité puisque l’on doit créer beaucoup beaucoup beaucoup de requêtes AJAX (un système permettant d’envoyer des requêtes http a un serveur sans recharger la page) pour tout.

Le fonctionnement des single page app

Pour palier à ces difficultés de développement et d’utilisation, notamment le fait qu’il est long de charger une page et désagréable de devoir recharger une page complète a chaque fois que l’on veux accéder a une nouvelle url, on as crée le modèle SPA.

Le principe est simple, il n’y a qu’un seul document html pour toute la page et chaque fois qu’il y a un changement d’url, c’est javascript qui va modifier le DOM et faire des requêtes AJAX.

Souvent on ne voit pas l’intérêt au début, personnellement je n’avait pas vu tout de suite la puissance de ce système. Je vais vous donner un exemple très simple. Lorsque vous utilisez une page web, au moins la moitié du contenu ne change jamais. La barre du haut, la partie du bas, les menus sur le coté. Tout ça , ne change jamais et pourtant a chaque fois que l’on relance une page, c’est re-téléchargé. Ce système fait que l’utilisateur va à chaque fois perdre du temps a recharger des éléments qui ne changent jamais. Pire encore , l’utilisateur va télécharger le css et le javascript alors qu’ils ne changent pas non plus. Du coup le serveur va être surchargé par des requêtes inutiles et l’utilisateur va perdre du temps a télécharger du contenu inutile.

Le bundle.js

Pour faire fonctionner une spa, on crée un bundle js. C’est en fait un très grand script qui va n’être téléchargé qu’une fois et qui va contenir toutes les modifications possibles de la page. Comment ça fonctionne ? Grâce aux modification du document object model (DOM). Le script va créer les éléments html en javascript et si l’utilisateur change de page, il va supprimer les anciens éléments et recréer les nouveaux sans jamais re-télécharger quelque chose. Grâce a ça, on ne recharge jamais d’éléments inutiles comme les barres de navigation et l’utilisateur ne télécharge jamais rien une fois le premier chargement fait.

Le SPA permets d’avoir une vitesse de chargement incroyable, puisque javascript va modifier directement la page et télécharger les données via AJAX. Le chargement de la page va être extrêmement rapide. En gros on évite 90% des chargements puisqu’ils sont inutiles.

Concrètement on as un système permettant d’optimiser à fond un site web et de réduire la charge du serveur. Mais j’ai mieux encore.

REST

En SPA, la partie utilisateur et le serveur de données sont complètement séparer, on peux modifier les données grâce a une API REST. C’est à dire un site web

Oui ça fait peur, ça semble extrêmement complexe mais c’est en fait très simple. Dans un site web classique on utilise déjà ce système pour modifier des données via AJAX dans recharger toute la page, c’est ce qui se passe lorsque vous aimez une vidéo sur youtube. Vous envoyez une requête au serveur web et il va modifier les données grâce a votre requete. Et bien les SPA basent 100% de leur modifications et de chargement sur ce système.

Pourquoi c’est bien ?

Déjà parce qu’il ne peux plus y avoir de bugs de chargement ou d’injections SQL. Ensuite parce que c’est extrêmement rapide. Et surtout parce que l’on as une gestion de données polymorphique.

Je m’explique, étant donné que les données sont gérés par un serveur externe. Vous pouvez très bien créer une application mobile et utiliser la même API que votre site web.

Grâce a ça on as trois interfaces utilisateurs mais un seul serveur. Idéal pour de grosses plateformes comme netflix qui utilisent REACT dans leur projets.

Schéma illustrant pourquoi utiliser react
Schéma illustrant pourquoi utiliser react

On voit sur ce schéma que le site web va envoyer les requêtes a la base de donnée grâce au serveur web REST qui va ensuite exécuter les modifications et renvoyer la réponse a l’utilisateur.

Vous pouvez voir que l’on peux créer une application sur plusieurs plateformes avec un serveur. Le gain de vitesse est démentiel, plus besoin de programmer plusieurs serveurs.

Pourquoi choisir react ?

Il existe plusieurs libaries et framework permettant de créer des single page app, pourquoi choisir react ?

Et bien déjà parce que c’est une libairie et pas un framework, ce qui veux dire que vous êtes beaucoup plus libres qu’avec des outils comme angular ou vue js.

Ensuite parce que react as une approche avec des composants. C’est à dire que vous développez chaque partie de votre site indépendamment. La barre du haut est un composant, la barre du bas aussi. Grâce a cela vous pouvez isoler chaque partie et la modifier sans avoir a tout refaire.

En plus de ça, il deviens facile de télécharger des composants sur internet provenant de librairies. Puisque toute la logique est séparée et contenue en composants , le développement est facilité.

Enfin, choisir react vous garantiras une stabilité et surtout une rapidité de votre application.

En effet react est beaucoup plus léger et plus rapide que ses concurrents, en plus de cela, son code est maintenu par facebook et est extrêmement stable. A contrario d’angular ou de VUE js qui a chaque nouvelle version cassent tout. Le code react est rétro compatible ce qui vous garantis une stabilité de votre site web.

En quoi ça profite aux utilisateurs et au développeurs

Pour les développeurs

Vous allez gagner énormément de temps. React permets de développer un site web a une vitesse gargantuesque. Je ne plaisante pas, j’ai déjà réalisé des projets en quelques jours qui m’aurait pris quelques semaines normalement. C’est une technologie très facile à apprendre et très recherchée sur le marché.

Les développeurs react sont très recherchés et très bien payés. Puisqu’ils permettent de faire gagner du temps au entreprises et donc de l’argent.

En plus de cela, développer avec react c’est très plaisant, fini de perdre du temps a se mélanger dans les routes. Vous allez tout séparer en composants et être parfaitement organisés. Finit aussi l’html classique qui est redondant et lent, ici on fonctionne avec du jsx, c’est un pseudo html crée par facebook permettant d’écrire du code très rapidement et facilement.

En somme, react va vous faire gagner du temps, de l’argent et vous verrez que c’est très plaisant à utiliser.

Pour les utilisateurs

React va permettre une fluidité de votre page web qui sera très plaisante pour les utilisateurs. Dans l’inconscient des utilisateurs, un site qui va vite c’est gage de qualité. Et React va super vite. La page web seras fluide et l’utilisateurs auras l’impression que les choses se chargent avant même qu’il clique, ce qui lui donneras envie de revenir sur votre site.

En plus de cela il seras assez facile de créer un design responsive adapté à chaque taille d’écrans, beaucoup plus facile qu’avec un site classique. Ce qui amélioreras encore plus l’expérience utilisateur, afin de fidéliser vos utilisateurs.

Enfin , vous pourrez très rapidement développer une application mobile avec react native , c’est une technologie basée sur react permettant de créer des applications mobiles. Avec ça, les utilisateurs vous prendrons au sérieux alors que vous n’aurez casiment rien eu à faire pour créer votre application mobile puisque vous pouvez réutiliser les composants de votre site et les ajuster un peu.

En somme utiliser React c’est garantir une vitesse et une fluidité incroyable, ce qui est gage de sérieux et de qualité.

Conclusion

Si cet article vous as plu, vous pouvez vous abonner à ma newsletter pour recevoir le guide GRATUIT Ultime pour bien débuter la programmation

Vous abonner à notre newsletter

* champ requis

Laisser un commentaire

Fermer le menu
×
×

Panier