Comment travailler efficacement avec le code frontend et backend
sont généralement divisés en un frontend et un backend distincts. Le frontend gère ce que l’utilisateur voit, tandis que le backend gère toute la logique et le traitement. Il s’agit d’une séparation naturelle des préoccupations que la plupart des plateformes utilisent simplement parce qu’elle fonctionne bien.
Cependant, lorsque vous apportez des modifications à votre application, vous devez souvent apporter des modifications à la fois au frontend et au backend. C’est là qu’interviennent les ingénieurs full-stack : des ingénieurs qui travaillent à la fois avec le frontend et le backend.
Travailler avec le frontend et le backend peut cependant être difficile, pour plusieurs raisons :
- Ils sont souvent écrits dans des langages différents : le frontend avec TypeScript et le backend avec Python
- Vous devez gérer les autorisations et l’authentification, ainsi que des défis tels que les erreurs CORS.
- Ils se trouvent dans des référentiels différents et sont déployés séparément.
Avec la sortie des agents de codage, travailler simultanément avec le code frontend et backend est devenu plus simple. Dans cet article, je vais vous donner un aperçu général de la façon dont je travaille au quotidien avec le code frontend et backend, et m’assurer que les deux systèmes s’intègrent de manière transparente.
Pourquoi travailler à la fois avec le frontend et le backend
La raison pour laquelle vous travaillez simultanément avec du code frontend et backend est simplement par nécessité. Supposons que vous souhaitiez ajouter une nouvelle fonctionnalité à votre application, permettant à un utilisateur de stocker ses conversations de chatbot IA et d’y accéder plus tard.
Cette fonctionnalité nécessite simplement des modifications à la fois dans le frontend et dans le backend. Vous devez mettre à jour le frontend pour afficher les conversations précédentes, et vous avez besoin du backend pour gérer le stockage et la récupération des conversations. Ainsi, vous n’avez pas la possibilité de travailler à la fois avec le code frontend et backend.
De plus, en tant qu’ingénieur, il est généralement plus efficace de travailler à la fois avec le frontend et le backend. Imaginez si vous deviez implémenter la fonctionnalité de conversations du chatbot IA et que vous travailliez uniquement sur le frontend. Vous devrez ensuite implémenter la partie frontend du cours, puis vous coordonner avec un autre ingénieur backend sur la manière de stocker les conversations. Il faudrait passer du temps à discuter :
- Le schéma de stockage des conversations
- Quelles données doivent être incluses ?
- Comment doit s’appeler le point de terminaison ?
Cela prend beaucoup de temps. Si vous avez déjà travaillé dans un environnement de génie logiciel processionnel, vous savez combien de temps cela prend.
Au lieu de cela, si vous effectuez le travail en solo, vous n’avez besoin d’aucune coordination et pouvez vous déplacer à une vitesse beaucoup plus élevée.
Techniques pour travailler efficacement avec le code frontend et backend
Dans cette section, je couvrirai certaines techniques que j’utilise pour travailler efficacement avec le code frontend et backend. Avec la sortie d’un agent de codage super efficace, cela est devenu beaucoup plus simple et vous n’avez pas besoin d’avoir une vaste expérience du code front-end et back-end pour être efficace.
Utiliser les espaces de travail
Les espaces de travail sont une fonctionnalité incroyablement puissante lorsque vous travaillez dans plusieurs référentiels. Vous pouvez le faire avec le curseur en utilisant « Ajouter un espace de travail » ou avec n’importe quel outil CLI en pointant simplement l’agent vers les référentiels avec lesquels vous souhaitez travailler. Désormais, le modèle aura le contexte des deux référentiels pertinents et pourra ainsi implémenter une solution full-stack en une seule fois.
Les espaces de travail sont incroyables. Avant de le découvrir, je travaillais avec deux onglets Curseur distincts, un avec le code frontend et un avec le code backend. J’apporterais ensuite une modification au frontend et mettrais manuellement à jour le backend pour accepter cette nouvelle modification.
Pas étonnant qu’il m’ait fallu du temps pour publier des fonctionnalités. Désormais, j’invite simplement mon agent à mettre à jour le frontend selon certaines instructions, et il met automatiquement à jour le backend avec le code correspondant pour accepter les modifications du frontend. Bien entendu, cela fonctionne également dans l’autre sens.
Monorepos
Les monorepos sont également super puissants. Le contraire d’un monorepo est de répartir tout votre code dans différents référentiels (généralement appelés microservices). D’après mon expérience, cela ne fonctionne pas très bien, car cela rend simplement plus difficile pour vous et vos agents de codage de savoir où tout se trouve.
Au lieu de cela, je recommande fortement de tout déplacer vers un monorepo, où vous avez tout votre code dans une seule base de code. Vous pouvez désormais facilement créer des règles, telles que des hooks de pré-validation, qui s’appliquent à tout votre code et n’ont pas besoin de les répliquer sur plusieurs référentiels. De plus, vous pouvez facilement avoir des fichiers AGENTS.md couvrant et expliquant l’ensemble du référentiel, afin que les agents puissent facilement savoir où tout se trouve.
Si tout votre code se trouve dans un monorepo, vous n’aurez pas non plus besoin d’espaces de travail, comme je l’ai décrit dans la dernière section. Cependant, il est assez courant d’avoir un monorepo pour le code frontend/API, puis un référentiel séparé gérant des traitements plus complexes, tels que l’exécution d’agents ou le traitement de documents. Ainsi, vous devrez de toute façon souvent utiliser des espaces de travail.
AGENTS.md comme contexte
Un autre conseil très important est d’utiliser et de mettre à jour activement AGENTS.md. Il existe de nombreuses alternatives à AGENTS.MD, telles que CLAUDE.md, WARP.md ou .cursorrules. D’après mon expérience, cependant, AGENTS.MD est lu par tous les agents de codage, quel que soit celui que vous utilisez.
Je recommande donc d’utiliser AGENTS.md car si jamais vous changez d’agent à l’avenir, ou si vos collègues utilisent des agents différents, vous pouvez tous en bénéficier de la même manière.
Vous pouvez avoir un fichier AGENTS.md à la racine de votre référentiel qui fournit un aperçu de haut niveau du référentiel, un peu comme un README. Cela peut expliquer à l’agent quels dossiers contiennent quelle logique, ce qui facilite la navigation de l’agent dans le code.
De plus, vous pouvez également avoir AGENT.md dans tous les sous-dossiers. Par exemple, si vous avez un service dans un dossier, vous pouvez y avoir un fichier AGENTS.md expliquant le fonctionnement du service ou toute bizarrerie à prendre en compte.
Je souhaite également ajouter que chaque fois que vous apportez des modifications à votre code, assurez-vous de mettre à jour AGENTS.md. Vous pouvez, par exemple, demander à votre agent de codage de mettre à jour les fichiers AGENTS.md pertinents pour vous, compte tenu de ce qu’il a appris lors de sa dernière session, et il ajoutera automatiquement des notes importantes. Assurez-vous également de transférer ces modifications vers GitHub, afin que vos collègues puissent bénéficier des connaissances que vous avez acquises.
Conclusion
Dans cet article, j’ai expliqué comment travailler efficacement avec le code frontend et backend. J’ai commencé par expliquer pourquoi il est important de savoir comment travailler à la fois avec le frontend et le backend, en soulignant que c’est généralement un moyen plus efficace de faire avancer les choses. De plus, j’ai développé certaines techniques que j’utilise pour travailler efficacement avec le frontend et le backend, couvrant l’utilisation des espaces de travail, des monorepos et des AGENTS.md. Je crois qu’à l’avenir, nous serons tous des ingénieurs full-stack, compte tenu de l’efficacité des agents de codage. Le travail d’un ingénieur humain sera simplement de coordonner tous vos agents de la manière la plus efficace possible, afin de résoudre les problèmes les plus importants, de la manière la meilleure et la plus efficace possible.
👉 Mon eBook et mon webinaire gratuits :
🚀 10x votre ingénierie avec les LLM (cours gratuit par e-mail de 3 jours)
📚 Obtenez mon ebook gratuit sur les modèles de langage de vision
💻 Mon webinaire sur les modèles de langage de vision
👉 Retrouvez-moi sur les réseaux sociaux :
