Durant els darrers dos anys, el meu equip de Work & Co i jo hem estat provant i integrant gradualment eines de codificació d'IA com Copilot, Cursor, Claude i ChatGPT per ajudar-nos a enviar experiències web que fan servir les masses. És cert que després d'un cert escepticisme inicial i uns quants moments, diverses eines d'IA han trobat el meu camí al meu ús diari. Amb el temps, la llista d'aplicacions on vam trobar que tenia sentit deixar que la IA prengués el relleu va començar a créixer, així que vaig decidir compartir alguns casos d'ús pràctics d'eines d'IA per al que anomeno el "desenvolupador responsable". Què vull dir per un desenvolupador responsable? Ens hem d'assegurar que oferim un codi de qualitat tal com ho esperen els nostres clients i grups d'interès. Les nostres contribucions (és a dir, les sol·licituds d'extracció) no haurien de convertir-se en una càrrega per als nostres companys que hauran de revisar i provar el nostre treball. A més, en cas de treballar per a una empresa: Les eines que utilitzem han de ser aprovades pel nostre empresari. Els aspectes sensibles com la seguretat i la privadesa s'han de gestionar correctament: no enganxeu secrets, dades de clients (PII) o codi propietari a les eines sense l'aprovació de la política. Tracteu-lo com el codi d'un desconegut a Internet. Comproveu i comproveu sempre. Nota: aquest article suposa una familiaritat molt bàsica amb les eines de codificació d'IA com Copilot dins de VSCode o Cursor. Si tot això us sembla totalment nou i desconegut, els tutorials en vídeo de Github Copilot poden ser un punt de partida fantàstic per a vosaltres.
Aplicacions útils d'eines de codificació d'IA Nota: els exemples següents es centraran principalment a treballar en aplicacions web basades en JavaScript com React, Vue, Svelte o Angular. Comprendre una base de codi desconeguda No és estrany treballar en bases de codi establertes, i unir-se a una base de codis heretada gran pot ser intimidant. Simplement obriu el vostre projecte i el vostre agent d'IA (en el meu cas, Copilot Chat a VSCode) i comenceu a fer preguntes tal com ho faríeu a un company. En general, m'agrada parlar amb qualsevol agent d'IA com ho faria amb un altre humà. Aquí hi ha un exemple de sol·licitud més refinat: "Dóna'm una visió general de l'arquitectura d'alt nivell: punts d'entrada, encaminament, autenticació, capa de dades, eines de compilació. A continuació, enumera 5 fitxers per llegir en ordre. Tracta les explicacions com a hipòtesis i confirmes saltant als fitxers de referència".
Podeu seguir fent preguntes de seguiment com "Com funciona l'encaminament en detall?" o "Parla'm sobre el procés i els mètodes d'autenticació" i et portarà a indicacions útils per il·luminar una mica la foscor d'una base de codi desconeguda. Triatge de canvis de ruptura en actualitzar dependències L'actualització dels paquets npm, especialment quan s'aporten canvis de ruptura, pot ser un treball tediós i que requereix molt de temps, i us farà depurar una bona quantitat de regressions. Recentment he hagut d'actualitzar la biblioteca de visualització de dades plotly.js a una versió de llançament principal de la versió 2 a la 3 i, com a resultat, l'etiquetatge dels eixos en alguns dels gràfics va deixar de funcionar. Vaig continuar preguntant a ChatGPT: "Vaig actualitzar el meu projecte Angular que utilitza Plotly. He actualitzat el plotly.js, el paquet dist de la versió 2.35.2 a la 3.1.0, i ara les etiquetes dels eixos x i y han desaparegut. Què va passar?"
L'agent va tornar amb una solució ràpidament (vegeu-ho vosaltres mateixos a continuació). Nota: encara he verificat l'explicació amb la guia oficial de migració abans d'enviar la correcció.
Replicar refactors de manera segura entre fitxers Les bases de codi creixents, sens dubte, revelen oportunitats per a la consolidació del codi. Per exemple, observeu la duplicació de codi entre fitxers que es poden extreure en una única funció o component. Com a resultat, decidiu crear un component compartit que es pot incloure en el seu lloc i realitzar aquest refactor en un fitxer. Ara, en comptes de realitzar manualment aquests canvis als fitxers restants, demaneu al vostre agent que desenvolupi el refactor. Els agents us permeten seleccionar diversos fitxers com a context. Un cop feta la refactorització d'un fitxer, puc afegir tant els fitxers refactoritzats com els no tocats al context i demanar a l'agent que implementi els canvis a altres fitxers com aquest: "Replica els canvis que he fet al fitxer A al fitxer B també". Implementació de funcions en tecnologies desconegudes Un dels meus moments preferits amb eines de codificació d'IA va ser quan em va ajudar a crear una animació de gradient animada força complexa en GLSL, un llenguatge amb el qual no he estat força familiaritzat. En un projecte recent, els nostres dissenyadors van idear un gradient animat com a estat de càrrega en un objecte 3D. Em va agradar molt el concepte i volia oferir alguna cosa únic i emocionant als nostres clients. Elproblema: només vaig tenir dos dies per implementar-lo i GLSL té una corba d'aprenentatge força pronunciada. Una vegada més, una eina d'IA (en aquest cas, ChatGPT) va ser útil i vaig començar a demanar-li que creés un fitxer HTML autònom per a mi que representés un llenç i un degradat de color animat molt senzill. Pas rere pas, vaig demanar a la IA que li afegeixi més delicadesa fins que vaig arribar a un resultat decent per poder començar a integrar l'ombrejat a la meva base de codi real. El resultat final: els nostres clients estaven molt contents i vam oferir una funció complexa en poc temps gràcies a la IA. Proves d'escriptura Segons la meva experiència, poques vegades hi ha prou temps als projectes per escriure i mantenir contínuament un conjunt adequat de proves d'unitat i d'integració i, a més, molts desenvolupadors no gaudeixen realment de la tasca d'escriure proves. Sol·licitar al vostre ajudant d'IA que configure i escrigui proves per a vosaltres és totalment possible i es pot fer en una petita quantitat de temps. Per descomptat, vosaltres, com a desenvolupador, encara us hauríeu d'assegurar que les vostres proves facin una ullada a les parts crítiques de la vostra aplicació i segueixin els principis de proves raonables, però podeu "subcontractar" la redacció de les proves al nostre ajudant d'IA. Exemple de sol·licitud: "Escriu proves unitàries per a aquesta funció amb Jest. Cobriu el camí feliç, els casos extrems i els modes d'error. Expliqueu per què existeix cada prova".
Fins i tot podeu transmetre les millors pràctiques de proves del guru de proves Kent C. Dodds com a directrius al vostre agent, com a continuació:
Eines internes Una mica semblant a l'exemple de shader esmentat anteriorment, recentment em van encarregar d'analitzar la duplicació de codi en una base de codi i comparar abans i després d'un refactor. Certament, no és una tasca trivial si no voleu seguir la ruta que requereix temps de comparar fitxers manualment. Amb l'ajuda de Copilot, vaig crear un script que analitzava la duplicació de codi per a mi, organitzava i ordenava la sortida en una taula i l'exportava a Excel. Llavors vaig fer un pas més enllà. Quan es va acabar el refactor del nostre codi, vaig demanar a l'agent que prengués el meu full d'Excel existent com a línia de base, que afegeixi l'estat actual de duplicació en columnes separades i que calculés el delta. Actualització del codi escrit fa molt de temps Recentment, un vell client meu em va colpejar, ja que amb el pas del temps, algunes funcions ja no funcionaven correctament al seu lloc web. El problema: el lloc web es va crear fa gairebé deu anys, i JavaScript i SCSS feien servir eines de compilació força antigues com requireJS, i la configuració requeria una versió anterior de Node.js que ni tan sols s'executaria al meu MacBook 2025. L'actualització manual de tot el procés de creació m'hauria portat dies, així que vaig decidir demanar a l'agent d'IA: "Pots actualitzar el procés de creació JS i SCSS a una pila de 2025 magra com Vite?" Segur que ho va fer, i després d'una hora de perfeccionament amb l'agent, vaig canviar la meva compilació SCSS i JS a Vite i vaig poder centrar-me en la correcció d'errors real. Només assegureu-vos de validar correctament els fitxers de sortida i compilats quan feu aquests canvis integrals al vostre procés de creació. Resum i Redacció Voleu resumir tots els canvis recents del vostre codi en una frase per a un missatge de confirmació o tenir una llarga llista de commits i els agradaria resumir-los en tres vinyetes? Cap problema, deixeu que la IA s'encarregui, però assegureu-vos de corregir-lo. Un exemple d'indicació és tan senzill com enviar un missatge a un altre humà: "Si us plau, resumeix els meus canvis recents en punts concisos". El meu consell aquí seria utilitzar GPT per escriure amb precaució i, igual que amb el codi, si us plau, comproveu la sortida abans d'enviar o enviar. Recomanacions i bones pràctiques Demanant Un dels avantatges no tan evidents de l'ús de la IA és que com més específiques i adaptades siguin les vostres indicacions, millor serà la sortida. El procés de sol·licitar un agent d'IA ens obliga a formular els nostres requisits de la manera més específica possible abans d'escriure i codificar. Per això, com a regla general, us recomano molt ser el més específic possible amb les vostres indicacions. Ryan Florence, coautor de Remix, suggereix una manera senzilla però potent de millorar aquest procés acabant el vostre missatge inicial amb la frase: "Abans de començar, tens alguna pregunta per a mi?"
En aquest punt, l'IA sol tornar amb preguntes útils on podeu aclarir la vostra intenció específica, guiant l'agent perquè us proporcioni un enfocament més personalitzat per a la vostra tasca.
Utilitzeu el control de versions i treballeu en trossos digeribles L'ús del control de versions com git no només és útil quan col·laboreu com a equip en una única base de codi, sinó que també us ofereix com acol·laborador individual amb punts estables als quals revertir en cas d'emergència. A causa de la seva naturalesa no determinista, la intel·ligència artificial de vegades pot ser canalla i fer canvis que simplement no són útils per al que esteu intentant aconseguir i, finalment, trencar les coses de manera irreparable. Dividir el vostre treball en múltiples commits us ajudarà a crear punts estables als quals podeu tornar en cas que les coses surtin de costat. I els vostres companys d'equip també us ho agrairan, ja que els serà més fàcil revisar el vostre codi quan estigui dividit en fragments ben estructurats semànticament. Revisa a fons Aquesta és més aviat una bona pràctica general, però al meu entendre, esdevé encara més important quan utilitzeu eines d'IA per al treball de desenvolupament: sigueu el primer revisor crític del vostre codi. Assegureu-vos de dedicar-vos una estona a repassar els vostres canvis línia per línia, tal com revisaríeu el codi d'una altra persona, i només envieu el vostre treball un cop superi la vostra pròpia revisió. "Dues coses són certes per a mi en aquests moments: els agents d'IA són increïbles i un gran augment de la productivitat. També són màquines massives de pendent si apagues el teu cervell i el deixes anar completament. "- Armin Ronacher a la seva publicació al bloc Agent Psychosis: Ens tornem bojos?
Conclusió i pensaments crítics Al meu entendre, les eines de codificació d'IA poden millorar la nostra productivitat com a desenvolupadors diàriament i alliberar la capacitat mental per a més planificació i pensament d'alt nivell. Ens obliguen a articular el resultat desitjat amb detalls meticulosos. Qualsevol IA pot, de vegades, al·lucinar, la qual cosa significa bàsicament que es troba en un to confiat. Així que si us plau, assegureu-vos de comprovar i provar, sobretot quan teniu dubtes. La IA no és una bala de plata, i crec que l'excel·lència i la capacitat de resoldre problemes com a desenvolupador mai passaran de moda. Per als desenvolupadors que acaben de començar la seva carrera, aquestes eines poden ser molt temptadores per fer la major part del treball per ells. El que es pot perdre aquí és el treball sovint esgotador i dolorós a través d'errors i problemes que són difícils de depurar i resoldre, també conegut com "la rutina". Fins i tot el propi Lee Robinson de Cursor AI ho qüestiona en una de les seves publicacions:
Les eines de codificació d'IA estan evolucionant a un ritme ràpid i estic emocionat pel que vindrà a continuació. Espero que us hagin estat útils aquest article i els seus consells i us animeu a provar-ne alguns per vosaltres mateixos.
