Leistungsstarke Feature-Flags in React

5. Juni 2019

Feature-Flags ermöglichen die schrittweise Einführung einer Funktion anstatt eines riskanten Big-Bang-Launches und sind besonders hilfreich bei der kontinuierlichen...

Feature-Flags ermöglichen die schrittweise Einführung von Funktionen anstelle eines riskanten Big-Bang-Launches und sind besonders hilfreich in CI/CD-Umgebungen.

Bei Optimizely verwenden wir Feature-Flags häufig, um das Risiko komplexer Deployments, wie z. B. das Neuaufbauen von UI-Dashboards, zu reduzieren.

Die Entwicklung eines Feature-Flag-Systems gehört jedoch in der Regel nicht zu den Kernkompetenzen Ihres Unternehmens und kann von anderen Entwicklungsbemühungen ablenken.

Ich bin Asa, Developer Advocate bei Optimizely.

In diesem Blogbeitrag mit 8 Schritten zeige ich Ihnen, wie Sie die Vorteile leistungsstarker Feature-Flags nutzen, indem Sie Funktionen in React mithilfe von Optimizely Rollouts – einem komplett kostenlosen Produkt – kundenweise ausrollen.

Hinweis: Falls Sie noch keine React-Anwendung besitzen, empfehlen wir Ihnen, eine mit create-react-app

zu erstellen.

Schritte zur Einführung einer Funktion

1

Funktionsflag-Oberfläche einrichten

Erstellen Sie hier ein kostenloses Optimizely Rollouts-Konto.

Navigieren Sie in der Rollouts-Oberfläche zu „Funktionen > Neues Feature erstellen“ und erstellen Sie ein Funktionsflag namens „hello_world“.

Funktionsübersicht

Um Ihr „hello_world“-Feature mit Ihrer Anwendung zu verbinden, suchen Sie Ihren SDK-Schlüssel. Navigieren Sie zu „Einstellungen >“ Datendatei und kopieren Sie den SDK-Schlüsselwert.

Einstellungen anklicken

Datendatei und SDK-Schlüsselwert kopieren.

Einstellungen anklicken

Datendatei und SDK-Schlüsselwert kopieren.

2

Installieren Sie das Optimizely Rollouts React SDK

Mit dem React SDK können Sie Feature-Toggles direkt in Ihrem Code mithilfe von JavaScript einrichten.

Mit npm:

>npm install --save @optimizely/react-sdk

Oder mit yarn:

>yarn add @optimizely/react-sdk

Verwenden Sie das SDK, indem Sie Ihre Hauptkomponente Ihrer React-App in die OptimizelyProvider-Komponente einbetten und

import React from 'react'; import { createInstance, OptimizelyProvider, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '', }) class App extends React.Component { render() { return (

Beispielanwendung

Noch keine Funktionen vorhanden... /div>
) } } export default App;Beachten Sie, dass der OptimizelyProvider ein Benutzerobjekt benötigt, das Definiert Eigenschaften, die einem Besucher Ihrer Website zugeordnet sind.

  • user.id: Wird für eine zufällige prozentuale Verteilung an Ihre Benutzer verwendet.
  • user.attributes: Werden für eine gezielte Verteilung an Ihre Benutzer verwendet. Sie verwenden diese Attribute, um Ihre Funktion ab Schritt 5 bestimmten Benutzergruppen zugänglich zu machen.
  • user.id: Wird für eine gezielte Verteilung an Ihre Benutzer verwendet.
    • 3

    Funktion implementieren

    Um Ihre Funktion „hello_world“ zu implementieren, importieren Sie zunächst die OptimizelyFeature-Komponente am Anfang Ihrer Anwendung:

    class=">import { OptimizelyFeature } from '@optimizely/react-sdk'

    Fügen Sie anschließend die OptimizelyFeature-Komponente in Ihre Anwendung ein und übergeben Sie den Funktionsschlüssel „hello_world“ an die Feature-Eigenschaft der OptimizelyFeature-Komponente:

    <OptimizelyFeature feature="hello_world"> {(isEnabled) => ( isEnabled ? (

    Sie haben das hello_world-Feature erhalten!

    ) : (

    Sie haben das Feature nicht erhalten

    ) )}

    Die Feature-Eigenschaft verbindet die Komponente mit dem Feature, das Sie im ersten Schritt in der Optimizely-Benutzeroberfläche erstellt haben.

    Ihr vollständiger Code sieht nun wie folgt aus:

    import React from 'react'; import { createInstance, OptimizelyProvider, OptimizelyFeature, } from '@optimizely/react-sdk' const optimizely = createInstance({ sdkKey: '', }) class App extends React.Component { render() { return (

    Beispielanwendung

    {(isEnabled) =>( isEnabled ? (

    Sie haben die hello_world feature!

    ) : (

    Das Feature wurde nicht erhalten) )} ) } } export default App;
    4

    Funktionsschalter aktivieren!

    Wenn Sie Ihre Anwendung jetzt ausführen, werden Sie feststellen, dass die Funktion nicht verfügbar ist.

    Dies liegt daran, dass die Funktion nicht aktiviert ist und somit für alle Besucher Ihrer Anwendung deaktiviert ist.

    So aktivieren Sie die Funktion:

    1. Navigieren Sie zu „Funktionen“.
    2. Klicken Sie auf die Funktion „hello_world“.
    3. Aktivieren Sie die Funktion und stellen Sie sicher, dass sie auf 100 % eingestellt ist (siehe Screenshot unten).
    4. Klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern.

    Funktionsumschaltung

    Nach etwa einer Minute sollte die Funktion nach dem Aktualisieren Ihrer React-App aktiviert sein und die Meldung „Sie haben die Funktion aktiviert“ angezeigt werden.

    hello_world Feature!!”.

    Sie haben Ihr Feature nun erfolgreich hinter einem Feature-Flag veröffentlicht, es ist aber für alle verfügbar. Im nächsten Schritt aktivieren Sie das Targeting, um Ihr Feature nur einer bestimmten Nutzergruppe anzuzeigen und so den vollen Nutzen einer kundenindividuellen Bereitstellung zu erzielen.

    1

    Attribut für customerId erstellen

    Um Ihre Funktion basierend auf den Benutzerattributen, die Sie der OptimizelyProvider-Komponente in Schritt 2 bereitgestellt haben, gezielt auszurichten, müssen Sie diese Benutzerattribute in der Rollouts-Benutzeroberfläche erstellen. Beginnen Sie mit dem Attribut „customerId“:

    1. Navigieren Sie zu Zielgruppen -> Attribute
    2. Klicken Sie auf „Neues Attribut erstellen…“
    3. Benennen Sie den Attributschlüssel „customerId“
    4. Klicken Sie auf „Attribut speichern“, um Ihre Änderungen zu speichern

    Neues Attribut

    2

    Beta-Zielgruppe erstellen und hinzufügen

    Erstellen wir nun eine Zielgruppe, um festzulegen, welche Kunden-IDs Zugriff auf Ihre Funktion erhalten.

    1. Navigieren Sie zu „Funktionen“.
    2. Klicken Sie auf Ihre Funktion „hello_world“.
    3. Scrollen Sie nach unten zu „Zielgruppen“.
    4. Klicken Sie auf „Neue Zielgruppe erstellen…“.
    5. Benennen Sie die Zielgruppe „[hello_world] Beta-Nutzer“.
    6. Ziehen Sie Ihr Attribut „customerId“ per Drag & Drop in die Zielgruppenbedingungen.
    7. Ändern Sie die Dropdown-Liste „Hat einen beliebigen Wert“ auf „Zahl gleich“ mit dem Wert 123.
    8. Klicken Sie auf „Zielgruppe speichern“.

    Zielgruppe auswählen

    Nachdem Sie die Zielgruppe zu Ihrem Feature hinzugefügt haben, ist die Betaversion einsatzbereit. Ihr Feature wird derzeit nur Kunden mit der Kunden-ID 123 angezeigt. Diese ID haben Sie der OptimizelyProvider-Komponente in der userAttributes-Eigenschaft übergeben.

    Um dies zu überprüfen, können Sie die Kunden-ID auf 456 ändern, speichern und beobachten, wie das Feature deaktiviert wird, da Sie die Targeting-Bedingungen nicht erfüllen.

    Nachdem Sie die Zielgruppe zu Ihrem Feature hinzugefügt haben, ist die Betaversion einsatzbereit.

    3

    Nutzer zur Beta hinzufügen

    Um weitere Kunden zu Ihrer Beta-Testgruppe hinzuzufügen, bearbeiten Sie die Zielgruppendefinition, um Nutzer zur Beta hinzuzufügen oder daraus zu entfernen:

    • Klicken Sie auf das „+“-Zeichen und speichern Sie, um Beta-Nutzer hinzuzufügen
    • Klicken Sie auf das „x“-Zeichen und speichern Sie, um Beta-Nutzer zu entfernen

    Im folgenden Screenshot-Beispiel wurden drei Kunden zur Beta hinzugefügt. Kunden mit den IDs 123, 456 und 789 haben nun Zugriff auf die Funktion „hello_world“.

    Zielgruppe erstellen

    ...
    4

    Funktion starten

    Nachdem genügend Kunden die neue Benutzererfahrung Ihrer Funktion getestet haben, können Sie entscheiden, ob Sie die Funktion für alle Kunden freigeben möchten.

    Sobald Sie bereit sind, die Beta-Phase Ihrer Funktion zu beenden, gehen Sie wie folgt vor:

    1. Zielgruppe von Ihrer Funktion entfernen
    2. Sicherstellen, dass der Rollout auf 100 % konfiguriert ist
    3. Funktion speichern

    Die Funktion ist nun für alle verfügbar und Sie haben die Funktion „hello_world“ erfolgreich kundenweise mithilfe kostenloser Feature-Flags von Optimizely Rollouts in React eingeführt!

    Nächste Schritte

    Obwohl dieser Blogbeitrag die kundenspezifische Einführung behandelte, ermöglichen Feature-Flags zusätzliche Anwendungsfälle, wie beispielsweise den Verzicht auf langlebige Feature-Branches, die Erstellung eines Berechtigungssystems oder produktorientierte A/B-Tests. Wir bei Optimizely nutzen Feature-Flags für all diese und weitere Anwendungsfälle. Ich hoffe, dieser Beitrag war hilfreich! Geben Sie uns gerne Feedback. Ich hoffe, ich konnte Ihnen helfen, Entwicklungsressourcen Ihres Teams zu schonen, indem ich Ihnen die Vorteile von Feature-Flags mit unserem kostenlosen Feature-Flagging-Produkt „Optimizely Rollouts“ nähergebracht habe.