Lors de la création d'un logiciel, publier rapidement de nouvelles fonctionnalités sans rien casser peut être délicat. Les indicateurs de fonctionnalités facilitent cela. Après avoir lu le SDK Feature Flag de Vercel, j'ai pensé qu'il serait utile d'étudier davantage les indicateurs de fonctionnalités et d'expliquer ce qu'ils sont, comment ils fonctionnent et comment vous pouvez en créer un par vous-même.

Que sont les indicateurs de fonctionnalités ?

indicateurs de fonctionnalités (également appelés bascules de fonctionnalités) permettent aux développeurs d'activer ou de désactiver des fonctionnalités sans avoir à modifier le code ou à redéployer l'application. Cela signifie que vous pouvez :

• Publier les fonctionnalités progressivement : permettre à certains utilisateurs seulement de voir la nouvelle fonctionnalité et de la déployer progressivement pour tout le monde.
• Tester les nouvelles fonctionnalités en production : vous pouvez activer la fonctionnalité pour vous-même ou pour un petit groupe de testeurs sans la rendre disponible à tous les utilisateurs.
• Rétablir rapidement une fonctionnalité : si une nouvelle fonctionnalité provoque des problèmes, vous pouvez la désactiver sans la redéployer.

Avec les indicateurs de fonctionnalités, vous contrôlez le moment où les utilisateurs peuvent accéder aux fonctionnalités, indépendamment du moment où le code est déployé.

Pourquoi utiliser les indicateurs de fonctionnalités ?

1. Livraison continue

   Les indicateurs de fonctionnalité aident les équipes à publier du code plus fréquemment. Vous pouvez fusionner le travail inachevé dans la base de code principale, le masquer derrière un indicateur et le déployer sans affecter les utilisateurs.

2. Tests A/B

   Vous pouvez tester deux versions d'une fonctionnalité avec différents groupes d'utilisateurs pour voir laquelle fonctionne le mieux. Cela permet d'améliorer l'expérience utilisateur sur la base de données réelles.

3. Déploiements contrôlés

   Vous pouvez proposer une fonctionnalité à un petit groupe d'utilisateurs, surveiller ses performances, puis la proposer à tous les autres.

4. Retours rapides

   Si quelque chose ne va pas, désactiver l'indicateur de fonctionnalité est beaucoup plus rapide que d'annuler les modifications de code, ce qui contribue à maintenir la stabilité de l'application.

Utilisation des indicateurs de fonctionnalités dans Next.js avec le SDK Flags de Vercel

flags.ts (côté serveur)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

La fonction de décision détermine la valeur de l'indicateur, qui peut être fournie à partir de diverses sources telles que :

• Variables d'environnement
• Autres fournisseurs d'indicateurs de fonctionnalités
• Vercel's Edge Config (magasin de configuration de données)
• Bases de données, etc.

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

Étant donné que les indicateurs sont des fonctions, nous pouvons facilement changer l'implémentation sans rien modifier du côté appelant. Cette flexibilité permet à votre application de s'adapter aux nouvelles exigences sans avoir besoin de modifier la structure de base de la logique des indicateurs.

Comment créer votre propre système d'indicateurs de fonctionnalités

Créons un système simple d'indicateurs de fonctionnalités que vous pouvez améliorer au fil du temps.

Étape 1 : Créer un hook personnalisé pour récupérer les indicateurs de fonctionnalité

Cette étape implique la création d'un hook personnalisé qui vous permettra de récupérer les indicateurs de fonctionnalités de manière dynamique. Vous pouvez facilement réutiliser ce hook dans n'importe quelle partie de votre application React pour vérifier si une fonctionnalité est activée ou désactivée.

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

Étape 2 : Réagir au composant

Ensuite, créez un composant qui utilise le hook personnalisé pour afficher différentes fonctionnalités selon que l'indicateur est activé ou désactivé. Cela permettra à votre application de basculer de manière transparente entre les anciennes et les nouvelles fonctionnalités sans aucune interruption de l'expérience utilisateur.

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

Autres solutions d'indicateurs de fonctionnalités sur le marché

Créer votre propre système d'indicateur de fonctionnalités est utile pour les petits projets, mais si vous travaillez avec des équipes plus grandes ou si vous avez besoin d'un contrôle plus avancé, plusieurs outils proposent l'indicateur de fonctionnalités en tant que service :

1. Drapeaux de fonctionnalité Vercel

   Vercel propose des indicateurs de fonctionnalités intégrés à sa plate-forme, permettant un contrôle en temps réel sur quels utilisateurs voient quelles fonctionnalités.

2. LancerDarkly

   LaunchDarkly est un outil populaire pour gérer les indicateurs de fonctionnalités à grande échelle. Il prend en charge des déploiements complexes, ciblant les utilisateurs en fonction d'attributs tels que l'emplacement ou le comportement.

3. Optimiser

   Optimizely se concentre sur l'expérimentation et les tests A/B, en utilisant des indicateurs de fonctionnalités pour tester différentes fonctionnalités et améliorer l'expérience utilisateur.

4. Split.io

   Split.io permet aux équipes de répartir le trafic entre différentes versions de fonctionnalités et de suivre les mesures de performances en temps réel.

5. Hypertune

Hypertune est un acteur plus récent dans le domaine du signalement de fonctionnalités, se concentrant sur l'expérimentation hautes performances et le basculement de fonctionnalités. Il permet aux équipes d'exécuter des expériences complexes avec une latence minimale, garantissant ainsi des informations sur les performances en temps réel. L'approche unique d'Hypertune intègre des indicateurs de fonctionnalités avec des modèles d'apprentissage automatique, permettant une prise de décision plus intelligente en termes de déploiement de fonctionnalités et de ciblage des utilisateurs.

Conclusion

Les indicateurs de fonctionnalités constituent un excellent moyen de publier des fonctionnalités en toute sécurité, de tester en production et d'apporter des modifications rapides sans redéployer le code. Vous pouvez créer un système simple d'indicateurs de fonctionnalités à l'aide de JavaScript ou utiliser des outils plus avancés tels que Vercel, LaunchDarkly ou Optimizely pour des projets plus importants.

L'utilisation des indicateurs de fonctionnalités rendra votre processus de développement plus flexible et efficace, vous permettant de fournir de nouvelles fonctionnalités plus rapidement et en toute confiance.

Merci d'avoir lu et n'hésitez pas à partager vos commentaires !