Erschließung des agilen Potenzials mit GrowthBook und Feature Flags

Feature-Flags — Erweiterung für Entwicklungsteams

Im Bereich der modernen Softwareentwicklung ist die Fähigkeit, schnell auf Benutzerfeedback zu reagieren, mit Markttrends Schritt zu halten und sich an sich ändernde Anforderungen anzupassen, von immenser Bedeutung.

Genau hier Feature-Flaggen komm ins Bild.

Feature-Flags, auch allgemein als Feature-Umschalter bezeichnet, sind Programmiertechnik, die es Entwicklern ermöglicht, bestimmte Funktionen zu aktivieren oder zu deaktivieren, ohne neuen Code bereitstellen zu müssen. Dieser Ansatz bietet Entwicklern Flexibilität, reduziert potenzielle Risiken und erleichtert das Experimentieren mit neuen Funktionen.

Feature-Flags: der Kontext

Bevor wir uns mit den Implementierungsdetails befassen, wollen wir einen Schritt zurücktreten und den größeren Kontext verstehen Feature-Flaggen.

In einer sich schnell entwickelnden Technologielandschaft Benutzerpräferenzen können sich unerwartet ändern und die Marktanforderungen können sich plötzlich ändern. Feature-Flags erweisen sich als strategisches Instrument, das es Entwicklungsteams ermöglicht, sich schnell an diese Änderungen anzupassen.

von Entkopplung der Veröffentlichung von Funktionen von der Codebereitstellung, erhalten Sie die Möglichkeit, in Echtzeit Entscheidungen darüber zu treffen, welche Benutzer Zugriff auf bestimmte Funktionen haben. Dies bietet eine reibungsloses Benutzererlebnis und ermöglicht ein iteratives Vorgehen zur Entwicklung.

Stellen Sie sich vor, Sie könnten neue Funktionen vor einer vollständigen Markteinführung an einer Untergruppe von Benutzern testen und dabei unschätzbares Feedback und Kennzahlen sammeln. Diese kontrollierte Strategie ermöglicht es Ihnen, datengestützte Entscheidungen zu treffen, Funktionen zu verbessern und potenzielle Fallstricke zu vermeiden. Was mehr ist, Feature-Flags erleichtern A/B-Tests, bei dem verschiedene Versionen einer Funktion verglichen werden, um diejenige zu ermitteln, die bei den Benutzern am effektivsten ankommt.

Aus technischer Sicht fördern Funktionsflags eine modularere und wartbarere Codebasis. Indem Sie neue Funktionen hinter Flaggen einkapseln, können Sie Reduzieren Sie die Komplexität der Codezusammenführung und isolieren Sie mögliche Probleme und stellen Sie sicher, dass unvollendete oder instabile Funktionen die Benutzererfahrung nicht stören.

Unser Projekt: Der Kontext

Wir wollten Feature-Flags innerhalb eines internen Projekts ausprobieren und damit spielen, ohne dass der Kunde involviert war.

Diese kontrollierte Umgebung bot einen sicheren Raum, um zu experimentieren, zu lernen und unsere Fähigkeiten zu verbessern, und das alles ohne den Druck externer Interessengruppen. Es war eine unschätzbare Testarena, in der wir die Konzepte und Mechaniken von Feature-Flags gründlich verstehen und so den Boden für deren spätere Integration in unsere kundenorientierten Projekte bereiten konnten.

Warum haben wir uns entschieden, Feature-Flags auszuprobieren?

Unsere Entscheidung, Feature-Flags auszuprobieren, wurde von mehreren Faktoren bestimmt.

Insbesondere beobachteten wir, wie Prominente Branchenführer und Unternehmen nutzten geschickt Feature-Flags, um ihre Entwicklungsprozesse zu optimieren, was unsere Neugier auf die potenziellen Vorteile geweckt hat, die sie unseren eigenen Projekten bieten könnten.

Darüber hinaus ist unser Ziel folgen Sie den Prinzipien der trunkbasierten Entwicklung hat unsere Wahl stark beeinflusst.

Die Verwendung von Feature-Flags passt perfekt zu unseren Ziel ist es, kontinuierlich neuen Code in die Hauptniederlassung zu integrieren. Indem wir unfertige Funktionen vor den Benutzern versteckten, konnten wir problemlos Code zum Hauptzweig hinzufügen, ohne größere Störungen zu verursachen und ohne die Benutzererfahrung zu beeinträchtigen.

Beginn der Implementierung der Feature-Flags: Anforderungen

Mit der Implementierung von Feature-Flags wurden grundlegende Anforderungen eingeführt, um eine reibungslose Integration zu gewährleisten.

Dazu gehörten:

• Interaktion zwischen Frontend und Backend,
• effizientes Management
• und Anpassungsfähigkeit an zukünftige Projekte.
  

Unser Ansatz priorisierte die Abrufen von Flags sowohl aus dem Frontend als auch aus dem Backend. Dieser dynamische Steuermechanismus machte es einfach, Funktionen zu aktivieren oder zu deaktivieren.

Das Das Administrationspanel spielte eine Schlüsselrolle bei der Aktivierung der Verwaltung von Flaggen.

Für die Umsetzung haben wir uns entschieden hosten Sie die Lösung unabhängig in einem Docker-Container. Diese Entscheidung gab uns mehr Kontrolle und erhöhte Sicherheit während des Bereitstellungsprozesses

In Anbetracht Wirtschaftlichkeit war entscheidend, was uns dazu veranlasste, verschiedene Tools und Technologien zu evaluieren, um die am besten geeignete Lösung zu finden.

Verwaltung von Feature-Flaggen mit GrowthBook

Unsere gewählte Lösung für das Feature-Flag-Management war Wachstumsbuch.

Es handelt sich um eine Plattform zum Markieren und Experimentieren von Funktionen, die die Verwaltung von Feature-Rollouts und die Durchführung von Experimenten ermöglicht.

Warum haben wir uns für GrowthBook entschieden?

Benutzer- und Rechteverwaltung

Mit GrowthBook können wir Benutzer und ihre Berechtigungen effektiv verwalten und so angemessene Zugriffsebenen für verschiedene Teammitglieder sicherstellen.

Erstellung und Änderung von Feature-Flags

Mit GrowthBook können wir Feature-Flags einfach erstellen und ändern, was kontrollierte Releases und gezielte Anpassungen von Funktionen ermöglicht.

Verwaltung der Umwelt

GrowthBook unterstützt die Erstellung und Verwaltung verschiedener Umgebungen und ermöglicht so reibungslose Test- und Bereitstellungsprozesse.

Gut dokumentierte Dokumentation

GrowthBook bietet umfassende und gut dokumentierte Ressourcen, die es unserem Team erleichtern, das Tool zu verstehen und effektiv zu nutzen.

Einfache Integration von SDKs

GrowthBook bietet eine einfache Integration mit Software Development Kits (SDKs), was die Integration des Tools in unsere bestehende Infrastruktur vereinfacht.

Selbst gehostete Funktion

GrowthBook ermöglicht es uns, das Tool intern zu hosten und zu verwalten, was uns mehr Kontrolle gibt und Datenschutz und Sicherheit gewährleistet.

Technisches Setup mit Docker-Containern für GrowthBook und MongoDB

Standardmäßig speichert Growthbook seine Daten in einer Mongo-Datenbank. Wir verwenden das Bitnami-Image, da es standardmäßig mit einer Grundkonfiguration geliefert wird.

Das Admin-Panel und alle Kernfunktionen stammen direkt aus dem Growthbook-Image.

Wir verwenden auch ein Proxy-Image. Dies beschleunigt die Synchronisation, wenn Flags hinzugefügt oder gewechselt werden, z. B. wird das Wechseln von Flaggen sofort in unserer Anwendung widergespiegelt.

mongo:
    image: docker.io/bitnami/mongodb:6.0
    restart: always
    env_file:
      - ./.env
    volumes:
      - 'mongodb_master_data:/bitnami/mongodb'
    ports:
      - 27017:27017

growthbook:
    container_name: "growthbook"
    image: "growthbook/growthbook:latest"
    ports:
      - "4000:3000"
      - "4100:3100"
    depends_on:
      - mongo
    env_file:
      - ./.env
    volumes:
      - uploads:/usr/local/src/app/packages/back-end/uploads

  proxy:
    container_name: "growthbook_proxy"
    image: "growthbook/proxy:latest"
    ports:
      - "4300:3300"
    depends_on:
      - growthbook
    env_file:
      - ./.env

volumes:
  uploads:
  mongodb_master_data:
    driver: local
mongo:
    image: docker.io/bitnami/mongodb:6.0
    restart: always
    env_file:
      - ./.env
    volumes:
      - 'mongodb_master_data:/bitnami/mongodb'
    ports:
      - 27017:27017

growthbook:
    container_name: "growthbook"
    image: "growthbook/growthbook:latest"
    ports:
      - "4000:3000"
      - "4100:3100"
    depends_on:
      - mongo
    env_file:
      - ./.env
    volumes:
      - uploads:/usr/local/src/app/packages/back-end/uploads

  proxy:
    container_name: "growthbook_proxy"
    image: "growthbook/proxy:latest"
    ports:
      - "4300:3300"
    depends_on:
      - growthbook
    env_file:
      - ./.env

volumes:
  uploads:
  mongodb_master_data:
    driver: local

Funktionen des Administrationspanels zur Verwaltung von Umgebungen und SDKs

Schauen wir uns das Administrationspanel genauer an und gehen wir die von uns verwendeten Funktionen durch.

Um mit der Verwendung der Feature-Flags zu beginnen, müssen Sie zunächst die Umgebungen richtig konfigurieren.

In unserem Fall haben wir uns für drei Umgebungen entschieden: eine Produktionsumgebung, eine dedizierte Umgebung für Testzwecke und alle Aktivitäten, die während des kontinuierlichen Integrationsprozesses ausgeführt werden, und eine Staging-Umgebung.

Nach der Konfiguration der Umgebungen besteht die nächste Aufgabe darin, die SDKs zu konfigurieren. Jedes SDK entspricht einer bestimmten Umgebung.

Und schließlich - Flaggen. Lassen Sie uns für unseren Testfall ein boolesches Flag erstellen, um eine neue Methode zur Berechnung der Metrik für die Durchlaufzeitverteilung zu testen. Jede Flagge muss mindestens einer Umgebung zugewiesen sein wo ein Umschalten möglich sein wird.

React-Implementierung

Für ein besseres DX erstellen wir zunächst eine Aufzählung mit den Feature-Flags, die in unseren Anwendungen und Paketen verfügbar sind:

‍

export enum FEATURE_FLAG {
  FEATURE_FLAG = 'new-ltd-mertric-calculation',
}

‍

Um ein Growthbook in einer React-Anwendung zu verwenden, wir müssen eine Instanz des Growthbooks erstellen und sie an den Kontextanbieter übergeben das schließt unsere Bewerbung ab. Darüber hinaus muss unsere Anwendung wissen, welche Flags zu einem bestimmten Zeitpunkt verfügbar sind. Wenn sich ihr Status ändert, sollte sich dies in der Anwendung widerspiegeln. Aus diesem Grund wird LoadFeatures im useEffect-Hook mit der Option autoRefresh verwendet.

‍

import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";

const App = () => {
    const gb = new GrowthBook({
        apiHost: import.meta.env.VITE_FEATURE_FLAGS_API_HOST,
        clientKey: import.meta.env.VITE_FEATURE_FLAGS_CLIENT_KEY,
        enableDevMode: import.meta.env.DEV,
      });

      useEffect(() => {
        gb.loadFeatures({ autoRefresh: true });
      }, []);

    return (
        <GrowthBookProvider growthbook={gb}>
            // rest of stuff
        </GrowthBookProvider>
    );
};

‍

Um zu überprüfen, ob das Flag umgeschaltet ist, verwenden Sie den useFeatureIsOn-Hook. Dieser Hook gibt einen booleschen Wert zurück, der auf dem Status der Flagge basiert. Dann können wir eine neue Version der Metrik rendern oder tun, was auch immer erforderlich ist.

‍

import { useFeatureIsOn } from "@growthbook/growthbook-react";

const FriendlyComponent = () => {
  const isNewLtdMetric = useFeatureIsOn(FEATURE_FLAG.NEW_LTD);

  return isNewLtdMetric ? <New/> : <Old/>
};

NestJS-Implementierung

Im Backend im Metrik-Tool verwenden wir NestJS. Lassen Sie uns in das Feature-Flag-Modul eintauchen.

Erstellen Sie zunächst ein Token, um die Abhängigkeitsinjektion zu verwalten.

export const FEATURE_FLAG_TOKEN = Symbol('FEATURE_FLAG_TOKEN');

‍

Dieses Token wird verwendet, um FeatureFlagService zu erstellen, der eine konfigurierte Instanz von Growthbook zurückgibt.

Beachten Sie, dass dieser Service anfordern Umfang. Dies ist nicht der Fall, da wir Module haben, die außerhalb des Anforderungsbereichs verwendet werden. Wenn Sie das Modul für den Anforderungsbereich in anderen Modulen mit unterschiedlichen Bereichen verwenden, werden sie beschädigt.

‍

export type FeatureFlagService = GrowthBook;

export const featureFlagProvider = {
  provide: FEATURE_FLAG_TOKEN,
  useFactory: async (
    configService: ConfigService,
  ): Promise<FeatureFlagService> => {
    const gb = new GrowthBook({
      apiHost: configService.get<string>('FEATURE_FLAGS_API_HOST')!,
      clientKey: configService.get<string>('FEATURE_FLAGS_CLIENT_KEY')!,
      enableDevMode: true,
    });

    await gb.loadFeatures();

    return gb;
  },
  inject: [ConfigService],
};

‍

Abschließend fügen wir diesen Anbieter wie folgt zum Modul hinzu.

@Module({
  providers: [featureFlagProvider],
  exports: [featureFlagProvider],
})

‍

Um einen solchen Dienst nutzen zu können, müssen wir lediglich ein Token in einen anderen Anbieter injizieren.

export class LeadTimeMetric {
  constructor(
    @Inject(FEATURE_FLAG_TOKEN)
    private readonly featureFlagService: FeatureFlagService,
  ){}

  calculate(...) {
    if (this.featureFlagService.isOn(FEATURE_FLAG.NEW_LTD)) {
      return; // new version of metric to be calculated
    }

    return; // old version of metric to be calculated
  }
}

Zusammenfassung

Feature-Flags sind definitiv ein leistungsstarkes Tool, das die Bereitstellung neuer Funktionen einfacher und sicherer macht. Es braucht Zeit, um sich an diese neue Art der Implementierung neuer Funktionen zu gewöhnen. Es ist wichtig zu beachten, dass wir das Potenzial dieses Tools nur an der Oberfläche ausgeschöpft haben. Ich empfehle Ihnen, die Verwendung von Feature-Flags in Betracht zu ziehen. In einer Landschaft, in der Anpassungsfähigkeit und Reaktionsfähigkeit am wichtigsten sind, bieten Feature-Flags einen Weg, der es wert ist, erkundet zu werden.