Was 2020 Best Practice war, ist heute oft Legacy. Das Oekosystem bewegt sich schnell, der Code muss mithalten.
Frontend-Code ist zudem oft von vielen verschiedenen Personen ohne gemeinsame Konventionen geschrieben worden, was zusaetzliche Reibung erzeugt.
Wo man mit dem Aufraeumen anfaengt
Bei der Komponenten-Analyse lohnt sich die Frage nach doppeltem Code, gleiche UI-Muster, die an fuenf Stellen unterschiedlich implementiert sind, sind der naheliegendste Refactoring-Kandidat. Beim State-Management sollte geprueft werden, ob Props ueber viele Ebenen durchgereicht werden oder ob globaler State eigentlich lokal sein sollte, beides erzeugt Rendering-Probleme und schwer nachvollziehbaren Datenfluss. Und bei der Build-Pipeline lohnt sich der Blick auf veraltete Tooling-Versionen, ueberwachte Bundle-Groessen und korrekt konfiguriertes Treeshaking.
jQuery schrittweise loswerden
Nicht alle jQuery-Aufrufe auf einmal migrieren. Zuerst Bereiche identifizieren, mit dem einfachsten anfangen, jQuery-Funktionen schrittweise durch Vanilla JS oder ein modernes Framework ersetzen.
Checkliste: Doppelte Komponenten und Code-Duplikate identifiziert, State-Management-Strategie klar definiert, Bundle-Groessen gemessen und Optimierungsziele gesetzt, Build-Tooling aktuell, CSS-Architektur sauber strukturiert, jQuery-abhaengige Codestellen inventarisiert.
Ein Beispiel aus der Praxis
Eine Frontend-Codebasis hatte ueber die Jahre drei verschiedene Ansaetze fuer denselben Anwendungsfall angesammelt: eine aeltere jQuery-Loesung, eine mittlere Migrationsphase mit gemischtem Code, und neuere React-Komponenten. Ein neuer Entwickler musste fuer eine einzige kleine Aenderung alle drei Ansaetze verstehen, um zu wissen, welcher an welcher Stelle greift. Die konsequente Entscheidung, jQuery-Reste nur noch beim ohnehin geplanten Anfassen des jeweiligen Bereichs zu entfernen, sorgte innerhalb eines Jahres fuer eine fast vollstaendige Bereinigung, ohne dedizierten Migrationsaufwand.
Frontend-Codebase aufraeumen? markom.digital macht Frontend-Refactoring-Projekte, von der Analyse bis zur schrittweisen Migration.
