Beim Erstellen von Software kann es schwierig sein, neue Funktionen schnell zu veröffentlichen, ohne etwas kaputt zu machen. Feature Flags erleichtern dies. Nachdem ich über das Feature Flag SDK von Vercel gelesen hatte, dachte ich, es wäre hilfreich, mehr über Feature Flags zu erfahren und zu erklären, was sie sind, wie sie funktionieren und wie Sie selbst eines erstellen können.

Was sind Feature Flags?

Feature-Flags (auch Feature-Toggles genannt) ermöglichen Entwicklern das Aktivieren oder Deaktivieren von Features, ohne den Code ändern oder die Anwendung erneut bereitstellen zu müssen. Das bedeutet, dass Sie:

• Funktionen schrittweise veröffentlichen: Lassen Sie nur einige Benutzer die neue Funktion sehen und führen Sie sie langsam für alle ein.
• Neue Funktionen in der Produktion testen: Sie können die Funktion für sich selbst oder eine kleine Gruppe von Testern aktivieren, ohne sie allen Benutzern zur Verfügung zu stellen.
• Eine Funktion schnell zurücksetzen: Wenn eine neue Funktion Probleme verursacht, können Sie sie deaktivieren, ohne sie erneut bereitzustellen.

Mit Feature-Flags steuern Sie, wann Benutzer auf Funktionen zugreifen können, unabhängig davon, wann der Code bereitgestellt wird.

Warum Feature Flags verwenden?

1. Kontinuierliche Lieferung

   Feature-Flags helfen Teams, Code häufiger zu veröffentlichen. Sie können unvollendete Arbeiten in die Hauptcodebasis einbinden, sie hinter einer Markierung verstecken und bereitstellen, ohne dass dies Auswirkungen auf die Benutzer hat.

2. A/B-Tests

   Sie können zwei Versionen einer Funktion mit unterschiedlichen Benutzergruppen testen, um zu sehen, welche eine bessere Leistung erbringt. Dies trägt dazu bei, die Benutzererfahrung basierend auf echten Daten zu verbessern.

3. Kontrollierte Rollouts

   Sie können eine Funktion für eine kleine Gruppe von Benutzern freigeben, ihre Leistung überwachen und sie dann für alle anderen freigeben.

4. Schnelle Rollbacks

   Wenn etwas schief geht, ist das Deaktivieren des Feature-Flags viel schneller als das Rückgängigmachen von Codeänderungen und trägt dazu bei, die App stabil zu halten.

Verwenden von Feature Flags in Next.js mit dem Flags SDK von Vercel

flags.ts (serverseitig)

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

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

Die Entscheidungsfunktion bestimmt den Wert des Flags, der aus verschiedenen Quellen bereitgestellt werden kann, wie zum Beispiel:

• Umgebungsvariablen
• Andere Feature-Flag-Anbieter
• Vercel's Edge Config (Datenkonfigurationsspeicher)
• Datenbanken usw.

app/page.tsx

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

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

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

Da es sich bei den Flags um Funktionen handelt, können wir die Implementierung problemlos ändern, ohne etwas auf der aufrufenden Seite zu ändern. Diese Flexibilität ermöglicht es Ihrer Anwendung, sich an neue Anforderungen anzupassen, ohne dass die Kernstruktur der Flag-Logik geändert werden muss.

So erstellen Sie Ihr eigenes Feature-Flag-System

Lassen Sie uns ein einfaches Feature-Flag-System erstellen, das Sie im Laufe der Zeit verbessern können.

Schritt 1: Erstellen Sie einen benutzerdefinierten Hook zum Abrufen von Feature-Flags

In diesem Schritt wird ein benutzerdefinierter Hook erstellt, mit dem Sie Feature-Flags dynamisch abrufen können. Sie können diesen Hook problemlos in jedem Teil Ihrer React-Anwendung wiederverwenden, um zu überprüfen, ob eine Funktion aktiviert oder deaktiviert ist.

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;
};

Schritt 2: Komponente reagieren

Als nächstes erstellen Sie eine Komponente, die den benutzerdefinierten Hook verwendet, um verschiedene Funktionen basierend darauf zu rendern, ob das Flag aktiviert oder deaktiviert ist. Dadurch kann Ihre Anwendung nahtlos zwischen alten und neuen Funktionen wechseln, ohne dass die Benutzererfahrung beeinträchtigt wird.

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;

Weitere Feature-Flag-Lösungen auf dem Markt

Der Aufbau eines eigenen Feature-Flag-Systems ist für kleine Projekte nützlich, aber wenn Sie mit größeren Teams arbeiten oder eine erweiterte Kontrolle benötigen, bieten mehrere Tools Feature-Flagging als Service an:

1. Vercel-Feature-Flags

   Vercel bietet in seine Plattform integrierte Feature-Flags an, die eine Echtzeitkontrolle darüber ermöglichen, welche Benutzer welche Features sehen.

2. LaunchDarkly

   LaunchDarkly ist ein beliebtes Tool zum Verwalten von Feature-Flags im großen Maßstab. Es unterstützt komplexe Rollouts und zielt auf Benutzer basierend auf Attributen wie Standort oder Verhalten ab.

3. Optimizely

   Optimizely konzentriert sich auf Experimente und A/B-Tests und verwendet Feature-Flags, um verschiedene Funktionen zu testen und die Benutzererfahrung zu verbessern.

4. Split.io

   Mit Split.io können Teams den Datenverkehr auf verschiedene Funktionsversionen aufteilen und Leistungsmetriken in Echtzeit verfolgen.

5. Hypertune

Hypertune ist ein neuerer Player im Bereich Feature-Flagging, der sich auf Hochleistungsexperimente und Feature-Umschaltung konzentriert. Es ermöglicht Teams, komplexe Experimente mit minimaler Latenz durchzuführen und so Einblicke in die Leistung in Echtzeit zu gewährleisten. Der einzigartige Ansatz von Hypertune integriert Feature-Flags mit maschinellen Lernmodellen und ermöglicht so eine intelligentere Entscheidungsfindung in Bezug auf Feature-Rollouts und Benutzer-Targeting.

Abschluss

Feature-Flags sind eine hervorragende Möglichkeit, Features sicher freizugeben, in der Produktion zu testen und schnelle Änderungen vorzunehmen, ohne den Code erneut bereitzustellen. Sie können ein einfaches Feature-Flag-System mit JavaScript erstellen oder für größere Projekte erweiterte Tools wie Vercel, LaunchDarkly oder Optimizely verwenden.

Durch die Verwendung von Feature-Flags wird Ihr Entwicklungsprozess flexibler und effizienter, sodass Sie neue Funktionen schneller und sicherer bereitstellen können.

Vielen Dank fürs Lesen und teilen Sie uns gerne Ihre Kommentare mit!