Developer Experience met Cursor.ai en Claude.ai - Deel 2: Voordelen

Een project scopen

Het eerste grote voordeel dat Claude.ai heeft geboden is de mogelijkheid om snel een initieel project scope document te genereren. Het herinnert me aan belangrijke details die soms over het hoofd worden gezien bij het inschatten van de tijd en kosten van een project of taak.

Schrijf alsjeblieft een specificatiedocument voor een pizza bezorgwebsite, met gebruikersaccounts, orderbeheer, real-time ordertracking, menubeheer, betalingsafhandeling in Nederland en SEO-optimalisaties, aangedreven door Prismic

De prompt zal vrijwel alles schetsen waar ik rekening mee moet houden, inclusief diensten, integraties en gemakkelijk over het hoofd geziene details bij het focussen op complexe functies, zoals SEO.

Door Claude te gebruiken als basis voor het maken van sjablonen voor grote taken, kan ik sneller nauwkeurigere en betekenisvollere schattingen geven en ben ik minder afhankelijk van iteraties tijdens scope- en planningsvergaderingen.

Let op hoe ik specifieke details of functies vermijd die gevoelig kunnen zijn voor het project - dat zijn elementen die ik handmatig zal invullen.

Dieper nadenken over het probleem

AI werkt goed omdat het het 'garbage in, garbage out' principe demonstreert - als je geen duidelijke en consistente informatie verstrekt, zal Claude waarschijnlijk slechte resultaten teruggeven.

Deze dynamiek moedigt je aan om dieper na te denken over het probleem en hoe je het kunt aanpakken. De kwaliteit van de antwoorden die je krijgt weerspiegelt direct je aanpak bij het formuleren van het probleem.

Laten we eerst kijken naar een slechte prompt: Ik moet de productlijstpagina repareren, het toont eerst verouderde content en daarna pas de echte content. Dit legt het probleem uit, maar vaag, en leidt mogelijk niet tot de juiste oplossing.

Laten we het probleem beter uitleggen: Ik wil dit scherm refactoren omdat het initieel vertrouwt op verouderde data terwijl de achtergrond fetch bezig is. Wanneer er queryparameters in de URL staan, wil ik dat de client-side fetch eerst voltooid is voordat er content wordt getoond. Gebruik alsjeblieft de loading component in onze /core/components map - /core/components/loader.js

Hier hebben we de AI meer context gegeven over de kern van het probleem, de overwegingen die het moet maken, en hoe het verzoek netjes moet worden afgehandeld.

We vermijden ook het overspoelen van het verzoek met te veel informatie door de context te beperken tot alleen de noodzakelijke bestanden.

Verbeteringen overwegen

Dit onderdeel moet met een korreltje zout worden genomen, aangezien er vaak ontbrekende context en persoonlijke voorkeuren zijn die significant beïnvloeden wat een daadwerkelijke verbetering vormt.

Dat gezegd hebbende, wat ik waardeer aan Cursor AI is de mogelijkheid om het de globale context van mijn codebase te geven en te vragen om specifieke verbeteringen: Hoe kan ik de SEO van dit project verbeteren? De AI geeft dan nuttige aanwijzingen en suggesties. Voor dit soort verzoeken vind ik de Chat/Ask optie effectiever dan de Agent.

Dit blijft een gevoelig gebied - een voorgestelde wijziging kan technisch gezien een verbetering zijn maar hoeft geen betekenisvolle voordelen op te leveren. Mensen kunnen gemakkelijk zeggen: "Claude suggereerde het, dus het moet de weg vooruit zijn." Neem een simpele regel als: const ids = projects.map(id => id); In React wil je dit misschien memoizen om herberekening bij elke render te voorkomen, maar als je projects array slechts ongeveer 10 items bevat, kunnen de kosten van memoization de kosten van de operatie zelf overtreffen.

Ik noem dit als voordeel vanwege het "overwegingen" aspect - in een gezond, evenwichtig team kunnen deze suggesties waardevolle discussies op gang brengen die leiden tot kennisdeling en het identificeren van verbeterpunten binnen de praktijken van je team, zoals standaarden die moeten worden opgenomen in je definition of done.

Onboarding

Het gevoel van het betreden van een nieuwe codebase is voor mij nooit echt veranderd, zelfs na 10+ jaar softwareontwikkeling. Elk project bevat een geschiedenis van beslissingen, gesprekken en legacy code, allemaal gebundeld.

Ik streef ernaar om vanaf dag één betekenisvol werk te doen, maar onboarding kan tijdrovend zijn, ongeacht ervaring. Ik heb gemerkt dat Cursor een uitstekende tool is om dit proces sneller en efficiënter te maken.

Hier zijn enkele commando's die onboarding kunnen versnellen:

Geef me alsjeblieft in een MD-bestand een uitsplitsing van dit project, mapstructuur, links naar documentbestanden, componentuitsplitsingen en waar ze worden gebruikt

Ik zoek naar hoe de data in het shoppingCart.js bestand komt vanuit de header, kun je het prop drilling pad uitleggen of hoe data hier wordt gedeeld?

Door deze naast je reguliere onboarding proces te gebruiken, kun je snel op gang komen en een beter gevoel krijgen voor de codebase en het project.

Leren

Dit onderdeel verdient een snelle disclaimer: het voordeel van het gebruik van AI om te leren coderen hangt grotendeels af van de mentaliteit van de persoon die het gebruikt.

Als je Cursor of AI gebruikt om simpelweg een werkend project te genereren zonder de tijd te nemen om te begrijpen wat er gebeurt, waarom het werkt, en of de door AI voorgestelde code geschikt is, zal je jezelf in een nadelige positie brengen.

Als je Cursor gebruikt om een nieuwe bibliotheek, framework of taal te leren, benader het dan op dezelfde manier als je iets anders zou leren: focus op het begrijpen van de fundamenten.

Gebruik Cursor om te begrijpen waarom bepaalde benaderingen niet werken, waarom andere wel werken, en welke alternatieve oplossingen je probleem zouden kunnen oplossen. Dit creëert een leerervaring vergelijkbaar met het hebben van een semi-ervaren ontwikkelaar die je begeleidt.

Persoonlijk had ik wat ervaring met PHP 8+ jaar geleden. In de afgelopen maanden ben ik het weer opgepakt, en Cursor heeft me aanzienlijk geholpen om de veranderingen in PHP en moderne benaderingen die in die 8 jaar zijn geëvolueerd te begrijpen.

Back-end & Design systemen

Een van de meest waardevolle resultaten van het integreren van AI in ons team is de impact op cross-functionele samenwerking. Cursor heeft een opmerkelijk vermogen getoond om onze design system componenten te begrijpen en ze nauwkeurig toe te passen op nieuwe schermen en functionaliteit. Dit heeft een brug geslagen tussen onze front-end design principes en back-end implementatie die voorheen niet mogelijk was.

Met deze mogelijkheid kunnen onze back-end developers nu snel nieuwe features uitbouwen met minimale begeleiding van het front-end team. Het resultaat is een efficiëntere workflow waarbij front-end developers hun expertise kunnen richten op iteratieve UX-verbeteringen en het doorlopende onderhoud en de evolutie van ons design system. Deze arbeidsverdeling heeft onze ontwikkelingscyclus versneld terwijl de visuele en functionele consistentie in de applicatie behouden blijft.