Qu'est ce que REACTJs ?

Introduction

ReactJS est une bibliothèque JavaScript développée par Facebook. Elle est utilisée pour créer des interfaces utilisateur interactives et réactives. Grâce à sa structure basée sur les composants et son utilisation du DOM virtuel, React simplifie le développement d'applications web performantes et modulaires.

Composants

Définition

Les composants sont les blocs de construction fondamentaux dans React. Un composant est une fonction ou une classe JavaScript qui encapsule une partie spécifique de l'interface utilisateur. Chaque composant a son propre état interne et peut recevoir des données sous forme de propriétés (props) de composants parents.

Avantages

• Modularité : Les composants permettent de diviser une application en parties indépendantes et réutilisables.
• Réutilisabilité : Un même composant peut être utilisé à plusieurs endroits de l'application, ce qui réduit la duplication de code.
• Maintenance facilitée : La modularité des composants facilite la maintenance et les mises à jour du code.

DOM Virtuel

Concept

Le DOM virtuel est une représentation en mémoire de l'interface utilisateur. Lorsqu'un changement d'état se produit, React met à jour le DOM virtuel et compare les différences avec le DOM réel (diffing). Ensuite, il applique uniquement les modifications nécessaires au DOM réel.

Avantages

• Performance améliorée : En réduisant le nombre de manipulations directes du DOM, React minimise les opérations coûteuses et améliore les performances de l'application.
• Mises à jour efficaces : Les mises à jour sélectives du DOM réel permettent une interface utilisateur fluide et réactive.

JSX

Définition

JSX est une extension de syntaxe pour JavaScript qui permet d'écrire des éléments HTML dans du code JavaScript. Cette syntaxe combinée rend le code plus intuitif et facile à comprendre.

Avantages

• Syntaxe intuitive : La combinaison de HTML et JavaScript dans une seule syntaxe rend la structure de l'interface utilisateur plus claire et plus expressive.
• Facilité de développement : JSX simplifie l'écriture et la lecture du code, ce qui accélère le développement.

Gestion de l'État

Concept

React fournit un système de gestion de l'état pour gérer les données dynamiques de l'application. Les composants peuvent avoir leur propre état interne, qui peut être modifié par des événements de l'utilisateur ou d'autres facteurs.

Hooks

• useState : Permet d'ajouter de l'état local à des composants fonctionnels.
• useEffect : Permet d'exécuter des effets de bord dans des composants fonctionnels , comme des appels API ou des mises à jour du DOM.

Écosystème

Bibliothèques Complémentaires

React est soutenu par un écosystème riche de bibliothèques tierces qui étendent ses fonctionnalités.

Bibliothèques de Routage

React Router

Utilisation : Gestion des routes et de la navigation au sein d'une application React.

• Avantages :
  • Permet la navigation dynamique entre différentes pages.
  • Supporte les routes imbriquées et la gestion des paramètres de l'URL.
  • Facilite la création d'applications monopage (SPA).

Gestion de l'État

Redux

Utilisation : Gestion de l'état global de l'application, particulièrement utile pour les applications complexes.

• Avantages :
  • Centralise l'état de l'application dans un seul store.
  • Facilite le suivi et le débogage de l'état grâce aux outils de développement Redux.
  • Prend en charge les middlewares pour la gestion des effets de bord (ex: Redux Thunk pour les actions asynchrones).

MobX

Utilisation : Alternative à Redux pour la gestion de l'état avec une approche plus réactive.

• Avantages :
  • Utilise des observables pour réagir automatiquement aux changements d'état.
  • Moins de configuration et de code boilerplate par rapport à Redux.
  • Convient bien aux petites et moyennes applications.

Gestion des Formulaires

Formik

Utilisation : Simplifie la gestion et la validation des formulaires dans les applications React.

• Avantages :
  • Facilite la gestion de l'état des formulaires et la validation des champs.
  • Intègre des schémas de validation avec des bibliothèques comme Yup.
  • Fournit des hooks et des composants pour simplifier l'implémentation des formulaires.

React Hook Form

Utilisation : Gestion des formulaires avec une approche basée sur les hooks.

• Avantages :
  • Performance améliorée en raison de la réduction des re-rendus inutiles.
  • Moins de code pour les formulaires complexes.
  • Facile à intégrer avec les schémas de validation et les composants personnalisés.

Rendu Côté Serveur

Next.js

Utilisation : Framework pour le rendu côté serveur (SSR) et la génération de sites statiques (SSG).

• Avantages :
  • Permet le rendu initial des pages sur le serveur, améliorant les performances et le SEO.
  • Offre une configuration simplifiée pour le routage, les API routes, et l'optimisation des images.
  • Supporte les applications monopage avec des fonctionnalités avancées comme l'internationalisation.

Bibliothèques de Style

Styled Components

Utilisation : Gestion des styles en utilisant les composants CSS-in-JS.

• Avantages :
  • Permet de définir des styles au sein des composants JavaScript.
  • Facilite le partage et la réutilisation des styles.
  • Supporte les thèmes dynamiques et les styles conditionnels.

Emotion

Utilisation : Une autre bibliothèque CSS-in-JS pour gérer les styles de manière dynamique et performante.

• Avantages :
  • Offre une API flexible pour la gestion des styles.
  • Supporte les styles conditionnels et dynamiques.
  • Intégration facile avec les frameworks de test et les outils de développement.

Tests

Jest

Utilisation : Framework de test JavaScript pour écrire des tests unitaires et d'intégration.

• Avantages :
  • Fournit un environnement de test complet avec des fonctionnalités comme les tests instantanés (snapshot testing).
  • Intégration facile avec les autres outils de développement et les bibliothèques de test.
  • Supporte les tests asynchrones et les mocks pour les appels API.

Testing Library (React Testing Library)

Utilisation : Bibliothèque de test axée sur les tests d'interface utilisateur et les interactions utilisateur.

• Avantages :
  • Encourage les meilleures pratiques en matière de test en se concentrant sur le comportement de l'utilisateur.
  • Fournit des utilitaires pour tester les composants React sans se soucier des détails d'implémentation.
  • Facile à intégrer avec Jest pour des tests complets.

ReactJS offre aux développeurs un moyen efficace et déclaratif de construire des interfaces utilisateur interactives. Sa structure basée sur les composants, son utilisation du DOM virtuel et sa syntaxe intuitive avec JSX en font un outil puissant pour le développement d'applications web modernes. En combinant React avec d'autres bibliothèques et frameworks complémentaires, les développeurs peuvent créer des applications web robustes, performantes et maintenables.

Pourquoi nous n'utilisons pas ReactJS   

Introduction

Chez l'agence OLVANI, notre choix technologique se porte principalement sur Microsoft .NET, ASP.NET Core et Standard pour le développement de nos applications web. Bien que ReactJS soit une bibliothèque JavaScript populaire, nous avons des raisons spécifiques pour privilégier les technologies Microsoft. Voici les principales raisons pour lesquelles nous n'utilisons pas ReactJS et nous concentrons sur .NET et ASP.NET Core.

Notre approche se concentre sur la génération de code HTML, CSS et JavaScript directement dans les pages sans utiliser React.js  pour la manipulation côté client, mais en utilisant du javascript pure et XMLHttpRequest (XHR) avec des API et ainsi appliquer notre méthode sur mesure pour la création de site internet

Voici quelques points à considérer :

1. Génération de balises HTML :

   • Avec ASP.NET Core et Razor, vous utilisez des layouts ou master pages pour structurer vos pages. Cela permet de définir une structure de base commune à toutes les pages de votre application, intégrant l'en-tête, le pied de page, et d'autres éléments réutilisables. En comparaison, React.js utilise des composants réactifs pour construire l'interface utilisateur, ce qui permet une gestion plus modulaire et dynamique des éléments de l'interface.

2. CSS et JavaScript centralisés :

   • Dans ASP.NET Core, vous centralisez vos fichiers CSS et JavaScript directement dans les modèles de page ou à travers des techniques traditionnelles de gestion de fichiers statiques. Cela simplifie la gestion et la maintenance du code sans nécessiter des systèmes de build frontend complexes. En revanche, React.js favorise une approche où les styles et le JavaScript sont souvent encapsulés dans chaque composant, facilitant ainsi la portabilité et la réutilisation des composants.

3. XMLHttpRequest (XHR) et APIs :

   • Utiliser XMLHttpRequest (XHR) ou Fetch API avec des APIs dans ASP.NET Core permet de gérer les interactions avec le serveur de manière asynchrone, tout en minimisant la manipulation directe du DOM côté client. En comparaison, React.js repose sur un modèle de programmation déclaratif où les mises à jour du DOM sont gérées efficacement grâce à sa virtual DOM, ce qui simplifie la gestion des états et des rendus conditionnels.

4. SEO et rendu côté serveur :

   • ASP.NET Core met en avant ses capacités de rendu côté serveur, ce qui est bénéfique pour l'optimisation SEO en générant du contenu HTML directement à partir du serveur. Cela permet aux moteurs de recherche de mieux indexer le contenu de vos pages. Pour une meilleure maitrise des éléments à optimiser lors de la création de site internet, nous préférons utiliser notre méthode. D'un autre côté, React.js peut également prendre en charge le rendu côté serveur avec des solutions comme Next.js, offrant ainsi des performances similaires en termes d'optimisation SEO tout en conservant une interactivité client robuste.

5. Éco-conception et performances :

   • En minimisant l'utilisation intensive de JavaScript côté client, ASP.NET Core peut contribuer à réduire la charge sur le navigateur client, améliorant ainsi les performances de chargement de la page et favorisant une meilleure éco-conception. Toutefois, React.js excelle dans l'optimisation des performances grâce à sa virtual DOM et à son approche de mise à jour efficace du DOM, offrant une expérience utilisateur fluide même pour des applications web complexes.

En adoptant l'approche ASP.NET Core pour générer du contenu HTML, CSS et JavaScript directement côté serveur, vous privilégiez une gestion simplifiée et une optimisation SEO robuste, tout en intégrant efficacement des APIs pour des interactions asynchrones. En revanche, React.js se distingue par sa modularité, sa réactivité et sa capacité à gérer efficacement les mises à jour d'interface utilisateur dynamiques grâce à sa virtual DOM. Le choix entre ces approches dépendra de vos besoins spécifiques en termes de performance, de maintenabilité et de complexité du développement frontend.