Hoe Feature Flags integreren in React-toepassingen met Flagsmith

Feature flags zijn een essentieel hulpmiddel om het bouwen en uitbrengen van software-updates te stroomlijnen. Je kunt ze gebruiken om je te richten op een specifieke groep gebruikers of je hele gebruikersbestand.

In essentie maken deze tools het mogelijk om substantiële wijzigingen door te voeren in een live productieomgeving zonder de operationele stroom te belemmeren. Dit wordt bereikt door het gebruik van feature flags in plaats van ingewikkelde code revisies en deployment processen.

Feature Flags: Implementatie en voordelen uitgelegd

Softwareontwikkeling is ongetwijfeld een doorlopende en cyclische onderneming. Zolang individuen zich blijven inzetten voor een bepaald project, zullen wijzigingen en verbeteringen voortdurend worden geïmplementeerd door ten minste één individu of entiteit.

In het ideale geval faciliteren Continue Integratie en Continue Deployment (CI/CD) pijplijnen de naadloze levering van consistente code-updates naar productieomgevingen met minimale menselijke tussenkomst. Dit proces gaat echter vaak gepaard met een aanzienlijke investering in deployment inspanningen die zowel tijdrovend als resource-intensief kunnen zijn.

Inderdaad, met het gebruik van feature flags kan men een upgrade verspreiden naar een deel of de volledige gebruikerspopulatie door enkel een configuratie-instelling aan te passen.

In verschillende scenario’s kan het gebruik van feature flags gepast zijn, zoals:

Wanneer men een innovatief concept wil evalueren voordat het universeel wordt geïmplementeerd, biedt het uitvoeren van een experiment met een gecontroleerde steekproef van gebruikers een efficiënte manier om zowel kwalitatieve als kwantitatieve gegevens te verzamelen over de functionaliteit van het product en de algehele invloed ervan op eindgebruikers.

Wanneer er sprake is van een urgente situatie die kritieke patches of snelle oplossingen vereist, is het cruciaal om een mechanisme te hebben waarmee noodzakelijke updates en workarounds voor slecht functionerende componenten onmiddellijk kunnen worden geïmplementeerd. Hierdoor kan er snel actie worden ondernomen in het geval van onvoorziene omstandigheden, waardoor de downtime tot een minimum wordt beperkt en de stabiliteit en functionaliteit van het systeem als geheel gewaarborgd blijft.

Het op maat maken van gebruikerservaringen door bepaalde functionaliteiten te activeren of deactiveren op basis van individuele kenmerken, voorkeuren en abonnementen is een cruciaal aspect van het leveren van services op maat.

Aan de slag met Flagsmith

Flagsmith biedt een uitgebreide aanpak voor het implementeren van feature flags, die zowel een open-source optie als een cloud-gebaseerd platform omvat. In dit voorbeeld gebruiken we hun cloud-gebaseerde service om feature flags naadloos op te nemen in een React-applicatie.

Om te beginnen:

⭐ Ga naar Flagsmith’s cloudservice , meld je aan voor een account en log in op de overzichtspagina van je account.

⭐ Klik op de overzichtspagina op de knop Project maken om een nieuw Flagsmith project op te zetten. Flagsmith zal automatisch zowel de ontwikkel- als de productieomgeving aanmaken op de pagina Projectinstellingen. Voor deze tutorial gebruik je de ontwikkelomgeving om de feature flags te implementeren.

⭐ Zorg ervoor dat je in de ontwikkelomgeving bent, selecteer het tabblad Functies en klik op de knop Maak je eerste functie.

⭐ Geef een ID op voor de functie die je wilt markeren, bij voorkeur een string, klik op de knop om de optie Standaard functie inschakelen te selecteren en klik op Maak functie . In dit geval implementeert u een kenmerkvlag op de waardering van verschillende E-commerce producten.

⭐ Je kunt de nieuw aangemaakte functie bekijken en beheren door naar de overzichtspagina met functie-instellingen te gaan.

Om het instellen van uw omgeving te voltooien, moet u de sleutel verkrijgen die is gekoppeld aan de client-side context.

De clientside-omgevingssleutel genereren

De clientside-omgevingssleutel verkrijgen:

⭐ Klik op het tabblad Instellingen onder de ontwikkelomgeving.

⭐ Klik op de instellingenpagina van de ontwikkelomgeving op het tabblad Sleutels.

⭐Kopieer de meegeleverde clientsleutel.

De broncode voor dit project wordt gehost op het GitHub platform in een speciale repository.

Maak het React-project

Beslis eerst of je het eerste wilt gebruiken door het bovengenoemde commando uit te voeren, of kies voor het tweede door het te implementeren als de installatiemethode van je voorkeur. Het is belangrijk om te weten dat de instructies in deze handleiding uitgaan van het gebruik van Vite om de React-applicatie op te zetten.

Om verder te gaan, neem je de Software Development Kit (SDK) van Flagsmith op in je project. Deze SDK ondersteunt een breed scala aan

 npm install flagsmith 

Het opnemen van het .env bestand in de primaire directory van het opslaggebied van het project is een essentiële stap om ervoor te zorgen dat de omgevingsvariabelen aan de client-zijde goed toegankelijk zijn. Om deze configuratie op te zetten, moet je een nieuw .env document genereren en dit vooraan in de bestaande bestandshiërarchie plaatsen.Specifiek moet de omgevingsvariabele aan de clientzijde worden ingevoerd zoals hieronder getoond voor een succesvolle integratie met het systeem:

 VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>" 

Voeg een Productlijst Functioneel Component toe

Om de mogelijkheden van Flagsmith’s functie vlaggen te testen, bouw je een eenvoudig component dat een lijst van e-commerce producten weergeeft vanuit een DummyJSON API.

Elk item in de catalogus heeft verschillende kenmerken, waaronder titel, kosten, productbeschrijving en een geaggregeerde productevaluatie. Ons doel is om de functie toggle te gebruiken voor het regelen van de productbeoordeling. Na het inbouwen van deze functionaliteit zullen gebruikers de mogelijkheid hebben om de functie te manipuleren via een knop op de service-interface op afstand van Flagsmith.

Maak in de brondirectory een nieuwe subdirectory genaamd “components” en nest deze in de bestaande hiërarchie. Plaats vervolgens een nieuw bestand met de naam “Products.jsx” in deze componentenmap en kopieer het volgende codeblok om de inhoud ervan te vullen.

Maak eerst de volgende imports:

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

Integreer een functioneel onderdeel door de initiële statusparameters in te stellen, de vereiste JavaScript-componenten te implementeren en de relevante HTML-elementen in de juiste context op te nemen.

 export default function Products() {
  const [products, setProducts] = useState([]);
  const [showProductRating, setShowProductRating] = useState(false);
  const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
 
  return (
    <>
       <div className="product-catalogue">
        <div className="product-list">
        </div>
      </div>
    </>
  );
} 

javascriptimport { useState } from ‘react’;import axios from ‘axios’;function DummyAPI() {const [products, setProducts] = useState([]);useEffect() => {async functie fetchData() {try {const response = await axios.get(’ https://dummy-api.example.com/api/products’);setProducts(response.data);} catch (error) {console.log(error);}}fetchData();}, []);return ( Dummy Products {products.map((product)

Neem de volgende code op in de functionele component:

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

Bij de eerste rendering wordt de functie fetchProducts uitgevoerd, waarmee productinformatie wordt opgehaald en de huidige status van de variabele products dienovereenkomstig wordt bijgewerkt.

Uiteindelijk kan een array van items worden doorlopen en weergegeven in een webbrowser.

Neem de volgende code op in een nieuw div-element onder de klasseverdeling “product-list”:

 { products.slice(0,6).map((product) => (
    <div className="product" key={product.id}>
        <h2>{product.title}</h2>
         <p>Price: ${product.price}</p>
        <p>{product.description}</p>

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

In het licht hiervan kan moeiteloos een catalogus van gespecificeerde producten worden opgehaald uit de JSON API.

SDK van Flagsmith integreren

Om de Software Development Kit van Flagsmith in een React-applicatie op te nemen en in te stellen met behulp van de useEffect hook, moet je het gegeven codefragment onmiddellijk na het aanroepen van de fetchProducts functie binnen die hook plaatsen.

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

Door deze functionaliteit te integreren, kunnen functievlaggen worden geïmplementeerd in een gecachete en geanalyseerde omgeving binnen je React-applicatie.

De functionaliteit maakt gebruik van een callback-mechanisme om de presentatie van productbeoordelingsinformatie adaptief te regelen op basis van de huidige status van de kenmerkvlag product_rating. Deze kan worden beschouwd als actief (ingeschakeld) wanneer deze wordt geactiveerd binnen de clouddiensten, of inactief (uitgeschakeld) wanneer deze wordt gedeactiveerd binnen dezelfde context.

Wijzig ten slotte de tag h3 van de productbeoordeling door een verklaring op te nemen in het codeblok return , en wel als volgt:

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

De functionaliteit van deze update maakt de weergave van de productbeoordeling mogelijk wanneer deze geactiveerd is, zoals blijkt uit de associatie met de variabele showProductRating, die wordt bijgewerkt om aan te geven dat de productbeoordeling samen met de andere relevante attributen moet worden weergegeven. Omgekeerd keert de variabele showProductRating bij deactivering terug naar zijn oorspronkelijke staat, waardoor de productbeoordeling niet wordt weergegeven in de interface.

Wijzig ten slotte het bestand App.jsx door een importverklaring op te nemen voor de component Product.

 import "./App.css";
import Products from "./components/Products";

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <h1>Product Catalogue</h1>
        <Products />
      </div>
    </div>
  );
}

export default App; 

Voer uiteindelijk je programma uit en navigeer naar een webbrowser om de functionaliteit van de software te bekijken.

 npm run dev 

Om de functionaliteit van dit attribuut te controleren, navigeer je naar de pagina Instellingen Functies in Flagsmith en deactiveer je de optie Beoordelingen van producten.

Om de recente wijzigingen in de applicatie te zien, kunt u de webbrowser vernieuwen door het lokaal uitgevoerde programma opnieuw te laden. Tegelijkertijd zullen alle bestaande beoordelingen in het systeem verdwijnen. Als u echter vervolgens de bovengenoemde functionaliteit opnieuw activeert en nogmaals op de knop verversen drukt, zouden de ontbrekende beoordelingen weer moeten verschijnen.

Feature Releases zouden geen gedoe meer moeten zijn

Feature flags zijn een onmisbaar instrument geworden om het uitrollen van features in softwareapplicaties te regelen.De integratie van deze tools is zowel gestroomlijnd als onopvallend, waardoor potentiële gevaren die kunnen ontstaan bij het implementeren van update rollouts effectief worden beperkt.

De functie biedt een gebruiksvriendelijke interface waarmee zowel technische als niet-technische personen instellingen en functies gemakkelijk kunnen wijzigen, zodat uitgebreide kennis van codering niet nodig is.