GuideDie GatsbyJS & NextJS Cleanup-Roadmap

Wenn Sie eine GatsbyJS- oder NextJS-Codebasis haben, die unübersichtlich und schwer zu warten geworden ist, kann es überwältigend sein, zu wissen, wo man mit der Bereinigung anfangen soll. Mit einem klaren Plan und einer Roadmap ist es jedoch möglich, die Codebasis wieder in Ordnung zu bringen und ihre Gesamtqualität zu verbessern. Hier sind sechs Phasen, die Sie bei einem Cleanup-Projekt berücksichtigen sollten:

Phase 1: Nicht-destruktive Entfernungen

Der erste Schritt bei der Bereinigung einer Codebasis besteht darin, nicht-destruktive Entfernungen vorzunehmen, wie das Entfernen unnötiger console.log-Anweisungen sowie ungenutzter Variablen und Importe. Es ist wichtig, für diese Phase einige grundlegende Richtlinien festzulegen, z. B. die Anzahl der Probleme für einen A/B-Test zu messen, um die Auswirkungen der Änderungen zu beurteilen, und neue Git-Branches für jede Kategorie von Änderungen anzulegen. Es ist auch eine gute Idee, verschiedene Entwickler an den einzelnen Änderungskategorien arbeiten zu lassen, da dies dazu beitragen kann, dass alle Bereiche der Codebasis gründlich bereinigt werden.

Während Sie diese nicht-destruktiven Entfernungen vornehmen, ist es wichtig, weiterhin neue Features zu liefern und alle kritischen Probleme zu beheben, die auftreten, insbesondere wenn die unübersichtliche Codebasis viele Bugs in der Produktion verursacht. Sie sollten auch in Betracht ziehen, verschiedene Branches für verschiedene Änderungstypen zu erstellen, da dies dazu beitragen kann, Ihre Codebasis organisiert und leicht verwaltbar zu halten.

Neben dem Entfernen von console.log-Anweisungen und ungenutzten Variablen und Importen sollten Sie auch das Bereinigen nicht verwendeter Dependencies und Konfigurationsdateien in Betracht ziehen. Seien Sie jedoch vorsichtig beim Einsatz von Tools zur Suche nach ungenutzten Dependencies, da es gefährlich sein kann, wenn das Tool bestimmte Dependencies in der gesamten Codebasis nicht erkennt und viele Falsch-Positive zurückgibt.

Phase 2: Grundlegende Tests

Nachdem Sie die nicht-destruktiven Entfernungen vorgenommen haben, ist es Zeit, zur nächsten Phase überzugehen: dem Einrichten eines grundlegenden End-to-End-Test-Setups. Dies ist ein wichtiger Schritt, da er es Ihnen ermöglicht, sicher umfangreichere Änderungen an der Logik Ihrer Codebasis vorzunehmen, ohne das Risiko einzugehen, wesentliche Funktionalitäten zu beschädigen.

Dazu sollten Sie eine grundlegende Test-Suite erstellen, die alle wesentlichen User-Flows abdeckt. Wenn Sie beispielsweise an einer E-Commerce-Website mit GatsbyJS / NextJS und Headless Shopify arbeiten, könnten Sie Tests für die folgenden User-Flows einschließen:

Benutzer kann die Website betreten

Benutzer kann eine Kategorieseite aufrufen

Benutzer kann eine Produktseite aufrufen

Benutzer kann ein Produkt in den Warenkorb legen

Benutzer kann zur Kasse gehen

Benutzer kann den Kauf abschließen

Es ist wichtig zu beachten, dass vor Abschluss dieser Phase keine Änderungen an der Logik oder an "gefährlichem" Code vorgenommen werden sollten, da Tests es Ihnen ermöglichen, in späteren Phasen sicher komplexere Code-Änderungen vorzunehmen und gleichzeitig sicherzustellen, dass die Grundfunktionalität der Website erhalten bleibt.

Phase 3: Dependency-Fixes und Entfernung ungenutzter Drittanbieter-Tools und Bibliotheken

In der dritten Phase des Cleanup-Prozesses sollten Sie sich auf die Behebung defekter Dependencies und die Entfernung ungenutzter Drittanbieter-Tools und Bibliotheken konzentrieren. Dies kann helfen, Ihre Codebasis zu verschlanken und die Anzahl der unnötigen Dependencies zu reduzieren, die Sie pflegen müssen.

Phase 4: Vereinheitlichungsphase

In der vierten Phase des Cleanup-Prozesses ist es Zeit, sich auf die Vereinheitlichung der Codebasis zu konzentrieren. Dies kann die Standardisierung von Dateinamen, Formatierung und Namenskonventionen für React-Komponenten umfassen sowie sicherstellen, dass GraphQL-Abfragen am gleichen Ort liegen. Es gibt viele bewährte Konventionen, denen Sie folgen können, oder Sie können Ihre eigenen Richtlinien basierend auf den Anforderungen Ihrer spezifischen Codebasis erstellen.

Das Ziel dieser Phase ist es, die Codebasis konsistenter und leichter verständlich zu machen, was zur Verbesserung der Lesbarkeit und Wartbarkeit beitragen kann.

Phase 5: Grundlegende Codebase-Gesundheit etablieren und schützen

Die fünfte Phase dreht sich um die Etablierung und den Schutz der Gesundheit der grundlegenden Codebasis. Dazu können verschiedene Aufgaben gehören, wie die Bereinigung der Git-Historie, falls Umgebungsvariablen in Git eingecheckt wurden, die Implementierung von Husky und Lint-Staged zum Linting von Commits bei Commit- und PR-Zeitpunkten sowie die Kontrolle der Fehlerbehandlung in der gesamten Codebasis.

Weitere Aufgaben, die in dieser Phase enthalten sein können, umfassen das Extrahieren von React-Komponenten aus großen Dateien und die Verwendung von Komposition, das Extrahieren von SVG-Elementen in eigene Komponenten sowie das Entfernen ungenutzter Dateien. Seien Sie dabei vorsichtig beim Einsatz von Tools zur Suche nach ungenutzten Dateien, da es gefährlich sein kann, wenn das Tool bestimmte Verwendungen von Dateien in der gesamten Codebasis nicht erkennt und viele Falsch-Positive zurückgibt.

Zusätzlich zu diesen Aufgaben sollten Sie auch überprüfen, ob Funktionen wie vorgesehen verwendet werden (z. B. keine find-Methode als Ersatz für die forEach-Methode), sicherstellen, dass Props nicht unnötigerweise gestreut werden und auf eine bestimmte Weise verwendet werden, und erwägen, einige Funktionen in Pure Functions umzuwandeln, um die Performance und Lesbarkeit zu verbessern.

Phase 6: Upgrade auf den neuesten möglichen Stand

In der letzten Phase des Cleanup-Prozesses ist es Zeit, auf die neuesten möglichen Versionen von GatsbyJS / NextJS, andere Dependencies sowie Source-Plugins und externe Systeme zu upgraden (z. B. ein Update von Strapi v3 auf v4). Dies kann dazu beitragen, sicherzustellen, dass Ihre Codebasis die aktuellsten Technologien verwendet und so effizient und effektiv wie möglich ist.

Fazit:

Sobald Sie alle sechs Phasen der Cleanup-Roadmap abgeschlossen haben, ist es wichtig, die Auswirkungen der Änderungen zu messen und die Ergebnisse Ihrem Kunden zu präsentieren. Stellen Sie sicher, dass Sie die geschäftlichen Auswirkungen des Cleanup-Prozesses kommunizieren, wie z. B. die Möglichkeit, Features viel schneller und kostengünstiger zu liefern, und das Risiko von Fehlern und Ausfällen zu reduzieren, die die Rentabilität und Kundenbeziehungen beeinträchtigen könnten. Mit dieser Roadmap können Sie dazu beitragen, Ihre Codebasis wieder in Ordnung zu bringen und ihre Gesamtqualität und Wartbarkeit zu verbessern.

Wenn Sie ein großes und überwältigendes Cleanup-Projekt vor sich haben und Orientierung oder Hilfe benötigen, kontaktieren Sie mich gerne.