L' assemblage réactif-passe-partout récemment, le 26 juin
2018 , a été mis à jour vers la version 3.6.0. Cette assemblée a déjà plus de trois ans, mais, se démarquant visiblement de beaucoup d'
autres (plus de 18 mille étoiles GitHub), elle n'a presque jamais été vue sur Habré. Quelle est sa caractéristique? En bref - l'assemblage offre au développeur "tout d'un coup"!
D'abord triste
Tout d'abord, un peu de tristes choses. La valeur des constructions de démarrage pour les projets React est énorme. Comme vous le savez, React lui-même n'est qu'une bibliothèque qui implémente le niveau de présentation, et pour créer une application à part entière, vous devrez utiliser de nombreuses autres bibliothèques, car l'écosystème React en propose beaucoup. Pour cette raison, la configuration du projet React est un problème sérieux, dont la solution est extrêmement difficile à trouver pour un développeur individuel. Dan Abramov lui-même le comprend parfaitement, déclarant: «La configuration ne devrait pas entraver le démarrage .» Et propose une solution - Créer React App . Dans cet assemblage de départ, qui a gagné en popularité (plus de 51 mille étoiles GitHub), les auteurs ont essayé de protéger le développeur contre les problèmes de configuration autant que possible, en cachant la configuration par défaut, en réduisant l'ensemble des modules au minimum, offrant la possibilité de génération automatique de composants, créant ainsi un sentiment de simplicité et facilité de développement d'une application React. De plus, ils, sur la base du même message, proposent leur liste d' assemblages recommandés. L'approche est probablement bonne pour attirer les nouveaux arrivants, mais elle s'épuise rapidement avec ses limites et ses problèmes de configuration, les problèmes d'application des meilleurs modules, les meilleures pratiques doivent encore être traitées. Et qu'en est-il , par exemple, d'un développeur qui développe son premier projet React?
Il y a un moyen de sortir
L' assemblage réactif-passe-partout est une approche alternative pour résoudre le problème et offre «tout à la fois». Il s'agit d'un ensemble de modules reconnus comme standard de facto et testés dans le travail, un ensemble dans lequel les meilleures pratiques dans l'organisation du projet sont appliquées, y compris en tenant compte de l'évolutivité et des performances, des technologies sont introduites qui aident le programmeur à développer et à déboguer rapidement du code.
Les développeurs d' assemblages le positionnent comme un outil hautement évolutif "hors ligne en premier" (une fois que l'application téléchargée fonctionne hors ligne), en tenant compte de l'expérience des meilleurs développeurs, visant des performances élevées et conçu conformément aux "meilleures pratiques", solide, "prêt pour la production", fondation éprouvée au combat pour développer des applications réactives.
Bibliothèques applicables
Plus d'informations sur les modules utilisés:
- React, v16.4 (Fibre) - une implémentation progressive de l'algorithme clé React qui augmente la productivité dans le développement de tâches telles que l'animation, l'organisation des éléments sur la page et le mouvement des éléments;
- React Router , v4.3 - un routeur de facto pour les applications React , permet de créer des applications avec des URL conviviales pour les moteurs de recherche;
- Redux , v4 - une bibliothèque fournissant un flux de données strictement unidirectionnel, rendant la logique d'application plus prévisible et plus facile à comprendre;
- Redux Saga , v0.16 - une bibliothèque conçue pour simplifier et améliorer l'exécution des effets secondaires (c'est-à-dire des actions telles que des opérations asynchrones telles que le chargement de données, etc.) dans les applications React / Redux;
- Resélectionnez , v3 - une bibliothèque qui vous permet d'empêcher le redessin et le recomptage inutiles des données reçues, ce qui, à son tour, accélère l'application React / Redux;
- ImmutableJS , v4 - une bibliothèque qui facilite le travail avec des données immuables dans les applications React / Redux;
- Composants stylisés, v3.3 - une bibliothèque qui vous permet de vous débarrasser des classes CSS en tant qu'étape intermédiaire entre un composant et ses styles;
- React Loadable , v5.4 - une bibliothèque qui vous permet d'implémenter une approche orientée composants pour la séparation de code et d'implémenter un chargement tardif;
- Jest v23.1, Enzyme v3.3 - bibliothèques pour tester les applications de réaction.
Évolutivité et performances
L'assemblage a toujours mis en œuvre les principes de prise en charge de l'évolutivité et de l'augmentation de la productivité, détaillés par le développeur de l'assemblage Max Stoiber dans sa conférence "Scaling ReactJS applications" et Dan Abramov dans la conférence "Presentation components and container components . "
En particulier, ces principes comprennent:
- séparation des composants en présentation et conteneurs;
- placement du code selon le principe d'un composant - un dossier;
- l'utilisation d' outils modernes (composants de style, modules CSS) pour résoudre les problèmes d'héritage CSS dans les grands projets;
- Application Redux / Saga pour rationaliser le flux de données, simplifier les opérations asynchrones.
Codage, débogage, test
L'assemblage offre de nombreuses possibilités d'aider le programmeur à écrire et à déboguer du code:
- JavaScript de nouvelle génération (modèles en minuscules, restructuration d'objets, syntaxe JSX, etc.);
- génération rapide de composants / conteneurs / itinéraires avec leurs sélecteurs, sagas, réducteurs et tests via la ligne de commande;
- «Échange à chaud» des modules, permettant de voir sans délai les résultats des modifications apportées au code de l'application;
- utilisation du plugin Webpack Dll , qui améliore de 40% le temps de démarrage de l' application sur le serveur et lors du «rechargement à chaud» des modules;
- en utilisant AppVeyor et TravisCI (les fichiers d'installation sont inclus par défaut), ce qui vous permet d'exécuter automatiquement des tests d'application sur Windows et Unix;
- analyse de code statique: ESLint , Prettier et stylelint vérifient et formatent automatiquement le code dans votre éditeur (une configuration est requise, des fichiers de configuration et des instructions sont joints);
- placement sur Heroku , services cloud AWS S3 : (configuration requise, instructions incluses).
Ligne de commande
L'assemblage fournit, comme déjà mentionné, un ensemble de commandes pour la ligne de commande, dans lequel de nombreuses fonctionnalités nécessaires au développeur sont implémentées, notamment:
- initialisation d'un nouveau projet avec une couverture de test à 100%;
- lancement de l'application sur le serveur du développeur;
- génération de composants, conteneurs avec leurs sélecteurs, sagas, réducteurs et tests;
- génération de la version «production» du code projet;
- test de projet;
- le débogage à distance, qui permet d'utiliser le service Ngrok pour fournir un accès sécurisé au serveur local depuis Internet;
- peluches;
- gestion de la traduction (ajout de langues, extraction de messages dans des fichiers JSON i18n);
- le profilage, bien que mentionné parmi les mérites de la ligne de commande de construction, est malheureusement introuvable.
Y a-t-il quelque chose de superflu?
Si vous décidez que vous n'avez pas besoin de certains modules, vous pouvez les retirer et l'assemblage vous aidera avec vos instructions ( ici et ici ).
Pensez-vous qu'il manque quelque chose?
Caractéristiques supplémentaires fournies par l'assemblage:
- «Hors ligne en premier», ce qui signifie qu'une fois que l'application téléchargée fonctionne hors ligne, même sur les navigateurs plus anciens;
- «Application Web native», signifie que lors de visites répétées de l'application, l'utilisateur recevra une invitation à ajouter une icône à l'écran d'accueil et l'application peut être utilisée exactement comme une application «native» (mais sans restrictions imposées par les magasins d'applications);
- prise en charge de l'optimisation des moteurs de recherche (gestion des balises d'en-tête de page) pour les moteurs de recherche prenant en charge l'indexation du contenu JavaScript;
- Chargement rapide des polices Web, ce qui élimine le délai d'affichage des pages associé au délai de chargement des polices;
- optimisation d'image via le chargeur d'images de Webpack.
La documentation
L'assemblage est bien documenté et, par exemple, contient même une section sur la résolution de problèmes possibles .
Mises à jour, bogues
Le projet est régulièrement mis à jour, répondant rapidement aux changements dans ses modules constitutifs (dernière mise à jour le 26/06/2018), résout activement les problèmes : par exemple, le 11/08/2018, 1367 ont été résolus et 9 problèmes sont en cours de résolution.
Et alors?
Ainsi, l'assemblage donne un excellent exemple de la configuration à part entière du projet React, crée des conditions permettant au programmeur d'accélérer l'écriture et le débogage de code, offre des exemples de mise en œuvre des meilleures pratiques utilisées dans le développement d'applications hautement évolutives et productives.
Et enfin - un message de l'auteur de l'assemblée Maximilian Stoiber et de son équipe:
"Si vous avez besoin d'une base solide et éprouvée pour la construction de votre prochain superaliment et que vous avez une certaine expérience avec React, c'est parfait pour vous!"