Cum folosesc feature flags?

Limbaje de Programare Frontend
,
1

Salut, incerc sa-mi dau seama care e treaba cu feature flags si cum sa le implementez intr-o aplicatie de frontend.

Sa zice ca am variabla X iar cand X e true vreau sa schimb un text de exemplu iar ca default X sa fie false.

Ceea ce nu inteleg este cum setez acel X? Am nevoie de alt serviciu ca sa setez feature flags? (ceea ce nu prea vrea). Deocamdata set X intr-o variabila .env pe care o verific intr-un singur loc si de acolo o import unde este nevoie.

2

Feature flags se pot implementa in mai multe feluri, depinde care e scopul tau, poti merge foarte departe, pana la proprietati ale userului sau clientului (profiling/incremental release), reguli executate pe client (daca e cont mai vechi de N zile si nu a intrat de N zile) sau poti fi foarte basic, pui un flag ca sa stii pe ce environment ruleaza codul.

Poti avea feature flags hardcoded (versiunea - va determina ce flag-uri ai activate), poti avea feature flags din environment variables - incarci un JSON/inlocuiesti niste string-uri dupa ce se face build-ul, poti avea un serviciu - al tau sau hosted care furnizeaza fiecare feature flag (e.g. launch darkly), inclusiv prin websockets in timp real.

In numele pattern-ului e “feature flags”, ceea ce inseamna ca fiecare flag ar trebui sa fie numit dupa un feature specific si sa activeze/dezactiveze/modifice un singur feature.

Local se poate realiza un fisier numit default_features.json/js din care incarci default-urile intr-un serviciu/provider (ma refer la cod) si iti da aceste flag-uri. Nu recomand sa le incarci direct, fa-ti o fatada sau foloseste o librarie, e util sa ai o comanda cu care poti face override din client cand testezi precum window.enableFlag(‘flag’), window.disableFlag(‘flag’), window.getFeatureFlags()… (cel putin in dev)

Daca vrei sa le incarci din env variables s-ar putea sa fie necesar sa faci base64 la fisierul JSON, daca ai putine feature-uri sau vrei doar un environment flag mai merge sa faci search and replace la string-uri/valori direct in cod. (pui un placeholder pentru dev si dupa build faci search and replace pe codul minificat si transpilat)

Daca stii ca n-ai trafic si esti spartan poti servi JSON-ul de feature flags cu orice iti returneaza un JSON (e.g. Google Sheets/Notion.so/Github pages/Gitlab)

Avantajul major al feature flag-urilor e ca elimina necesitatea de release branches, in mod ideal permit sa fii mereu gata de release sau sa refacturezi fara sa afectezi ceva existent.

Dezavantajul major e ca dupa un timp feature flag-urile trebuie scoase, trebuie facut refactoring (munca de estimat si facuta periodic), ai de mock-uit mai mult prin teste.

3 Likes
3

Mersi de raspuns @isti37, eu incerc sa-mi dau seama daca feature flags sunt necesare in cazul meu unde am 6 aplicatii care folosesc acelasi build dar o aplicatie este mai “speciala” si de exemplu font-weight, unele culori si ceva text difera.

4

Daca e posibil incearca sa decuplezi aplicatia care difera semnificativ de celelalte 6 la build, dupa tema ar trebui sa fie unica pe fiecare aplicatie - iti faci un fisier de tema/design tokens diferit per aplicatie (ma gandesc la MUI/Tailwind - nu stiu ce folositi), daca nu exista un motiv bun de a diferi altul decat un designer aiurit/PO mai special incearca sa ridici mai bine problema de a standardiza si aplicatia care acum e mai speciala.

1 Like
5

Da, aia ar fii una dintre optiuni sa decuplez aplicatia aia, ma gandeam sa o transform intr-un monorepo dar nu o sa fie foarte curand asta.

Ceea ceam facut eu este asta, am creat un config unde am un obiect APP_config:

export const APP_CONFIG = {
	Homepage: {
		title: IS_SPECIAL ? "TEXT X" : "TEXT Y",
	},
	WaysToBuy: IS_SPECIAL ? 'TEXT X' : 'TEXT Y',

	HeadingFontWeight: IS_SPECIAL ? '400' : '700',
};

schimbarile nu sunt foarte semnificatie dupa cum se vede in acel obiect, posibil sa mai adaug cateva.
font-weight-ul temei in schimb intr-un custom hook pentru styles (folosim vanilla-extract.style) iar conditia o verific asa

env

VITE_THEME="SPECIAL_APP"

export const IS_SPECIAL = import.meta.env.VITE_THEME === 'SPECIAL_APP';
6

In mod normal ar trebui sa ai un serviciu(microserviciu?) in backend care sa iti returneze acel flag. Ma rog, nu doar acel flag ci toate flags disponibile. Ele se seteaza in baza de date cu ajutorul unui admin ui si astfel nu vei avea nevoie de deploy/release cand se schimba un flag.

Daca nu doriti sa aveti un asemenea serviciu, e ok si sa le ai si hardcoded in frontend, problema insa este ca vei avea nevoie de un alt deploy cand doresti sa schimbi starea flag-ului.

1 Like
7

Un pic mai advanced

1 Like