Flux de travail et processus

Combinaisons technologiques typiques

Lorsque vous créez un site web, vous utilisez une combinaison de différentes technologies, souvent appelée pile technologique (tech stack en anglais). Plus un site devient grand et complexe, plus la pile technologique s'étoffe. Elle peut être très simple pour une démo regardée par vous et quelques collègues, mais la pile d'un site en production, même apparemment simple, peut être bien plus complexe qu'il n'y paraît, car il faut :

• Charger rapidement (c'est l'objectif de la performance).
• Gérer un grand nombre d'utilisateurs·rices simultanément (il doit passer à l'échelle).
• Être bien conçu pour que les utilisateur·ice·s accèdent facilement aux informations et services.
• Être facile à maintenir et à faire évoluer en équipe.

À un niveau très général, une pile technologique d'application web pourrait ressembler à ceci :

Front-end
HTML, CSS, JavaScript
|
Back-end
Node.js, .NET, PHP, Python ou un autre langage côté serveur
|
Base de données
MySQL, Postgres, MongoDB ou une autre base de données
|
Serveur web
Le vôtre, construit autour d'un produit serveur comme Apache, ou un service comme Netlify

Sur MDN, nous nous concentrons surtout sur la partie front-end, mais même celle-ci se divise en de nombreux éléments. Par exemple :

• Vous utiliserez probablement un framework JavaScript (comme React) pour définir les composants qui composent l'interface utilisateur.
• Le framework utilisera sans doute un langage de template (comme Mustache ^(angl.)) pour définir la structure HTML et inclure dynamiquement du contenu variable.
• Vous ajouterez des styles via du CSS compatible avec le framework. Cela peut être du CSS pur, un framework CSS (comme Tailwind ^(angl.)) ou un préprocesseur (comme Sass ^(angl.)).
• Un projet JavaScript doit inclure des tests pour s'assurer que les ajouts de code ne cassent rien. Les tests sont généralement réalisés avec un framework de test (comme Jest ^(angl.)).
• Les sites plus importants utilisent un outil de packaging/build (comme Parcel ^(angl.)) pour améliorer la performance, réduire la taille des fichiers, supprimer les composants inutilisés, etc.
• Et ainsi de suite.

Il existe aussi des outils hors de la pile technique elle-même pour vous aider à la gérer ou à créer des ressources pour le site :

• Outils de planification pour organiser le projet dans sa globalité (comme Miro ^(angl.)).
• Systèmes de gestion de versions (VCS). Vous utiliserez probablement un VCS basé sur git ^(angl.), comme GitHub ^(angl.).
• Logiciels de design graphique/interface (comme Figma ^(angl.) ou Canva ^(angl.)).
• Outils de gestion de projet comme Trello ^(angl.) ou Asana ^(angl.).

Cela fait beaucoup d'informations à assimiler. Notre conseil : ne paniquez pas ! Le but de cet article n'est pas de vous inquiéter en vous faisant croire que vous avez soudainement dix fois plus de choses à apprendre. Il s'agit simplement de vous donner une vision d'ensemble des projets web et de vous familiariser avec certains termes que vous croiserez.

Avec le temps, vous développerez des connaissances sur plusieurs de ces outils et technologies, mais vous ne serez pas expert·e en tout, et ce n'est pas nécessaire : c'est le rôle de l'équipe. Pour l'instant, vous faites exactement ce qu'il faut en apprenant les compétences de base comme HTML, CSS et JavaScript. Les autres outils et spécialisations viendront plus tard dans votre parcours.

Métiers

Dans une équipe de développement web, il existe de nombreux métiers différents ; il est utile de comprendre ce que chacun implique :

Chef·fe de produit

Responsable de l'ensemble du site web du point de vue du produit : comment le produit se comporte-t-il sur le marché, par rapport à ses concurrents ? Quels sont ses points forts et ses faiblesses ? Quelles nouvelles fonctionnalités le public cible demande-t-il, et lesquelles sont les plus prioritaires ? Quels sont les principaux critères de succès du site web, et comment les nouvelles fonctionnalités récentes ont-elles aidé à atteindre ces critères ? Le·la chef·fe de produit collecte des données et rédige des rapports pour aider l'équipe à comprendre l'efficacité de son travail et à prioriser les tâches futures.

Chef·fe de projet

Responsable de l'organisation du travail que l'équipe doit accomplir. Le·la chef·fe de projet crée un plan de projet avec des tâches priorisées et des dates d'échéance, assigne le personnel à chaque tâche, organise des réunions régulières pour vérifier si les objectifs de progression sont atteints et faire remonter les problèmes, et ajuste le plan si nécessaire.

Designer expérience utilisateur (UX)

Responsable de la compréhension des besoins du public cible du produit et de la conception du flux/expérience du produit afin que ces besoins soient satisfaits de la manière la plus efficace possible. Les questions UX typiques sont : « où devons-nous diriger l'utilisateur·ice en premier lorsqu'il·elle arrive sur notre page d'accueil ? » et « comment rendre l'inscription à un compte aussi facile et intuitive que possible ? ». Ce travail est souvent couplé à de la recherche utilisateur et à des tests pour mieux comprendre le public cible, ainsi qu'à la création de maquettes filaires pour communiquer les idées. Le·la designer UX est l'un·e des principaux·ales destinataires des rapports du·de la chef·fe de produit.

Designer graphique

Responsable du travail de conception visuelle sur le projet web. Les designers graphiques s'occupent de diverses disciplines comme la typographie, le choix des palettes de couleurs, la création d'icônes et d'autres éléments graphiques, et la création de maquettes de site web à partir des maquettes filaires du·de la designer UX.

Développeur·euse front-end

C'est (probablement) ce que vous visez si vous lisez ceci ! Les développeur·euse·s front-end utilisent HTML, CSS et JavaScript pour créer la partie visuelle du site web avec laquelle les utilisateur·ice·s interagissent, donnant vie aux maquettes fonctionnelles et visuelles créées par les designers UX et graphiques.

Développeur·euse back-end

Responsable des parties non visuelles du site web. Il·elle écrit le code back-end pour demander des données internes, générer des pages HTML à partir de modèles et traiter les données externes soumises par les utilisateur·ice·s. Il·elle gère aussi la configuration du serveur web, la sécurité du site, etc.

Développeur·euse full-stack

Prend en charge à la fois les tâches de développement front-end et back-end.

Ingénieur·e assurance qualité (QA)

Responsable des tests des nouvelles fonctionnalités pour s'assurer qu'elles fonctionnent correctement et du signalement des bogues, en communiquant avec les développeur·euse·s pour les aider à prioriser les corrections nécessaires.

Spécialiste du contenu/rédacteur·ice technique

Responsable de la qualité du contenu textuel du site web pour le public cible. Cela inclut la structure de l'information et sa navigation, les libellés de l'interface utilisateur, les articles de blog, les textes marketing et la documentation produit.

Métiers moins courants

D'autres métiers moins courants incluent :

Chercheur·euse utilisateur·ice

Les équipes plus importantes ont souvent un·e chercheur·euse dédié·e à la recherche et aux tests utilisateur·ice·s.

Spécialiste de l'optimisation pour les moteurs de recherche (SEO)

Analyse le contenu et la structure du site web et effectue des modifications pour le rendre plus visible dans les résultats pertinents des moteurs de recherche. Voir SEO pour plus d'informations.

Phases d'un projet technique

Un projet technique typique peut se dérouler ainsi :

1. Chef·fe de produit : identification d'un nouvel ensemble d'exigences utilisateur·ice·s pour le site web.
2. Équipe projet : discussion pour décider si ces exigences peuvent être satisfaites en ajoutant une nouvelle fonctionnalité au site web.
3. Chef·fe de projet et équipe : définition des tâches individuelles nécessaires à la création de la nouvelle fonctionnalité, puis création d'un processus de gestion pour les suivre.
4. Designer UX : conception du flux de travail pour la nouvelle fonctionnalité et réalisation d'une maquette filaire pour situer son emplacement sur le site.
5. Designer graphique : réalisation d'une maquette illustrant l'apparence de la fonctionnalité sur le site web, avec les polices et la palette de couleurs choisies.
6. Spécialiste du contenu : rédaction du texte d'interface utilisateur requis par la fonctionnalité, ainsi que de la documentation nécessaire.
7. Développeur·euse back-end : création des systèmes nécessaires pour stocker et gérer en toute sécurité les données qui alimentent la fonctionnalité.
8. Développeur·euse front-end : développement de la fonctionnalité interactive à partir des maquettes graphiques et connexion au back-end pour récupérer les données nécessaires.
9. Ingénieur·e QA : test minutieux de la nouvelle fonctionnalité et rédaction d'un rapport détaillé sur les problèmes rencontrés.
10. Développeur·euse·s : correction des bogues jugés suffisamment graves pour bloquer la mise en ligne de la fonctionnalité.
11. Équipe projet : mise en ligne de la fonctionnalité sur le site web une fois les bogues bloquants corrigés et le projet validé.

Il s'agit d'une vue simplifiée : d'autres phases existent autour de la mise en œuvre de la fonctionnalité, et elles ne seront pas forcément toutes réalisées dans l'ordre indiqué, mais cela vous donne une idée de ce qui est impliqué.

Processus de gestion de projet

Un·e chef·fe de projet utilisera un certain type de processus pour gérer le projet web, suivre l'avancement des différentes tâches, s'assurer qu'elles sont réalisées dans le bon ordre et à temps, etc. Les deux principaux types de processus sont :

Cascade

Désigne la gestion d'un projet en phases claires et fixes, où chacune dépend de la précédente, et où peu de changements d'exigences sont anticipés. En général, un seul grand résultat est livré à la fin du projet. La gestion de l'équipe tend à être plus bureaucratique, avec moins d'autonomie.

• Les projets en cascade ont tendance à être mieux spécifiés au départ et à avoir moins de dérive des objectifs (ajout d'exigences en cours de projet). De plus, les livraisons de produits plus importantes et moins fréquentes sont plus faciles à gérer en termes de planification des sorties, de marketing, de formation et de documentation.
• Cependant, le modèle en cascade est moins flexible, et les changements se produisent beaucoup plus lentement. Attendre plusieurs mois pour une correction de bogue peut être frustrant.

Agile

Désigne la gestion d'un projet de manière plus flexible, où plusieurs phases peuvent avancer simultanément, et où plusieurs résultats plus petits sont livrés à différents jalons tout au long du projet. Les changements d'exigences sont attendus et peuvent être gérés en modifiant les priorités selon les besoins. Les équipes sont généralement plus autonomes.

• Les projets agiles sont flexibles et peuvent s'adapter plus facilement aux changements d'exigences. Il est aussi agréable d'avoir des livraisons plus fréquentes : les bogues sont corrigés plus rapidement, l'innovation est plus fréquente, et il y a toujours quelque chose à communiquer pour l'équipe marketing. Les équipes agiles parlent souvent d'amélioration continue.
• Cependant, il y a plus de risques de dérive des objectifs et de glissement des délais, les projets semblent souvent ne jamais être vraiment terminés, et il y a une pression constante pour livrer.

Scrum et kanban

Il existe un type spécifique de méthodologie agile appelé scrum, qui a un ensemble de règles fixes sur la façon dont un projet est mené. Par exemple :

• La personne responsable du scrum est appelée scrum master. Il s'agit souvent simplement du·de la chef·fe de projet sous un autre nom.
• Le travail à effectuer est divisé en cycles, appelés sprints, qui durent généralement deux semaines.
• Avant chaque sprint, les nouvelles tâches potentielles sont discutées, et si elles sont acceptées dans le sprint, elles sont placées dans un backlog.
• Les tâches sont extraites du backlog et passent par différentes phases jusqu'à leur achèvement, comme « en cours » et « en relecture ».
• Le·la scrum master organise de courtes réunions quotidiennes (stand-up meetings) où chacun·e parle de ses avancées et des éventuels problèmes rencontrés, afin de détecter rapidement les difficultés.
• À la fin de chaque sprint, le·la scrum master organise une réunion de rétrospective pour examiner ce qui a bien fonctionné, ce qui a moins bien fonctionné, et les leçons à tirer pour le sprint suivant.

Un autre type de méthodologie agile est appelé kanban, qui comporte moins de règles que scrum, n'utilise pas de sprints, et met davantage l'accent sur l'amélioration continue. Kanban est particulièrement utile pour gérer des processus continus qui n'ont pas de fin clairement définie, comme les tickets de support client.

Tableaux kanban

Des outils comme Trello et Asana proposent des visualisations qui montrent l'état d'avancement des différentes tâches d'un projet. On les appelle généralement tableaux kanban, bien qu'ils puissent servir à gérer différents types de processus, pas seulement kanban. Les tableaux kanban sont constitués de différentes colonnes, qui peuvent représenter différents statuts dans un projet scrum (« backlog », « à faire », « en cours », etc.), différents types de travail (« recherche », « conception », « développement », etc.) ou tout ce qui est utile à votre projet.

GitHub Projects est une autre bonne option d'outillage, et est gratuit à utiliser : il suffit de créer un compte GitHub.

S'exercer aux workflows de projet

Vous devriez vous renseigner sur les processus ci-dessus, et vous entraîner à suivre certains de vos projets professionnels ou personnels à l'aide d'un tableau kanban. Ne vous inquiétez pas d'utiliser une méthodologie scrum complexe : le kanban de base suffit pour le moment. Même en solo, il peut être intéressant de s'exercer au workflow suivant :

1. Créer des tâches.
2. Décider de leur taille ou de leur durée.
3. Prioriser les tâches.
4. Les ordonner avec des dates d'échéance.
5. Commencer à travailler sur différentes tâches.
6. Mettre à jour leur statut (« en cours », « bloqué », « terminé », etc.) au fur et à mesure de l'avancement.

Suivez l'avancement d'un projet complet du début à la fin : essayez avec votre propre site web ou un projet annexe. Essayez aussi de contribuer à un projet open source : beaucoup utilisent un processus de suivi du travail similaire à ce que nous avons décrit ci-dessus.

Voir aussi

• Qu'est-ce qu'une pile technologique et comment ça fonctionne ? ^(angl.), mongodb.com
• Structure d'équipe de développement web : rôles et processus ^(angl.), truemark.dev (2017)
• Agile contre Cascade ^(angl.), ProductPlan
• Qu'est-ce que Scrum ? ^(angl.), scrum.org

• Précédent
• Aperçu : Compétences générales
• Suivant