Feature Flags sind ein wichtiges Werkzeug, das dabei hilft, die Erstellung und Veröffentlichung von Software-Updates zu optimieren. Sie können sie verwenden, um eine bestimmte Benutzergruppe oder Ihre gesamte Benutzerbasis anzusprechen.

Im Wesentlichen ermöglichen sie Ihnen die Einführung wesentlicher Änderungen, ohne den Arbeitsablauf Ihrer Produktionsanwendung zu unterbrechen, und zwar in Echtzeit und bei Bedarf. Sie können dies erreichen, indem Sie Funktionsumschaltungen als Alternative zu umfangreichen Codeänderungen und -bereitstellungen verwenden.

Feature Flags: Implementierung und Vorteile erklärt

Softwareentwicklung ist zweifellos ein kontinuierlicher und iterativer Prozess. Wenn nicht alle ein Projekt aufgeben, wird jemand es weiterentwickeln und neue Änderungen einführen.

Im Idealfall können Sie mit CI/CD-Pipelines konsistente Codeänderungen in die Produktion übertragen. Allerdings sind diese Prozesse mit einem erheblichen Bereitstellungsaufwand verbunden.

Mithilfe von Feature-Flags können Sie jedoch ein Update für einige oder alle Ihrer Benutzerbasis freigeben, indem Sie einfach eine Einstellung umschalten.

Es gibt mehrere Situationen, in denen Feature-Flags anwendbar sind, darunter:

• Wenn Sie eine neue Idee testen möchten, bevor Sie sie allen Benutzern zur Verfügung stellen. Auf diese Weise können Sie einfach und schnell Feedback zur Leistung und deren Auswirkungen auf die Benutzer sammeln.
• Wenn Sie wichtige Notfall-Updates und Hotfixes einführen möchten. Im Katastrophenfall können Sie problematische Funktionen schnell deaktivieren und Korrekturen einführen, ohne die gesamte Anwendung erneut bereitstellen zu müssen.
• Bei der Bereitstellung personalisierter Benutzererlebnisse durch Aktivieren oder Deaktivieren bestimmter Funktionen basierend auf Benutzerattributen, Präferenzen oder Abonnementpaketen.

Erste Schritte mit Flagsmith

Flagsmith bietet eine großartige Lösung für Feature Flags, einschließlich einer Open-Source-Version und eines Cloud-Dienstes. In diesem Handbuch wird die Cloud-Lösung verwendet, um Feature-Flags in eine React-Anwendung zu integrieren.

Um zu beginnen:

1. Geh 'rüber zu Cloud-Service von Flagsmith, eröffnen Sie ein Konto und melden Sie sich bei Ihrem Konto an Überblick Seite.
2. Klicken Sie auf der Übersichtsseite auf Projekt erstellen Klicken Sie auf die Schaltfläche, um ein neues Flagsmith-Projekt einzurichten. Flagsmith erstellt automatisch sowohl die Entwicklungs- als auch die Produktionsumgebung auf Ihrem Projekt Einstellungen Seite. In diesem Tutorial verwenden Sie die Entwicklungsumgebung, um die Feature-Flags zu implementieren.
3. Stellen Sie sicher, dass Sie sich in der befinden Entwicklung Umgebung, wählen Sie die aus Merkmale Registerkarte und klicken Sie auf Erstellen Sie Ihr erstes Feature Taste.
4. Geben Sie eine an AUSWEIS Klicken Sie für die Funktion, die Sie kennzeichnen möchten, vorzugsweise eine Zeichenfolge, auf die Umschalttaste Standardmäßig aktivieren Funktionsoption und drücken Sie Feature erstellen. In diesem Fall implementieren Sie ein Feature-Flag für die Bewertung verschiedener E-Commerce-Produkte.
5. Sie können die neu erstellte Funktion anzeigen und verwalten, indem Sie zur Übersichtsseite der Funktionseinstellungen navigieren.

Um die Einrichtung abzuschließen, benötigen Sie nun den clientseitigen Umgebungsschlüssel.

Generieren Sie den clientseitigen Umgebungsschlüssel

So erhalten Sie den clientseitigen Umgebungsschlüssel:

1. Klick auf das Einstellungen Registerkarte unter Entwicklung Umfeld.
2. Klicken Sie auf der Seite mit den Entwicklungsumgebungseinstellungen auf Schlüssel Tab.
3. Kopieren Sie den bereitgestellten clientseitigen Umgebungsschlüssel.

Den Code dieses Projekts finden Sie in seiner GitHub Repository.

Erstellen Sie das React-Projekt

Jetzt machen Sie weiter und Erstellen Sie ein Gerüst für ein React-Projekt mit dem Befehl „create-react-app“.. Alternativ können Sie Verwenden Sie Vite, um ein einfaches React-Projekt einzurichten. Bitte beachten Sie, dass in diesem Handbuch Vite zum Erstellen der React-Anwendung verwendet wird.

Als nächstes installieren Sie das SDK von Flagsmith in Ihrem Projekt. Dieses SDK ist mit verschiedenen kompatibel JavaScript-Frameworks.

npm install flagsmith

Erstellen Sie nun eine .env Datei im Stammverzeichnis Ihres Projektordners und fügen Sie den clientseitigen Umgebungsschlüssel wie folgt hinzu:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Fügen Sie eine Produktlisten-Funktionskomponente hinzu

Um die Feature-Flags-Funktionen von Flagsmith zu testen, erstellen Sie eine einfache Komponente, die eine Liste von E-Commerce-Produkten aus a rendert DummyJSON API.

Jedes Produkt in der Liste verfügt über verschiedene Attribute wie Titel, Preis, Produktbeschreibung und eine Gesamtproduktbewertung. Die Absicht besteht darin, das Feature-Flag auf den Produktbewertungswert anzuwenden. Sobald Sie die Flagge implementiert haben, können Sie die Funktion steuern, indem Sie eine Schaltfläche im Cloud-Service von Flagsmith umschalten.

Im src Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn. Komponenten. Fügen Sie in diesem Ordner einen neuen hinzu Produkte.jsx und fügen Sie den folgenden Code ein.

Führen Sie zunächst die folgenden Importe durch:

import"./style.component.css";
import React, { useState, useEffect } from"react"; 
import flagsmith from'flagsmith';

Als nächstes erstellen Sie die Funktionskomponente, definieren die Anfangszustandsvariablen und fügen die JSX-Elemente hinzu.

exportdefaultfunctionProducts() {
const [products, setProducts] = useState([]);
const [showProductRating, setShowProductRating] = useState(false);
const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
return (
<>
<divclassName="product-catalogue">
<divclassName="product-list">
div>
div>

 );
}

Definieren Sie nun a useEffect Hook, der HTTP-Anfragen an die Dummy-JSON-API sendet, um die Produktdaten abzurufen. Du kannst Verwenden Sie die Fetch-API oder Axios, um die API zu nutzen.

Fügen Sie innerhalb der Funktionskomponente den folgenden Code hinzu:

useEffect(() => {
const fetchProducts = async () => {
await fetch("https://dummyjson.com/products")
 .then((res) => res.json())
 .then((json) => setProducts(json.products)); 
 }
 fetchProducts();
 }, []);

Der fetchProducts Die Funktion wird ausgeführt, sobald die Komponente bereitgestellt wird. Es ruft die Daten der Produkte ab und aktualisiert anschließend den Status der Produkte Variable.

Schließlich können Sie die Produktpalette zuordnen und im Browser rendern.

Direkt darunter Produktlisten-Klasse div, fügen Sie den folgenden Code ein:

{ products.slice(0,6).map((product) => (
"product" key={product.id}>
{product.title}</h2> 


Price: ${product.price}</p>

{product.description}</p>
Rating: {product.rating}</h3>
 </div>
))}

Damit können Sie bequem eine Liste von Produktartikeln aus der Dummy-JSON-API abrufen und anzeigen.

Integrieren Sie das SDK von Flagsmith

Um das SDK von Flagsmith in die React-Anwendung zu integrieren und zu initialisieren, klicken Sie direkt darunter fetchProducts Funktionsaufruf innerhalb der useEffect Hook, fügen Sie den folgenden Code hinzu.

flagsmith.init({
 environmentID: environmentID,
 cacheFlags: true,
 enableAnalytics: true,
 onChange: (oldFlags, params) => {
 setShowProductRating(flagsmith.hasFeature('product_rating'));
 }
});

Durch die Einbindung dieser Funktion aktivieren Sie die Feature-Flag-Verwaltung mit Caching und Analysen in der React-App.

Die Funktion verwendet einen Rückruf, um dynamisch zu verwalten, wie Produktbewertungen basierend auf dem Status angezeigt werden Produktbewertung Feature-Flag. Dies sollte entweder „true“ (aktiviert) sein, wenn es im Cloud-Dienst aktiviert ist, oder „false“ (deaktiviert), wenn es deaktiviert ist.

Aktualisieren Sie abschließend die Produktbewertung h3 Element in der zurückkehren Codeblock mit dieser Anweisung.

 {showProductRating && <h3> Rating: {product.rating}h3>}

Mit diesem Update wird die Funktion aktualisiert, sobald Sie sie aktivieren showProductRating variabel zu WAHR. Dadurch wird die Produktbewertung neben den anderen Attributen angezeigt. Wenn Sie die Funktion jedoch ausschalten, wird die showProductRating Variable wird sein FALSCH, und die Produktbewertung wird nicht angezeigt.

Aktualisieren Sie abschließend die App.jsx Datei zum Importieren der Produktkomponente.

import"./App.css";
import Products from"./components/Products";
functionApp() {
return (

"App">
"App-header">
Product Catalogue</h1>

 </div>
 </div>
 );
}

exportdefault App;

Führen Sie abschließend Ihre Anwendung aus und gehen Sie zu Ihrem Browser, um die Anwendung anzuzeigen.

npm run dev

Um diese Funktion zu testen, kehren Sie zu Ihrem zurück Seite „Einstellungen“ der Funktion auf Flagsmith und schalten Sie die Produktbewertungsfunktion aus.

Da die Anwendung auf localhost ausgeführt wird, laden Sie sie erneut im Browser, um die aktualisierten Änderungen anzuzeigen. Die zunächst vorhandene Produktbewertung verschwindet. Wenn Sie die Funktion wieder aktivieren und die Seite erneut laden, wird sie erneut angezeigt.

Feature-Releases sollten kein Problem mehr sein

Feature-Flags sind zu einem bahnbrechenden Tool für die Verwaltung von Feature-Releases in Anwendungen geworden. Sie integrieren sich nahtlos in den Entwicklungsworkflow und minimieren so die mit der Einführung neuer Updates verbundenen Risiken.

Sie sind außerdem leistungsstark und geben jedem – sogar Endbenutzern – die Möglichkeit, Funktionen zu aktivieren oder zu deaktivieren, ohne in komplexen Code eintauchen zu müssen.