février 1, 2024

Feature Flag et sa mise en œuvre avec Launchdarkly

Que sont les indicateurs de fonctionnalités ?

Les indicateurs de fonctionnalités (également appelés bascules de fonctionnalités, bascules de version, bits de fonctionnalité, flippers de fonctionnalités ou commutateurs de fonctionnalités) sont une technique de développement logiciel puissante qui vous permet d’activer ou de désactiver une fonctionnalité pendant l’exécution sans modifier le code ni nécessiter un redéploiement.

Au niveau du code, les indicateurs de fonctionnalités prennent la forme de simples conditions if-else qui déterminent au moment de l’exécution quelles parties du code seront exécutées. Si l’indicateur est « activé », le nouveau code est exécuté, si l’indicateur est « désactivé », le code est ignoré. Cela vous permet de déployer de nouvelles fonctionnalités sans les rendre visibles aux utilisateurs, ou vous pouvez rendre les fonctionnalités visibles uniquement à des sous-ensembles spécifiques d’utilisateurs et d’environnements.

Les bascules introduisent de la complexité. Nous pouvons contrôler cette complexité en utilisant des pratiques de mise en œuvre intelligentes des bascules et des outils appropriés pour gérer notre configuration des bascules.

Avantages des indicateurs de fonctionnalités

Utilisez Feature Flag pour fusionner constamment le code avant de l’exposer au monde : Les indicateurs de fonctionnalités encouragent le développement basé sur le tronc, ce qui permet d’éviter les conflits de fusion dus à des chemins de code divergents. Fusionnez plus fréquemment les petites modifications dans la branche principale, désactivez les indicateurs de fonctionnalités et travaillez à partir de la branche principale plutôt que de travailler sur des branches de fonctionnalités de longue durée.
Utilisez les indicateurs de fonctionnalités pour les tests en production : Il est souvent impossible de simuler complètement l’environnement de production en phase de préparation, les bascules de fonctionnalités vous permettent de valider la fonctionnalité des nouvelles versions de fonctionnalités en production tout en minimisant les risques et de restaurer rapidement la fonctionnalité si nécessaire, via un kill switch.
Utilisez les indicateurs de fonctionnalités pour les petites versions de test : Exposez d’abord les fonctionnalités à un petit public/testeurs, surveillez les effets et annulez rapidement si nécessaire plutôt que de devoir passer par un autre cycle de déploiement.
Lancez une fonctionnalité pour les utilisateurs qui vivent dans un pays spécifique ou qui correspondent à un profil utilisateur spécifique.
Utilisez les indicateurs de fonctionnalité pour publier des fonctionnalités sans déploiement : À l’aide d’indicateurs de fonctionnalités, une équipe peut modifier le comportement d’un système sans apporter de modifications perturbatrices au code en direct. Ainsi, l’un des principaux avantages des indicateurs de fonctionnalité est de rendre la fonctionnalité active à un moment précis. Les fonctionnalités peuvent être déployées et testées en production pour les testeurs, et une fois le moment venu, elles peuvent être publiées pour un public plus large sans avoir besoin de déploiement.
Retour en arriere: Si un bug est découvert dans une nouvelle fonctionnalité, il peut être annulé instantanément en l’activant ou en le désactivant sans toucher au code source.

Pratiques standards

Les indicateurs de fonctionnalité doivent être nommés de manière à nous indiquer très clairement ce que fait l’indicateur de fonctionnalité. Afficher en-tête.
utiliser affaire de chameau lors de la création des clés dans LaunchDarkly. Il s’agit de maintenir la cohérence dans React et le nœud, car React accède toujours aux clés sous la forme camelCase même s’il est ajouté avec un trait d’union et le nœud accédera à la manière dont il est ajouté dans launchdarkly.
Activer « SDK utilisant l’ID côté client » lors de la création du drapeau. Les indicateurs de fonctionnalités ne seront accessibles dans React que si cela est activé.
Évitez les dépendances entre les indicateurs. Le code doit être si modulaire que différentes fonctionnalités peuvent être activées dans n’importe quelle combinaison, donc n’imbriquez pas les indicateurs de fonctionnalités.
Nettoyer les indicateurs obsolètes.
Il est préférable de conserver les indicateurs de fonctionnalités de courte durée et en petit nombre.
Créez-les uniquement lorsque cela a du sens. Ne le créez pas si les fonctionnalités sont trop petites ou pour corriger des bugs. Ne créez pas plusieurs indicateurs de fonctionnalité pour la même fonctionnalité.
Indicateurs de fonctionnalités de test : L’indicateur de fonctionnalité doit être testé avec les deux valeurs (vrai/faux) avant le déploiement. Lorsque l’indicateur de fonctionnalité est supprimé, des tests doivent être effectués pour vérifier la présence de résidus.
Utilisez le middleware dans Node et l’appel de hook personnalisé dans React pour utiliser l’indicateur de fonctionnalité. Le nom et le contexte de l’indicateur peuvent être transmis de la même manière et la valeur de l’indicateur de fonctionnalité peut être récupérée. Pas besoin d’écrire le code en entier à chaque fois. La même fonctionnalité peut être utilisée même lorsqu’il n’y a pas de contexte ou plusieurs.
Au lieu de polluer la base de code avec de nombreuses conditions if, utilisez une seule condition au niveau du composant parent dans React. Ainsi, le composant sera rendu si la condition est vraie, sinon il ne sera pas rendu. Tous les appels d’API auront lieu dans le composant enfant. Utilisez également le middleware pour appliquer l’indicateur de fonctionnalité dans Node/SAP. En l’utilisant ainsi, il est facile de supprimer l’indicateur de fonctionnalité car le code ne doit être modifié qu’à un seul endroit.

Réagir + LancerDarkly

Compatibilité des versions du SDK

Les versions 3.0 et supérieures du SDK LaunchDarkly React sont compatibles avec la version 16.3.3 et supérieure de React.
Les versions 2.x du SDK LaunchDarkly React sont compatibles avec la version React 16.3.0 et supérieure.

Crochets

Le SDK LaunchDarkly React propose deux hooks personnalisés. Si vous souhaitez les utiliser, vous devez utiliser React version 16.8.0 ou supérieure.

utiliserDrapeaux est un hook personnalisé qui renvoie tous les indicateurs de fonctionnalités.
utiliserLDClient est un hook personnalisé qui renvoie l’objet client sous-jacent du SDK LaunchDarkly JavaScript.

Utiliser avecLDProvider composant d’ordre supérieur à la racine de l’application pour initialiser le SDK React et remplir le contexte avec le client et les indicateurs.

Clés de drapeau

LaunchDarkly identifie principalement les indicateurs de fonctionnalité par une clé qui doit contenir uniquement des caractères alphanumériques, des points (.), des traits de soulignement (_) et des tirets (-). Ces clés sont utilisées dans les SDK pour identifier les indicateurs.

Utilisez toujours affaire de chameau lors de la création des clés dans LaunchDarkly.

Installation:

Installez le SDK client Launch Darkly. Version installée ^3.0.6 :
```
npm install launchdarkly-react-client-sdk
```
Ajout de l’identifiant côté client dans .env. Remplacez CLIENT_SIDE_ID par l’ID côté client fourni dans LaunchDarkly -> Paramètres du compte -> Projets -> Sélectionnez votre projet -> Environnements.
```
REACT_APP_FEATURE_FLAG_CLIENT_ID=CLIENT_SIDE_ID
```

Initialiser en utilisant withLDProvider dans App.js:

export default withLDProvider({
  clientSideID: Config.featureFlagClientID,
  options: {
    bootstrap: "localStorage",
  },
})(App);

Ajout d’un hook personnalisé qui récupère les indicateurs de fonctionnalités en fonction des contextes. Il faut passer flagKey, ID de l’utilisateur et contexte dans le crochet.

const FeatureFlag = (
  flagKey,
  userId,
  contextKind = "anonymous",
  contextDetails = {}
) => {
  const featureFlags = useFlags();
  const ldClient = useLDClient();
  useEffect(() => {
    let context = {};
    if (contextKind === "anonymous") {
      context = {
	kind: "user",
	anonymous: true,
      };
    } else {
      context = {
	kind: contextKind,
	key: "key-" + userId,
	...contextDetails,
      };
    }
    ldClient?.identify(context);
  }, [ldClient, contextDetails]);
		  
  return { featureFlagValue: featureFlags[flagKey] };
};

Pour créer un contexte anonyme, spécifiez la propriété anonyme et omettez la propriété key. Le client définira automatiquement la clé sur une chaîne spécifique à LaunchDarkly et unique à l’appareil, cohérente entre les redémarrages de l’application et les redémarrages de l’appareil.

Utiliser un indicateur de fonctionnalité dans n’importe quel fichier

Ex. Afficher un en-tête sur toutes les pages derrière l’indicateur de fonctionnalité, lorsque l’indicateur de fonctionnalité est activé. Lorsque le drapeau est éteint, l’en-tête disparaît. Un indicateur de fonctionnalité nommé Afficher en-tête est créé dans Launch Darkly.

Un hook personnalisé est appelé en transmettant la clé d’indicateur et les détails du contexte. L’en-tête n’est rendu que si featureFlagValue est vrai.

De plus, un nouveau composant sera créé pour la fonctionnalité et ce composant ne sera rendu que si featureFlagValue est vrai. Tous les appels API seront ajoutés dans ce composant. Ceci est nécessaire pour des raisons de sécurité et pour éviter d’appeler des API inutiles.

Avec contexte :

	const { featureFlagValue } = getFeatureFlag("showHeader", 5, "user", {
	  email: userEmail,
	});

Sans contexte :

	const { featureFlagValue } = getFeatureFlag("showHeader");
        {featureFlagValue && ( 
            <FeatureFlagHeader />
        )}

Alternativement, si vous devez appeler l’API dans ce composant spécifique, écrivez-la comme ci-dessous. expédition (getFFHeaderData()) récupère les données et les stocke dans Redux, puis les mêmes peuvent être récupérées dans les accessoires featureFlagHeaderData à l’aide de sélecteurs.

useEffect(() => {
	  featureFlagValue && dispatch(getFFHeaderData());
	}, [featureFlagValue]);
	  
	{featureFlagValue && featureFlagHeaderData && (
          <div className="ffHeader">{featureFlagHeaderData}</div>
        )}

Pour supprimer des indicateurs de fonctionnalité, supprimez toutes les instances d’un indicateur de fonctionnalité dans un fichier spécifique. Ce sera facile dans le cas d’un nouveau composant car il suffit de supprimer 1 condition et un appel de hook personnalisé et c’est prêt à partir.

Contexte

La version 3 du React Web SDK remplace les utilisateurs par des contextes. Les contextes vous permettent de créer des règles de ciblage pour les indicateurs de fonctionnalités en fonction de diverses informations différentes, notamment des attributs relatifs aux utilisateurs, aux organisations, aux appareils, aux emplacements, etc. Les multi-contextes sont des combinaisons de plusieurs types de contextes en un seul contexte. Toute combinaison unique d’un ou plusieurs contextes ayant rencontré un indicateur de fonctionnalité est une instance de contexte.

	"context": {
	  "kind": "multi",
	  "user": {
	    "key": "user-key-123abc",
	    "name": "Anna",
	    "email": "anna@globalhealthexample.com",
	    "jobFunction": "doctor"
	  },
	  "organization": {
	    "key": "org-key-123abc",
	    "name": "Global Health Services",
	    "address": {
		"street": "123 Main Street",
		"city": "Springfield"
	    }
	  }
	}

Noeud + LaunchDarkly

Compatibilité des versions du SDK

La version 7.0 du SDK est compatible avec les versions 13 et supérieures de Node.js.

Installation:

Installez le SDK du serveur Launch Darkly. Version installée ^8.1.0 :
```
npm install launchdarkly-node-server-sdk
```
Ajout de la clé SDK dans .env. Remplacez SDK_KEY par la clé SDK fournie dans LaunchDarkly -> Paramètres du compte -> Projets -> Sélectionnez votre projet -> Environnements.
```
FEATURE_FLAG_SDK_KEY=SDK_KEY
```
Création de Server.js qui initialise LD s’il n’est pas déjà initialisé.
```
const client = LaunchDarkly.init(appSettings.featureFlagSDKKey);
```

Une fonction getFeatureFlag renvoie la valeur de l’indicateur de fonctionnalité une fois la clé d’indicateur et les détails du contexte transmis.

export default async function getFeatureFlag(
  flagKey,
  userId,
  contextKind = "anonymous",
  contextDetails = {}
) {
  if (!featureFlagClient) {
    featureFlagClient = await initialize();
  }

  let context = {};
  if (contextKind === "anonymous") {
    context = {
      kind: "user",
      key: "key-" + userId,
      anonymous: true,
    };
  } else {
    context = {
      kind: contextKind,
      key: "key-" + userId,
      ...contextDetails,
    };
  }

  return await featureFlagClient.variation(flagKey, context);
}

Création d’un middleware (isFeatureAllowed) qui appelle getFeatureFlaget vérifie si la fonctionnalité Flag est vraie / fausse. Si c’est vrai, l’API sera accessible, sinon elle renverra des messages d’accès refusé.

async function isFeatureAllowed(req, res, next, flagName, contextKind, contextDetails) {
  try {
    const featureFlag = await getFeatureFlag(flagName, contextKind, contextDetails);
    if (featureFlag) {
      next();
    } else {
      throw {};
    }
  } catch (error) {
    return res.json({
      success: false,
      code: 400,
      message: "This feature is disabled or you do not have access to it.",
    });
  }
}

Appelez le middleware à partir de tous les contrôleurs qui nécessitent l’indicateur de fonctionnalité avec les détails et le contexte de l’indicateur. Pour supprimer tout indicateur de fonctionnalité, il nous suffit de supprimer ce middleware du contrôleur.
```
(req, res, next) =>
  middlewares.isFeatureAllowed(req, res, next, "show-header", "user", {
    email: req.user.email,
}),
```

Ce qui précède contient quelques informations sur Feature Flag et sa mise en œuvre avec Launchdarkly. Consultez nos autres articles de blog pour plus d’informations.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE

Blog ARC Optimizer

février 1, 2024

Feature Flag et sa mise en œuvre avec Launchdarkly

Que sont les indicateurs de fonctionnalités ?

Avantages des indicateurs de fonctionnalités

Pratiques standards

Compatibilité des versions du SDK

Crochets

Clés de drapeau

Installation:

Utiliser un indicateur de fonctionnalité dans n’importe quel fichier

Contexte

Compatibilité des versions du SDK

Installation:

Articles similaires

Blog ARC Optimizer

Que sont les indicateurs de fonctionnalités ?

Avantages des indicateurs de fonctionnalités

Pratiques standards

Compatibilité des versions du SDK

Crochets

Clés de drapeau

Installation:

Utiliser un indicateur de fonctionnalité dans n’importe quel fichier

Contexte

Compatibilité des versions du SDK

Installation:

Partager :

Articles similaires