sind in der Regel in ein separates Frontend und Backend unterteilt. Das Frontend verwaltet, was der Benutzer sieht, während das Backend die gesamte Logik und Verarbeitung übernimmt. Dies ist eine natürliche Trennung von Bedenken, die die meisten Plattformen einfach nutzen, weil sie intestine funktioniert.
Wenn Sie jedoch Änderungen an Ihrer Anwendung vornehmen, müssen Sie häufig Änderungen sowohl am Frontend als auch am Backend vornehmen. Hier kommen Full-Stack-Ingenieure ins Spiel: Ingenieure, die sowohl mit dem Frontend als auch mit dem Backend arbeiten.
Die Arbeit sowohl mit dem Frontend als auch mit dem Backend kann jedoch aus mehreren Gründen eine Herausforderung sein:
- Sie sind oft in verschiedenen Sprachen geschrieben: Frontend mit TypeScript und Backend mit Python
- Sie müssen sich mit Berechtigungen und Authentifizierung befassen und sich mit Herausforderungen wie CORS-Fehlern auseinandersetzen
- Sie befinden sich in verschiedenen Repositorys und werden separat bereitgestellt.
Mit der Veröffentlichung von Codierungsagenten ist die gleichzeitige Arbeit mit Frontend- und Backend-Code einfacher geworden. In diesem Artikel gebe ich Ihnen einen allgemeinen Überblick darüber, wie ich täglich mit Frontend- und Backend-Code arbeite und stelle sicher, dass die beiden Systeme nahtlos integriert werden.
Warum sowohl mit Frontend als auch Backend arbeiten?
Der Grund, warum Sie gleichzeitig mit Frontend- und Backend-Code arbeiten, liegt einfach in der Notwendigkeit. Angenommen, Sie möchten Ihrer Anwendung eine neue Funktion hinzufügen, mit der ein Benutzer seine KI-Chatbot-Gespräche speichern und später darauf zugreifen kann.
Für diese Funktion sind lediglich Änderungen sowohl im Frontend als auch im Backend erforderlich. Sie müssen das Frontend aktualisieren, um die vorherigen Konversationen anzuzeigen, und Sie benötigen das Backend, um die Speicherung und den Abruf von Konversationen zu übernehmen. Daher haben Sie keine Möglichkeit, sowohl mit dem Frontend- als auch dem Backend-Code zu arbeiten.
Darüber hinaus ist es für einen Ingenieur in der Regel effektiver, sowohl mit dem Frontend als auch mit dem Backend zu arbeiten. Stellen Sie sich vor, Sie müssten die KI-Chatbot-Gesprächsfunktion implementieren und würden nur am Frontend arbeiten. Anschließend müssten Sie den Frontend-Teil des Kurses implementieren und sich dann mit einem anderen Backend-Ingenieur darüber abstimmen, wie die Konversationen gespeichert werden. Sie müssten Zeit damit verbringen, Folgendes zu besprechen:
- Das Schema zum Speichern von Konversationen
- Welche Daten sollen enthalten sein?
- Wie soll der Endpunkt heißen?
Das ist tremendous zeitaufwändig. Wenn Sie jemals in einem prozessorientierten Software program-Engineering-Umfeld gearbeitet haben, wissen Sie, wie viel Zeit das kostet.
Wenn Sie die Arbeit stattdessen alleine erledigen, müssen Sie keine Koordination übernehmen und können sich viel schneller bewegen.
Techniken zur effektiven Arbeit mit Frontend- und Backend-Code
In diesem Abschnitt beschreibe ich einige Techniken, die ich verwende, um effektiv mit Frontend- und Backend-Code zu arbeiten. Mit der Veröffentlichung eines äußerst effektiven Codierungsagenten ist dies viel einfacher geworden, und Sie müssen nicht über umfassende Erfahrung sowohl im Frontend- als auch im Backend-Code verfügen, um effektiv zu sein.
Verwenden Sie Arbeitsbereiche
Arbeitsbereiche sind eine unglaublich leistungsstarke Funktion, wenn Sie in mehreren Repositorys arbeiten. Sie können dies mit dem Cursor über „Arbeitsbereich hinzufügen“ oder mit einem beliebigen CLI-Device tun, indem Sie den Agenten einfach auf die Repositorys verweisen, mit denen Sie arbeiten möchten. Jetzt verfügt das Modell über den Kontext beider relevanter Repositories und kann somit eine Full-Stack-Lösung in einem Rutsch implementieren.
Arbeitsbereiche sind unglaublich. Bevor ich es entdeckte, habe ich mit zwei separaten Cursor-Registerkarten gearbeitet, eine mit dem Frontend-Code und eine mit dem Backend-Code. Ich würde dann eine Änderung im Frontend vornehmen und das Backend manuell aktualisieren, um diese neue Änderung zu akzeptieren.
Kein Wunder, dass es ewig gedauert hat, bis ich Options herausbrachte. Jetzt fordere ich meinen Agenten einfach auf, das Frontend gemäß einigen Anweisungen zu aktualisieren, und er aktualisiert automatisch das Backend mit dem entsprechenden Code, um die Frontend-Änderungen zu akzeptieren. Das funktioniert natürlich auch umgekehrt.
Monorepos
Monorepos sind auch superstark. Das Gegenteil eines Monorepo besteht darin, dass Ihr gesamter Code auf verschiedene Repositorys verteilt ist (normalerweise als Microservices bezeichnet). Meiner Erfahrung nach funktioniert das nicht besonders intestine, da es für Sie und Ihre Coding-Agenten einfach schwieriger wird, den Überblick zu behalten, wo sich alles befindet.
Stattdessen empfehle ich dringend, alles in ein Monorepo zu verschieben, wo Sie Ihren gesamten Code in einer Codebasis haben. Jetzt können Sie ganz einfach Regeln erstellen, z. B. Pre-Commit-Hooks, die für Ihren gesamten Code gelten und nicht über mehrere Repositorys hinweg repliziert werden müssen. Darüber hinaus können Sie ganz einfach AGENTS.md-Dateien erstellen, die das gesamte Repository abdecken und erklären, sodass Agenten leicht den Überblick behalten, wo sich alles befindet.
Wenn sich Ihr gesamter Code in einem Monorepo befindet, benötigen Sie auch keine Arbeitsbereiche, wie ich im letzten Abschnitt beschrieben habe. Allerdings ist es durchaus üblich, ein Monorepo für den Frontend-/API-Code zu haben und dann ein separates Repository, das komplexere Verarbeitungen abwickelt, wie etwa die Ausführung von Agenten oder die Dokumentenverarbeitung. Daher müssen Sie häufig ohnehin auf Arbeitsbereiche zurückgreifen.
AGENTS.md als Kontext
Ein weiterer sehr wichtiger Tipp ist die aktive Nutzung und Aktualisierung von AGENTS.md. Es gibt viele Alternativen zu AGENTS.MD, wie CLAUDE.md, WARP.md oder .cursorrules. Nach meiner Erfahrung wird AGENTS.MD jedoch von allen Coding-Agenten gelesen, egal welchen Sie verwenden.
Daher empfehle ich die Verwendung von AGENTS.md, denn wenn Sie in Zukunft jemals einen Agenten wechseln oder Ihre Kollegen andere Agenten verwenden, können Sie alle gleichermaßen davon profitieren.
Sie können eine AGENTS.md-Datei im Stammverzeichnis Ihres Repositorys haben, die einen allgemeinen Überblick über das Repository bietet, ähnlich einer README-Datei. Dies kann dem Agenten erklären, welche Ordner welche Logik enthalten, was ihm die Navigation im Code erleichtert.
Darüber hinaus können Sie AGENT.md auch in allen Unterordnern haben. Wenn Sie beispielsweise einen Dienst in einem Ordner haben, könnten Sie dort eine AGENTS.md-Datei haben, die erklärt, wie der Dienst funktioniert, oder welche Besonderheiten es zu beachten gilt.
Ich möchte außerdem hinzufügen, dass Sie AGENTS.md unbedingt aktualisieren müssen, wenn Sie Änderungen an Ihrem Code vornehmen. Sie können beispielsweise Ihren Codierungsagenten auffordern, die relevanten AGENTS.md-Dateien für Sie zu aktualisieren, basierend auf den Erkenntnissen aus der letzten Sitzung, und er fügt dann automatisch wichtige Notizen hinzu. Selbstverständlich sollten Sie diese Änderungen auch auf GitHub pushen, damit Ihre Kollegen von den gewonnenen Erkenntnissen profitieren können.
Abschluss
In diesem Artikel habe ich besprochen, wie man sowohl mit Frontend- als auch Backend-Code effektiv arbeitet. Ich begann damit, zu erklären, warum es wichtig ist, zu wissen, wie man sowohl mit dem Frontend als auch mit dem Backend arbeitet, und betonte, dass dies normalerweise eine effektivere Möglichkeit ist, Dinge zu erledigen. Darüber hinaus habe ich einige Techniken erläutert, die ich verwende, um effektiv mit Frontend und Backend zu arbeiten, und dabei die Verwendung von Workspaces, Monorepos und AGENTS.md abgedeckt. Ich glaube, dass wir in Zukunft alle Full-Stack-Ingenieure sein werden, wenn man bedenkt, wie effektiv Codierungsagenten sind. Die Aufgabe eines menschlichen Ingenieurs besteht einfach darin, alle Ihre Agenten so effektiv wie möglich zu koordinieren, um die wichtigsten Probleme auf die beste und effizienteste Weise zu lösen.
👉 Mein kostenloses E-E book und Webinar:
🚀 Verzehnfachen Sie Ihr Engineering mit LLMs (kostenloser 3-tägiger E-Mail-Kurs)
📚 Holen Sie sich mein kostenloses E-E book „Imaginative and prescient Language Fashions“.
💻 Mein Webinar zu Imaginative and prescient Language Fashions
👉 Finden Sie mich in den sozialen Netzwerken: