Je travaille en tant que développeur front-end depuis environ deux ans et j'ai participé à la création d'une grande variété de projets. L’une des leçons que j’ai apprises est que la collaboration entre différentes équipes de développeurs partageant le même objectif mais ayant des tâches et des responsabilités différentes n’est pas facile.
En consultation avec d'autres membres de l'équipe, designers et développeurs, j'ai créé un cycle de création de sites Web conçu pour de petites équipes (5-15 personnes). Il comprend des outils tels que Confluence, Jira, Airtable et Abstract. Dans cet article, je partagerai les fonctionnalités d'organisation du flux de travail.
Skillbox vous recommande : Cours pratique de deux ans .
Nous rappelons: pour tous les lecteurs de "Habr" - une remise de 10 000 roubles lors de l'inscription à n'importe quel cours Skillbox en utilisant le code promotionnel "Habr".
Pourquoi tout cela est-il nécessaire ?
L'équipe minimale nécessaire pour créer un site Web à partir de zéro est un concepteur, un programmeur et un chef de projet. Dans mon cas, l’équipe était constituée. Mais après la sortie de quelques sites, j'ai eu le sentiment que quelque chose n'allait pas. Parfois, nous ne comprenions tout simplement pas pleinement nos responsabilités et la communication avec le client laissait beaucoup à désirer. Tout cela a ralenti le processus et perturbé tout le monde.
J'ai commencé à travailler sur la résolution du problème.
Une recherche Google donne de bons résultats sur notre problème.
Afin de rendre le travail effectué plus visuel, j'ai créé un diagramme de flux de travail qui permet de comprendre comment le travail est effectué ici.
Cliquez sur l'image pour l'ouvrir en pleine résolution.
Buts et objectifs
L’une des premières techniques que j’ai décidé de tester a été le « modèle en cascade » (Waterfall). Je l'ai utilisé pour mettre en évidence des problèmes et comprendre comment les résoudre.
Problème : Le plus souvent, le client n'évalue pas le processus de création de site Web de manière modulaire, comme le font les développeurs. Il le perçoit comme un site classique, c'est-à-dire qu'il pense en termes de pages individuelles. Selon lui, les concepteurs et les programmeurs créent des pages individuelles les unes après les autres. En conséquence, le client ne comprend tout simplement pas ce qui suit pendant le processus lui-même.
Tâche : Cela ne sert à rien de convaincre le client du contraire, la meilleure option est de développer un processus modulaire de création d'un site Web au sein de l'entreprise sur la base d'un modèle page par page.
Les jetons et composants de conception universelle sont gérés à la fois par les développeurs et les concepteurs.
Problème : Il s’agit d’une situation courante à laquelle de nombreuses stratégies s’attaquent. Il existe de nombreuses solutions intéressantes, dans la plupart des cas il est proposé de créer un système de conception contrôlé par un guide de style/des générateurs de bibliothèques. Mais dans notre situation, ajouter un autre composant au processus de développement qui nous permettrait de gérer les niveaux d’accès des concepteurs n’était tout simplement pas possible.
Tâche : construire un système universel dans lequel les concepteurs, les développeurs et les gestionnaires peuvent travailler de manière synchrone sans interférer les uns avec les autres.
Suivi précis du développement
Problème : Bien qu'il existe de nombreux outils utiles pour suivre les problèmes et mesurer les progrès globaux, la plupart ne sont ni flexibles ni optimaux. L'outil peut être utile en permettant à l'équipe de gagner du temps qui serait normalement consacré aux questions et aux clarifications sur des tâches spécifiques. Cela facilite également la vie des managers en leur donnant une compréhension plus précise de l'ensemble du projet.
Tâche : créez un tableau de bord pour suivre la progression des tâches effectuées par les différents membres de l'équipe.
Trousse à outils
Après avoir expérimenté différents outils, j'ai opté pour l'ensemble suivant : Confluence, Jira, Airtable et Abstract. Ci-dessous, je vais vous révéler les avantages de chacun.
Confluence
Rôle de l'outil : centre d'information et de ressources.
L'espace de travail de Confluence est relativement facile à configurer, possède de nombreuses fonctionnalités, des intégrations avec différentes applications et propose des modèles individuels et personnalisables. Ce n'est pas une solution universelle, mais c'est idéal comme centre d'information et de ressources. Cela signifie que toute référence ou détail technique lié au projet doit être saisi dans la base de données.
L'outil vous permet de documenter correctement chaque composant et tout autre détail sur le projet.
Le principal avantage de Confluence est la personnalisation des modèles de documents. De plus, il peut être utilisé pour mettre en œuvre un référentiel unique de spécifications et de diverses documentations de projet, séparant les niveaux d'accès des participants. Désormais, vous n'avez plus à craindre d'avoir une ancienne version de la spécification sous la main, comme c'est le cas lorsque vous envoyez des documents par courrier électronique.
Plus d'informations sur l'outil .
Jira
Rôle de l'outil : suivi des problèmes et gestion des tâches.
Jira est un outil de planification et de gestion de projet très puissant. La partie principale de la fonctionnalité est la création de flux de travail personnalisables. Afin de gérer efficacement les problèmes (ce dont nous avons besoin), il convient de prêter une attention particulière à l'utilisation correcte du type de demande et du type de problème (type de problème).
Ainsi, pour s'assurer que les développeurs construisent des composants basés sur la conception correcte, ils doivent être avertis chaque fois que quelque chose change dans la conception. Dès que le composant est mis à jour, le concepteur doit ouvrir un ticket, désigner un développeur responsable, en lui attribuant le bon type de ticket.
Avec Jira, vous pouvez être sûr qu'absolument tous les participants au processus (je vous le rappelle, dans notre cas il y en a 5 à 15) reçoivent les tâches correctes qui ne se perdent pas et trouvent leur exécuteur testamentaire.
En savoir plus sur Jira .
Airtable
Rôle de l'outil : gestion des composants et tableau de progression.
Airtable est un mélange de feuilles de calcul et de bases de données. Tout cela permet de personnaliser le fonctionnement de tous les outils évoqués ci-dessus.
Exemple 1 : gestion des composants
Quant au générateur de guide de style, il n'est pas toujours pratique à utiliser - le problème est que les concepteurs ne peuvent pas le modifier. De plus, ce ne serait pas une bonne décision d'utiliser la bibliothèque de composants Sketch, car elle présente de nombreuses limitations. Très probablement, vous ne pourrez tout simplement pas utiliser cette bibliothèque en dehors du programme.
Airtable n'est pas parfait non plus, mais il est meilleur que de nombreuses autres solutions similaires. Voici une démo du modèle de table de gestion des composants :
Lorsqu'un développeur accepte un composant de conception, il évalue l'ABEM résultant en enregistrant le composant dans un tableau. Il y a 9 colonnes au total :
- Nom - le nom du composant selon le principe ABEM.
- Aperçu - C'est ici qu'est placée une capture d'écran ou une image du composant téléchargé à partir d'une autre source.
- Une page liée est un lien vers la page d'un composant.
- Composant enfant : un lien vers les composants enfants.
- Modificateur - vérifie la présence d'options de style et les définit (par exemple, actif, rouge, etc.).
- La catégorie de composants est une catégorie générale (texte, image promotionnelle, barre latérale).
- Statut de développement - l'avancement réel du développement et sa définition (terminé, en cours, etc.).
- Responsable : le développeur responsable de ce composant.
- Le niveau atomique est la catégorie atomique de ce composant (selon le concept de conception atomique).
- Les données peuvent être référencées dans le même tableau ou dans des tableaux différents. Relier les points évitera toute confusion lors de la mise à l’échelle. De plus, les données peuvent être filtrées, triées et modifiées sans aucun problème.
Exemple 2 : progression du développement de la page
Pour évaluer la progression du développement de la page, vous avez besoin d'un modèle créé spécifiquement à cet effet. La table peut répondre à la fois aux besoins de l'équipe elle-même et du client.
Toute information sur la page peut être marquée ici. Il s'agit d'une date limite, d'un lien vers le prototype InVision, d'une destination, d'un composant enfant. Il devient immédiatement évident que les opérations sont très pratiques à réaliser, tant en ce qui concerne la documentation et la mise à jour de la conception, qu'en ce qui concerne l'état du développement front-end et back-end. De plus, ces opérations sont effectuées simultanément.
Abstract
Rôle de l'outil : une source unique de contrôle de version pour les actifs de conception.
Abstract peut être appelé le GitHub pour les ressources dans Sketch, et il évite aux concepteurs d'avoir à copier et coller des fichiers. Le principal avantage de l’outil est qu’il fournit un référentiel de conception qui agit comme une « source unique de vérité ». Les concepteurs doivent mettre à jour la branche principale vers la dernière version de la mise en page approuvée. Après cela, ils doivent en informer les développeurs. Ceux-ci, à leur tour, ne devraient fonctionner qu’avec les ressources de conception de la branche principale.
Comme conclusion
Après avoir mis en œuvre le nouveau processus de développement et tous les outils mentionnés ci-dessus, la vitesse de notre travail a augmenté au moins deux fois. Ce n'est pas une solution parfaite, mais c'est une très bonne solution. Certes, pour que cela fonctionne, vous devez déployer beaucoup d'efforts - cela nécessite un « travail manuel » pour mettre à jour et maintenir le tout en état de fonctionnement.
Skillbox vous recommande :
- Cours pratique .
- Cours en ligne .
- Cours pratique de l'année .
Source: habr.com