En tant que développeur React freelance, je travaille avec beaucoup de clients sur leurs projets React ces jours-ci. Chaque fois que je reçois une demande dans ma boîte de réception, je réponds généralement avec le même modèle d'email que j'appelle la liste de contrôle freelance pour les développeurs React.

Essentiellement, cette checklist rend votre onboarding en tant que développeur React freelance plus fluide lorsque vous entrez dans un nouveau projet et une nouvelle équipe, parce qu'avant qu'une entreprise puisse vous embaucher en tant que développeur React freelance, les deux parties doivent parler de cette checklist pour aligner leurs exigences.

Ici, je veux partager avec vous les éléments de cette checklist plus en détail - que vous soyez un freelance React sur site/à distance qui cherche un emploi ou une entreprise qui veut embaucher un freelance React.

Liste de contrôle pour les freelances React

Il y a toujours quelques détails que je veux connaître en tant que freelance avant de travailler avec une entreprise, comme par exemple :

  • Quel est mon rôle dans le projet ?
  • Quelle est la date limite/le jalon du projet ?
  • Quels sont les antécédents de l'entreprise ?

Cependant, deux des questions les plus importantes pour moi et d'autres freelances sont les suivantes :

S'agit-il d'un projet entièrement nouveau ?

De nombreux freelances considèrent cela comme un avantage, car ils peuvent être plus créatifs sur la manière d'architecturer le projet et sur les bibliothèques qu'ils choisissent, tout en évitant le code hérité dans le frontend.

Cependant, ce n'est pas toujours le cas. Ce que j'ai vu le plus souvent dans ma carrière de freelance à distance, ce sont des projets en cours qui ont rencontré des difficultés et ont demandé de l'aide, soit parce qu'ils manquaient d'expertise en React, soit parce qu'ils manquaient de développeurs frontaux.

Quel type d'équipe ?

En fonction du freelance, vous pouvez préférer travailler seul ou en équipe. Travailler seul peut signifier deux choses : Travailler littéralement seul sur un MVP ou travailler seul en tant que développeur frontend mais dans une pile technologique verticale avec des ingénieurs backend, des designers, etc.

Il peut également arriver que l'entreprise qui souhaite vous engager en tant que freelance intègre plus d'un freelance dans son projet. Dans ce cas, il est toujours bon de savoir qui est responsable du frontend, car si ce sont uniquement des freelances qui travaillent dessus, cela peut donner lieu à de longues discussions.

Liste de contrôle pour la communication en free-lance

Lorsque je travaille avec une nouvelle entreprise sur son projet React, j'essaie toujours d'établir cinq canaux de communication :

Communication instantanée : L'importance des outils en temps réel

Temps réel : des outils comme Slack permettent de discuter de sujets en temps réel avec les parties prenantes du projet. C'est aussi le moyen de discuter de la fontaine à eau si vous aimez passer du temps avec l'équipe dans le cas d'un projet à long terme. Quoi qu'il en soit, si vous souhaitez discuter d'un sujet, ce type de canal est le meilleur. Cependant, s'il s'agit de tâches spécifiques (et que la question n'est pas super urgente), le gestionnaire de tâches est le meilleur endroit.

Gestion des tâches : Un canal asynchrone pour une meilleure traçabilité

Gestionnaire de tâches : La communication dans un gestionnaire de tâches comme Trello est plus asynchrone que le canal de communication en temps réel, mais cela aide vraiment à rester dans le sujet pour une tâche spécifique. En outre, même si les tâches sont terminées un jour, les parties prenantes du projet ont toujours une référence au passé, qu'il s'agisse de s'y référer lors d'une discussion ou de rechercher les raisons pour lesquelles certaines décisions ont été prises.

Illustration d'un tableau Kanban minimaliste, avec quatre colonnes : Backlog, Doing, Review, et Done. Chaque colonne contient des cartes de tâches attribuées à différents développeurs. Le tableau montre l'avancement des tâches : certaines sont en attente, d'autres en cours, en revue, ou terminées.

Pull Requests : Un lien entre les tâches et le code

Pull Requests : Une fois qu'une tâche est terminée, les PR sont utilisées pour les revues de code. Même s'il n'y a pas toujours de revue de code, la PR peut être utilisée comme référence pour la tâche dans le gestionnaire de tâches. Vice versa, la tâche doit être liée à la PR.

E-mails : Un canal de communication réservé aux sujets importants

Le courrier électronique : Personnellement, j'essaie d'utiliser les conversations par courrier électronique le moins possible et seulement pour les sujets plus importants qui doivent être discutés avec les parties prenantes situées plus haut dans la chaîne de commandement (par exemple, le PDG, le PO). La plupart du temps, ces personnes sont dans le canal de communication en temps réel, de sorte que le courrier électronique n'est utilisé que pour l'expérience d'intégration et la facturation.

Réunions : Un incontournable pour les freelances

Oui, même si vous êtes freelance, il y aura des réunions ! En fonction de la quantité de travail que vous effectuez pour votre client, les réunions seront plus fréquentes pour discuter des tâches passées ou à venir. Dans mon cas, j'ai eu des clients avec des réunions hebdomadaires, bihebdomadaires et mensuelles. En tant qu'indépendant, je ne participe généralement pas aux réunions quotidiennes.

En tant qu'indépendant travaillant pour une entreprise, vous devriez être invité à tous ces canaux dès le départ. Si vous travaillez avec une grande entreprise, vous serez de toute façon bombardé d'invitations. Par conséquent, si vous ne voulez pas vous retrouver dans le VPN et autres, demandez à l'avance à votre client dans quelle mesure il est nécessaire d'intégrer les free-lances dans son infrastructure.

Liste de contrôle du flux de travail en tant que freelance React

Si vous entrez dans une équipe établie, elle aura déjà son propre flux de travail et vous devrez vous y habituer. Cela va du kanban au scrum, des revues de code à l'absence de revues de code, de la poussée sur le master aux branches de fonctionnalités. Cependant, si vous pouvez changer quelque chose - ce qui était souvent le cas pour moi - ou si vous êtes le premier développeur sur le MVP, j'ai une petite liste de conseils sur le flux de travail pour vous :

Doit-on faire du Kanban, du Scrum ou du Power Yoga ?

Si je travaille avec une petite équipe, je propose souvent Kanban pour son approche allégée. Par exemple, Trello est un outil de gestion de projet bien établi et bien connu. En ce qui concerne Kanban lui-même, il faut s'en tenir aux règles officielles : nombre de couloirs, nombre maximum d'éléments par développeur et par couloir, etc.

Faisons-nous des revues de code ?

Si vous ne travaillez pas seul, oui. Si vous avez la possibilité de mettre en place des revues de code pour votre équipe, faites-le. Cela aidera toute l'équipe à comprendre le code de chacun, à trouver les bogues et à discuter des causes et des effets lors de l'introduction de quelque chose de nouveau dans la base de code.

Faisons-nous des branches de fonctionnalités ?

Si vous ne travaillez pas seul, oui. Le fait que tout le monde pousse sur les branches master/develop conduira automatiquement à des conflits. Si l'équipe ne connaît pas les branches de fonctionnalités, je leur indique ce tutoriel étape par étape.\

Diagramme minimaliste illustrant un workflow Git avec des branches. La branche principale 'Main' est représentée en haut, avec deux branches de fonctionnalité ('Feature A' et 'Feature B') qui en dérivent, se développent séparément, puis reviennent se fusionner dans la branche principale.


Parce que vous êtes un développeur React freelance, les entreprises veulent vous engager très probablement pour la partie frontend de leur application web. Cependant, cela ne signifie pas que tout ce que vous coderez pour ce client sera 100% React.

Vous devez vous considérer davantage comme un développeur en forme de T, car vous travaillez généralement avec une équipe dans une pile verticale qui encapsule la conception, le frontend, le backend, la base de données et l'entreprise.

Alors que la base de données est le plus souvent hors de votre champ d'action, vous interagirez probablement avec des designers UI/UX, des ingénieurs backend pour les exigences API, et d'autres parties prenantes business/tech telles que les POs/PMs/CTOs/CEOs.

Liste de contrôle UI/UX en tant que freelance React

L'une des questions les plus fréquentes : Dois-je faire en sorte que l'image soit belle ou que le pixel soit parfait ? Cela dépend souvent de la taille de l'entreprise qui vous engage. S'il y a un département UI/UX entier, il sera très probablement parfait au pixel près - ce qui signifie que vous recevrez des maquettes de l'équipe de conception et que vous devrez les faire correspondre à chaque pixel (marges, paddings, bordures, hauteurs, largeurs, etc.) en HTML et CSS.

En revanche, si vous travaillez avec un petit client, il peut arriver qu'il n'y ait pas de responsable de l'interface utilisateur et que l'on vous demande donc de la rendre agréable à regarder. Cependant, de la perfection au pixel près à l'esthétique, il y a tout un spectre. Il y a des entreprises qui se situent entre les deux et qui fournissent des maquettes, mais sans exiger une « traduction parfaite au pixel près en code ».

Où obtenir les maquettes pour votre projet ?

Si l'on vous demande de travailler avec des maquettes en tant que développeur web freelance, l'équipe de conception dispose généralement déjà des outils de son choix pour vous fournir les maquettes. Ces outils de conception vont de la simple réception d'un PDF avec des images à une application interactive complète (qui encapsule souvent l'UX en ayant également des interactions avec l'utilisateur). Les outils les plus courants avec lesquels j'ai eu le plaisir de travailler sont Zeplin, Invision ou Figma.

Comme je l'ai dit, cela dépend vraiment de l'entreprise qui vous engage en tant que freelance React et de ses ressources. Parfois, vous devez créer les maquettes avec le PDG lors d'une réunion, parfois vous obtenez des captures d'écran de leur ancienne application (ce n'est pas toujours la meilleure base, mais cela peut fonctionner avec des conseils), et parfois vous travaillez avec une équipe de conception à part entière qui a une solution prête pour chaque écran et interaction avec l'utilisateur.

Schéma de couleurs, polices et ressources : que faut-il utiliser ?

Si vous travaillez avec une équipe de conception, elle vous couvre. En général, un PDF ou un lien vers des lignes directrices en matière de conception vous indique une palette de couleurs et les polices de caractères à utiliser. En outre, un lien vers un système de stockage cloud (par exemple Google Drive) vous permettra d'accéder à toutes les ressources (logo, icônes, etc.). Toutefois, si vous ne disposez pas d'une équipe de conception ou d'un concepteur dédié, ces questions doivent être posées lorsque vous vous engagez en tant que développeur React freelance dans un nouveau projet.

Utilisation d'icônes internes ou personnalisées : que choisir ?

Il ne s'agit peut-être pas de la première conversation d'intégration, mais il s'agit certainement d'un point dont vous devez parler avec votre client. Là encore, si vous travaillez avec une équipe de conception (ou si vous utilisez une bibliothèque d'interface utilisateur populaire), les icônes sont généralement déjà présentes.

Toutefois, si vous travaillez avec une petite entreprise et que ses exigences imposent l'utilisation d'icônes personnalisées (ce qui n'est pas recommandé en raison du surcroît de travail, mais peut arriver pour des domaines très spécialisés), quelqu'un doit créer ces icônes. Quelle que soit la personne qui crée les icônes, sachez que toutes les icônes doivent répondre à un ensemble d'exigences communes (taille, schéma de couleurs, marges, etc.).

Liste de contrôle des API en tant que freelance React

En tant que développeur freelance React, il est essentiel de comprendre le type d'API backend avec lequel vous allez interagir, car cela impacte directement la manière dont vous allez connecter et optimiser votre frontend pour répondre aux besoins du projet.

Comprendre et travailler avec les API backend en tant que développeur freelance React

Lorsque vous êtes embauché en tant que développeur frontend freelance, le type de backend auquel vous avez affaire va du « backend existant qui a reçu une nouvelle API REST pour rendre les choses compatibles avec le web » au « backend nouvellement créé avec une API REST ou même GraphQL ». Le plus souvent, le backend n'est pas un projet fini, car il évolue souvent en fonction des exigences du frontend (par exemple, modification des API, introduction de nouvelles API, division des API, optimisation des performances pour les écrans à forte charge, API spécialisées pour la pagination basée sur le décalage/le curseur, etc.)

Ce qui est important pour vous en tant que développeur React freelance, c'est l'API. Votre première question devrait donc être la suivante : Quel type d'API votre backend propose-t-il ? Personnellement, j'aime travailler avec des API GraphQL, mais comme ce n'est pas (encore) le statu quo, la probabilité de travailler avec une API REST est assez élevée - ce qui me convient !

Quoi qu'il en soit, aucune API REST n'est vraiment REST comme le proposait Fielding. C'est pourquoi il est toujours bon de savoir si l'équipe backend connaît les principes de REST lorsqu'elle crée ses API et de connaître la différence entre RESTful et RESTish. J'ai travaillé avec des « API REST » qui contenaient des ressources inutilement imbriquées, des conventions de nommage obscures et uniquement des méthodes HTTP GET/POST. Savoir cela avant de s'engager dans un projet en tant que développeur frontend est une bonne indication pour éviter des luttes inutiles en connectant votre frontend au backend.

Diagramme illustrant la correspondance entre les opérations CRUD (Create, Read, Update, Delete) et les méthodes HTTP (POST, GET, PUT, DELETE), appliquées à une ressource RESTful comme un article. Chaque opération CRUD est associée à une méthode HTTP et à une action spécifique sur la ressource, par exemple 'create article', 'get articles', 'update article', et 'remove article

Où trouver la documentation de l'API en tant que développeur freelance ?

Si vous travaillez avec GraphQL, le schéma (qui est généré automatiquement) vous fournit tout ce dont vous avez besoin en tant que développeur indépendant. En revanche, si vous travaillez avec REST, vous devez vous aligner avec les ingénieurs du backend sur un canal de communication pour la documentation de l'API. J'ai connu toutes ces situations, mais la dernière serait l'un des meilleurs cas :

  • API à la demande sur Slack en demandant au(x) développeur(s)/équipe de backend
  • API sur Github en vérifiant le dépôt GitHub du backend
  • API sur Swagger, etc.

Alors que la plupart des backends sur lesquels vous travaillerez sont alimentés par REST, en fonction du projet, il est possible que vous ayez d'autres sources pour vos données telles que GraphQL (par exemple, backend personnalisé, Hasura), BaaS (par exemple, Firebase), ABI (par exemple, Ethereum Smart Contract) dont vous devez être conscient.

Liste de contrôle pour le frontend en tant que freelance React

Comme mentionné, il est toujours bon d'être un développeur frontend en forme de T, car vous pouvez travailler sur plus de choses que le seul frontend. Par exemple, si un client veut voir un MVP de votre part, vous serez très probablement responsable de plus que React. Dans mon cas, j'ai eu des clients pour lesquels j'ai dû mettre en place un service d'authentification, configurer le CI/CD, ou j'ai dû câbler leur base de données dans une couche GraphQL. Jaugez donc toujours votre degré de responsabilités dans ce nouveau projet.

Avez-vous déjà une idée des bibliothèques que vous souhaitez utiliser ? Cette question peut se poser selon que le projet démarre avec vous en tant que freelance frontend ou qu'il est déjà en cours avec une équipe interne qui travaille dessus. En général, cette question permet de réduire la portée du projet.

En outre, la plupart des entreprises qui me contactent pour un MVP demandent déjà ce qu'il faut utiliser pour leur projet dans leur premier courriel, ce qui vous donne l'occasion de montrer que vous connaissez l'écosystème de la bibliothèque React. En revanche, si une équipe travaille déjà sur le projet, cette question vous permet de connaître la pile technologique.

Avez-vous déjà défini les bibliothèques à utiliser pour votre projet ?

Avez-vous déjà une idée des bibliothèques que vous souhaitez utiliser ? Cette question peut se poser selon que le projet démarre avec vous en tant que freelance frontend ou qu'il est déjà en cours avec une équipe interne qui travaille dessus. En général, cette question permet de réduire la portée du projet.

En outre, la plupart des entreprises qui me contactent pour un MVP demandent déjà ce qu'il faut utiliser pour leur projet dans leur premier courriel, ce qui vous donne l'occasion de montrer que vous connaissez l'écosystème de la bibliothèque React. En revanche, si une équipe travaille déjà sur le projet, cette question vous permet de connaître la pile technologique.

Quel niveau de personnalisation est nécessaire pour votre projet ?

Quel est le degré de personnalisation nécessaire ? C'est l'une des questions les plus importantes pour moi, car chaque fois qu'un client demande un devis pour un nouveau projet, je lui demande toujours s'il veut utiliser des éléments prêts à l'emploi (par exemple une bibliothèque d'interface utilisateur) ou construire ses propres éléments (par exemple des composants d'interface utilisateur personnalisés). Retour en arrière : La plupart des entreprises ne veulent pas dépenser leur budget pour des composants d'interface utilisateur personnalisés - parce que c'est souvent un projet mensuel en soi - mais j'ai eu un cas où c'était en effet une exigence.

Dans le cas des bibliothèques d'interface utilisateur, la bibliothèque d'interface utilisateur la plus utilisée dans React est Material UI ces jours-ci. Le client doit décider s'il vaut la peine d'utiliser une bibliothèque à l'apparence commune (s'il n'y a pas beaucoup de budget pour la personnaliser). De plus, si le client engage une équipe de freelances frontend, où la plupart des développeurs sont des développeurs juniors, il est fort probable qu'ils aient déjà utilisé Material UI et qu'ils soient productifs dès le début. En revanche, le choix d'une bibliothèque moins populaire comme Chakra UI donne à votre projet un caractère plus spécial et à de nombreux freelances quelque chose de nouveau à explorer.

Diagramme représentant un spectre entre deux extrêmes : 'Off The Shelf' à gauche et 'Customization' à droite. Le côté 'Off The Shelf' est associé à une faible charge de travail et un aspect visuel similaire à d'autres applications, tandis que le côté 'Customization' implique une charge de travail élevée mais offre un look et une expérience utilisateur plus spécialisés.

Il y a toujours un potentiel de discussion au-delà de l'interface utilisateur et des bibliothèques de graphiques. D'autres questions courantes sont : utilisons-nous une bibliothèque de gestion d'état ?, Comment récupérons-nous les données ? et Devrions-nous utiliser TypeScript ?.

Il convient également de noter que plusieurs des entreprises avec lesquelles je travaille me contactent avec une licence pour une bibliothèque React à code source fermé. Je fais de mon mieux pour les éloigner de cette voie, car mes expériences de travail avec des bibliothèques à code source fermé ne sont pas les meilleures et en tant que freelance, je préfère étendre mes connaissances en travaillant avec des bibliothèques open source couramment utilisées.

Enfin, même si chaque développeur sait que cela doit être fait, la question est : dans quelle mesure faut-il tester ? En demandant dans quelle mesure vous montrez l'intention que vous souhaitez tester, j'ai travaillé avec plusieurs entreprises qui considéraient les tests comme une réflexion après coup et souhaitaient plutôt terminer le projet dans les délais. Cela dépend donc vraiment du client avec lequel vous travaillez.

En conclusion, j'espère que cette liste de contrôle complète pour les freelances front-end vous aidera à embaucher un freelance React en tant qu'entreprise, à décrocher un emploi en tant que freelance React, ou simplement à améliorer l'expérience d'intégration pour les deux parties.