Arcovia: Ein regelbasiertes Architektur-Intelligenzwerkzeug für React-Anwendungen
Erfahren Sie, wie ein Hackathon-Projekt Codebasen von React und Next.js mithilfe deterministischer Regeln analysiert, um den Zustand der Architektur einzuschätzen und versteckte technische Schulden aufzudecken.
Die Herausforderung, die dieses Projekt ins Leben rief
Während eines kürzlichen OpenAI Build Week Hackathons hatte ein Team ein klares Ziel: Etwas zu schaffen, das Entwickler tatsächlich täglich nutzen möchten.
Bis zum Ende des ersten Abends stand das Konzept fest. Innerhalb von zwei weiteren Tagen verwandelte sich dieses Konzept in ein funktionsfähiges Open-Source-Projekt mit dem Namen Arcovia.
Es sollte keine einmalige KI-Demo sein, sondern eine Lösung für ein wiederkehrendes Problem, mit dem Entwickler bei der Wartung großer React-Codebasen über lange Zeiträume konfrontiert sind.
Die Lücke in den bestehenden Werkzeugen
Es gibt bereits viele solide Tools, um Code sauber zu halten.
- ESLint weist auf problematische Muster hin.
- Prettier kümmert sich um die Formatierung.
- SonarQube zeigt Qualitätsprobleme auf.
- KI-basierte Reviewer schlagen Verbesserungen auf Zeileebene vor.
Doch keines dieser Tools kann strukturellere Fragen beantworten, wie zum Beispiel:
- Ist die Gesamtarchitektur in gutem Zustand?
- Welche Module entwickeln sich zu Engpässen?
- Wo häuft sich technischer Schuldenaufwand an?
- Welche Dateien verdienen zuerst Aufmerksamkeit beim Refactoring?
- Was hat eigentlich zu der jeweiligen Projektbewertung geführt?
Architekturprobleme treten in der Regel erst in Diskussionen während der Code-Überprüfung zutage – oder schlimmer noch, erst dann, wenn die Codebasis bereits schwer zu handhaben ist. Was fehlte, war eine Möglichkeit, den Zustand einer Architektur zu bewerten, bevor sie zu einem echten Risiko wird.
Lernen Sie Arcovia kennen
Arcovia wird als Architecture Intelligence-Tool beschrieben, das für React- und Next.js-Codebasen entwickelt wurde.
Anstatt Sie mit einer langen Liste von unzusammenhängenden Warnungen zu überfluten, bewertet es das Projekt ganzheitlich und liefert einen interaktiven HTML-Bericht aus.
Der Bericht umfasst:
- Einen Architecture Health Score
- Ein Abhängigkeitsdiagramm
- Architektur-Hotspots
- Eine Aufschlüsselung, die erklärt, wie der Score ermittelt wurde
- ergebnisse auf Basis von Regeln
- Einen Indikator für die Wartungslast
- praktische Empfehlungen
Arcovia versucht nicht, Linter zu ersetzen. Sein Zweck ist es, Entwicklern Einblicke in das größere strukturelle Bild zu geben, das einzelne Linter-Regeln nicht erfassen können.
Hinter den Kulissen
Das Tool führt intern einen vollständig deterministischen Analyseprozess durch.
Project
│
▼
Scanner
│
▼
AST Parser
│
▼
Project Model
│
▼
Dependency Graph
│
▼
Rule Engine
│
▼
Score Engine
│
▼
Interactive HTML Report
Der Analyzer kann derzeit eine Reihe struktureller Probleme erkennen. Dazu gehören:
- übermäßig zentrale „God Modules“, von denen zu viel der Anwendung abhängt
- Komponenten oder Dateien mit hohem Fan-In
- Komponenten oder Dateien mit hohem Fan-Out
Anstatt diese Erkenntnisse isoliert aufzulisten, fasst Arcovia sie zu einem einzigen, erklärbaren Architektur-Score zusammen.
Regeln zuerst, KI zweitens
Eine Entscheidung, mit der die Entwickler sehr zufrieden sind, ist es, KI aus der Kernanalyselogik herauszuhalten.
Der Architektur-Score selbst wird niemals von einem Sprachmodell erzeugt.
Anstatt dessen arbeitet Arcovia wie folgt:
- durch die AST des Codebases zu analysieren
- Abhängigkeitsgraphen zu erstellen
- die Ergebnisse anhand deterministischer Architekturregeln zu prüfen
- Scores pro Kategorie zu berechnen
Durch dieses Design bleiben die Ergebnisse konsistent und reproduzierbar.
Der übergeordnete Plan besteht darin, dass KI die Arbeit unterstützt, anstatt selbst die Bewertung vorzunehmen. Geplante Anwendungen sind:
- Erklärung der einzelnen Ergebnisse in einfachen Worten
- Vorschlag von Refactoring-Methoden
- Hinweis auf relevante Lernressourcen
- Beantwortung weiterer Fragen zum Bericht
Die deterministische Analyse bleibt die einzige Quelle der Wahrheit, wobei KI als Interpret darübergelegt wird.
Arbeit mit GPT-5.6 und Codex
Dieser Hackathon markierte außerdem das erste Mal, dass das Team KI als echten Partner während des Entwicklungsprozesses einsetzte, anstatt sie lediglich als verbesserte Autocomplete-Funktion zu betrachten.
Während des Wochenendes wurden GPT-5.6 und Codex verwendet, um:
- ideenreich zu erarbeiten, welche architektonischen Regeln sinnvoll waren
- die Art und Weise zu verfeinern, wie das Bewertungsmodell verschiedene Faktoren berücksichtigt
- eine Reihe von Funktionen umzusetzen
- das visuelle Design des Berichts zu verbessern
- komplexe Logiken zu vereinfachen
- die Umsetzungsentscheidungen auf Plausibilität zu überprüfen
Auch ChatGPT Images wurde genutzt, um das Markenkonzept von Arcovia zu entwerfen – einschließlich des Eulen-Mascots, des Logos sowie weiterer Materialien für die Markteinführung.
Der gesamte Arbeitsablauf war überraschend nativ. Anstatt ganze Funktionen von Anfang bis Ende generieren zu lassen, ergab sich der größte Nutzen aus schnellen Rückfragen und Iterationen – ähnlich wie bei einem zweiten Ingenieur, der zur Diskussion über Designoptionen und Abwägungen zur Verfügung steht.
Lerneffekte des Wochenendes
Die Komprimierung dieses Builds auf ein einziges Wochenende brachte mehrere nützliche Erkenntnisse zutage.
Architektur widersteht einfachen Metriken
Die Beurteilung der Codequalität isoliert voneinander ist eher mechanisch veranlagt.
Die Beurteilung der Architektur ist weitaus schwieriger, da sie vom Kontext, konkurrierenden Abwägungen sowie sorgfältig abgestimmten Gewichten verschiedener Regeln abhängt.
Das richtige Gleichgewicht zwischen wirklich nützlichen Signalen und störenden Fehlpositiven zu finden, bleibt eine offene, fortlaufende Aufgabe.
Eine Bewertung ohne Kontext ist nicht hilfreich
Dem Betreffenden einfach nur eine Zahl zu übergeben, sagt ihm nicht viel.
Entwickler müssen Folgendes sehen:
- warum die Bewertung so ausgefallen ist
- welche Faktoren am meisten beigetragen haben
- welche Probleme den größten Einfluss haben
- was zuerst angegangen werden sollte
Das ist der Grund dafür, dass der Bericht so gestaltet wurde, dass er die Bewertung erklärt, anstatt sie als undurchsichtigen Ausgabewert zu behandeln.
KI beschleunigt die Arbeit – aber nicht auf die erwartete Weise
GPT-5.6 und Codex haben die Erstellung eindeutig beschleunigt.
Trotzdem lag der größte Produktivitätszuwachs nicht darin, Code schneller generieren zu können.
Er entstand dadurch, dass KI als Denkpartner eingesetzt wurde: bei der Abwägung von Designentscheidungen, beim Infragestellen von Annahmen und bei der schnellen Erprobung verschiedener Ideen.
Was kommt als Nächstes?
Diese Version ist nur ein Ausgangspunkt.
Zu den Funktionen, die für zukünftige Versionen in Betracht gezogen werden, gehören:
- Integration mit GitHub Action
- Aufzeichnung der Berichtsgeschichte
- Analyse von Architekturtrends im Laufe der Zeit
- Erweiterung für VS Code
- Vergleich von Projekten nebeneinander
- Teamweite Dashboards
- Von KI gestütztes Architektur-Coaching
Das langfristige Ziel ist es, Ingenieurteams dabei zu unterstützen, die Architektur ihrer Software im Laufe der Zeit kontinuierlich zu überwachen, zu messen und zu verbessern.
Feedback ist willkommen
Arcovia ist vollständig open source, und Feedback von Entwicklern, die aktiv React- oder Next.js-Anwendungen erstellen, wäre besonders wertvoll.
Mehrere Fragen, die es zu erörtern lohnt:
- Gibt das Architektur-Score den Eindruck, etwas Bedeutendes widerzuspiegeln?
- Welche weiteren architektonischen Probleme sollten erkannt werden?
- Was würde einen solchen Bericht in Ihrem täglichen Arbeitsablauf wirklich nützlich machen?
Der Quellcode des Projekts befindet sich in seinem Repository unter github.com/gkhan205/arcovia; das Paket kann direkt von npmjs.com/package/arcovia installiert werden, und die vollständigen Dokumentationen sind unter arcovia.ghazikhan.in zu finden.
Ideen, Feedback sowie Kritik sind ausdrücklich willkommen, denn die praktische Anwendung ist der effektivste Weg, um Arcovia im Laufe der Zeit weiter zu verbessern.
Verwandte Artikel
- 20 fortgeschrittene Next.js-Muster für Anwendungen im Produktivumfeld – Lernen Sie zwanzig fortgeschrittene Next.js-Muster zu Themen wie serverbasiertem Design, Streaming, Caching, Routing und Leistung, um schnellere, skalierbare Produktivanwendungen zu entwickeln.