Im Zeitalter von AI ist Refactoring keine stupide Fleißarbeit mehr

Ein Artikel darüber, wie mit AI + Codemod Legacy in einem Design System aufgeräumt wurde.
Ich hoffe, er ist hilfreich für alle, die vor einem groß angelegten Refactoring stehen.

Hintergrund des Problems

• Im unternehmensinternen Design System wurden viele Komponenten wie Typography als Deprecated markiert
• Nach der Einführung des neuen Design Systems + Tailwind existierten Deprecated-Muster innerhalb derselben Codebasis nebeneinander
• Um sie nach der Boy-Scout-Regel nach und nach aufzuräumen, war es
  • zu viele Dateien
  • und wegen des Prinzips, PRs für Funktionsänderungen und Refactoring-PRs zu trennen, rutschte das Thema in der Priorität immer weiter nach hinten

Vorgehensweise: Codemod + AI

• Verwendet wurde kein String-Replacement, sondern ein AST-basierter Codemod (jscodeshift)
• AI wurde genutzt für:
  • eine vollständige Untersuchung der Deprecated-Typography-Nutzungsmuster
  • die Aufbereitung der Before/After-Regeln
  • Unterstützung beim Schreiben des ersten Entwurfs des jscodeshift-Transformationsskripts und des Testcodes
• Zentrale Transformationsbeispiele:
  • <Body1 bold>텍스트</Body1>
    → <span className="typography-body1-bold">텍스트</span>
  • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
    → <h1 className="typography-headLine5 text-primary">

Ergebnis

• Deprecated-Muster rund um Typography wurden zu etwa 95 % automatisch transformiert
• Gemischte Muster wurden deutlich reduziert, was die Konsistenz des Codes und das Onboarding-Erlebnis verbessert hat
• Die Option wurde geschaffen, auch „den nächsten Austausch des Design Systems per Codemod durchzuführen“

Erkenntnisse

• Deutlich mehr Refactoring-Arbeit als gedacht lässt sich mit AST + Codemod automatisieren
• Bei groß angelegten automatischen Transformationen ist ein „Review der Transformationsregeln + Tests“ effizienter und sicherer als ein „Review der Datei-Diffs“
• Es ist sinnvoll, die Rollen zu trennen: AI für Musteranalyse und Unterstützung beim Entwurf, Codemod für konsistente Massenersetzungen