Créer et gérer des variantes de conception dans Nx est une capacité fondamentale pour les équipes qui construisent des applications évolutives et multi-expérience au sein d'un monorepo. Les variantes de conception – que ce soit pour les tests A/B, les drapeaux de fonction, le thème de marque ou les interfaces personnalisées – exigent une approche structurée pour éviter la duplication de code, maintenir la cohérence et maintenir les temps de construction rapidement.

Comprendre les variations de conception en Nx

Les variantes de conception se réfèrent à plusieurs versions d'un composant d'interface utilisateur, d'un ensemble de style ou d'une mise en page qui peuvent être commutées dynamiquement ou au moment de la construction. Dans un espace de travail Nx typique, vous pouvez avoir une bibliothèque d'interface utilisateur partagée utilisée par plusieurs applications.

Les variantes de conception permettent d'utiliser des cas tels que:

  • Tests A/B[ – Servir différents styles de boutons ou de mises en page pour les cohortes d'utilisateurs.
  • Ligne blanche – Chaque client obtient un schéma de couleur et un logo personnalisés.
  • Prévisualisation des caractéristiques – Déroulement d'un nouveau design vers un pourcentage d'utilisateurs.
  • – Interfaces spécifiques à la forme plate – Mode mobile ou bureau, ou mode lumière/obscurité.

L'architecture Nx , avec ses limites de projet, son graphique de dépendance et ses commandes affectées, permet de gérer ces scénarios sans casser la base de codes.

Méthodes de création de variantes de conception

1. Utilisation des fichiers d'environnement et des variables temps de construction

L'une des méthodes les plus simples et les plus fiables consiste à injecter des informations de variante de conception via des fichiers d'environnement. Nx prend en charge les configurations spécifiques à l'environnement en utilisant des fichiers et l'objet dans votre ou .

Par exemple, vous pourriez avoir :

  • – Contient
  • – Contient

Ensuite, dans votre composant ou CSS, référence (ou le préfixe compatible Nx ). Cette approche est propre et fonctionne avec n'importe quel cadre frontend. Pour les variantes de style, vous pouvez importer sous condition une feuille de style thème:

if (theme === 'corporate') {
 import('./corporate-theme.scss');
} else {
 import('./startup-theme.scss');
}

Le système de construction Nx , qui permet de créer des arbres, permet de créer des modèles inutilisés, ce qui garantit que seul le code de variante nécessaire est livré.

2. Le thème et le style débordent avec les propriétés personnalisées CSS

Pour les variantes commutables en temps d'exécution, CSS properties custom (variables CSS) sont une solution puissante et peu coûteuse. Définissez un ensemble de variables de base dans une feuille de style partagée, puis remplacez-les par variante. Dans un espace de travail Nx, vous pouvez créer une bibliothèque qui exporte des objets thématiques (par exemple , .

Intégrez avec le processus de construction de Nx. Vous pouvez utiliser un contexte/fournisseur pour appliquer dynamiquement une classe de thème à l'élément racine :

.theme-corporate {
 --primary-color: #0055a5;
 --secondary-color: #ff6600;
}
.theme-startup {
 --primary-color: #6c63ff;
 --secondary-color: #ff6584;
}

Cette approche est légère et fonctionne avec bellement Tailwind CSS si vous utilisez la stratégie – le prolonger pour soutenir plusieurs thèmes.

Pour les configurations CSS-in-JS plus complexes (p. ex., composants styled-components ou Emotion), créez un objet thématique et passez-le via le contexte de Réaction ou Vue provide/inject. Les limites de la bibliothèque Nx , vous permettent de partager cette logique thématique entre les applications sans duplication.

3. Variantes de composants par les prop. et les fentes

Lorsque les différences de conception vont au-delà des couleurs et de l'espacement – comme le réarrangement de la disposition ou des éléments supplémentaires – le levier variantes de composants par l'intermédiaire d'accessoires (Réaction) ou de fentes (Vue) est efficace.

function Button({ variant, children }) {
 const className = variant === 'primary' ? styles.primary : styles.secondary;
 return <button className={className}>{children}</button>;
}

Nx vous encourage à conserver ces composants dans une bibliothèque d'interface utilisateur partagée. Lorsque les variantes deviennent nombreuses, envisagez d'utiliser un registre variable patron: stocker les configurations de variantes dans un objet JSON et les mapper aux accessoires de composants.

Pour les différences plus grandes, composition est mieux que les conditionnalités.Créer des sous-composants distincts (p. ex. , ) qui partagent une base commune. Utilisez le graphique de dépendance Nx= pour s'assurer que la bibliothèque de base est partagée et ne change que si nécessaire.

4. Flags de la fonctionnalité et toggles de temps d'exécution

Pour les variantes de conception qui doivent être commutées côté serveur ou pour un sous-ensemble d'utilisateurs, intégrer un service de drapeau de fonction (comme LaunchDarkly ou Unleash[) avec Nx est une solution robuste.Créer une bibliothèque dédiée qui abstraction le fournisseur de drapeau. Chaque application importe cette bibliothèque et vérifie les drapeaux pour rendre différents modèles.

Exemple en utilisant un simple crochet de réaction:

import { useFeatureFlag } from '@myorg/feature-flags';
function HomePage() {
 const newLayout = useFeatureFlag('new-layout');
 return newLayout ? <NewLayout /> : <OldLayout />;
}

La configuration du projet Nx , vous permet de jouer des drapeaux pendant le développement et les tests. Vous pouvez créer des cibles Nx distinctes pour différents scénarios de drapeaux :

"targets": {
 "serve-with-flags": { ... },
 "test-flags": { ... }
}

Cela maintient votre logique de variante isolée et facile à basculer sans redéployer l'application entière.

Gestion efficace des variantes de conception

Organisez les variantes avec une structure de dossier cohérente

Gardez votre espace de travail rangé en regroupant des fichiers liés à des variantes. Par exemple:

libs/
 ui/
 button/
 src/
 lib/
 variants/
 primary/
 secondary/
 ghost/
 index.ts

Chaque dossier de variante contient ses propres styles, tests et histoires. Cette approche permet de n'exécuter que sur la variante modifiée. Nx="s tags (par exemple, , ) vous permet d'imposer des limites de sorte qu'une application utilisant -primary=" ne puisse pas accidentellement dépendre des internes de --ghost=".

Tirer parti des commandes Nx.

Lorsque vous modifiez une variante, vous ne voulez pas reconstruire ou tester chaque application. Nx.S , et détectent automatiquement les projets qui sont touchés en fonction du graphique de dépendance. Ceci est particulièrement puissant dans un monorepo avec de nombreuses variantes de conception – seulement la variante qui a changé déclenche son pipeline.

Par exemple, si vous mettez à jour seulement la variante de bouton -primary--, Nx programmera des builds pour les bibliothèques et les applications qui dépendent de cette variante, laissant les autres intacts. Cela permet d'économiser du temps important de CI.

Variantes de nom et différences de documents

Les conventions de nommage standard telles que , , , ou , rendent les variantes prévisibles. Utilisez un à l'intérieur de chaque dossier de variante pour expliquer le but, les différences visuelles et le moment où utiliser chacun. Pour les jetons de conception partagés, maintenez une source unique de vérité, comme une bibliothèque , que toutes les variantes renvoient.

Essais de la variante automatique

Utilisez des générateurs de test Nx="s pour créer des tests unitaires pour chaque variante. Intégrez des outils de test de régression visuelle comme Chromatic ou Percy. Dans votre pipeline CI, utilisez pour exécuter des tests visuels uniquement pour les variantes modifiées. Configurez pour comparer les performances entre les variantes.

Par exemple, ajouter une cible séparée pour les tests de variante:

"test:variant": {
 "executor": "@nrwl/jest:jest",
 "options": {
 "jestConfig": "libs/ui/button/variants/primary/jest.config.ts"
 }
}

Ensuite orchestrez avec un script shell ou des commandes Nx pour tester toutes les variantes.

Meilleures pratiques de gestion des variantes de conception

  • Maintenir une bibliothèque de jetons de conception partagée pour les couleurs, l'espacement, la typographie.
  • Utilisez le graphique de projet Nx="s pour visualiser les dépendances entre les variantes et les applications.
  • Le contrôle de la configuration[ de votre variante. Utilisez des balises dans Git (p. ex. ) si vous avez besoin de revenir en arrière d'une variante spécifique.
  • Moyen de vie de la variante de document – Quand une variante est-elle dépréciée? Combien de temps reste-t-elle active?
  • Conserver la logique de variante hors du code d'activité de base. Utilisez des composants, des mixins ou des décorateurs de plus grande ordre pour séparer les préoccupations.
  • Choisir la bonne granularité – Il n'est pas nécessaire de modifier le style de façon mineure.

Conclusion

Les variantes de conception sont une réalité dans le développement moderne du web, et Nx fournit l'outil pour les gérer sans sacrifier la vitesse de construction ou la qualité du code. Que vous optiez pour des fichiers d'environnement de construction, des propriétés personnalisées CSS d'exécution, des accessoires composants ou des drapeaux de fonctionnalités, la clé est de rester cohérent et de tirer parti des capacités monorepo de Nxs – commandes affectées, limites de projet, et graphiques de dépendance. En adoptant ces méthodes et les meilleures pratiques, vous pouvez créer des applications évolutives et flexibles qui s'adaptent aux différents publics et besoins commerciaux.