De afgelopen twee jaar hebben mijn team bij Work & Co en ik AI-coderingstools zoals Copilot, Cursor, Claude en ChatGPT getest en geleidelijk geïntegreerd om ons te helpen webervaringen te leveren die door de massa worden gebruikt. Toegegeven, na aanvankelijke scepsis en een paar aha-momenten hebben verschillende AI-tools hun weg gevonden naar mijn dagelijks gebruik. In de loop van de tijd begon de lijst met toepassingen waarvan we vonden dat het zinvol was om AI het over te laten nemen, te groeien, dus besloot ik enkele praktische gebruiksscenario's voor AI-tools te delen voor wat ik de 'verantwoordelijke ontwikkelaar' noem. Wat bedoel ik met een verantwoordelijke ontwikkelaar? We moeten ervoor zorgen dat we kwaliteitscode leveren zoals verwacht door onze belanghebbenden en klanten. Onze bijdragen (d.w.z. pull-aanvragen) mogen geen last worden voor onze collega's die ons werk zullen moeten beoordelen en testen. Ook als u voor een bedrijf werkt: De tools die wij gebruiken moeten goedgekeurd zijn door onze werkgever. Gevoelige aspecten zoals beveiliging en privacy moeten op de juiste manier worden afgehandeld: plak geen geheimen, klantgegevens (PII) of bedrijfseigen code in tools zonder goedkeuring van het beleid. Behandel het als code van een vreemde op internet. Altijd testen en verifiëren. Opmerking: in dit artikel wordt ervan uitgegaan dat u enige basiskennis heeft van AI-coderingstools zoals Copilot in VSCode of Cursor. Als dit allemaal totaal nieuw en onbekend voor je klinkt, kunnen de video-tutorials van Github Copilot een fantastisch startpunt voor je zijn.
Handige toepassingen van AI-coderingstools Let op: De volgende voorbeelden zijn vooral gericht op het werken in op JavaScript gebaseerde webapplicaties zoals React, Vue, Svelte of Angular. Inzicht krijgen in een onbekende codebasis Het is niet ongebruikelijk om aan gevestigde codebases te werken, en het aansluiten bij een grote bestaande codebase kan intimiderend zijn. Open eenvoudigweg uw project en uw AI-agent (in mijn geval Copilot Chat in VSCode) en begin vragen te stellen, net zoals u aan een collega zou vragen. Over het algemeen praat ik graag met elke AI-agent, net zoals ik met een medemens zou praten. Hier is een verfijnder voorbeeldprompt: "Geef me een architectuuroverzicht op hoog niveau: entrypoints, routing, auth, datalaag, build-tooling. Maak vervolgens een lijst van vijf bestanden die je in volgorde moet lezen. Behandel uitleg als hypothesen en bevestig door naar bestanden waarnaar wordt verwezen te springen."
Je kunt vervolgvragen blijven stellen, zoals “Hoe werkt de routing in detail?” of “Bespreek het authenticatieproces en de methoden met mij” en het zal u naar nuttige aanwijzingen leiden om wat licht te laten schijnen in de duisternis van een onbekende codebasis. Triage van belangrijke wijzigingen bij het upgraden van afhankelijkheden Het bijwerken van npm-pakketten, vooral als ze belangrijke wijzigingen bevatten, kan vervelend en tijdrovend werk zijn, en ervoor zorgen dat u een behoorlijk aantal regressies kunt debuggen. Ik moest onlangs de datavisualisatiebibliotheek plotly.js één grote releaseversie upgraden van versie 2 naar 3, en als gevolg daarvan werkte de aslabeling in sommige grafieken niet meer. Ik vroeg ChatGPT verder: "Ik heb mijn Angular-project bijgewerkt dat Plotly gebruikt. Ik heb het plotly.js - dist-pakket bijgewerkt van versie 2.35.2 naar 3.1.0 - en nu zijn de labels op de x- en y-as verdwenen. Wat is er gebeurd?"
De agent kwam snel terug met een oplossing (zie het zelf hieronder). Opmerking: ik heb de uitleg nog steeds gecontroleerd aan de hand van de officiële migratiegids voordat ik de oplossing verzond.
Refactors veilig repliceren tussen bestanden Groeiende codebases onthullen zeker mogelijkheden voor codeconsolidatie. U merkt bijvoorbeeld dat code wordt gedupliceerd in bestanden die kunnen worden geëxtraheerd in één functie of component. Als gevolg hiervan besluit u een gedeelde component te maken die in plaats daarvan kan worden opgenomen en die refactor in één bestand uit te voeren. In plaats van de wijzigingen in uw resterende bestanden handmatig door te voeren, vraagt u uw agent nu om de refactor voor u uit te rollen. Met agenten kunt u meerdere bestanden als context selecteren. Zodra de refactor voor één bestand is voltooid, kan ik zowel de gerefactorde als de onaangeroerde bestanden aan de context toevoegen en de agent vragen de wijzigingen als volgt naar andere bestanden door te voeren: "Repliceer de wijzigingen die ik in bestand A heb aangebracht ook naar bestand B". Functies implementeren in onbekende technologieën Een van mijn favoriete aha-momenten met het gebruik van AI-coderingstools was toen het me hielp een vrij complexe geanimeerde gradiëntanimatie te maken in GLSL, een taal waarmee ik redelijk onbekend was. Bij een recent project bedachten onze ontwerpers een geanimeerd verloop als laadstatus op een 3D-object. Ik vond het concept erg leuk en wilde onze klanten iets unieks en spannends bieden. Deprobleem: ik had maar twee dagen om het te implementeren, en GLSL heeft een behoorlijk steile leercurve. Opnieuw kwam een AI-tool (in dit geval ChatGPT) goed van pas, en ik begon hem eenvoudigweg te vragen een zelfstandig HTML-bestand voor mij te maken dat een canvas en een heel eenvoudig geanimeerd kleurverloop weergeeft. Stap na stap vroeg ik de AI om er meer finesse aan toe te voegen totdat ik tot een behoorlijk resultaat kwam, zodat ik kon beginnen met het integreren van de shader in mijn daadwerkelijke codebase. Het eindresultaat: onze klanten waren supertevreden en dankzij AI hebben we in korte tijd een complexe functie opgeleverd. Testen schrijven In mijn ervaring is er zelden genoeg tijd voor projecten om voortdurend een goede reeks unit- en integratietests te schrijven en te onderhouden, en bovendien vinden veel ontwikkelaars het schrijven van tests niet echt leuk. Uw AI-helper vragen om tests voor u op te zetten en te schrijven is heel goed mogelijk en kan in een korte tijd worden gedaan. Natuurlijk moet je er als ontwikkelaar nog steeds voor zorgen dat je tests daadwerkelijk naar de kritische delen van je applicatie kijken en verstandige testprincipes volgen, maar je kunt het schrijven van de tests ‘uitbesteden’ aan onze AI-helper. Voorbeeldprompt: "Schrijf eenheidstests voor deze functie met behulp van Jest. Behandel happy path, edge cases en faalmodi. Leg uit waarom elke test bestaat."
U kunt de best practices van testgoeroe Kent C. Dodds zelfs als richtlijnen doorgeven aan uw agent, zoals hieronder:
Intern gereedschap Enigszins vergelijkbaar met het eerder genoemde shader-voorbeeld, kreeg ik onlangs de opdracht om codeduplicatie in een codebase te analyseren en voor en na een refactor te vergelijken. Zeker geen triviale taak als u niet de tijdrovende route wilt volgen van het handmatig vergelijken van bestanden. Met de hulp van Copilot heb ik een script gemaakt dat codeduplicatie voor mij analyseerde, de uitvoer in een tabel rangschikte en ordent en deze naar Excel exporteerde. Toen ging ik nog een stap verder. Toen onze coderefactor klaar was, vroeg ik de agent om mijn bestaande Excel-werkblad als basislijn te nemen, de huidige duplicatiestatus in afzonderlijke kolommen toe te voegen en de delta te berekenen. Code bijwerken die lang geleden is geschreven Onlangs heeft een oude klant van mij mij gebeld, omdat na verloop van tijd een aantal functies niet meer goed werkten op zijn website. Het addertje onder het gras: de website is bijna tien jaar geleden gebouwd en JavaScript en SCSS gebruikten vrij oude compileertools zoals requireJS, en de installatie vereiste een oudere versie van Node.js die niet eens op mijn MacBook uit 2025 zou draaien. Het zou me dagen hebben gekost om het hele bouwproces handmatig bij te werken, dus besloot ik de AI-agent te vragen: "Kun je het JS- en SCSS-bouwproces updaten naar een slanke 2025-stack zoals Vite?" Dat klopte zeker, en na ongeveer een uur verfijnen met de agent, liet ik mijn SCSS- en JS-build overschakelen naar Vite, en kon ik me concentreren op het daadwerkelijk oplossen van bugs. Zorg ervoor dat u de uitvoer en de gecompileerde bestanden goed valideert wanneer u dergelijke integrale wijzigingen in uw bouwproces aanbrengt. Samenvatten en opstellen Wilt u al uw recente codewijzigingen in één zin samenvatten voor een commit-bericht, of heeft u een lange lijst met commits en wilt u deze in drie opsommingstekens samenvatten? Geen probleem, laat de AI het regelen, maar zorg ervoor dat u het proefleest. Een voorbeeldprompt is zo eenvoudig als het sturen van een bericht naar een medemens: “Vul mijn recente wijzigingen samen in beknopte opsommingen”. Mijn advies hier zou zijn om GPT voorzichtig te gebruiken bij het schrijven, en net als bij code: controleer de uitvoer voordat u deze verzendt of verzendt. Aanbevelingen en beste praktijken Vragen Een van de niet zo voor de hand liggende voordelen van het gebruik van AI is dat hoe specifieker en op maat gemaakt uw aanwijzingen zijn, hoe beter de output. Het proces van het inschakelen van een AI-agent dwingt ons om onze vereisten zo specifiek mogelijk te formuleren voordat we schrijven en coderen. Dit is de reden waarom ik als algemene regel ten zeerste aanbeveel om zo specifiek mogelijk te zijn met uw aanwijzingen. Ryan Florence, co-auteur van Remix, suggereert een eenvoudige maar krachtige manier om dit proces te verbeteren door je eerste prompt af te ronden met de zin: “Voordat we beginnen: heb je nog vragen voor mij?”
Op dit punt komt de AI meestal terug met nuttige vragen waarmee u uw specifieke bedoeling kunt verduidelijken, zodat de agent u een meer op maat gemaakte aanpak voor uw taak kan bieden.
Gebruik versiebeheer en werk in verteerbare brokken Het gebruik van versiebeheer zoals git is niet alleen handig als je als team samenwerkt aan een enkele codebase, maar ook om jou alsindividuele bijdrager met stabiele punten waar u naar terug kunt keren in geval van nood. Vanwege het niet-deterministische karakter kan AI soms schurkenstaten gebruiken en veranderingen aanbrengen die eenvoudigweg niet nuttig zijn voor wat u probeert te bereiken, en uiteindelijk dingen onherstelbaar kapot maken. Door je werk op te splitsen in meerdere commits kun je stabiele punten creëren waar je op terug kunt vallen als het misgaat. En uw teamgenoten zullen u ook dankbaar zijn, omdat zij uw code gemakkelijker kunnen beoordelen wanneer deze is opgesplitst in semantisch goed gestructureerde brokken. Grondig beoordelen Dit is meer een algemene best practice, maar naar mijn mening wordt het nog belangrijker bij het gebruik van AI-tools voor ontwikkelingswerk: Wees de eerste kritische reviewer van je code. Zorg ervoor dat u de tijd neemt om uw wijzigingen regel voor regel door te nemen, net zoals u de code van iemand anders zou beoordelen, en dien uw werk pas in als het uw eigen zelfbeoordeling heeft doorstaan. "Twee dingen zijn op dit moment allebei waar voor mij: AI-agenten zijn geweldig en zorgen voor een enorme productiviteitsverhoging. Het zijn ook enorme slopmachines als je je hersenen uitschakelt en volledig loslaat. "- Armin Ronacher in zijn blogpost Agent Psychosis: Are We Going Insane?
Conclusie en kritische gedachten Naar mijn mening kunnen AI-coderingstools onze productiviteit als ontwikkelaars dagelijks verbeteren en mentale capaciteit vrijmaken voor meer planning en denken op hoog niveau. Ze dwingen ons om het gewenste resultaat tot in de kleinste details te verwoorden. Elke AI kan soms hallucineren, wat in feite betekent dat het op een zelfverzekerde toon klinkt. Zorg er dus voor dat u het controleert en test, vooral als u twijfelt. AI is geen wondermiddel, en ik geloof dat uitmuntendheid en het vermogen om als ontwikkelaar problemen op te lossen nooit uit de mode zullen raken. Voor ontwikkelaars die net aan hun carrière beginnen, kunnen deze tools zeer verleidelijk zijn om het grootste deel van het werk voor hen te doen. Wat hier misschien verloren gaat, is het vaak uitputtende en pijnlijke werk aan het oplossen van bugs en problemen die lastig te debuggen en op te lossen zijn, ook wel ‘de sleur’ genoemd. Zelfs Cursor AI’s eigen Lee Robinson trekt dit in twijfel in een van zijn berichten:
AI-coderingstools evolueren in een snel tempo en ik ben enthousiast over wat er daarna zal komen. Ik hoop dat je dit artikel en de bijbehorende tips nuttig hebt gevonden en dat je graag een aantal hiervan zelf wilt uitproberen.
