Qu'est-ce qu'un processus de construction dans React (ou dans n'importe quel framework d'ailleurs ?)

[ Technologie ] : ReactJS – Article #1

---

Les frameworks simplifient le développement pour les ingénieurs et c'est ma tentative de simplifier le fonctionnement en coulisses de ReactJS.

---

L’heure du conte

J'ai commencé avec ReactJS. Ouais, je l'ai vraiment fait. C'est comme un rêve retardé de 2 ans alors que j'étais passionné par la conception UI/UX et le développement Front-End avant de me plonger dans la Data Science. (Je suis toujours aussi passionnée qu'il y a 2 ans.)

Je suis maintenant stagiaire dans une entreprise (qui s'appelle elle-même une startup car sa culture est plus celle d'une start-up que celle d'une entreprise) et aujourd'hui, lors de mon premier jour, je n'avais littéralement plus rien à faire depuis, mon TL (chef d'équipe) ne venait pas au bureau car il était occupé par une réunion.

Est-ce que j'ai laissé le temps m'échapper. Absolument pas.
La probabilité que je reçoive une tâche/un projet pour tester mes compétences en analyse de données était assez faible. C’est pourquoi j’ai décidé de me salir les mains dans le développement. Je sentais que c'était peut-être le meilleur moment pour commencer avec ReactJS.

---

Qu’est-ce que React ?

Réagir est un verbe (jeu de mots). Mais dans le contexte des technologies de développement, "La bibliothèque pour les interfaces utilisateur web et natives", revendique le site officiel de ReactJS.

Maintenant, si vous avez fait le tour de l'écosystème de développement, vous avez sûrement entendu parler de 2 autres concurrents ou plutôt des frères et sœurs de ReactJS, qui sont Angular et VueJS.

Voici une brève comparaison des 3 technologies Front-End les plus populaires.

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

Concept de base Bibliothèque axée sur l'interface utilisateur Cadre complet Cadre progressif ête> Liaison de données Flux de données unidirectionnel Liaison de données bidirectionnelle Liaison de données bidirectionnelle (facultatif) Structure des composants Composants personnalisés Directives et composants Composants Courbe d'apprentissage Modéré Raide Doux Performances Élevé (DOM virtuel) Peut être plus lent en raison de la liaison de données bidirectionnelle Élevé (rendu optimisé) Évolutivité Excellent, adapté aux applications à grande échelle Prise en charge renforcée des applications d'entreprise à grande échelle Bonne évolutivité, mais peut nécessiter des bibliothèques supplémentaires pour les projets complexes Communauté et écosystème La plus grande communauté, un écosystème riche Grande communauté, écosystème solide Communauté croissante, bon écosystème Flexibilité Élevé, peut être utilisé avec d'autres bibliothèques/frameworks Moins flexible en raison de la structure rigide Flexible, peut être utilisé de manière incrémentielle

---

Pourquoi devrions-nous utiliser ReactJS alors que nous avons du HTML et du JS simples ?

Inconvénients du HTML brut et du JS.

Voici le problème auquel vous serez confronté si vous utilisez :

Difficulté à maintenir des applications volumineuses :

• Le HTML simple et le JS ne disposent pas d'une approche structurée pour organiser le code.

• Les applications complexes peuvent conduire à un enchevêtrement de logique et de manipulation de l'interface utilisateur au sein des écouteurs d'événements et des fichiers de script.

• Cela rend difficile la compréhension, la modification et le débogage du code à mesure que l'application se développe.

Manipulation DOM inefficace :

• Manipuler directement le DOM dans JS peut s'avérer inefficace.

• Chaque changement d'état peut déclencher un nouveau rendu complet de la structure HTML, même pour des mises à jour mineures de l'interface utilisateur.

• Cela peut entraîner des goulots d'étranglement en termes de performances à mesure que la complexité des applications augmente.

Réutilisabilité limitée :

• Créer des composants d'interface utilisateur réutilisables avec du HTML et du JS simples peut s'avérer fastidieux.

• Vous pourriez finir par copier et coller des extraits de code dans différentes parties de votre application.

• Cela rend difficile le maintien de la cohérence et la mise en œuvre efficace des changements.

Gestion d'état complexe :

• Gérer l'état d'une application (les données qui contrôlent le comportement de l'interface utilisateur) devient difficile avec le HTML simple et le JS.

• Le suivi des modifications de données et des mises à jour correspondantes de l'interface utilisateur peut devenir compliqué et sujet aux erreurs, en particulier pour les flux de données complexes.

---

Comment ReactJS vient à la rescousse.

ReactJS résout ces limitations en proposant une architecture basée sur des composants, un DOM virtuel pour des mises à jour efficaces et un écosystème riche pour gérer les interfaces utilisateur complexes et l'état des applications.

Maintenabilité améliorée :

• L'architecture basée sur les composants et l'approche déclarative de React conduisent à des bases de code plus propres et plus maintenables, en particulier pour les applications à grande échelle.

Performances améliorées :

• Le DOM virtuel et les mécanismes de rendu efficaces de React contribuent à des expériences utilisateur plus fluides et plus rapides, même pour les applications Web complexes.

Réutilisabilité du code :

• Le modèle de composants de React favorise la réutilisabilité du code, vous permettant de créer des composants d'interface utilisateur modulaires qui peuvent être facilement partagés et combinés dans votre application.

---

La différence fait la différence.

Quand j'ai créé mes premiers composants, je me suis demandé : « Qu'est-ce que c'est exactement ? Est-ce HTML ou JS ?

J'ai intégré JS dans le HTML via <script> </script> élément ou élément. Mais écrire du HTML dans un fichier JS semble étrange ou plutôt différent.

J'ai essayé d'écrire le HTML dans le fichier JS d'un projet non-React et devinez pourquoi cela ne s'est pas bien passé.

Ensuite, j'ai appris que cette syntaxe spéciale (HTML comme à l'intérieur du fichier JS) est appelée JSX JavaScript XML et est une extension de JavaScript.

Si le code que les navigateurs comprennent est finalement du HTML et du JS bruts, cela signifie que certaines opérations sont effectuées sur le JSX (sucre syntaxique pour créer facilement des applications complexes) que nous écrivons.

Cette opération en coulisse elle-même est appelée un processus de construction.

L'idée générale d'un processus de build est de transformer votre code de développement en une version optimisée prête à être déployée dans un environnement de production.

Bien que les outils et configurations spécifiques puissent varier en fonction de la pile technologique, les concepts et objectifs généraux du processus de création s'appliquent universellement dans tout le développement Web frontend.

---

Qu'est-ce qu'un processus de construction dans ReactJS ?

Nous avons appris que l'idée de haut niveau reste la même mais les différentes phases du processus de construction de React sont les suivantes :

1. Regroupement :
   • Imaginez que votre application React se compose de nombreux fichiers JavaScript, de feuilles de style CSS et potentiellement d'éléments d'image.

Un bundler comme Webpack prend tous ces fichiers séparés et les combine en un plus petit nombre de bundles optimisés.

1. Transpilation :

   • La transpilation consiste à convertir ce code moderne (JSX) en JavaScript simple (ES5 ou une version compatible) qui peut s'exécuter sur un plus large éventail de navigateurs.

2. Minification :

   • La minification réduit la taille du fichier de votre code groupé en supprimant les caractères inutiles tels que les espaces, les commentaires et les noms de variables/fonctions longs.

3. Optimisation :

   • Le processus de construction peut impliquer des optimisations supplémentaires telles que le tremblement d'arbre, qui supprime le code inutilisé de vos bundles finaux.

4. Mode de production :

   • Le mode développement offre des fonctionnalités telles que des cartes sources (pour un débogage plus facile) et des messages d'erreur détaillés.

En revanche, le mode de production se concentre sur l'optimisation en permettant la minification, le tremblement d'arbre et d'autres améliorations de performances.

---

React-scripts : le projet Wolf of React

react-scripts est un package interne utilisé par Create React App (CRA) pour gérer les fonctionnalités en coulisses d'un projet React.

La plupart du temps, les développeurs n'interagissent pas directement avec lui, mais il est essentiel à l'efficacité du développement.

Voici de quoi réagissent-scripts est responsable :

• Groupement et Transpilation
• Serveur de développement et rechargement à chaud
• Tests
• Bâtiment pour la Production

Les 3 tâches les plus importantes effectuées par les scripts de réaction sont les suivantes, que nous comprendrons en détail :

1. Regroupement :

   • Imaginez que votre application React se compose de nombreux fichiers JavaScript, de feuilles de style CSS et potentiellement d'éléments d'image.
   • Un bundler comme Webpack prend tous ces fichiers séparés et les combine en un plus petit nombre de bundles optimisés.
   • Cela réduit le nombre de requêtes HTTP qu'un navigateur doit effectuer, améliorant ainsi la vitesse de chargement du site Web.

2. Transpilation :

   • Les fonctionnalités JavaScript modernes telles que la syntaxe JSX utilisée dans React peuvent ne pas être comprises par les anciens navigateurs.
   • La transpilation consiste à convertir ce code moderne en JavaScript simple (ES5 ou une version compatible) qui peut s'exécuter sur un plus large éventail de navigateurs.
   • Des outils comme Babel sont couramment utilisés pour la transpilation dans React.

3. Minification :

   • La minification, également connue sous le nom de minimisation, est une technique appliquée au code pour réduire la taille de son fichier sans affecter ses fonctionnalités.
   • Ceci est particulièrement avantageux pour les applications React déployées en production, car des fichiers de plus petite taille se traduisent par des temps de chargement plus rapides pour les pages Web.

Voici comment fonctionne la minification :

1. Suppression des caractères inutiles :

   • Les minificateurs éliminent les caractères d'espacement comme les espaces, les nouvelles lignes et les tabulations du code. Cela peut sembler insignifiant pour les petits fichiers, mais dans les grands projets React, cela peut entraîner une réduction notable de la taille.

2. Raccourcir les noms des variables et des fonctions :

   • Les minificateurs remplacent souvent les noms descriptifs de variables et de fonctions par des noms plus courts, composés d'une seule lettre. Bien que cela rende le code moins lisible pour les humains, cela réduit considérablement la taille du fichier.

3. Suppression de commentaires :

   • Les commentaires sont essentiels pour documenter et comprendre le code pendant le développement. Cependant, en production, ils ne sont pas nécessaires au fonctionnement du code. Les minificateurs suppriment généralement les commentaires pour minimiser davantage la taille du fichier.

---

Conclusion

C'est l'apprentissage d'une seule journée résumé.

J'aurais pu construire bien plus que cela si j'avais utilisé les outils GenAI. J'ai utilisé les outils GenAI de toute façon, mais à des fins d'apprentissage.

Je pense que poser cette bonne série de questions, puis comprendre les concepts en profondeur, vous distinguera de ceux qui automatisent le développement.

Dans les entretiens, c'est la compréhension et la clarté du concept qui sont recherchées, plutôt que votre vitesse de codage car, de toute façon, cela va être automatisé dans une certaine mesure.

Ainsi, le seul facteur X selon lequel vous êtes un grand ingénieur logiciel réside dans vos connaissances pour au moins valider et vérifier si le résultat du modèle GenAI répond ou non à vos besoins technologiques.

Si vous pensez que mon contenu est précieux ou si vous avez des commentaires,
faites-le-moi en contactant mes identifiants de réseaux sociaux suivants que vous découvrirez dans mon profil et les suivants :

LinkedIn : https://www.linkedin.com/in/shrinivasv73/

Twitter (X) : https://twitter.com/shrinivasv73

Instagram : https://www.instagram.com/shrinivasv73/

E-mail : shrinivasv73@gmail.com

? Ici Shrinivas, je signe !

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!