Buon sviluppo con Feature Flag
Mi chiamo Taiga e sono un Front-End Engineer presso Shippio. Vorrei introdurre "Feature Flag", che abbiamo recentemente introdotto nello sviluppo di Shippio.
Problemi relativi al processo di rilascio
Abbiamo avuto i seguenti problemi con il processo di rilascio.
- Tempo di rilascio limitato. Rilascio a tempo determinato, che ritarda la consegna del valore al cliente.
- È più probabile che si verifichino incidenti perché la quantità di modifiche nel rilascio è maggiore.
- La distribuzione/rollback richiede molto tempo.
- Richiede l'uso di una complessa strategia Git, che utilizza risorse infrastrutturali non necessarie.
Che cos'è il contrassegno di funzionalità?
Feature Flag è un metodo di sviluppo che consente al comportamento del sistema di cambiare dinamicamente senza modificare il codice .
I valori dei flag non devono essere valori on/off booleani (titolo: hogehoge, fugofugo, colore: #xxxxxxx, #yyyyyy, ecc.)
Beneficio
- Tempo di rilascio controllabile.
- Facile e meno tempo per il rollback.
- Versione limitata (test QA, esperimenti con nuove funzionalità).
- Rendere le funzionalità disponibili solo per specifici utenti target.
- Test A/B.
Ci sono vari servizi che forniscono Feature Flag.
Abbiamo scelto LaunchDarkly per la fattibilità di vari metodi di sviluppo, come il targeting degli utenti, le dipendenze con flag e i rilasci programmati.
AvviaDarkly
LaunchDarkly ha la funzionalità più ampia di quelle che abbiamo intervistato. L'interfaccia utente è facile da usare per gli sviluppatori senza confusione e dispone di SDK per lato client e lato server che lo rende molto facile da implementare.
È inoltre possibile creare più ambienti, consentendo di personalizzare le regole dei flag per il team di sviluppo.
Ci sono molti altri aspetti positivi.
- Plugin IDE (IntelliJ, VSCode)
- Integrazione lenta
- Integrazione di DataDog
- La maggior parte degli SDK.
- Buoni documenti
Un breve tutorial su come installare LaunchDarkly.
1. Prepara una bandiera
Crea un nuovo flag sul servizio LaunchDarkly.
2. Impostazione di LaunchDarkly SDK
In genere, utilizzi LaunchDarkly in tutta l'app, quindi avvolgi il componente root di React nel provider dell'SDK. Per eseguire il rendering dell'app solo dopo il completamento dell'inizializzazione dell'SDK, usa await con asyncWithLDProvider.
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
const renderApp = async () => {
const LDProvider = await asyncWithLDProvider({
clientSideID: process.env.REACT_APP_LAUNCHDARKLY_CLIENT_ID,
});
ReactDOM.render(
<React.StrictMode>
<LDProvider>
<App />
</LDProvider>
</React.StrictMode>,
document.getElementById('root'),
);
};
renderApp();
Quindi, inserisci la logica del flag per stabilire se il componente deve essere visualizzato o meno.
const { newFeatureA } = useFlags();
return (
<>
{ newFeatureA && <newFeatureA />
</>
)
Targeting
Se è necessario separare le funzioni in base alle informazioni dell'utente, è necessario identificare l'utente in LaunchDarkly.
L'SDK di React ha una funzione chiamata `identify()`, che può essere utilizzata per applicare le regole Flag in base all'utente specifico.
import { useLDClient } from 'launchdarkly-react-client-sdk';
let ldClient = useLDClient();
const ldUser = {
kind: 'user',
anonymous: false,
key: currentUser.id,
companyName,
userType,
};
ldClient.identify(ldUser);
Users (dummy data)
Finalmente
Sebbene l'abbiamo appena implementato e non abbiamo ancora visto un enorme vantaggio, sento che abbiamo più opzioni quando si rilascia il codice. Non vediamo l'ora di fornire più rapidamente valore ai nostri clienti con questo nuovo sistema. Grazie!
— — — — —
Se questo articolo ha suscitato il tuo interesse e sei interessato a lavorare in Shippio, stiamo assumendo!
Dai un'occhiata ai link qui sotto.
▼ Opportunità di carriera
https://recruit.shippio.io/en
▼Contatta
LinkedIn:https://www.linkedin.com/company/shippioinc/
Indirizzo e-mail del team delle risorse umane di Shippio: [email protected]
- — — — — -

![Che cos'è un elenco collegato, comunque? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)



































