Meilleures pratiques de contrôle de version que chaque équipe de développement React doit connaître

Imaginez travailler avec un groupe de développeurs qui construisent une structure LEGO complexe, mais avec un ensemble d'instructions légèrement différentes pour chaque personne. Lorsque le contrôle de version échoue dans de nombreuses applications React, c'est précisément ce qui se produit. La semaine dernière, une équipe a lancé ce qui semblait être une mise à jour simple de son site Web, mais au lieu d'améliorer les choses, cela a déclenché une réaction en chaîne de problèmes.

Le panier a cessé de fonctionner, la page de connexion est devenue vide et personne n'a pu déterminer lequel des changements récents a causé le désordre.

Ce n'est pas une histoire rare : cela se produit partout dans les équipes de développement. Alors que la plupart des développeurs savent comment enregistrer leurs modifications de code (comme créer des instantanés réguliers de leur progression LEGO), Les projets React ont besoin de quelque chose de plus sophistiqué. Pourquoi ? Parce que les sites Web React ne sont pas trop différents du jeu vidéo Tetris qui nécessite que toutes les pièces soient parfaitement assemblées. Et ce n’est pas seulement frustrant lorsqu’ils ne s’intègrent pas parfaitement ; cela pourrait entraîner une fin rapide du jeu (perte de revenus, utilisateurs mécontents et développeurs très stressés). Cependant, il existe une meilleure méthode pour résoudre ces problèmes, et cela commence par savoir comment surveiller et gérer les changements dans vos projets React.

Introduction

Au cours des trois premiers trimestres de 2023, une analyse GitHub a révélé que 64 % des projets React ont été confrontés à des restaurations de déploiement en raison de problèmes de contrôle de version, les conflits de dépendances de composants représentant près de la moitié de ces incidents. Pour les équipes gérant des applications React à grande échelle, le temps moyen passé à résoudre les conflits de fusion est passé de 2,5 heures à 4,8 heures par semaine entre 2021 et 2023. Un temps qui aurait pu être consacré à la création d'une meilleure expérience utilisateur ou à la création de nouvelles fonctionnalités. Bien qu'il existe désormais des moyens plus efficaces de faire face à ces difficultés, passons d'abord en revue cette situation et voyons si vous pouvez reconnaître quelque chose de similaire.

Votre équipe a passé des heures à travailler sur une mise à jour pour un projet React, et finalement après ces heures trépidantes passées sur la mise à jour, elle l'a finalement publiée, pour découvrir qu'un composant critique était en panne en production. Le pire, c’est que votre développeur principal n’était pas disponible pour résoudre ce problème en raison d’une réunion importante avec un client majeur. Et personne n’a pu déterminer quand et où les changements radicaux ont été introduits, et il existe déjà trois versions différentes de la solution de gestion d’état qui sont en conflit les unes avec les autres. Cela ressemble-t-il à une situation que vous avez déjà rencontrée ? Savez-vous qu'environ 78 % des développeurs React signalent des situations similaires au moins une fois tous les trois mois au cours des deux derniers trimestres de cette année. Alors que la plupart des développeurs comprennent les bases de la sauvegarde de leurs modifications de code (en prenant des instantanés de leur progression) et bien sûr connaissent les bases de Git, les projets React nécessitent toujours une stratégie de contrôle de version plus sophistiquée en raison de leurs défis uniques que de nombreuses équipes négligent, sachant que cette approche pourrait réduire les incidents critiques jusqu'à 72 % selon des études récentes de l'industrie.

Afin de gérer les modifications apportées au code source au fil du temps, le contrôle de version est la pierre angulaire du succès de votre développement logiciel. Ce qu'il fait est aussi simple que ABC, il donne au développeur la possibilité de :

• Conservez un enregistrement détaillé de toutes les modifications du code.
• Gérer plusieurs versions de logiciels.
• Travailler efficacement avec les autres membres de votre équipe.
• Corrigez les erreurs en revenant aux versions antérieures.
• Travailler simultanément sur plusieurs fonctionnalités

En regardant les capacités qu'un développeur acquiert en utilisant des systèmes de contrôle de version, il est nécessaire de dire que chaque développeur React devrait être capable de travailler dans ce type d'environnement où leur base de code React est constamment stable, le travail d'équipe est facile et le retour en arrière est possible. les changements sont simples. Cependant, pour ce faire, certaines lignes directrices et pratiques doivent être prises en compte et sont dûment abordées dans cet article. Nous aborderons les meilleures pratiques d'utilisation du contrôle de version avec React tout en considérant précisément les étapes à suivre. La sélection du système de contrôle de version approprié sera la première étape que nous vous guiderons afin de créer un espace de travail plus productif et coopératif, suivie par la création de messages de validation compréhensibles et la mise en place de stratégies de branchement efficaces. L'importance des révisions de code, de la gestion des dépendances et de l'établissement d'une intégration et d'un déploiement continus (CI/CD) sera également abordée. Enfin, nous discuterons de la manière de gérer les litiges et les annulations ainsi que de l'importance d'une communication et d'une documentation claires pour les développeurs.

TL:DR

#1/8 : Choisir le bon système de contrôle de version

Le choix du bon système de contrôle de version dépend de certains facteurs tels que les besoins du projet, la taille de l'équipe et le flux de travail souhaité, chaque VCS a une part égale d'avantages et d'inconvénients. Mais il est judicieux de choisir celui qui correspond le mieux à vos exigences personnelles ou professionnelles ! Voici quelques-uns des plus connus :

1. Git :

Git est une sorte de VCS distribué où chaque développeur conserve une copie complète du référentiel. Cette nature distribuée de Git permet aux développeurs de travailler plus facilement hors ligne et de créer des branches locales sans avoir besoin d'une connexion constante à un serveur central.

En plus des avantages de Git, il est important de dire que les puissantes fonctionnalités de branchement et de fusion de Git sont parmi les plus grands avantages qu'il offre. De ce fait, les développeurs peuvent facilement tester de nouvelles fonctionnalités ou déboguer efficacement d'autres branches sans compromettre le code principal. Cet isolement créé par ces effets de branchement garantit que tous les codes sont produits sans aucune interruption, permettant des flux de développement parallèles.

La structure de Git est conçue pour bien gérer les gros projets. Il fonctionne aussi bien pour les petits groupes que pour les grandes entreprises puisqu'il peut traiter de nombreux dossiers et de nombreuses personnes sans ralentir.

Il y a une forte communauté derrière cela et de nombreux outils disponibles. Étant donné que de nombreuses personnes utilisent Git, de nombreux didacticiels et ressources ont été créés. Cela rend Git plus facile pour les nouveaux utilisateurs tout en offrant des outils avancés à ceux qui le connaissent bien.

Pour en savoir plus sur Git : cliquez ici

2. Mercurial :

Comme Git, Mercurial est également un système de contrôle de version distribué (VCS). Cela signifie que Mercurial permet un développement décentralisé afin que les développeurs puissent travailler hors ligne avec des copies locales de référentiels incluant un historique complet.

Mercurial est largement connu pour sa facilité d'utilisation. Il s'est forgé la réputation d'être convivial pour les débutants grâce à son interface de ligne de commande simple et ses interfaces utilisateur graphiques attrayantes. Cependant, cette convivialité ne réduit en rien ses fonctionnalités, car Mercurial gère efficacement les flux de travail complexes avec de fortes fonctionnalités de branchement et de fusion.

Mercurial est doué pour gérer de grands projets en termes de performances. Il exécute ses opérations rapidement et efficacement grâce à son mélange de vitesse, de facilité d'utilisation et de fonctionnalités puissantes, ce qui en fait une option fiable et digne de confiance pour les équipes travaillant sur de grandes bases de code. En raison de ces avantages, Mercurial est devenu une option privilégiée parmi les développeurs et les organisations à la recherche d'un système de contrôle de version fiable.

Pour en savoir plus sur Mercurial : Cliquez ici

3. Subversion (SVN) :

SVN, quant à lui, est un système de contrôle de version centralisé dans lequel le système client-serveur est ancré par un serveur central qui héberge tout l'historique du projet. Il est facile à mettre en place et comporte un nombre limité d'étapes, ce qui le rend idéal pour le déploiement dans des projets à petite échelle d'activités de développement spécifiques en fonction de l'équipe en charge.

Mais SVN n'est pas très puissant en termes de fonctionnalités de branchement et de fusion et c'est l'une des raisons pour lesquelles il n'est pas aussi libre que les systèmes de contrôle de version distribués pour les travaux à grande échelle. SVN a également une capacité appréciée de prendre en charge les validations atomiques, car les utilisateurs ne pourront pas implémenter seulement une partie d'un ensemble de modifications. De plus, SVN prend bien en charge Windows pour garantir que son travail s'intégrera toujours de manière générale dans l'environnement Windows.

Pour en savoir plus sur SVN : cliquez ici

Outre ces types de VCS, d'autres VCS peuvent également être identifiés. Cependant, les autres types ne sont pas largement utilisés aujourd’hui dans le développement Web moderne, bien qu’ils aient également leurs propres utilisations. Ils ne sont pas abordés dans cet article en raison de leur non-pertinence par rapport aux paradigmes actuels de développement Web. Bien qu’ils puissent avoir des fonctionnalités spécifiques pour des niches spécifiques, ils ne répondent pas aux exigences courantes de développement Web et ne disposent pas de la base solide ni du support en termes d’outils et de communauté qu’exige le développement actuel.

Pourquoi Git est le choix préféré pour le développement de React

Dans la pratique du travail dans le cadre de React, Git est devenu un outil indispensable. Bien qu’il existe d’autres systèmes disponibles et qu’ils présentent tous leurs propres avantages et inconvénients ; Néanmoins, Git semble associer toutes ces fonctionnalités avec une flexibilité et des utilisateurs actifs du monde entier et constitue donc le premier choix de la plupart des développeurs en général ainsi que des développeurs React en particulier. Grâce à sa facilité d'utilisation dans des flux de travail élevés, à son travail d'équipe efficace et à sa liberté d'expérimentation, il a consolidé sa position de référence.

Enfin, nous indiquerons que tous les VCS considérés ont leurs forces et leurs faiblesses, et le choix du meilleur VCS dépend encore une fois des nécessités du projet, du nombre de participants et des préférences de travail personnelles. Mais, comme pour 89 % des développeurs React, il n'y a pas de meilleur outil que Git.

Faire le bon choix

La décision quant au VCS à utiliser est une décision très critique. C'est un appel qui affecte votre équipe, le projet spécifique, ainsi que la vitesse à laquelle vous terminez le développement de votre projet. Ne vous précipitez pas, prenez votre temps et examinez toutes les options avant de décider laquelle vous conviendra le mieux, tout en tenant compte des facteurs que j'ai énumérés ci-dessous ?.

Meilleures pratiques

La clé du succès de tout VCS est une mise en œuvre appropriée, l'adhésion de l'équipe et le respect constant des meilleures pratiques. Cependant, si vous suivez des formations régulières, disposez d’une documentation claire et de workflows établis, un contrôle de version efficace ne sera pas loin de vous, quel que soit le système choisi. Quel que soit le VCS choisi, suivez ces bonnes pratiques :

#2/8 : Configuration de votre flux de travail Git

Tout le monde sait que tout projet de développement logiciel ne peut être qualifié de réussi que s'il dispose d'un flux de travail Git strict dans des environnements d'équipe. Tout d'abord, je vais vous présenter les stratégies de branchement les plus fréquemment utilisées et vous aider à sélectionner la meilleure pour un projet spécifique.

Stratégies de branchement

1. Flux Git :

Git Flow est une stratégie de branchement puissante conçue pour les projets dont les versions sont planifiées. Il a été introduit par Vincent Driessen et est devenu un standard dans de nombreuses organisations. Il suit une hiérarchie de branchement stricte et utilise des branches de longue durée pour les fonctionnalités et les correctifs.

Branches clés :

• main/master : stocke l'historique officiel des versions
• développer : sert de branche d'intégration pour les fonctionnalités
• feature/* : contient de nouveaux développements de fonctionnalités
• release/* : Prépare les versions de production
• hotfix/* : corrige les bugs critiques en production

Flux de travail

• Le développement des fonctionnalités commence par le développement
• Les fonctionnalités sont fusionnées dans le développement
• La branche Release est créée à partir de develop
• Après les tests, la version est fusionnée avec main et develop
• Les correctifs se branchent du principal et fusionnent vers le principal et le développement

Nous examinerons cet exemple réel de développement d'application consistant à ajouter une fonctionnalité de paiement Stripe à une application d'achat.

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Préparer une version

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Exemple de correctif d'urgence

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

Avantages

• Bien adapté aux sorties programmées
• Séparation claire des travaux en cours
• Excellent pour gérer plusieurs versions

Inconvénients

• Complexe pour les petits projets
• Peut ralentir la livraison continue
• Frais généraux dans la gestion des succursales

2. Flux GitHub :

Un workflow plus simple avec une seule branche de longue durée (généralement principale) et des branches de fonctionnalités de courte durée par rapport à Git Flow. Il se concentre sur la livraison et le déploiement continus et ses engagements sont pris auprès de la branche principale via des pull request.

Principes clés

• la branche principale est toujours déployable
• Toutes les modifications via les branches de fonctionnalités
• Pull request pour les discussions
• Déployer immédiatement après la fusion

Flux de travail

• Créer une branche à partir du principal
• Ajouter des commits
• Ouvrir la demande de tirage
• Réviser et discuter
• Déployer et tester
• Fusionner vers le principal

À l'aide des commandes GitHub, nous examinerons cet exemple de développement de fonctionnalités : l'ajout d'un panier à une application.

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Processus de déploiement

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Avantages

• Simple et direct
• Excellent pour un déploiement continu
• Mieux pour les petites équipes
• Frais généraux réduits

Inconvénients

• Moins adapté aux versions multiples
• Support limité pour les versions par étapes
• Peut nécessiter un CI/CD sophistiqué

3. Développement basé sur le tronc :

Implique l'intégration fréquente de petits changements gérables directement dans la branche principale, souvent plusieurs fois par jour. Il met l'accent sur l'intégration et la publication continues.

Concepts clés

• Branches de fonctionnalités de courte durée
• Commitments directs sur le tronc principal
• Drapeaux de fonctionnalité pour un travail incomplet
• L'accent est mis sur les petits commits fréquents

Flux de travail

• Petites branches feature (1-2 jours max)
• Intégration continue au tronc
• Fonctionnalités activées pour les fonctionnalités incomplètes
• Déploiements réguliers depuis le tronc

Branche des fonctionnalités de courte durée

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

Exemple de basculement de fonctionnalités

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

Avantages

• Simplifie l'intégration continue
• Réduit les conflits de fusion
• Cycles de feedback plus rapides
• Mieux pour les équipes expérimentées

Inconvénients

• Nécessite une forte culture de test
• Peut nécessiter des basculements de fonctionnalités
• Peut être un défi pour les équipes moins expérimentées

Établir un modèle de branchement

1. Branches de fonctionnalités :

Branches séparées pour développer de nouvelles fonctionnalités, permettant un travail isolé sans affecter la branche principale. Fusionné dans la branche principale après l'achèvement et les tests des fonctionnalités. Les branches de fonctionnalités constituent la base de la plupart des workflows Git.

Meilleures pratiques

Lignes directrices

• Gardez les branches de courte durée (1-2 semaines max)
• Une fonctionnalité par branche
• Commits réguliers avec des messages clairs
• Mise à jour fréquemment depuis la branche parente

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Cycle de vie

• Créer à partir du dernier développement ou principal
• Rebases réguliers pour rester à jour
• Révision du code avant fusion
• Supprimer après la fusion

2. Branches de sortie :
Créé lors de la préparation d'une nouvelle version. Ils aident à stabiliser et à tester le code avant sa mise en ligne. Toutes les corrections de bugs ou ajustements finaux sont effectués ici avant de réintégrer la branche principale.

Aspects clés

1. Création

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

2. Objectif

• Changements de version
• Mises à jour de la documentation
• Corrections de bugs
• Aucune nouvelle fonctionnalité

3. Gestion

• Créer à partir de développer
• Fusionner à la fois principal et développer
• Tag releases dans principal
• Supprimer après la fusion

3. Branches de correctifs : Utilisé pour les corrections de bogues critiques en production. Une branche de correctif est créée à partir de la branche principale, où le correctif est appliqué, testé, puis fusionné dans les branches principale et de version.

Mise en œuvre

1. Création

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

2. Processus

• Branche du principal
• Résoudre un seul problème
• Fusionner à la fois principal et développer
• Marquer nouvelle version

3. Lignes directrices

• Portée minimale
• Délais d'exécution rapide
• Processus d'examen d'urgence
• Déploiement immédiat

Matrice de décision

Factor	Git Flow	GitHub Flow	Trunk-Based
Team Size	Large	Small-Medium	Any
Release Cycle	Scheduled	Continuous	Continuous
Complexity	High	Low	Medium
Experience Needed	Medium	Low	High
Version Management	Excellent	Limited	Limited

#3/8 : Meilleures pratiques pour les messages de validation

Les messages de validation ne sont que de courtes descriptions écrites par les développeurs lorsqu'ils enregistrent les modifications apportées à leurs codes. Il décrit ce que vous avez modifié et pourquoi vous avez effectué ces modifications. Chaque fois que des mises à jour sont apportées à un fichier ou qu'une nouvelle ligne de code est créée, un commit est créé dans le système de contrôle de version (Git, par exemple).

Rédiger des messages de validation clairs et concis

La rédaction de messages de validation clairs est importante pour un certain nombre de raisons : à des fins de communication claire, de données structurées et d'intégration. Ils documentent un projet à un moment et à un lieu particuliers, ce qui permet aux autres développeurs, y compris à l'auteur lui-même, de savoir plus facilement pourquoi des modifications ont été apportées. Avoir de bons messages de validation permettrait facilement à quelqu'un d'obtenir l'historique d'un projet et de réduire le temps passé à essayer de déchiffrer l'historique. Avec les messages de validation, il y a toujours plus d'informations que le code que recevront les personnes qui inspecteront les modifications.

Les descripteurs dans les messages de validation bien rédigés rendent également le processus de révision du code moins long. Il aide les réviseurs à mieux comprendre pourquoi de tels changements doivent se produire, ce qui attire leur attention sur les éléments appropriés du code, réduisant ainsi la confusion pendant le processus de révision.

Donner aux branches un historique de validation propre est essentiel pour pérenniser un projet. Les messages de validation standard permettent également le débogage puisque vous disposez d'un historique des modifications et vous pouvez savoir quand un bogue a été introduit pour de vrai. Cela facilite le débogage et, encore une fois, il peut également être annulé rapidement si les modifications doivent être annulées. Les messages de validation aident également à créer des journaux de modifications utiles.

Dernier point mais non le moindre, de simples messages de validation facilitent la compréhension de l'objectif d'un changement par les autres membres de l'équipe, rendant ainsi la collaboration sur un projet plus fluide.

Structure d'un message de bon engagement

Un message de commit bien structuré suit généralement ce format :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Les éléments clés incluent :

1. Ligne d'objet (première ligne) :

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

2. Corps du message :

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

3. Pied de page :

Toute information supplémentaire, telle que des liens vers des problèmes connexes ou des notes sur les dernières modifications.

Exemple d'un bon message de commit :

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

et/ou

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Fréquence de validation : à quelle fréquence devez-vous valider les modifications ?

La pratique consistant à apporter des modifications est généralement fréquente, et effectuer de petits changements plus souvent est normalement considéré comme la meilleure pratique, bien que d'autres facteurs puissent être impliqués. Un grand nombre de commits permettent de diviser le développement en petits segments et de comparer les performances avec les périodes précédentes et, si nécessaire, de supprimer rapidement les défauts. Cependant, lors de modifications, il est recommandé d’effectuer une modification par responsabilité et par validation. Une validation doit capturer une seule modification ou un ensemble de modifications qui sont logiquement utilisées ensemble pour implémenter une fonctionnalité. Cela préserve un historique soigné, sensé et facilement modérable pour le commit. De plus, il devrait être possible de créer un jalon avec chaque commit, quelle que soit la taille du changement apporté ; l’idée de Trident est de réaliser un travail d’utilisation, même s’il est établi uniquement pour servir de base aux changements ultérieurs. Le respect de ces principes permet de garder le réacteur de l'historique des versions propre et clair.

Vous devez valider les modifications lorsque :

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Engagements petits et fréquents par rapport aux engagements importants et peu fréquents

1. Petits engagements fréquents :

Lors de l'utilisation de SCM, il est recommandé d'effectuer de nombreuses mises à jour mineures plutôt que quelques mises à jour majeures, car les premières sont moins susceptibles de déformer l'historique des versions. Les engagements fréquents et courts présentent également un certain nombre d’avantages. Ils offrent une progression linéaire/appropriée des modifications, facilitent les réunions de révision du code, minimisent les risques de changements énormes perturbateurs et facilitent l'intégration et les tests continus.

Le contrôle des risques, le contrôle des flux ainsi que la constitution de l'équipe sont d'autres bénéfices associés à de petits commits fréquents. Du point de vue de la gestion des risques, des validations plus fréquentes signifient qu'il est plus facile d'annuler une certaine modification, il y a moins de risques de conflits de fusion, les problèmes qui peuvent survenir sont limités dans une petite plage et une sauvegarde de base du code est effectuée plus fréquemment.
En ce qui concerne le contrôle du flux dans le développement, beaucoup de gens trouvent les petits commits plus compréhensibles, ce qui contribue à la simplification des révisions de code et est très important en termes d'historique des versions plus détaillé, qui, à son tour, parle du flux de développement défini. . En termes de collaboration en équipe, les petits engagements conduisent à des boucles de rétroaction plus courtes, à une intégration plus rapide avec d'autres changements, à une visibilité sur les progrès et à moins de problèmes de fusion.

Dans l'ensemble, les commits quotidiens peuvent être considérés comme un avantage majeur par rapport aux commits importants effectués à intervalles réguliers, qui devraient être utilisés comme bonne pratique pour le contrôle de version et le développement collaboratif de logiciels.

2. Engagements importants et peu fréquents :

Lorsque les commits sont volumineux, en particulier ceux qui se produisent sporadiquement, un certain nombre de problèmes peuvent être rencontrés. La mise à jour simultanée d'un plus grand nombre d'éléments non liés peut entraîner un chevauchement de diverses modifications, ce qui rend compliqué la distinction d'une modification de l'autre en fonction de l'historique des validations. Il s'agit d'un problème potentiel car il devient fastidieux d'identifier la source des problèmes qui peuvent être présents dans un tel programme. Ils ont également constaté qu'il existe une forte probabilité d'introduire plus d'un bug, ce qui rend le processus de débogage et de résolution de problèmes encore plus difficile.

Les modifications non triviales, effectuées de temps en temps, entraînent également des problèmes lors des révisions de code. Il devient donc plus difficile pour l'évaluateur d'étudier tous les aspects du changement et de les comprendre, ce qui pourrait conduire à des lacunes, voire à des évaluations incomplètes.

Cependant, certains facteurs essentiels peuvent être attribués à des commits importants et peu fréquents. Cela inclut la probabilité de rencontrer des conflits de fusion, plus difficile de réviser les modifications, potentiellement la possibilité de perdre plus de travail en cas d'erreurs et plus difficile d'annuler les modifications si nécessaire.

Des engagements importants et peu fréquents ont également le potentiel de produire un impact important sur le développement. Cela peut entraîner des processus de débogage difficiles, rendre les mesures de son évolution au fil du temps moins simples, réduire la compréhension des révisions uniques et compliquer intrinsèquement l'évolution de la base de code.

Il existe plusieurs modèles de validation recommandés à garder à l'esprit lors de la validation de modifications dans votre base de code. Voici une image décrivant comment l'utiliser

Conseils pour maintenir de bonnes pratiques de validation :

Afin de garantir de bonnes pratiques de validation, vous devez procéder comme suit :

1. Planification :

• Planifiez vos modifications avant de coder
• Décomposez les tâches volumineuses en commits plus petits et logiques
• Identifiez les points d'arrêt logiques dans votre travail
• Considérez l'impact que vos changements peuvent avoir sur les autres

2. Processus de révision :

• Vérifiez vos modifications avant de vous engager
• Utilisez git diff pour vérifier les modifications que vous êtes sur le point de valider
• Vérifiez tout changement involontaire
• Assurez-vous que vos messages de validation sont clairs et descriptifs

3. Coordination d'équipe :

• Communiquez vos modèles de commit avec votre équipe
• Établir des conventions d'équipe pour les pratiques de validation
• Utiliser efficacement les stratégies de branche (par exemple, branches de fonctionnalités, demandes d'extraction)
• Maintenez des normes cohérentes dans la base de code de votre équipe

#4/8 : Meilleures pratiques pour les demandes de tirage

Une Pull request est un moyen de proposer des modifications à une base de code dans un cadre collaboratif. Imaginez-le comme disant « Les gars, vérifiez mes modifications dans la source de la copie – aimeriez-vous que je les contribue au référentiel ? Les requêtes pull sont au cœur des plateformes comme GitHub, GitLab et Bitbucket.

Voici le déroulement typique du processus de demande de tirage :

• Un développeur crée une branche à partir de la base de code principale
• Ils effectuent leurs modifications dans cette branche
• Ils créent une pull request pour proposer de fusionner leurs modifications
• D'autres développeurs examinent le code, laissent des commentaires et suggèrent des améliorations
• Une fois approuvées, les modifications sont fusionnées dans la branche principale

Principes fondamentaux pour la création de demandes de tirage efficaces

Une bonne pull request devrait :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Titre et description du PR

Format du titre

• Utilisez un format cohérent : [type] : Brève description
• Types : feat, fix, docs, style, refactor, test, corvée
• Gardez-le sous 72 caractères
• Utilisez le mode impératif ("Ajouter une fonctionnalité" et non "Fonctionnalité ajoutée")

Exemple :

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Modèle de description

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

Liste de contrôle pour la demande de tirage

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

Pour la taille, visez < 400 lignes de code modifiées et si c'est > 1000 lignes, pensez fortement à diviser les codes. Regroupez tous les changements associés ensemble, dans l’ordre et cela doit être logique. Séparez la refactorisation des modifications de fonctionnalités et gardez l'historique des validations propre et significatif.

Lorsque vous répondez aux commentaires, assurez-vous de répondre à tous les commentaires et de rester ouvert aux suggestions. Si vous devez repousser un commentaire, expliquez clairement les raisons pour lesquelles vous le faites. Après des discussions importantes, assurez-vous de mettre à jour la description du PR pour refléter les principaux résultats de ces conversations.

#5/8 : Meilleures pratiques pour le processus de fusion

La fusion est un processus d'intégration des modifications apportées et validées dans une ou deux branches sources sur le même tronc. Ce processus est similaire à la combinaison d'un travail sur un document et d'un autre sur un autre et implique plusieurs développeurs travaillant indépendamment pour intégrer leur travail dans une version finale. Cette activité est impérative dans la création d'une base de code source propre et donc d'un effort collaboratif en équipes.

Un scénario courant de ceci serait dans :

• Intégration des fonctionnalités :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

• Intégration de correction de bug :

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Types de fusions

1. Fusion directe :

L'intégration Direct Merge est moins compliquée et conserve l'historique de tous les commits dans un seul flux. Bien que cela facilite l'intégration entre les branches, cela complique également la structure historique là où les branches sont interconnectées. Cette stratégie de fusion fonctionne mieux pour les petites équipes car elle entre dans une histoire potentiellement complexe, en raison du moins grand nombre de membres impliqués.

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

Avant la fusion :

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

Après la fusion :

# After PR is merged to main
git checkout main
git pull origin main

# Deploy
npm run deploy

# If issues found
git checkout -b fix/cart-total
git add src/cart.js
git commit -m "Fix cart total calculation"
git push origin fix/cart-total
# Create PR for the fix

Un exemple réel avec des messages de commit

# Create short-lived branch
git checkout -b feature/add-to-cart-button

# Work fast (1-2 days max)
git add src/components/AddToCart.jsx
git commit -m "Add to cart button component"

# Regular integration to main
git checkout main
git pull origin main
git merge feature/add-to-cart-button
git push origin main

2. Écraser et fusionner :

Il s'agit d'une autre méthode par laquelle tous les commits de la pull request seront écrasés en un seul commit avant la fusion. De cette façon, l’historique des validations est simple et propre et l’historique est beaucoup plus facile à expliquer. Squash and Merge améliore également la lisibilité des modifications puisque chaque fonctionnalité a un seul commit et est plus facile à annuler si nécessaire. Le seul inconvénient de cette méthode est qu'elle rend les détails du commit inaccessibles.

// Feature toggle implementation
const FEATURES = {
  NEW_CHECKOUT: process.env.ENABLE_NEW_CHECKOUT === 'true',
  DARK_MODE: process.env.ENABLE_DARK_MODE === 'true',
};

// Usage in code
if (FEATURES.NEW_CHECKOUT) {
  return <NewCheckoutProcess />;
} else {
  return <LegacyCheckout />;
}

Avant la courge :

feature/ticket-number-brief-description
feature/user-authentication
feature/JIRA-123-payment-gateway

Après écrasement et fusion :

release/v1.0.0
release/2024.03

Un exemple réel avec des messages de commit :

hotfix/v1.0.1
hotfix/critical-security-fix

3. Rebase et fusion :

Cette stratégie est un moyen de manipuler le flux de changements au sein de l'environnement de travail après avoir créé une pull request. Cette forme de workflow Git vise à rebaser les modifications de la pull request actuelle sur la branche principale avant d'effectuer une fusion. Cette approche donne à l'historique des validations une forme linéaire, ce qui signifie que les points de branchement dans le référentiel sont propres. Cela rendra la projection des changements et la gestion de l'historique des commits plus linéaires, donc plus faciles à comprendre.
Cependant, cette méthode ne peut être correctement exécutée que par une personne ayant des connaissances adéquates en Git, car le rebasage peut parfois être fastidieux et l'intervention d'un expert peut être nécessaire en raison de certains conflits.

Laissez-moi vous montrer comment fonctionnent Rebase et Merge avec des exemples.

<type>: Short summary (50 chars or less)

Detailed explanation of the change
[Optional: Include motivation for the change and contrasts with previous behavior]

[Optional: Include any breaking changes]

[Optional: Include any related ticket numbers or references]

Un exemple pratique du processus :
État initial :

- Keep it under 50 characters (< 50 chars)
- Start with a category/type (feat, fix, docs, style, refactor, test, chore)
- Use imperative mood ("Add feature" not "Added feature")
- Don't end with a period
- Capitalize the first letter

Après le rebase :

- A more detailed explanation of the changes. If necessary (wrap at 72 characters)
- Separate from subject with a blank line
- Explain what and why vs. how
- Include context and consequences
- Clear and concise
- Use bullet points for multiple points

Après la fusion :

feat: Add user authentication system

- Implement JWT-based authentication
- Add login and registration endpoints
- Include password hashing with bcrypt
- Set up refresh token mechanism

This change provides secure user authentication for the API.
Breaking change: API now requires authentication headers.

Relates to: JIRA-123

Un exemple réel avec des messages de commit :

Fix bug in user login validation

Previously, the validation logic for user logins did not correctly
check the email format, leading to acceptance of invalid emails.

This commit updates the regex to match only valid email formats.

Fixes #123

Considérations sur la fusion

Avant de lancer le processus de fusion, voici la liste de contrôle que vous devez avoir en place

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

#6/8 : Gestion des dépendances et de la configuration

Dans tout projet, les dépendances et les fichiers de configuration sont des facteurs importants qui peuvent aider à garder le projet propre, à bonne échelle et stable. Ci-dessous, nous révélons des conseils pour gérer ces aspects.

Contrôle de version pour les fichiers de configuration

Les fichiers de configuration sont fondamentaux pour définir le comportement de votre application dans différents environnements. Le contrôle correct des versions de ces fichiers garantit que vos environnements de développement, de test et de production sont cohérents et reproductibles.

• Fichier Environnement (.env) :

Ces fichiers stockent des variables d'environnement, qui définissent les paramètres de configuration qui diffèrent selon les environnements (par exemple, développement, tests, production). Il est courant d'inclure un fichier .env.example dans votre référentiel, répertoriant toutes les variables d'environnement nécessaires sans les valeurs réelles. Cela sert de modèle aux développeurs pour créer leurs propres fichiers .env.

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

Configuration des fichiers environnementaux pour plusieurs environnements

.env.développement

Ce fichier est utilisé lors du développement et contient des paramètres spécifiques à votre environnement de développement. Il est normalement utilisé dans

• Configuration du serveur de développement local
• Points de terminaison d'API spécifiques au développement
• Drapeaux de débogage activés
• Connexions à la base de données de développement
• Points de terminaison de service simulés
• Paramètres de journalisation détaillée

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

.env.production

Ceci contient les paramètres de votre environnement de direct/production dans lequel de vrais utilisateurs interagissent avec votre application. Il est couramment utilisé à

• Identifiants de la base de données de production
• Points de terminaison de l'API en direct
• Paramètres d'optimisation des performances
• Configurations de sécurité
• Paramètres de journalisation de niveau production
• De véritables intégrations de services

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

.env.test

Ce fichier est utilisé pendant les phases de test, y compris les tests unitaires, les tests d'intégration et les pipelines CI/CD pour tester les configurations de base de données, les configurations de service simulées, les points de terminaison d'API spécifiques aux tests, les délais d'attente des tests, les paramètres de rapport de couverture et les configurations spécifiques CI/CD. .

# After PR is merged to main
git checkout main
git pull origin main

# Deploy
npm run deploy

# If issues found
git checkout -b fix/cart-total
git add src/cart.js
git commit -m "Fix cart total calculation"
git push origin fix/cart-total
# Create PR for the fix

.env.local

Contient des remplacements personnels (non engagés dans le contrôle de version) pour votre machine locale qui ne doivent pas être partagés avec d'autres développeurs. Ceci est généralement appliqué dans les préférences de développement personnel, les chemins spécifiques à la machine locale, les configurations d'outils personnalisées, les clés API personnelles et remplace tous les paramètres d'autres fichiers .env

# Create short-lived branch
git checkout -b feature/add-to-cart-button

# Work fast (1-2 days max)
git add src/components/AddToCart.jsx
git commit -m "Add to cart button component"

# Regular integration to main
git checkout main
git pull origin main
git merge feature/add-to-cart-button
git push origin main

Différences clés et utilisation des fichiers d'environnement

1. Ordre prioritaire (généralement) :

// Feature toggle implementation
const FEATURES = {
  NEW_CHECKOUT: process.env.ENABLE_NEW_CHECKOUT === 'true',
  DARK_MODE: process.env.ENABLE_DARK_MODE === 'true',
};

// Usage in code
if (FEATURES.NEW_CHECKOUT) {
  return <NewCheckoutProcess />;
} else {
  return <LegacyCheckout />;
}

2. Pratiques de contrôle de version :

feature/ticket-number-brief-description
feature/user-authentication
feature/JIRA-123-payment-gateway

3. Exemple de structure de répertoire :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Meilleures pratiques lors de l'utilisation de fichiers .env

1. Sécurité : Ne confiez jamais les informations d'identification sensibles au contrôle de version. Utilisez des informations d'identification différentes pour chaque environnement. Mettre en œuvre des politiques de rotation secrètes. Documentez les variables d'environnement requises.

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

2. Documentation : Conservez un fichier .env.example avec des valeurs factices comprenant des commentaires pour expliquer le but de chaque variable. Documentez toutes les valeurs par défaut ou les solutions de secours.

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

3. Validation :

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

4. Stratégie de chargement :

# After PR is merged to main
git checkout main
git pull origin main

# Deploy
npm run deploy

# If issues found
git checkout -b fix/cart-total
git add src/cart.js
git commit -m "Fix cart total calculation"
git push origin fix/cart-total
# Create PR for the fix

Cette séparation des configurations d'environnement aide à empêcher un développeur de gâcher la plupart des environnements de développement tout en fournissant également la voie nécessaire pour modifier les paramètres d'environnement spécifiques et les préférences individuelles pour les environnements de programmation.

• .gitignore :

Il s'agit d'un autre type de fichier de configuration de contrôle de version qui spécifie les fichiers et répertoires que Git doit ignorer. Les fichiers couramment ignorés incluent les node_modules, les répertoires de construction et les fichiers spécifiques à l'environnement (.env). En les excluant du contrôle de version, vous réduisez l'encombrement de votre référentiel et évitez que des informations sensibles ne soient accidentellement validées.

Exemple .gitignore :

# Create short-lived branch
git checkout -b feature/add-to-cart-button

# Work fast (1-2 days max)
git add src/components/AddToCart.jsx
git commit -m "Add to cart button component"

# Regular integration to main
git checkout main
git pull origin main
git merge feature/add-to-cart-button
git push origin main

Considérations clés

Il y a plusieurs choses qui doivent être prises en compte lorsque l'on travaille sur le fichier .gitignore d'un projet. Tout d'abord, la liste dans le fichier .gitignore doit contenir des éléments ignorés spécifiques au projet, y compris des modèles de langage tels que .pyc et .class, des répertoires de framework et des artefacts de construction. De cette façon, seuls les fichiers qui devraient réellement être sous contrôle de version sont ceux qui sont placés sous contrôle de version.

Au-delà des ignorés spécifiques au projet, il y aurait également des ignorés globaux auxquels il faut également remédier. Ce sont les paramètres spécifiques à l'utilisateur qui doivent être placés dans le fichier ~/.gitignore_global. Certains des plus courants sont les fichiers de configuration IDE et les fichiers créés par le système d'exploitation et ils peuvent encombrer l'historique du contrôle de version lorsqu'ils sont inclus dans le système.

C'est une tâche continue de gérer et de mettre à jour le fichier .gitignore. Il est cependant recommandé que le dossier soit révisé périodiquement par les développeurs afin de s'assurer qu'il répond toujours aux besoins du projet. Il est fortement conseillé que tout ce qui est étrange ou particulier que l'on voudrait ignorer soit également documenté sur le .gitignore, car de cette manière, tout autre membre de l'équipe sera en mesure de comprendre pourquoi ces ignorances particulières ont été considérées comme nécessaires. . Dernier point mais non le moindre, s'il existe des répertoires vides que vous souhaitez que votre système de contrôle de version suive, vous pouvez utiliser les fichiers .gitkeep à cet effet.

Gestion des dépendances

Les dépendances sont des bibliothèques et des modules externes sur lesquels s'appuie votre projet. La gestion correcte de ces dépendances est vitale pour maintenir une application stable et sécurisée.

package.json :

Ce fichier répertorie toutes les dépendances dont votre projet a besoin. Il comprend des métadonnées sur votre projet, telles que le nom, la version et les scripts. Mettez régulièrement à jour ce fichier pour refléter l'état actuel des dépendances de votre projet.

Un exemple typique de fichier package.json démontrant une configuration bien structurée et alignée sur les meilleures pratiques pour un projet JavaScript/Node.js typique.

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

La structure de l'exemple de fichier package.json comprend les sections clés suivantes :

• nom et version : définit le nom et la version actuelle du projet.
• dépendances : répertorie les dépendances de production requises par le projet, ainsi que leurs contraintes de version.
• devDependencies : répertorie les dépendances de développement requises pour des tâches telles que les tests, le linting, etc.
• peerDependencies : déclare les dépendances requises par le projet, mais qui devraient être fournies par l'application consommatrice.
• scripts : définit divers scripts de ligne de commande qui peuvent être exécutés, tels que le démarrage du serveur, l'exécution de tests ou le linting de la base de code.

Les meilleures pratiques pour gérer un fichier package.json incluent :

• Spécification de la version
  • Utilisez les versions exactes ("express": "4.17.1") pour les dépendances critiques afin de garantir la stabilité
  • Utilisez les plages de caret ("^4.17.1") pour des mises à jour flexibles des versions mineures et des correctifs
  • Utilisez les plages de tilde ("~4.17.1") pour les mises à jour au niveau des correctifs uniquement
• Organisation des scripts
  • Regroupez les scripts associés pour une meilleure organisation.
  • Utilisez des conventions de dénomination cohérentes pour les commandes de script.
  • Documentez tout script complexe ou non évident.

fil.lock / package-lock.json :

En général, ces fichiers verrouillent les versions des dépendances utilisées par votre projet. Cela garantit que les mêmes versions sont installées dans différents environnements, plutôt que d'avoir le problème de « Cela fonctionne sur mon ordinateur ». Ces fichiers de verrouillage doivent également être validés afin qu'il y ait un contrôle de version dans le système.

Le but de ces fichiers est de réaliser des installations cohérentes, de verrouiller les numéros de version et les dépendances précis, et d'éliminer les problèmes du type « Ça fonctionne sur mon ordinateur ». La mise à jour de ces fichiers de verrouillage implique l'enregistrement des fichiers de verrouillage dans le système de contrôle de version, l'examen des modifications lors des mises à jour et la gestion appropriée des conflits.

Meilleures pratiques pour maintenir les dépendances à jour

1. Mises à jour régulières : Mettez régulièrement à jour vos dépendances pour bénéficier des dernières fonctionnalités, améliorations et correctifs de sécurité. Utilisez des commandes comme npm outdated ou fil outdated pour vérifier les mises à jour.

2. Versionnement sémantique : Faites attention au versionnage sémantique (semver) lors de la mise à jour des dépendances. Semver utilise un schéma de versionnage au format MAJOR.MINOR.PATCH. Mise à jour :

• Versions de correctifs (x.x.1 à x.x.2) pour les corrections de bugs rétrocompatibles.
• Versions mineures (x.1.x à x.2.x) pour de nouvelles fonctionnalités rétrocompatibles.
• Versions majeures (1.x.x à 2.x.x) pour les modifications susceptibles de rompre la compatibilité.

3. Outils automatisés : Utilisez des outils automatisés comme Dependabot (pour GitHub) ou Renovate pour vérifier automatiquement les mises à jour des dépendances et créer des demandes d'extraction. Ces outils vous aident à maintenir vos dépendances à jour sans intervention manuelle.

4. Tests : Avant de mettre à jour les dépendances, assurez-vous de disposer d'une suite de tests robuste pour vérifier que les mises à jour n'introduisent pas de régressions. Exécutez tous les tests après la mise à jour pour confirmer que tout fonctionne comme prévu.

5. Dépendances entre pairs : Soyez conscient des dépendances entre pairs spécifiées par certains packages. Assurez-vous qu'ils sont compatibles avec les versions utilisées dans votre projet.

En suivant ces pratiques, vous maintiendrez un projet React sain, cohérent et sécurisé, en garantissant que tous les membres de l'équipe et les environnements sont sur la même longueur d'onde.

#7/8 : Intégration et déploiement continus (CI/CD)

L'intégration de CI/CD aux systèmes de contrôle de version permet une automatisation transparente des processus de construction, de test et de déploiement. Chaque fois que le code est transmis au référentiel de contrôle de version, le pipeline CI/CD se déclenche automatiquement, exécutant des étapes prédéfinies pour valider et déployer les modifications. Par exemple, lorsqu'un développeur envoie une nouvelle validation vers la branche principale d'un référentiel GitHub, un workflow GitHub Actions est déclenché. Ce flux de travail compile automatiquement le code, exécute des tests unitaires et d'intégration et déploie l'application dans un environnement intermédiaire pour des tests plus approfondis.

Étapes clés de l'intégration de CI/CD avec le contrôle de version :

• Builds automatisées : Chaque poussée de code déclenche un processus de build automatisé, garantissant que la base de code est toujours dans un état constructible.
• Tests automatisés : Les tests sont automatiquement exécutés à chaque poussée pour détecter les bugs plus tôt.
• Déploiement continu : Les modifications qui réussissent tous les tests et vérifications sont automatiquement déployées dans les environnements de production ou de test.

Présentation des outils CI/CD populaires

Plusieurs outils CI/CD sont largement utilisés pour mettre en œuvre ces pratiques, chacun avec ses propres atouts :

• Jenkins : Un serveur d'automatisation open source qui prend en charge la création, le déploiement et l'automatisation de n'importe quel projet. Jenkins dispose d'un vaste écosystème de plugins, ce qui le rend hautement personnalisable.

  • Avantages : Bibliothèque de plugins étendue, hautement personnalisable, support communautaire solide.
  • Inconvénients : Peut être complexe à configurer et à maintenir, nécessite des ressources de serveur dédiées.

• Actions GitHub : Intégré directement à GitHub, il permet aux développeurs d'automatiser les flux de travail en fonction des événements GitHub (par exemple, push, pull request).

  • Avantages : Intégration transparente avec GitHub, facile à configurer, vaste marché d'actions.
  • Inconvénients : Limité aux référentiels GitHub, la tarification peut devenir un problème pour les grandes équipes ou les flux de travail complexes.

• Travis CI : Un service CI basé sur le cloud qui s'intègre bien aux projets GitHub. Il est connu pour sa simplicité et sa facilité d’utilisation.

  • Avantages : Configuration simple, intégration facile avec GitHub, gratuite pour les projets open source.
  • Inconvénients : Prise en charge limitée des référentiels non GitHub, peut être lente pour les grands projets.

• CircleCI : Un outil CI/CD qui prend en charge la création, le test et le déploiement d'applications. Il offre une configuration robuste et une optimisation des performances.

  • Avantages : Hautes performances, prend en charge Docker de manière native, excellente évolutivité.
  • Inconvénients : Peut être complexe à configurer, les fonctionnalités premium peuvent être coûteuses.

• GitLab CI/CD : Intégré directement dans GitLab, offrant un outil complet de gestion du cycle de vie DevOps.

  • Avantages : Prise en charge complète du cycle de vie DevOps, intégrée à GitLab, fonctionnalités de sécurité renforcées.
  • Inconvénients : Peut être complexe à mettre en place au départ, les fonctionnalités premium peuvent être coûteuses.

Configuration de flux de travail automatisés

La configuration d'un pipeline CI/CD implique de définir la séquence d'étapes pour créer, tester et déployer l'application. Cela se fait généralement via un fichier de configuration (par exemple jenkins-pipeline.groovy, .travis.yml, .github/workflows/main.yml) qui cohabite avec le code de l'application.

Voici un exemple de workflow GitHub Actions qui exécute des tests automatisés à chaque poussée vers la branche principale :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Une fois que le workflow GitHub Actions a exécuté avec succès la suite de tests, il peut déployer l'application sur une plate-forme d'hébergement cloud comme AWS ou Azure. Cela se fait en ajoutant des étapes supplémentaires au flux de travail qui s'authentifient auprès du fournisseur de cloud et exécutent les commandes de déploiement.

Meilleures pratiques pour les pipelines CI/CD

1. Gardez les pipelines efficaces : Assurez-vous que vos pipelines CI/CD sont optimisés pour la vitesse et la fiabilité.

• Dépendances du cache : Utilisez des mécanismes de mise en cache pour accélérer les processus de construction et de test en réutilisant les dépendances.
• Optimiser les étapes de création : Décomposez le processus de création en étapes plus petites et gérables pour réduire la complexité et améliorer le dépannage.
• Paralléliser les workflows : Exécutez des tâches indépendantes en parallèle pour réduire le temps d'exécution global du pipeline.

2. Surveiller et entretenir les pipelines : Surveillez régulièrement vos pipelines CI/CD pour détecter les goulots d'étranglement en matière de performances et entretenez-les pour garantir leur bon fonctionnement.

• Journaliser et surveiller : Mettez en œuvre des outils de journalisation et de surveillance pour suivre les performances et l'état de vos pipelines.
• Audits réguliers : Effectuez des audits réguliers de vos pipelines pour identifier et corriger les inefficacités.

3. Meilleures pratiques de sécurité : Intégrez des contrôles de sécurité dans vos pipelines CI/CD pour garantir que le code est sécurisé avant qu'il n'atteigne la production.

• Analyse statique : Utilisez des outils d'analyse de code statique pour détecter les vulnérabilités de sécurité et les problèmes de qualité du code dès le début du processus de développement.
• Gestion des secrets : Gérez les informations sensibles telles que les clés API et les informations d'identification en toute sécurité, en vous assurant qu'elles ne sont pas exposées dans la base de code ou les journaux.

4. Flux de travail collaboratifs : Favorisez une culture de collaboration en impliquant les membres de l'équipe dans le processus CI/CD.

• Révisions de code : Assurez-vous que toutes les modifications de code sont examinées par des pairs avant de les fusionner dans la branche principale.
• Boucle de rétroaction : Créez une boucle de rétroaction dans laquelle les développeurs reçoivent des commentaires immédiats des pipelines CI/CD et peuvent agir en conséquence rapidement.

En suivant ces pratiques, vous pouvez créer des pipelines CI/CD robustes et fiables qui rationalisent le processus de livraison de logiciels.

#8/8 : Gestion des conflits et des restaurations

Des conflits de fusion se produisent lorsque plusieurs modifications apportées à un projet se croisent, entraînant des incohérences. Des conflits peuvent être provoqués par plusieurs développeurs modifiant la ou les mêmes lignes de code ou par des modifications apportées à des fichiers renommés ou supprimés ou par des historiques de branche divergents. Cependant, il est nécessaire de gérer ces conflits en douceur afin de maintenir l’intégrité de la base de code.

Marqueurs de conflit :

# Start a new feature
git checkout develop
git pull origin develop
git checkout -b feature/payment-gateway

# Work on the feature
# Add Stripe integration code to payment.js
git add src/payment.js
git commit -m "Add Stripe payment integration"

# Add payment form
git add src/components/PaymentForm.jsx
git commit -m "Add payment form component"

# Add tests
git add tests/payment.test.js
git commit -m "Add payment integration tests"

# Ready to merge
git checkout develop
git pull origin develop
git merge feature/payment-gateway
git push origin develop

Meilleures pratiques pour éviter et résoudre les conflits

1. Communiquez fréquemment : Des lignes de communication ouvertes au sein de l'équipe peuvent éviter les chevauchements de travail qui conduisent à des conflits.
2. Tirez régulièrement : Extrayez régulièrement les modifications de la branche principale pour maintenir votre branche à jour et minimiser les différences.
3. Petits commits : Des commits plus petits et plus fréquents facilitent l'identification des conflits.
4. Tests automatisés : Exécutez fréquemment des tests automatisés pour détecter les problèmes rapidement.
5. Utilisez judicieusement les branches : Séparez le travail en branches de fonctionnalités et évitez de travailler directement sur la branche principale.
6. Choisissez la bonne stratégie : Utilisez Revert pour les succursales publiques et réinitialisez pour les modifications locales.

Actions étape par étape pour résoudre les conflits

1. Identifier les conflits :

# Create release branch
git checkout -b release/1.0.0 develop

# Update version
npm version 1.0.0
git add package.json
git commit -m "Bump version to 1.0.0"

# Fix last-minute issues
git add src/bugfix.js
git commit -m "Fix payment validation bug"

# Merge to main and develop
git checkout main
git merge release/1.0.0 --no-ff
git tag -a v1.0.0 -m "Version 1.0.0"
git push origin main --tags

git checkout develop
git merge release/1.0.0 --no-ff
git push origin develop

2. Choisissez une stratégie de résolution : En choisissant une stratégie de résolution, vous devez vous assurer d'accepter les modifications entrantes et de conserver les modifications actuelles documentées. Combinez les deux changements et créez une nouvelle solution pour cela.

3. Résolution manuelle :

# Create hotfix branch
git checkout -b hotfix/1.0.1 main

# Fix the critical bug
git add src/payment.js
git commit -m "Fix payment processing timeout"

# Update version
npm version patch
git add package.json
git commit -m "Bump version to 1.0.1"

# Merge to main and develop
git checkout main
git merge hotfix/1.0.1 --no-ff
git tag -a v1.0.1 -m "Version 1.0.1"
git push origin main --tags

git checkout develop
git merge hotfix/1.0.1 --no-ff
git push origin develop

Stratégies de restauration

Parfois, malgré tous nos efforts, les choses tournent mal. Savoir comment annuler les modifications en toute sécurité est l'un des facteurs qui maintiennent votre projet stable et en ordre.

Techniques pour annuler en toute sécurité les modifications lorsque cela est nécessaire

1. Revenir aux validations : Utilisez les outils de contrôle de version pour revenir à une validation précédente. Cette méthode ne perturbe pas les autres développeurs et vous permet d'annuler les modifications tout en préservant l'historique.

# Start new feature
git checkout -b feature/shopping-cart

# Make changes and commit regularly
git add src/cart.js
git commit -m "Add shopping cart base structure"

git add src/components/CartItem.jsx
git commit -m "Add cart item component"

# Push to remote and create PR
git push origin feature/shopping-cart

# After PR review, merge via GitHub UI

2. Opérations de réinitialisation : Si une branche a divergé de manière significative, sa réinitialisation à un bon état connu peut être efficace. À utiliser avec prudence sur les branches partagées.

# After PR is merged to main
git checkout main
git pull origin main

# Deploy
npm run deploy

# If issues found
git checkout -b fix/cart-total
git add src/cart.js
git commit -m "Fix cart total calculation"
git push origin fix/cart-total
# Create PR for the fix

3. Sauvegardes : Conservez toujours des sauvegardes avant d'apporter des modifications importantes pour vous assurer de disposer d'un point de récupération. Ceci est utilisé comme une action immédiate pour les appels d'urgence

# Create short-lived branch
git checkout -b feature/add-to-cart-button

# Work fast (1-2 days max)
git add src/components/AddToCart.jsx
git commit -m "Add to cart button component"

# Regular integration to main
git checkout main
git pull origin main
git merge feature/add-to-cart-button
git push origin main

4. Utiliser reflog pour la récupération :

// Feature toggle implementation
const FEATURES = {
  NEW_CHECKOUT: process.env.ENABLE_NEW_CHECKOUT === 'true',
  DARK_MODE: process.env.ENABLE_DARK_MODE === 'true',
};

// Usage in code
if (FEATURES.NEW_CHECKOUT) {
  return <NewCheckoutProcess />;
} else {
  return <LegacyCheckout />;
}

5. Baliser les versions : Baliser les versions stables afin que vous puissiez facilement revenir à un état de fonctionnement connu.
6. Basculements de fonctionnalités : Implémentez des basculements de fonctionnalités pour désactiver les fonctionnalités problématiques sans nécessiter une restauration complète.

En suivant ces pratiques et en comprenant les outils disponibles, les équipes peuvent gérer efficacement les conflits et gérer les restaurations si nécessaire. N'oubliez pas qu'il vaut toujours mieux prévenir que guérir, mais disposer de procédures de restauration solides fournit un filet de sécurité lorsque des problèmes surviennent.

Conclusion

L'utilisation des meilleures pratiques de contrôle de version dans les équipes React est importante pour assurer le bon fonctionnement et la bonne collaboration. Cependant, pour vous assurer que vous ne rencontrez aucun problème dans votre domaine de codage, il est essentiel de choisir le bon système de contrôle de version et de mettre en place de bonnes méthodes de branchement, des messages de validation clairs et des systèmes CI/CD solides. Chaque partie contribue à garantir la stabilité et la qualité de votre base de code.

Nous avons examiné l'importance d'utiliser Git, de configurer les workflows avec Git Flow, GitHub Flow et Trunk-Based Development, ainsi que les meilleures façons de gérer les dépendances et les fichiers de configuration. Nous avons également parlé de la façon de gérer les conflits et les restaurations, de la valeur des révisions de code et des demandes d'extraction, ainsi que de la nécessité d'une documentation complète et d'une bonne communication.

En suivant ces bonnes pratiques, les équipes React peuvent mieux travailler ensemble pour améliorer la qualité du code et rendre le processus de développement plus fluide, ce qui pourrait conduire à des résultats de projet plus réussis. Quel que soit votre niveau de développeur, expérimenté ou débutant avec React, ces conseils vous aideront à gérer le contrôle de version et à créer un environnement de développement plus unifié et efficace.

Continuez à coder ! ?

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!