Comprendre les concepts Nx et Monorepo

Les équipes de développement modernes travaillant sur plusieurs applications ou micro-frontends ont souvent du mal à maintenir la cohérence et la réutilisation des codes dans tous les projets. Nx, un système de construction doté de capacités monorepo avancées, résout plusieurs de ces défis en fournissant un espace de travail unifié pour tous vos codes. Au lieu de gérer des dépôts séparés avec des dépendances dupliquées, un monorepo alimenté par Nx vous permet de partager des bibliothèques, d'imposer des contraintes architecturales et de réaliser des tâches efficacement.

Nx étend les cadres populaires comme Angular, React et Node.js avec des générateurs, des exécuteurs et un graphique de dépendance puissant. Pour les concepteurs comme les développeurs, la possibilité de créer des bibliothèques de fonctionnalités réutilisables est l'une des fonctionnalités les plus importantes. Une bibliothèque de fonctionnalités encapsule une tranche complète de fonctionnalités – comme un widget de profil d'utilisateur, une barre de recherche avec autocomplete, ou une table de données avec tri et filtrage – ce qui facilite la chute dans n'importe quelle application dans l'espace de travail.

Quelles sont les bibliothèques de fonctionnalités réutilisables?

Une bibliothèque de fonctionnalités réutilisable dans Nx est un module autocontenu qui regroupe les composants, styles, logiques et actifs nécessaires pour une fonctionnalité orientée vers l'utilisateur spécifique. Contrairement aux bibliothèques d'utilité (qui exposent les fonctions pures ou les assistants) ou les bibliothèques de composants d'interface utilisateur (qui se concentrent sur des éléments atomiques comme les boutons et les icônes), les bibliothèques de fonctionnalités sont opinions sur la façon dont une fonctionnalité ressemble et se comporte. Elles comprennent souvent la gestion de l'état, les effets secondaires, les traductions et les vérifications d'accessibilité.

Les principales caractéristiques des bibliothèques de fonctions bien conçues sont les suivantes :

  • Encapsulation: Toutes les dépendances nécessaires (y compris les modules CSS, les icônes SVG ou même les chaînes localisées) sont regroupées dans la bibliothèque.
  • Chargeable par laser:[ Grâce à la configuration de partage de code Nx=S, les bibliothèques de fonctionnalités peuvent être chargées sur demande, ce qui améliore les temps de charge initiaux.
  • Testable: Chaque bibliothèque peut avoir son propre ensemble d'unités, d'intégrations et de tests de bout en bout qui s'exécutent isolément.
  • Version: Puisque plusieurs applications peuvent dépendre de différentes versions de la même bibliothèque, Nx prend en charge la version sémantique et les bibliothèques publiables.

Dans les workflows de conception, les bibliothèques de fonctionnalités servent de pont entre les jetons de conception (couleurs, typographie, espacement) et les pages entièrement mises en œuvre. Un concepteur peut spécifier un motif – dire, une carte produit avec une image, titre, prix, et -Ajouter au bouton de Cart – et l'équipe de bibliothèque le construit une fois. Chaque application ultérieure qui a besoin de cette carte produit importe la bibliothèque, assurant la cohérence visuelle et comportementale.

Configuration de votre espace de travail Nx pour les bibliothèques de fonctionnalités

Prérequis et installation

Avant de pouvoir créer des bibliothèques de fonctionnalités réutilisables, vous avez besoin d'un espace de travail Nx. Si vous êtes nouveau à Nx, commencez par installer le CLI au niveau mondial:

Créez un nouvel espace de travail avec un préréglage qui correspond à votre pile technique. Pour un système de conception basé sur React utilisant TypeScript, exécutez:

Nx prend en charge les monorepos avec plusieurs cadres, mais pour la cohérence de conception il est souvent préférable de coller avec un cadre d'interface utilisateur par espace de travail. La CLI va demander au sujet de CI, testeurs, et préférences de bundler – choisir des options qui s'alignent avec votre équipe , l'outillage existant . Pour la plupart des projets axés sur la conception, une configuration par défaut avec Jest, Cypress, et Vite ou Webpack fonctionne bien.

Générer une nouvelle bibliothèque

Une fois l'espace de travail prêt, générer une bibliothèque de fonctionnalités est simple. Utilisez le générateur Nx pour votre cadre. Pour React, la commande est :

Les drapeaux précisent :

  • répertoire – un dossier qui regroupe les bibliothèques liées (p. ex. pour les fonctions interprojets).
  • publiable[ – permet de construire la bibliothèque pour la distribution (par exemple, à un registre npm).
  • importPath – définit comment d'autres projets importeront la bibliothèque (p. ex. ).

Nx génère toutes les plaques de chaudière—, avec des cibles de construction/test, et un composant initial. La bibliothèque fichier baril réexportera seulement l'API publique; tout interne reste privé. Cela empêche le couplage accidentel et fait respecter les limites.

Si votre workflow de conception implique Angulaire ou Vue, la syntaxe CLI diffère légèrement (par exemple, ), mais les concepts restent identiques. Pour une référence détaillée, consultez le document officiel Nx.

Structurer une bibliothèque de fonctions pour une réutilisation maximale

Composante Organisation

Dans le dossier de bibliothèque généré (), vous trouverez un répertoire . Organisez les composants en sous-dossiers par zone de fonctionnalité plutôt que par type. Par exemple, si la bibliothèque implémente une fonctionnalité de profil utilisateur -, structure comme ceci:

  • – Réagissez à des composants : , , .
  • – Crochets sur mesure : , .
  • – Appels API ou logique de gestion d'état.
  • – Modules CSS ou CSS-in-JS étendus.
  • – Images par défaut, SVGs, polices.

Ne reexportez que le composant principal (par exemple ) et peut-être un objet composite pour la configuration. Les utilitaires internes doivent rester cachés. Cela empêche les consommateurs de dépendre des détails de mise en œuvre qui pourraient changer.

Pour chaque composant, écrivez un fichier si vous utilisez Storybook. L'intégration de Storybook avec Nx est automatique lorsque vous générez l'espace de travail, et il fournit un terrain de jeu en direct pour les concepteurs de revoir les composants sans tourner vers le haut de l'application complète.

Styles et thèmes partagés

Une bibliothèque de fonctionnalités réutilisable ne devrait pas être dotée de couleurs de code dur ou de valeurs d'espacement. Au lieu de cela, définissez des jetons de conception via des propriétés CSS personnalisées ou un objet thématique qui peut être dépassé au niveau de l'application. Par exemple, la bibliothèque peut consommer une variable de la racine de l'application.

Si vous préférez un framework CSS utilitaire comme Tailwind, Nx peut être configuré pour partager la configuration Tailwind entre les bibliothèques. Créez une base dans la racine de l'espace de travail, et chaque bibliothèque l'étend. Cela évite la configuration dupliquée tout en permettant des dépassements spécifiques à la bibliothèque pour des composants complexes.

Gestion des biens

Les bibliothèques de fonctions ont souvent besoin d'actifs statiques tels que des images de placeholder, des avatars par défaut ou des animations de chargement de squelette. Conservez-les dans le dossier de votre bibliothèque. Lors de la construction de la bibliothèque pour la publication, Nx copie les actifs dans le répertoire de sortie. Si la bibliothèque est seulement consommée localement dans le monorepo, les alias de chemin traitent automatiquement la résolution.

Pour les SVG, envisagez d'utiliser des composants de React en ligne (via ) pour éviter les requêtes HTTP supplémentaires. La configuration de construction de Nx=S supporte cette sortie de la boîte pour les bibliothèques de React.

Développement et gestion des bibliothèques de fonctions

Utilisation du graphique de dépendance Nx

L'une des caractéristiques les plus fortes de Nx=" est le graphique de dépendance, qui permet de visualiser la relation entre les bibliothèques et les applications. Après avoir créé plusieurs bibliothèques de fonctionnalités, exécutez pour voir le diagramme. Cela permet d'éviter les dépendances circulaires et de s'assurer que votre architecture reste en couches (par exemple, les applications dépendent des bibliothèques de fonctionnalités, qui dépendent des bibliothèques d'interface utilisateur, qui dépendent des jetons de conception).

Dans la configuration , vous pouvez définir des balises comme [, , et définir des contraintes (par exemple, une bibliothèque de fonctions ne peut importer une autre bibliothèque de fonctionnalités directement – seulement via une couche d'interface utilisateur partagée). Cela empêche l'enfer de dépendance mess qui frappe souvent monorepos.

Version et édition

Lorsque votre bibliothèque de fonctionnalités est suffisamment stable pour être consommée par plusieurs équipes, la version en utilisant Sémanetic Versioning[. Nx fonctionne main dans la main avec des outils comme ou pour automatiser les bosses de version et les fichiers de changement. Pour les bibliothèques marquées comme , exécutez :

La sortie sera dans avec un prêt pour npm publish. Vous pouvez ensuite pousser vers un registre interne (comme Verdaccio) ou vers npm=s registre public. Applications en dehors du monorepo peut installer la bibliothèque comme une dépendance régulière, bien que pour une performance maximale garder tout dans le même espace de travail.

Même si vous ne publiez jamais de manière externe, la version à l'intérieur du monorepo est précieuse. Les commandes affectées Nx , s'assurent que lorsque vous modifiez une bibliothèque, seules les applications qui en dépendent sont reconstruites et réévaluées.

Intégration des bibliothèques de fonctionnalités dans les applications

Une fois la bibliothèque de fonctions créée et remplie de composants, l'intégrer dans une application est une question de dépendance dans l'application et importer le module. Pour une application Réagir, mettre à jour les chemins :

{
 "compilerOptions": {
 "paths": {
 "@myworkspace/shared/feature-library": ["libs/shared/feature-library/src/index.ts"]
 }
 }
}

Les générateurs Nx le configurent souvent automatiquement, mais vous pouvez ajouter manuellement des chemins pour les bibliothèques que vous créez plus tard. Ensuite, dans votre code d'application :

Si la bibliothèque de fonctionnalités comprend des modules paresseux, utilisez ou un routage angulaire pour les charger sur demande. Le fractionnement de code Nx=2 fonctionne automatiquement lorsque la bibliothèque est construite avec le bon format de module (ESM).

Tester l'intégration est critique. Exécuter pour s'assurer que les composants de la bibliothèque rendent correctement dans l'application. Pour les tests de bout en bout, utiliser Cypress ou Playwright; l'intégration Nx="s avec permet de spécifier facilement les tests de composants qui vérifient le comportement de la bibliothèque dans un environnement réaliste.

Meilleures pratiques pour concevoir des bibliothèques réutilisables

La création de bibliothèques de fonctionnalités vraiment réutilisables nécessite plus que de déplacer des fichiers. Suivez ces principes pour maximiser votre vitesse de travail de conception:

  • Définir un contrat clair:[ Chaque bibliothèque devrait exporter une API publique limitée (composantes et crochets principaux).
  • Utilisez la composition sur l'héritage:[ Reliez-vous aux accessoires et aux fentes pour permettre aux consommateurs de personnaliser leur comportement, plutôt que de forcer une structure rigide.
  • Écrire une documentation détaillée: Utiliser des histoires de contes, des commentaires de typedoc et un README. Les concepteurs et les développeurs doivent comprendre les accessoires, les thèmes et les exemples d'utilisation rapidement.
  • Version vos designs aussi: Maintenir un changement de journal pour les changements de conception (mises à jour de couleur, modifications d'espacement) afin que les équipes d'application puissent planifier les migrations.
  • Les tests de régression visuelle automatique:[ Des outils comme Chromatic ou Percy intégrés à Nx peuvent attraper des changements de style involontaires lorsqu'une bibliothèque est mise à jour.
  • Fournir les états de repli et de chargement :[ Une bibliothèque de fonctionnalités devrait inclure des écrans squelettes ou des limites d'erreur afin que les applications n'aient pas à les créer à partir de zéro.
  • Gardez-le léger:[ Évitez d'importer de grandes bibliothèques d'utilité (comme lodash) si vous avez seulement besoin de quelques fonctions.

Avantages et impact sur le monde réel

L'adoption de bibliothèques de fonctionnalités réutilisables dans un monorepo de Nx procure des avantages immédiats et à long terme pour les équipes de conception :

  • Prototypage accéléré:[ Les concepteurs peuvent demander une bibliothèque de fonctionnalités, et dans un sprint la bibliothèque est disponible pour tous les nouveaux projets. N'attend plus que les développeurs ré-implémentent le même modèle d'interface utilisateur.
  • L'expérience utilisateur constante: Puisque chaque application consomme le même composant, les utilisateurs voient le comportement et le style identiques à travers les produits. Ceci est particulièrement précieux pour les entreprises avec plusieurs portails orientés vers le client.
  • Dette technique réduite: Les corrections sont appliquées en un seul endroit. Lorsqu'un bug est découvert dans l'éditeur de profil, le responsable de bibliothèque le corrige, et toutes les applications consommant le correctif après une version bosse et reconstruisent.
  • Mieux collaborer: La structure monorepo encourage les concepteurs à examiner directement les implémentations de composants (via Storybook) et à fournir des commentaires avant la sortie de la bibliothèque.
  • Faster à bord:[ Les nouveaux membres de l'équipe peuvent inspecter les bibliothèques de fonctionnalités existantes pour comprendre comment fonctionne le système de conception, plutôt que de chasser à travers des dizaines de dossiers d'application.

Des entreprises comme de grandes entreprises utilisant Nx[ ont déclaré réduire le temps de développement des fonctionnalités de 30 à 50% après avoir centralisé les modèles partagés dans les bibliothèques de fonctionnalités. L'investissement initial dans la structuration du monorepo et la création des premières bibliothèques rapporte rapidement à mesure que le nombre de projets augmente.

Conclusion

La création de bibliothèques de fonctionnalités réutilisables en Nx n'est pas seulement un exercice technique, c'est un mouvement stratégique qui harmonise la conception et le développement autour d'une seule source de vérité. En encapsulant des fonctionnalités complètes dans des bibliothèques isolées, en version et testables, les équipes peuvent expédier plus rapidement, maintenir la qualité et itérer sur les modèles de conception sans craindre de casser les applications existantes.

Commencez petit : choisissez une fonction fréquemment utilisée (un avatar utilisateur avec menu déroulant, une barre de recherche, une table paginée) et construisez-la en bibliothèque. Intégrez-la en deux applications. Une fois que vous voyez les économies de temps, élargissez votre portefeuille de bibliothèques. Avec une planification minutieuse et le respect des principes décrits ici, votre workflow de conception deviendra beaucoup plus efficace, permettant à votre équipe de se concentrer sur l'innovation plutôt que sur la répétition.

Pour plus de renseignements, consultez le Documentation de réaction sur la composition des composants et le Nx guide officiel sur les types de bibliothèques.