Comment utiliser les indicateurs de fonctionnalité en intégration continue

Beaucoup de choses ont été écrites sur les avantages de l'obtention d'une véritable intégration continue (IC) dans les systèmes de production. Ce tutoriel démontrera un flux de travail simple qui atteint CI. Nous utiliserons des drapeaux de fonctionnalité et de la configuration distante pour éviter la nécessité de branches de fonctionnalités dans GIT, ainsi que tout type d'environnements de test ou de mise en scène. Les deux principaux outils que nous utiliserons pour démontrer cette approche sont Netlify et Bullet Train.

Les plats clés

• Les indicateurs de fonction permettent aux développeurs de gérer le déploiement des fonctionnalités sans modifier la base de code principale, permettant des tests plus sûrs et une résolution de problèmes plus rapide dans les environnements de production.
• L'intégration continue (CI) bénéficie des indicateurs de fonctionnalité car ils facilitent la libération immédiate et le test des modifications de code, l'amélioration de la vitesse de développement et la détection des problèmes.
• La mise en œuvre des drapeaux des fonctionnalités dans un projet peut être réalisée à l'aide d'outils tels que Bullet Train, qui offre une configuration et une gestion faciles des drapeaux pour contrôler la disponibilité des fonctionnalités dynamiquement.
• La configuration distante, une variante des indicateurs de fonctionnalité, permet de régler des variables ou des fonctionnalités spécifiques dans l'application à distance sans avoir besoin de modifications de code direct.
• Bien que les indicateurs de fonctionnalité offrent des avantages significatifs en IC en permettant des stratégies de tests et de déploiement plus flexibles, ils nécessitent une gestion minutieuse pour éviter une complexité de code accrue et des erreurs de configuration potentielles.

ce que nous entendons par CI et les drapeaux de traits

L'intégration continue est une méthode de développement dans laquelle les développeurs sont capables de libérer constamment leur code. Les développeurs poussent leurs nouvelles fonctionnalités au fur et à mesure qu'ils terminent le développement, à quel point ils sont automatiquement testés et libérés immédiatement dans un environnement en direct.

Les indicateurs de fonctionnalité fournissent un moyen de déclencher ces nouvelles fonctionnalités à partir d'un panneau de colis distant vous permettant de les désactiver et de les éteindre sans apporter de modifications à votre code. Cela vous permet de développer une fonctionnalité et de le libérer en production sans rien changer du point de vue d'un utilisateur.

Pourquoi CI est si puissant

Intégration du code dans des morceaux plus petits et, de manière plus fréquente, permet aux équipes de développement de prendre des problèmes beaucoup plus rapidement, ainsi que d'obtenir de nouvelles fonctionnalités aux utilisateurs le plus rapidement possible. CI supprime également la nécessité de toute grande libération où une équipe d'ingénieurs doit rester éveillée jusqu'aux petites heures de la nuit pour minimiser les perturbations de leurs utilisateurs.

comment les drapeaux de fonction aident l'intégration continue

Les indicateurs de fonctionnalité fournissent une couche de confiance supplémentaire lors de la publication de nouvelles fonctionnalités. En emballage de nouvelles fonctionnalités dans un drapeau de fonctionnalité, les développeurs et l'équipe de produit peuvent activer rapidement ou désactiver leurs fonctionnalités selon les besoins. Disons que nous introduisons une nouvelle fonctionnalité en production, mais nous pouvons immédiatement voir qu'il y a un bug dans le nouveau code, en raison de quelque chose de spécifique dans l'environnement de production qui n'était pas évident dans les tests (avouons-le, c'est arrivé à tout le monde… plus que que une fois).

Auparavant, cela aurait signifié une procédure de recul (probablement) longue et (définitivement) douloureuse et une reprogrammation de la version pour une autre heure impie un autre jour où le bug a été corrigé. Au lieu de cela, avec une bascule d'un commutateur, la fonctionnalité peut être désactivée pour tout ou un sous-ensemble d'utilisateurs et la douleur a disparu. Une fois le bogue identifié et corrigé, une version de patch peut être déployée et la fonction peut être réactivée.

Aperçu de notre échantillon de projet

Pour démontrer l'intégration des drapeaux de fonctionnalité et une configuration distante, nous allons baser notre base de code initiale sur le tutoriel JS React de facto d'un jeu TIC-TAC-TOE. Ceci est un excellent tutoriel pour apprendre les bases de React, alors assurez-vous de le vérifier si vous ne l'avez pas déjà fait.

Ne vous inquiétez pas si vous ne connaissez pas bien React ou JavaScript. Les concepts que nous allons passer sont tout au sujet du processus et de l'outillage, et non du code.

Plutôt que de répéter le tutoriel dès le début, nous allons commencer à un point où nous avons un jeu Tic-Tac-Toe de base opérationnel.

À ce stade, nous utiliserons les indicateurs de fonctionnalité et la configuration distante pour configurer, pousser et déployer en continu de nouvelles fonctionnalités. Pour porter ce concept à un extrême, nous allons continuellement pousser à maîtriser; Aucune autre branche ne sera utilisée. Nous présenterons un bogue (intentionnellement bien sûr!) Et pousserons le correctif à Master, pour démontrer comment traiter ce scénario ne nécessite pas de randonnée complète ou de branchement supplémentaire.

Si vous souhaitez suivre le code d'écriture pendant ce tutoriel, vous pouvez débarquer le référentiel ici.

Atteindre CI

La méthode la plus courante pour automatiser l'intégration continue est d'avoir le déclencheur du processus de construction lorsque vous poussez les modifications dans votre référentiel GIT. Différents outils de construction y parviennent de différentes manières.

Nous allons utiliser Netlify pour notre projet. Netlify vous permet de connecter un référentiel GIT et de déployer automatiquement des builds chaque fois que vous poussez à une branche.

Pour utiliser Netlify, inscrivez-vous simplement à un compte gratuit et sélectionnez l'option «Nouveau site parmi Git» en haut à droite du tableau de bord. Une fois que vous avez connecté votre compte GitHub (ou autrement, si vous souhaitez utiliser Bitbucket ou GitLab), vous devez alors être présenté avec les options ci-dessous.

À l'étape suivante, configurez Netlify pour exécuter l'application comme suit.

Netlify ira désormais de l'avant et créera votre application pour vous. Cela prendra quelques minutes, mais une fois que cela aura fait, vous devriez voir quelque chose comme les suivants:

La navigation sur cette URL devrait montrer votre jeu Tic Tac Toe dans toute sa gloire.

Configuration des indicateurs de fonctionnalité pour notre projet

Nous allons utiliser des drapeaux de fonctionnalité pour contrôler la déclaration d'un gagnant dans le jeu TIC-TAC-TOE. Pour créer et gérer nos drapeaux de fonctionnalité, nous allons utiliser un train à grande vitesse car il est actuellement gratuit, mais il existe de nombreux autres produits de drapeau de fonctionnalité. Nous vous laisserons choisir celui que vous pensez être juste.

Pour continuer avec nous, allez-y et créez un compte gratuit sur Bullet Train. Cliquez sur le bouton «Créer un projet» et créez votre projet. Nous avons nommé notre tutoriel FF.

Ensuite, nous devons créer une nouvelle fonctionnalité pour déclarer un gagnant. Cliquez sur le bouton «Créez votre première fonctionnalité» en bas de l'écran suivant pour afficher le formulaire suivant et ajouter les détails.

Notez que nous avons maintenu la fonctionnalité désactivée pour commencer.

Prenez note des deux extraits de code disponibles sous la fonctionnalité, ce qui nous aidera à l'étape suivante.

Implémentez l'indicateur de fonctionnalité

Tout d'abord, faisons fonctionner ce projet dans notre environnement de développement. Dans la ligne de commande, accédez au dossier du projet et exécutez la commande NPM I pour installer les dépendances nécessaires.

Exécutez NPM Run Dev et dirigez-vous vers http: // localhost: 8080 dans votre navigateur. Vous devriez voir le même jeu tic-tac-toe que vous avez vu sur l'URL Netlify.

Nous allons maintenant implémenter notre nouvel indicateur de fonctionnalité dans le code existant. Commençons par installer le client Bullet Train pour JavaScript, en ouvrant une autre ligne de commande et en exécutant ce qui suit dans le répertoire du projet:

npm I Bullet-Train-Client - Save

Ouvrez le projet dans votre éditeur préféré et modifiez ./web/app.js.

Trouvez la fonction Calculatewinner (carrés). Cette fonction détermine s'il y a eu un gagnant ou non, selon qu'il peut trouver ou non une ligne de même forme. Nous allons faire en sorte que cette fonction renvoie NULL en fonction de la valeur de notre indicateur de fonctionnalité afin que nous puissions tester le remplissage de la carte sans qu'il déclare un gagnant.

en haut de l'application.js, ajoutez la ligne suivante:

<span>var declareWinner = true;
</span>

Maintenant, initialisons notre client de train à grande vitesse que nous avons installé plus tôt. Copiez tout le code Exemple 2 de la page des fonctionnalités de l'interface du train à grande vitesse et collez-le juste sous la ligne que vous venez d'ajouter.

L'ID de l'environnement dans votre extrait de code sera l'ID d'environnement correct associé à l'environnement de développement dans votre projet de train à grande vitesse. Vous pouvez vérifier cela en accélérant la page «Paramètres de l'environnement» si vous le souhaitez.

Nous devons maintenant modifier la fonction onChange () dans la fonction bullettrain.init () dans le code que nous venons de collé pour répondre à nos besoins. Remplacez tout le code là-dedans par une seule ligne:

<span>var declareWinner = true;
</span>

Vous devriez maintenant l'avoir en haut de votre app.js

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

Faites défiler vers le bas vers la fonction Calculatewinner (carrés) et en haut, juste au-dessus de la déclaration des lignes constante, ajoutons la ligne:

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

Et c'est tout! Notre indicateur de fonctionnalité déterminera désormais si le gagnant est calculé ou non sur chaque rendu du jeu. Actualisez votre navigateur et jouez au jeu. Vous ne pouvez plus gagner et à la place, l'ensemble de la carte peut désormais être rempli de XS et OS.

Retournez à l'administrateur du train à grande vitesse et basculez la fonction à l'aide de l'interrupteur à droite.

Rafraîchissez votre navigateur et le jeu redevient gagnable. Consultez le code pour la fin de cette partie ici.

engager et pousser votre code (oui, tout sur maître) et Netlify déploiera automatiquement votre code. Parcourez à nouveau votre URL Netlify assignée et basculez le drapeau de fonction pour le voir fonctionner dans un environnement de production. Sweet!

travailler sur un bug

Nous allons maintenant introduire délibérément un bug dans le jeu tic-tac-toe et montrer comment les drapeaux de fonction peuvent être utilisés pour supprimer une fonctionnalité qui cause des problèmes.

La fonctionnalité que nous allons ajouter est la sélection de qui va en premier au début du jeu. Pour cela, nous ajouterons quelques boutons qui n'apparaissent qu'au début du jeu et empêcherons les clics sur la carte d'ajouter une forme.

Tout d'abord, configurons notre indicateur de fonctionnalité pour envelopper la nouvelle fonctionnalité. Dans votre projet Bullet Train, créez une nouvelle fonctionnalité appelée Select-Who-Whoes-First comme suit. Laissez-le désactivé pour commencer.

Maintenant, ajoutons notre nouvelle fonctionnalité. Dans la fonction Render (), nous allons rendre les boutons, au lieu du statut, si le jeu n'a pas encore commencé. En haut du retour de la fonction Render (), remplacez la ligne:

<span>if (!declareWinner) return null;
</span>

… avec le code suivant:

<span><div className="status">{status}</div>
</span>

Maintenant, nous voulons écrire le code pour contrôler notre nouvelle fonctionnalité avec l'indicateur de fonctionnalité que nous avons créé. Comme précédemment, cela doit aller dans la fonction bullettrain.init ({...}).

Tout d'abord, ajoutons le composant de la fonction de cycle de vie ComponentDidMount () au composant de la carte, puis déplacons la fonction entière Bullettrain.init ({...}) à l'intérieur, afin que nous puissions mettre à jour l'état du composant après l'indicateur est récupéré:

<span>var declareWinner = true;
</span>

Si nous quittons Bullettrain.Init ({...}) en dehors du composant, nous ne pourrions pas appeler ceci.setState () et que le composant se rende à partir des modifications de nos drapeaux.

Ajoutons maintenant le code pour contrôler notre nouvelle fonctionnalité. Nous voulons que l'application se comporte comme elle l'a fait avant d'ajouter cette fonctionnalité si l'indicateur est désactivé. Pour ce faire, définissons la valeur de l'état sélectionnée sur true si l'indicateur est désactivé. Ajoutez la ligne suivante dans la méthode Bullettrain.init ({...}) sous la ligne Declarewinner.

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

Allons-y et poussons cela (encore une fois, directement dans le maître). Une fois construit, dirigez-vous vers votre URL Netlify. Vous devriez voir que rien n'a changé - c'est parce que la fonctionnalité est toujours désactivée dans notre projet Bullet Train.

Rendez-vous dans Bullet Train et activez la fonctionnalité.

brillant! Maintenant, nous pouvons le voir fonctionner, mais oh, il y a un bug! Il est possible de commencer le jeu sans sélectionner qui va en premier. Si vous jouez au jeu comme celui-ci, vous pouvez voir que le statut n'est jamais défini pour afficher le gagnant. Ce n'est pas vrai!

Retournez dans Bullet Train et désactivez la fonctionnalité jusqu'à ce que nous puissions déterminer ce qui ne va pas. C'est là que les fonctionnalités supplémentaires de Bullet Train, telles que les environnements et les utilisateurs, sont utiles. Nous n'installerons aucun de ceux-ci dans ce tutoriel, mais consulter les documents pour en savoir plus sur l'utilisation de plusieurs environnements ou le contrôle des fonctionnalités sur une base par utilisateur.

Retour à notre bug: il y a une ligne de plus que nous devions ajouter au sommet de HandleClick () pour empêcher les joueurs de commencer jusqu'à ce que le premier joueur ait été sélectionné. Ajoutez ce qui suit en haut de la fonction handleclick ().

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

Ratisez la fonctionnalité à nouveau dans Bullet Train et testez cela dans votre environnement local et vous devriez voir que nous empêchons maintenant le jeu de commencer sans sélectionner qui va en premier. Excellent! Engagez-le à nouveau dans Master et poussez-le directement au déploiement.

Rendez-vous sur votre URL Netlify et vous devriez voir la nouvelle fonctionnalité fixe et fonctionne correctement.

Vous pouvez voir le code final à la fin de cette section ici.

Configation distante

Nous allons maintenant jeter un œil à une légère variation des indicateurs de fonction, appelée configuration distante. La configuration à distance vous permet de contrôler plus que si une fonctionnalité est activée ou désactivée - il vous permet de modifier une valeur donnée à distance sans modifier votre code. Cela est utile dans de nombreux endroits différents, par exemple, si vous souhaitez pouvoir configurer un aspect du style.

Dans notre tutoriel, nous l'utiliserons pour modifier les formes utilisées par chaque joueur de notre jeu. Créons deux valeurs de configuration distantes pour les formes à utiliser sur la carte. Dans votre projet Bullet Train, cliquez sur le bouton «Créer la fonctionnalité», mais cette fois, sélectionnez l'onglet «Configuration distante» au lieu de «Fonctionnalité Flag». Remplissez les données selon les ci-dessous.

Tout fait! Revenons maintenant au code. Dans la fonction OnChange () de notre client à grande vitesse, nous devons récupérer ces valeurs et les définir sur l'état du composant. Changeons notre appel this.setstate () à:

<span>var declareWinner = true;
</span>

Nous avons maintenant les deux formes et pouvons remplacer toutes les utilisations statiques à travers App.js de «X» et «O» par les valeurs d'état à la place. Il devrait y avoir 3 instances de chacun: 1 par forme dans handleclick () et 2 par forme dans rendu () (un est dans l'appel à retourner). Voici le code mis à jour pour la référence dans handleclick ():

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

Notez que pour les instances de l'appel de retour dans Render (), vous devrez envelopper le javascript en orthèses bouclées comme ceci:

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

Engagez cela dans Master et poussez à votre référentiel GIT pour voir les modifications de votre URL Netlify. Si vous l'avez fait correctement, le jeu devrait jouer comme auparavant avec des formes «X» et «O». Allez-y et modifiez les formes de l'administrateur en différentes lettres et actualisez la page. Si tout va bien, vous jouerez maintenant avec différentes formes.

Il y a beaucoup plus que vous pouvez réaliser avec une configuration distante, comme contrôler le style de l'ensemble du jeu ou dire les dimensions de la carte. Nous avons ajouté encore plus de valeurs de configuration à distance, y compris la couleur de forme et la taille carrée. Vous pouvez voir le code fini du jeu ici.

d'autres choses à penser

Les drapeaux de caractéristiques ne doivent cependant pas être considérés comme une balle dorée, et ils viennent avec certaines mises en garde.

Par exemple, si vous utilisez un framework qui gère le schéma de la base de données pour vous, tels que Django ou Rails, vous devrez être prudent lors de la mise en œuvre de drapeaux de fonctionnalité dans vos modèles. L'utilisation de drapeaux de fonctionnalité dans vos modèles peut entraîner des décalages de schéma DB, ce qui peut faire baisser des parties de votre application.

De même, si vous interagissez avec une API tiers qui a certaines exigences pour ses consommateurs, l'utilisation de drapeaux de fonctionnalité pour contrôler les aspects de cela pourrait entraîner des erreurs inattendues dans votre application. En outre, vice versa, si votre application fournit une API à consommer, en utilisant des indicateurs de fonctionnalité pour contrôler les modèles de données de l'API, il n'est pas conseillé car il peut causer des problèmes en baisse pour ces consommateurs.

Enfin, nous avons utilisé un train à grande vitesse dans le tutoriel ci-dessus car il est gratuit pour le moment et également open source. Il existe un certain nombre d'autres produits qui font la même chose ou avec des variantes légèrement différentes - vous devriez vérifier tout cela pour déterminer ce qui vous convient le mieux. Par exemple, lancez Darkly et Aiffiche HQ.

Questions fréquemment posées (FAQ) sur l'utilisation des drapeaux de fonctionnalité dans l'intégration continue

Quels sont les avantages de l'utilisation des drapeaux de fonction dans l'intégration continue?

Les drapeaux de fonctionnalité, également appelés basculements de fonctionnalités, offrent un moyen de masquer, d'activer ou de désactiver certaines fonctionnalités pendant l'exécution. Dans l'intégration continue, ils offrent plusieurs avantages. Premièrement, ils permettent aux développeurs de travailler sur une fonctionnalité sans affecter la base de code principale. Cela signifie que même si la fonctionnalité n'est pas entièrement développée ou testée, l'application globale reste stable. Deuxièmement, ils permettent des tests faciles des fonctionnalités dans l'environnement de production. Cela peut être particulièrement utile pour les tests A / B ou les versions canaries. Enfin, ils fournissent un moyen de désactiver rapidement une fonctionnalité en cas de problème, sans avoir à faire reculer l'ensemble du déploiement.

Comment puis-je implémenter des indicateurs de fonction Les drapeaux de fonction dans une application React impliquent quelques étapes. Premièrement, vous devez définir vos drapeaux de fonctionnalité. Cela peut être fait dans un fichier de configuration ou récupéré à partir d'un serveur distant. Deuxièmement, vous devez créer un contexte pour fournir ces indicateurs de fonctionnalité à vos composants. Cela peut être fait à l'aide de l'API de contexte de React. Enfin, vous devez utiliser ces indicateurs de fonctionnalité dans vos composants pour rendre conditionnellement différentes parties de votre application.

Puis-je utiliser Excellent outil pour les tests A / B. Ils vous permettent d'exposer différentes fonctionnalités ou versions d'une fonctionnalité à différents segments de vos utilisateurs. Cela peut être particulièrement utile pour tester l'impact des nouvelles fonctionnalités sur le comportement et l'engagement des utilisateurs.

Quels sont les risques potentiels d'utilisation des indicateurs de fonction De nombreux avantages, ils comportent également des risques potentiels. L'un des principaux risques est la complexité du code. Avoir de nombreux indicateurs de fonctionnalité peut rendre le code plus difficile à comprendre et à maintenir. Cela peut être atténué en gardant le nombre de drapeaux de fonctionnalité actifs au minimum et en les supprimant une fois qu'ils ne sont plus nécessaires. Un autre risque est celui des erreurs de configuration. Cela peut être atténué en utilisant des tests et une surveillance automatisés pour s'assurer que les indicateurs de fonction fonctionnent comme prévu.

Comment puis-je gérer les indicateurs de fonctionnalité dans une application à grande échelle?

Gestion des indicateurs de fonctionnalité dans un Une application à grande échelle peut être difficile. Une approche consiste à utiliser un système de gestion des drapeaux de fonctionnalité. Ces systèmes fournissent un endroit central pour définir et gérer les drapeaux des fonctionnalités, et sont souvent livrés avec des fonctionnalités telles que la segmentation des utilisateurs, les tests A / B et l'analyse. Une autre approche consiste à utiliser un indicateur de fonctionnalité comme fournisseur de services. Ces fournisseurs offrent une solution hébergée pour la gestion des drapeaux des fonctionnalités, qui peut être particulièrement utile pour les applications à grande échelle.

Les indicateurs de fonction peuvent être utilisés dans une architecture de microservices?

Oui, les drapeaux de fonction peuvent être utilisés dans une architecture de microservices. Ils peuvent être particulièrement utiles pour coordonner la version de fonctionnalités qui couvrent plusieurs services. Cependant, il faut veiller à ce que les indicateurs de fonctionnalité soient appliqués de manière cohérente sur tous les services.

Comment puis-je utiliser des indicateurs de fonctionnalité pour les versions de Canari ou la version est publiée à un petit sous-ensemble d'utilisateurs avant d'être déployé à tout le monde. Les drapeaux de fonction peuvent être utilisés pour contrôler qui a accès à la nouvelle fonctionnalité ou version. Cela vous permet de surveiller l'impact du changement et de le désactiver rapidement si des problèmes sont détectés.

peuvent être utilisés pour les drapeaux pour le lancement sombre?

Oui, les drapeaux de fonctionnalité sont un outil commun pour l'obscurité lancement. Le lancement de Dark est une pratique où de nouvelles fonctionnalités sont publiées à un sous-ensemble d'utilisateurs avant d'être rendus publiquement à la disposition du public. Cela vous permet de tester la fonctionnalité dans l'environnement de production et de recueillir des commentaires avant le lancement officiel.

Comment puis-je tester les indicateurs de fonctionnalité?

TEST Les indicateurs de fonctionnalité peuvent être effectués de plusieurs manières. Une approche consiste à utiliser des tests automatisés pour s'assurer que chaque indicateur de fonction fonctionne comme prévu. Cela peut impliquer la création de tests pour chaque état possible de l'indicateur de fonctionnalité. Une autre approche consiste à utiliser la surveillance et l'analyse pour suivre l'impact des indicateurs de fonctionnalité sur le comportement et les performances de votre application.

Les drapeaux de fonction peuvent être utilisés pour les déploiements progressifs?

Oui, les drapeaux de fonction sont un excellent outil pour les déploiements progressifs. Ils vous permettent d'augmenter lentement le nombre d'utilisateurs qui ont accès à une nouvelle fonctionnalité ou version. Cela peut être particulièrement utile pour minimiser l'impact des problèmes potentiels et pour surveiller l'impact du changement sur le comportement et l'engagement des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!