Erfahrung mit der Refaktorierung einer großen JS-Datei durch die Zusammenarbeit von AI, Code und Mensch

(Als ich heute Morgen noch einmal draufgeschaut habe, hatte der ursprüngliche Beitrag Formatierungsfehler, und außerdem war er zu lang, deshalb poste ich ihn noch einmal als Zusammenfassung.)

Ich habe oft gesehen, dass ChatGPT-Anfänger drei typische Fehler machen, wenn sie versuchen, mit ChatGPT ein „komplexes Problem“ zu lösen.

1. Sie erwarten, dass ChatGPT „die richtige Antwort“ sofort liefert
2. Sie erwarten, dass ChatGPT die richtige Antwort „auf Anhieb“ liefert
3. Diese Erwartung wird nicht so leicht erfüllt, sie sind enttäuscht und nutzen ChatGPT dann nur noch für einfache Probleme, nur noch passiv oder hören ganz damit auf

Dadurch verpassen sie letztlich viele Chancen auf Produktivitätssteigerungen durch AI.

So war ich bis vor ein paar Monaten auch noch.

• Weil die anfängliche Ladegeschwindigkeit der App langsam war, habe ich die Bundle-Größe analysiert und dabei eine extrem große JS-Datei gefunden. Ich stellte fest, dass sich der Großteil dieser 18.500 Zeilen langen Datei löschen ließ
• Anfangs habe ich sie per Sichtprüfung manuell bearbeitet und gelöscht, aber das war zu monoton und fehleranfällig
• Dann habe ich mit ChatGPT weitergearbeitet. Dabei merkte ich, dass ich wie ein Anfänger ebenfalls erwartete, die „richtige Antwort auf Anhieb“ zu bekommen
• Nachdem mir das klar geworden war, setzte ich auf eine „Drei-Parteien-Kollaborationsstrategie“ und machte in kurzer Zeit enorme Fortschritte

Fortschritt der Arbeit

Refaktoriere das bitte für mich

• Ich gab eine Funktion, erklärte die gewünschte Vorgehensweise und bat um Refaktorierung → gescheitert. Es ließ sich nicht einmal kompilieren
• Es wurde nicht anhand des Verständnisses der Codestruktur geändert, sondern eher Zeile für Zeile nach unten gehend gelöscht

Schreib Code, der refaktoriert

• Ich bat nicht um direkte Bearbeitung, sondern um JS-Code, der die Refaktorierung durchführt → gescheitert. Auch das war letztlich nur ein zeilenweises Löschen
• Im Nachhinein dachte ich mir, dass ChatGPT für solch groß angelegte Refaktorierungen vermutlich nicht ausreichend trainiert wurde

Schreib Code, der mit AST refaktoriert

• Ich wollte nicht Zeile für Zeile, sondern Blöcke löschen. Dafür war also ein syntaktisches Verständnis des Codes nötig, weshalb ich AST für sinnvoll hielt
• Ich gab ChatGPT die Rolle eines Engineers mit Erfahrung in der ESLint-Entwicklung und bat darum, es mit AST umzusetzen. Daraufhin kam ein hervorragendes Babel-basiertes Boilerplate heraus. Ein großer Fortschritt
• Da ich keine Babel-Erfahrung hatte, lernte ich zusammen mit ChatGPT und ergänzte nach und nach die Logik, stieß am Ende aber auf Schwierigkeiten. Komplexe Logik zu handhaben war nicht einfach

Ich habe es mit AST so versucht. Dieser Teil funktioniert nicht gut – wie würdest du das angehen?

• Mir wurde klar, dass ich wieder versuchte, die richtige Antwort auf Anhieb zu bekommen, und ich änderte meine Strategie. Als ich dachte, dass traverse nicht nur einmal ausgeführt werden muss, lief es plötzlich viel flüssiger
• Ich ging schnell voran, indem ich es erst einmal einfach ausführte, die Ergebnisse ansah und darauf aufbauend die Logik schrittweise ergänzte
• Bei Stellen, die nicht gut funktionierten, fragte ich ChatGPT gezielt, wie sich genau dieses Teilziel umsetzen ließe
• Die Teile, die sich am Ende nur schwer in Regeln fassen ließen, erledigte ich mit Augenmaß und per Hand. Zu diesem Zeitpunkt war die Code-Menge bereits stark reduziert, sodass das möglich war

Ergebnis

• Der Code mit 18.500 Zeilen wurde auf 1.335 Zeilen reduziert, und die Größe des Main-Chunk-Bundles sank um etwa 7,8 %
• Da Größe und Logik der für das initiale Laden benötigten JS-Dateien reduziert wurden, verbesserte sich die initiale Ladegeschwindigkeit leicht
• Ich gewann Erfahrung und Selbstvertrauen darin, langen und komplexen Legacy-Code mit AST zu refaktorieren
• Ich gewann das Vertrauen, dass sich die meisten komplexen Probleme durch die Zusammenarbeit von AI + Code + Mensch effektiv lösen lassen

Ein mentales Modell, um komplexe Probleme gemeinsam mit AI effektiv zu lösen

1. Verstehe, worin AI, Code und Mensch jeweils gut sind.
2. Analysiere das Problem, das du lösen willst, und trenne die Bereiche, in denen AI, Code und Mensch jeweils stark sind.
3. Hilf der AI dabei, den ersten Code gut zu erzeugen, führe diesen Code in kleinen Schritten aus und verbessere ihn gemeinsam mit der AI. Was zwischendurch und am Ende für einen Menschen leichter zu erledigen ist, machst du selbst.

[agart319]

Danke, gut gelesen.

[moderator]

Den doppelten Beitrag habe ich gelöscht.