Functievlaggen zijn een essentieel hulpmiddel dat helpt bij het stroomlijnen van het bouwen en uitbrengen van software-updates. U kunt ze gebruiken om een ​​specifieke groep gebruikers of uw gehele gebruikersbestand te targeten.

In wezen bieden ze u de mogelijkheid om aanzienlijke wijzigingen door te voeren, zonder de workflow van uw productietoepassing te verstoren, in realtime en op aanvraag. U kunt dit doen door gebruik te maken van functieschakelaars als alternatief voor uitgebreide codewijzigingen en -implementaties.

Functievlaggen: implementatie en voordelen uitgelegd

Softwareontwikkeling is zonder twijfel een continu en iteratief proces. Tenzij iedereen een project verlaat, zal iemand het blijven ontwikkelen en nieuwe veranderingen introduceren.

Idealiter kunt u met CI/CD-pijplijnen consistente codewijzigingen naar de productie pushen. Niettemin gaan deze processen gepaard met aanzienlijke inzetinspanningen.

Met behulp van functievlaggen kunt u echter een update vrijgeven voor een deel of al uw gebruikersbestand door eenvoudigweg een instelling te wijzigen.

Er zijn verschillende situaties waarin functievlaggen van toepassing zijn, waaronder:

• Wanneer u een nieuw idee wilt testen voordat u het voor alle gebruikers uitrolt. Door dit te doen, kunt u eenvoudig en snel feedback verzamelen over de prestaties en de impact ervan op de gebruiker.
• Wanneer u essentiële noodupdates en hotfixes wilt uitrollen. Als zich een ramp voordoet, kunt u problematische functies snel uitschakelen en oplossingen uitrollen zonder dat u de hele applicatie opnieuw hoeft te implementeren.
• Bij het bieden van gepersonaliseerde gebruikerservaringen door specifieke functies in of uit te schakelen op basis van gebruikerskenmerken, voorkeuren of abonnementspakketten.

Aan de slag met Flagsmith

Flagsmith biedt een geweldige oplossing voor functievlaggen, waaronder een open-sourceversie en een cloudservice. Deze gids gebruikt de cloudoplossing om functievlaggen in een React-applicatie te integreren.

Starten:

1. Ga naar De cloudservice van Flagsmith, meld u aan voor een account en log in op uw account Overzicht bladzijde.
2. Op de overzichtspagina klikt u op de Project maken om een ​​nieuw Flagsmith-project op te zetten. Flagsmith creëert automatisch zowel de ontwikkelings- als de productieomgeving op uw computer Projectinstellingen bladzijde. Voor deze zelfstudie gebruikt u de ontwikkelomgeving om de functievlaggen te implementeren.
3. Zorg ervoor dat je in de Ontwikkeling omgeving, selecteer de Functies tabblad en klik op de Creëer uw eerste functie knop.
4. Geef een ID kaart voor de functie die u wilt markeren, bij voorkeur een string, klikt u op de schakelknop Standaard inschakelen feature-optie en druk op Functie maken. In dit geval implementeert u een functievlag voor de beoordeling van verschillende e-commerceproducten.
5. U kunt de nieuw gemaakte functie bekijken en beheren door naar de overzichtspagina van de functie-instellingen te navigeren.

Om de installatie te voltooien, hebt u nu de omgevingssleutel aan de clientzijde nodig.

Genereer de omgevingssleutel aan de clientzijde

De omgevingssleutel aan de clientzijde verkrijgen:

1. Klik op de Instellingen tabblad onder de Ontwikkeling omgeving.
2. Klik op de pagina met instellingen voor de ontwikkelomgeving op de Sleutels tabblad.
3. Kopieer de opgegeven omgevingssleutel aan de clientzijde.

U kunt de code van dit project vinden in zijn GitHub opslagplaats.

Creëer het React-project

Nou, ga je gang, en steiger een React-project met behulp van de opdracht create-react-app. Als alternatief kan dat ook gebruik Vite om een ​​eenvoudig React-project op te zetten. Houd er rekening mee dat deze handleiding Vite gebruikt om de React-applicatie te maken.

Installeer vervolgens de SDK van Flagsmith in uw project. Deze SDK is compatibel met verschillende JavaScript-frameworks.

npm install flagsmith

Maak nu een .env bestand in de hoofdmap van uw projectmap en voeg de omgevingssleutel aan de clientzijde als volgt toe:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

Voeg een functionele component van de productlijst toe

Om de feature flags-mogelijkheden van Flagsmith te testen, bouwt u een eenvoudig onderdeel dat een lijst met e-commerceproducten weergeeft op basis van een DummyJSON API.

Elk product in de lijst wordt geleverd met verschillende kenmerken, zoals titel, prijs, productbeschrijving en een algemene productbeoordeling. Het is de bedoeling om de functievlag toe te passen op de productbeoordelingswaarde. Zodra u de vlag heeft geïmplementeerd, kunt u de functie bedienen door op een knop in de Flagsmith-cloudservice te drukken.

In de src map, maak een nieuwe map en geef deze een naam, componenten. Voeg in deze map een nieuw Producten.jsx en voeg de volgende code toe.

Voer eerst de volgende invoer uit:

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

Maak vervolgens de functionele component, definieer de initiële statusvariabelen en voeg de JSX-elementen toe.

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>

 );
}

Definieer nu a gebruikEffect hook die HTTP-verzoeken zal doen aan de dummy JSON API om de productgegevens op te halen. Jij kan gebruik de Fetch API of Axios om de API te gebruiken.

Voeg binnen de functionele component de onderstaande code toe:

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

De producten ophalen De functie wordt uitgevoerd zodra het onderdeel is geactiveerd. Het haalt de productgegevens op en werkt vervolgens de status van het product bij producten variabel.

Ten slotte kunt u de reeks producten in kaart brengen en deze in de browser weergeven.

Recht onder de productlijst klasse div, neem de volgende code op:

{ 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>
))}

Daarmee kunt u gemakkelijk een lijst met productitems ophalen en weergeven vanuit de dummy JSON API.

Integreer de SDK van Flagsmith

Om de SDK van Flagsmith in de React-applicatie te integreren en te initialiseren, direct onder de producten ophalen functieaanroep binnen de gebruikEffect hook, voeg de onderstaande code toe.

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

Door deze functie op te nemen, schakelt u functievlagbeheer in met caching en analyse in de React-app.

De functie maakt gebruik van een callback om dynamisch te beheren hoe productbeoordelingen worden weergegeven op basis van de status van het product product_beoordeling kenmerk vlag. Dit moet waar (ingeschakeld) zijn als het is ingeschakeld in de cloudservice, of onwaar (uitgeschakeld) als het is uitgeschakeld.

Werk ten slotte de productbeoordeling h3 onderdeel in de opbrengst codeblok met deze instructie.

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

Met deze update wordt, zodra u de functie inschakelt, de toonProductRating variabel naar WAAR. Als gevolg hiervan verschijnt de productbeoordeling naast de andere kenmerken. Als u de functie echter uitschakelt, wordt de toonProductRating variabel zal zijn valsen de productbeoordeling verschijnt niet.

Update ten slotte de App.jsx bestand om het productonderdeel te importeren.

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

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

 </div>
 </div>
 );
}

exportdefault App;

Voer ten slotte uw applicatie uit en ga naar uw browser om de applicatie te bekijken.

npm run dev

Om deze functie te testen, gaat u terug naar uw Pagina Functie-instellingen op Flagsmith en schakel de productbeoordelingsfunctie uit.

Omdat de applicatie op localhost draait, moet u deze opnieuw in de browser laden om de bijgewerkte wijzigingen te bekijken. De productbeoordeling die aanvankelijk aanwezig was, verdwijnt. Als u de functie weer inschakelt en de pagina opnieuw laadt, verschijnt deze opnieuw.

Functiereleases zouden geen gedoe meer moeten zijn

Functievlaggen zijn een hulpmiddel geworden voor het beheren van functiereleases in applicaties. Ze kunnen naadloos worden geïntegreerd in de ontwikkelingsworkflow, waardoor de risico's die gepaard gaan met het uitrollen van nieuwe updates worden geminimaliseerd.

Ze zijn ook krachtig en geven iedereen (zelfs eindgebruikers) de mogelijkheid om functies in of uit te schakelen zonder in complexe code te hoeven duiken.