Comment utiliser les indicateurs de fonctionnalité dans l'intégration continue –

On a beaucoup écrit sur les avantages de l'intégration continue dans les systèmes de production. Ce tutoriel va démontrer un flux de travail simple qui réalise CI. Nous utiliserons les indicateurs de caractéristiques et la configuration à distance pour éviter d'avoir à utiliser des branches dans Git, ainsi que dans n'importe quel environnement de test ou de transfert.

Ce que nous entendons par IC et les drapeaux de caractéristiques

L'intégration continue est une méthode de développement dans laquelle les développeurs peuvent constamment publier leur code. Les développeurs poussent leurs nouvelles fonctionnalités au fur et à mesure qu'ils terminent leur développement, à partir duquel ils sont automatiquement testés et diffusés immédiatement dans un environnement en direct.

Les indicateurs de fonctionnalités permettent de désactiver ces nouvelles fonctionnalités à partir d'un panneau de contrôle distant. à volonté sans apporter de modifications à votre code. Cela vous permet de développer une fonctionnalité et de la mettre en production sans rien changer du point de vue de l'utilisateur.

Pourquoi le CI est-il si puissant?

L'intégration du code dans des blocs plus petits et de façon plus fréquente permet aux équipes de développement de résoudre les problèmes plus rapidement et d'obtenir de nouvelles fonctionnalités aussi rapidement que possible. CI supprime également le besoin de réaliser de grandes versions où une équipe d'ingénieurs doit rester éveillée jusqu'aux petites heures de la nuit pour minimiser les perturbations pour leurs utilisateurs.

Comment les drapeaux de caractéristiques facilitent l'intégration continue

de confiance lors de la libération de nouvelles fonctionnalités. En intégrant de nouvelles fonctionnalités dans un indicateur de fonctionnalité, les développeurs et l'équipe de produit sont en mesure d'activer ou de désactiver rapidement leurs fonctionnalités selon les besoins. Supposons que nous introduisions une nouvelle fonctionnalité dans la production, mais nous pouvons immédiatement voir qu'il y a un bug dans le nouveau code, à cause de quelque chose de spécifique dans l'environnement de production qui n'était pas évident dans les tests (avouons-le une fois que).

Auparavant, cela signifiait une procédure de rollback (probablement) longue et (certainement) douloureuse et un ré-ordonnancement de la libération 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 fonction peut être désactivée pour tout ou partie des utilisateurs et la douleur disparaît. Une fois le bogue identifié et corrigé, une version de correctif peut être déployée et la fonctionnalité peut être réactivée.

Présentation de notre exemple de projet

Pour illustrer l'intégration de drapeaux de caractéristiques et de configuration à distance, nous allons baser notre base de code initiale sur le tutoriel de facto React JS d'un jeu de tic-tac-toe. C'est un excellent tutoriel pour apprendre les bases de React, alors assurez-vous de vérifier si vous ne l'avez pas déjà fait.

Ne vous inquiétez pas si vous ne connaissez pas bien Réagir ou Javascript. Les concepts que nous allons aborder concernent le processus et l'outillage, et non le code.

Plutôt que de répéter le tutoriel depuis le début, nous allons commencer à un point où nous avons une base Jeu de tic-tac-toe opérationnel.

À ce stade, nous utiliserons les options et la configuration à distance pour configurer, pousser et déployer en permanence de nouvelles fonctionnalités. Pour pousser ce concept à l'extrême, nous allons continuellement pousser à maîtriser; aucune autre branche ne sera utilisée. Nous allons introduire un bug (intentionnellement bien sûr!) Et pousser le correctif à master, pour démontrer comment traiter ce scénario ne nécessite pas une annulation complète ou une branche additionnelle.

Si vous souhaitez suivre le code d'écriture pendant ce tutoriel, vous pouvez utiliser le dépôt ici .

Atteindre CI

La méthode la plus courante d'automatisation de l'intégration continue consiste à déclencher le processus de construction lorsque vous apportez des modifications à votre dépôt git. Différents outils de construction réalisent cela de différentes manières.

Nous allons utiliser Netlify pour notre projet. Netlify vous permet de connecter un dépôt Git et de déployer automatiquement des builds chaque fois que vous poussez sur une branche.

Pour utiliser Netlify, inscrivez-vous simplement pour un compte gratuit et sélectionnez l'option 'Nouveau site de Git' en haut à droite du tableau de bord . Une fois que vous avez connecté votre compte GitHub (ou autrement, si vous voulez utiliser Bitbucket ou GitLab), vous devriez alors voir les options ci-dessous.

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

Netlify va maintenant aller de l'avant et construire votre application pour vous. Cela prendra quelques minutes, mais une fois que c'est fait, vous devriez voir quelque chose comme ceci:

La navigation vers cette URL devrait montrer votre jeu Tic Tac Toe dans toute sa splendeur.

Configuration de drapeaux de caractéristiques pour notre projet

Nous allons utiliser des drapeaux de caractéristiques pour contrôler la déclaration d'un gagnant dans le jeu de tic-tac-toe. Pour créer et gérer nos drapeaux de caractéristiques, nous allons utiliser Bullet Train car il est actuellement gratuit, mais il existe de nombreux autres produits d'indicateurs de caractéristiques. Nous vous laisserons choisir celui que vous jugez 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 FF Tutorial.

Ensuite, nous devons créer une nouvelle fonctionnalité pour déclarer un gagnant.
Cliquez sur le bouton "Créer votre première entité" au bas de l'écran suivant pour faire apparaître le formulaire suivant et ajouter dans les détails.

Notez que nous avons d'abord désactivé la fonctionnalité

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

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

Ensuite, exécutez npm, exécutez dev et dirigez-vous vers http: // localhost: 8080 dans votre navigateur. Vous devriez voir le même jeu de 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

Ouvrir le projet dans votre éditeur préféré et modifiez ./ web / App.js .

Recherchez la fonction calculateWinner (squares) . Cette fonction détermine s'il y a eu un gagnant ou non, selon qu'il peut ou non trouver une ligne de la même forme. Nous allons avoir cette fonction return null basée sur la valeur de notre drapeau de caractéristique afin que nous puissions tester le remplissage du forum sans déclarer un gagnant.

Tout en haut de App.js, ajoutez la ligne suivante:

 var declareWinner = true;

Maintenant, initialisons notre client Bullet Train que nous avons installé plus tôt. Copiez tout l'exemple de code 2 depuis la page Fonctions de l'interface Bullet Train et collez-le juste sous la ligne que vous venez d'ajouter.

L'ID d'environnement dans votre extrait de code correspond à l'ID d'environnement associé à l'environnement de développement. Projet de train. Vous pouvez le vérifier en naviguant sur la page 'Paramètres d'environnement' si vous le souhaitez.

Nous devons maintenant éditer la fonction onChange () dans la fonction bulletTrain.init () dans le code que nous venons de coller pour répondre à nos besoins. Remplacez tout le code par une ligne:

 declareWinner = bulletTrain.hasFeature ("declare-winner");

Vous devriez maintenant avoir ceci en haut de votre App.js

 var declareWinner = true;
import bulletTrain de "bullet-train-client"; // Ajouter cette ligne si vous utilisez bulletTrain via npm

bulletTrain.init ({
    environmentID: "",
    onChange: (oldFlags, params) => {// Se produit chaque fois que les drapeaux sont modifiés
        declareWinner = bulletTrain.hasFeature ("déclarer-gagnant");
    }
});

Faites défiler jusqu'à la fonction calculateWinner (squares) et en haut, juste au-dessus de la déclaration de la constante lines ajoutons la ligne:

 if (! DeclareWinner ) renvoie null;

Et c'est tout! Notre drapeau de caractéristique déterminera maintenant si le gagnant est ou non calculé sur chaque rendu de la partie. Rafraîchissez votre navigateur et jouez au jeu. Vous ne pouvez plus gagner et à la place tout le plateau peut maintenant être rempli de X et d'Os.

Revenez à l'administrateur de Bullet Train et basculez la fonction en utilisant le bouton sur la droite.

Rafraîchir votre navigateur et le jeu devient à nouveau winnable. Consultez le code pour la fin de cette partie ici .

Validez et poussez votre code (oui, tout sur le maître) et Netlify déploiera automatiquement votre code. Accédez à votre URL Netlify affectée à nouveau et basculez l'indicateur de fonctionnalité pour le voir fonctionner dans un environnement de production.

Travail sur un bug

Nous allons maintenant introduire intentionnellement un bug dans le jeu tic-tac-toe et montrer comment les indicateurs de fonctionnalité peuvent être utilisés pour faire tomber une fonctionnalité qui cause des problèmes.

fonctionnalité que nous allons ajouter est la sélection de qui va en premier au début de la partie. Pour cela, nous allons ajouter quelques boutons qui n'apparaîtront qu'au début du jeu et empêcheront les clics sur le plateau 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-goes-first comme suit. Laissons-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:

 
 {status} 

… avec le code suivant:

 {! This.state.selected? (
    

        Qui va en premier?
         this.setState ({selected: true})}> X 
          this.setState ({selected: vrai, xIsNext: false})}> O 
    
): (
    
 {statut} 
)}

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

Tout d'abord, ajoutons la fonction de cycle de vie componentDidMount () au composant Board, puis déplaçons la fonction bulletTrain.init ({...}) à l'intérieur, que nous pouvons mettre à jour l'état du composant après l'extraction de l'indicateur:

 class Board extends React.Component {
    componentDidMount () {
        bulletTrain.init ({
            environmentID: "",
            onChange: (oldFlags, params) => {// Se produit chaque fois que les drapeaux sont modifiés
                declareWinner = bulletTrain.hasFeature ("déclarer-gagnant");
            }
        });
    }

    // [rest of class]
}

Si nous laissons bulletTrain.init ({...}) en dehors du composant, nous ne pourrons pas appeler this.setState () et avoir le composant -rendre lui-même des changements à nos drapeaux.

Maintenant, ajoutons 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 d'état de sélectionnée à true si le drapeau est désactivé. Ajoutez la ligne suivante dans la méthode bulletTrain.init ({...}) juste en dessous de la ligne declareWinner .

 this.setState ({selected:! BulletTrain.hasFeature ("select-qui-goes-first")});

Allons de l'avant et poussons ça (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 sur Bullet Train et activez la fonction.

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 le jeu comme ceci, vous pouvez voir que le statut n'est jamais défini pour montrer le gagnant. Ce n'est pas juste!

Revenez à Bullet Train et désactivez la fonction 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'entrerons pas dans l'un ou l'autre de ces tutoriels, mais jetez un coup d'œil aux documents pour en savoir plus sur l'utilisation de plusieurs environnements ou le contrôle des fonctionnalités par utilisateur.

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

 if (! This.state.selected) retourne;

Réactivez la fonction dans Bullet Train et testez-la dans votre environnement local et vous devriez voir que nous empêchons le jeu de démarrer sans sélectionner qui va en premier. Excellent! Validez cela dans le maître et poussez-le directement pour le déployer.

Rendez-vous sur votre URL Netlify et vous devriez voir la nouvelle fonctionnalité corrigée et fonctionner correctement.

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

Remote Config

Nous allons maintenant examiner une légère variation sur les drapeaux de caractéristiques, appelée configuration à distance. . La configuration à distance vous permet de contrôler plus qu'une simple activation ou désactivation d'une fonction. Elle vous permet de modifier une valeur donnée à distance sans modifier votre code. Ceci est utile dans beaucoup d'endroits différents, par exemple, si vous voulez être capable de configurer certains aspects du style.

Dans notre tutoriel, nous allons utiliser ceci pour changer les formes utilisées par chaque joueur. notre jeu. Créons deux valeurs de configuration à distance pour les formes à utiliser sur le plateau. Dans votre projet Bullet Train, cliquez sur le bouton 'Create Feature' mais cette fois, sélectionnez l'onglet 'Remote Config' au lieu de 'Feature Flag'. Remplissez les données comme ci-dessous.

Tout est terminé! Maintenant, revenons au code. Dans la fonction onChange () de notre client Bullet Train, nous devons extraire ces valeurs et les définir à l'état du composant. Modifions notre appel this.setState () à:

 this.setState ({
    sélectionné:! bulletTrain.hasFeature ("select-who-goes-first"),
    shape1: bulletTrain.getValue ("forme-1") || 'X',
    shape2: bulletTrain.getValue ("shape-2") || 'O'
});

Nous avons maintenant les deux formes et pouvons remplacer toutes les utilisations statiques dans App.js de 'X' et 'O' avec les valeurs d'état à la place. Il devrait y avoir 3 instances de chacune: 1 par forme dans handleClick () et 2 par forme dans render () (on est dans l'appel à return ) . Voici le code mis à jour pour la référence dans handleClick () :

 handleClick (i) {
    // ...
    carrés [i] = this.state.xIsNext? this.state.shape1: this.state.shape2;
    // ...
}

Notez que pour les instances de l'appel de return dans render () vous devrez envelopper le JavaScript entre accolades comme ceci:

  this. setState ({selected: true})}> {this.state.shape1} 

Validez ceci en master et poussez dans votre dépôt Git pour voir les changements sur votre URL Netlify. Si vous l'avez fait correctement, le jeu devrait jouer comme avant avec les formes 'X' et 'O'. Allez-y et changez les formes dans l'admin en différentes lettres et actualisez la page. Si tout va bien, vous allez maintenant jouer avec des formes différentes.

Il y a beaucoup plus de choses que vous pouvez réaliser avec la configuration à distance, comme contrôler le style du jeu entier ou dire les dimensions du tableau. Nous avons ajouté des valeurs de configuration encore plus éloignées, y compris la couleur de la forme et la taille du carré. Vous pouvez voir le code fini pour le jeu ici .

D'autres choses à penser

Les drapeaux de caractéristique ne devraient pas être considérés comme une balle en or, cependant, 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, comme Django ou Rails, vous devrez faire attention lors de l'implémentation des indicateurs d'entités dans vos modèles. L'utilisation de drapeaux d'entités dans vos modèles peut entraîner des discordances de schéma de base de données, ce qui peut entraîner l'arrêt de certaines parties de votre application.

De même, si vous interagissez avec une API tierce qui a certaines exigences pour ses consommateurs, l'utilisation de drapeaux de caractéristiques pour contrôler certains aspects de cette API peut entraîner des erreurs inattendues dans votre application. En outre, et vice versa, si votre application fournit une API à consommer par d'autres, l'utilisation de drapeaux d'entités pour contrôler les modèles de données de l'API n'est pas conseillée car cela peut causer des problèmes à ces consommateurs.

Enfin, nous avons utilisé Bullet Train dans le tutoriel ci-dessus car il est libre d'utilisation pour le moment et également open source. Il y a 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, Lancement Darkly et Airship HQ .

Ben a fondé l'agence de Londres Solid State Group et The Hoxton Mix. Il est passionné par le codage, le démarrage d'entreprises, le financement d'entreprises et l'utilisation de la technologie pour rendre le monde plus agréable. Il a écrit sa première page Web en 1994, ce qui le rend probablement trop vieux.