Strona główna / Artykuły / Arcovia: Narzędzie inteligencji architektonicznej oparte na regułach dla aplikacji React

Arcovia: Narzędzie inteligencji architektonicznej oparte na regułach dla aplikacji React

Odkryj, w jaki sposób projekt z hackathonu analizuje bazy kodu React i Next.js za pomocą reguł deterministycznych, aby ocenić stan architektury i ujawnić ukryty dług techniczny.

1169 słów

Wyzwanie, które zapoczątkowało ten projekt

Podczas niedawnego hackathonu OpenAI Build Week zespół postawił sobie prosty cel: stworzyć coś, czego programiści naprawdę chcieliby używać na co dzień.

Pod koniec pierwszego wieczoru koncepcja była już jasna. W ciągu kolejnych dwóch dni ta koncepcja przekształciła się w działający projekt o otwartym kodzie o nazwie Arcovia.

To nie miało być jednorazowe demo AI. Celem było rozwiązanie powtarzającego się problemu, z którym borykają się programiści podczas utrzymywania dużych baz kodu React przez długi czas.

Luka w istniejących narzędziach

Istnieje już wiele solidnych narzędzi do utrzymywania czystości kodu.

  • ESLint wskazuje na problematyczne wzorce.
  • Prettier zajmuje się formatowaniem.
  • SonarQube ujawnia problemy z jakością.
  • Czatowicze oparte na AI proponują ulepszenia na poziomie linii kodu.

Jednak żaden z tych narzędzi nie może odpowiedzieć na bardziej strukturalne pytania, takie jak:

  • Czy ogólna architektura jest w dobrym stanie?
  • Które moduły stają się wąskimi gardłami?
  • Gdzie gromadzi się dług techniczny?
  • Które pliki wymagają najpierw refaktoryzacji?
  • Co tak naprawdę wpłynęło na ocenę danego projektu?

Problemy architektoniczne zwykle pojawiają się dopiero podczas dyskusji nad przeglądem kodu, a co gorsza, gdy baza kodu staje się już trudna w obsłudze. Brakowało sposobu na ocenę stanu architektury, zanim stanie się ona prawdziwym obciążeniem.

Poznaj Arcovia

Arcovia jest opisywane jako narzędzie Architecture Intelligence stworzone dla baz kodu React i Next.js.

Zamiast zasypywać użytkownika długim списком niepowiązanych ostrzeżeń, ocenia projekt w sposób holistyczny i generuje interaktywny raport HTML.

Ten raport zawiera:

  • Ocenę stanu architektury
  • Graf zależności
  • Kluczowe obszary architektury
  • Wyjaśnienie sposobu obliczenia oceny
  • Wyniki oparte na regułach
  • Wskaźnik obciążenia konserwacją
  • Zalecenia praktyczne

Arcovia nie ma na celu zastąpienia narzędzi do sprawdzania kodu. Jej zadaniem jest umożliwienie programistom lepsze zrozumienie szerszego kontekstu strukturalnego, którego nie mogą uchwycić pojedyncze reguły.

Wewnętrzna struktura

Narzędzie wewnętrznie wykonywać pełny, deterministyczny proces analizy.

Project
   │
   ▼
Scanner
   │
   ▼
AST Parser
   │
   ▼
Project Model
   │
   ▼
Dependency Graph
   │
   ▼
Rule Engine
   │
   ▼
Score Engine
   │
   ▼
Interactive HTML Report

Analizator jest obecnie w stanie zidentyfikować szereg problemów strukturalnych. Wśród nich:

  • Zbyt centralne „moduły-bóg”, od których zależy zbyt wiele elementów aplikacji
  • Komponenty lub pliki o wysokim wskaźniku przychodzących zależności
  • Komponenty lub pliki o wysokim wskaźniku wychodzących zależności
  • Modyuły sieroty, do których nic innego się nie odnosi
  • Wielkie komponenty, które stały się zbyt duże
  • Głębokie nawarstwianie JSX
  • Zbyt duże modyuły
  • Duplikowane importy rozproszone w różnych plikach
  • Nieużywane eksporty pozostawione w bazie kodu
  • Zamiast wymieniać te ustalenia osobno, Arcovia agreguje je w jeden, łatwy do zrozumienia wynik oceny architektury.

    Najpierw zasady, potem sztuczna inteligencja

    Jedną z decyzji, którei twórcy są szczególnie dumni, jest wykluczenie sztucznej inteligencji z podstawowej logiki analizy.

    Sam wynik oceny architektury nigdy nie jest wytwarzany przez model językowy.

    Zamiast tego Arcovia działa w następujący sposób:

    • analizuje bazę kodu za pomocą jej AST
    • buduje grafy zależności
    • przepuszcza wyniki przez deterministyczne zasady architektoniczne
    • oblicza wyniki dla poszczególnych kategorii
    • obliczanie wskaźnika obciążenia konserwacyjnego
    • łączenie wszystkich tych elementów w końcową ocenę architektury

    Dzięki takiemu projektowi wyniki są spójne i powtarzalne.

    Ogólny plan zakłada, że sztuczna inteligencja ma ulepszać doświadczenie użytkownika, a nie przejmować samą ocenę. Planowane zastosowania to:

    • wyjaśnianie poszczególnych ustaleń w prostym języku
    • proponowanie metod refaktoryzacji
    • wskazywanie na odpowiednie zasoby edukacyjne
    • odpowiadanie na dodatkowe pytania dotyczące raportu

    Analiza deterministyczna pozostaje jedynym źródłem prawdy, a sztuczna inteligencja pełni rolę interpretatora na jej podstawie.

    Praca z GPT-5.6 i Codex

    To hackathon był również pierwszym razem, gdy zespół korzystał ze sztucznej inteligencji jako prawdziwego współpracownika podczas tworzenia rozwiązania, zamiast traktować ją jedynie jako udoskonalony automatyczny uzupełnianie tekstu.

    W trakcie weekendu wykorzystano GPT-5.6 i Codex w celu:

    • sformułowania pomysłów na to, które zasady architektoniczne warto włączyć
    • dopracowania sposobu, w jaki model oceny przyswajający wagę różnym sygnałom
    • wdrożenia poszczególnych funkcji
    • udoskonalenia wizualnego wyglądu raportu
    • uproszczenia skomplikowanej logiki
    • weryfikacji decyzji dotyczących implementacji pod kątem rozsądku

    ChatGPT Images został również użyty do stworzenia identyfikacji wizualnej Arcovia, w tym maskotki w postaci sowy, logo oraz innych materiałów promocyjnych.

    Ogólny proces pracy okazał się bardziej naturalny, niż się spodziewano. Zamiast przekazywać całe funkcje do generowania od początku do końca, największe korzyści przyniosły szybkie iteracje, podobne do pracy z drugim inżynierem, który pomagał w omawianiu opcji projektowych i ocenie kompromisów.

    Główne wnioski z weekendu

    Kompresja tego procesu budowy w jeden weekend ujawniła kilka przydatnych wniosków.

    Architektura opiera się prostym metrykom

    Ocena jakości kodu w izolacji jest dość mechaniczna.

    Ocena architektury jest znacznie trudniejsza, ponieważ zależy od kontekstu, konkurencyjnych kompromisów oraz starannie dostosowanych wag dla wielu różnych reguł.

    Znalezienie właściwej równowagi pomiędzy rzeczywiście przydatnymi sygnałami a szumowymi fałszywymi pozytywami pozostaje otwartym, ciągłym zadaniem.

    Punktacja bez kontekstu nie jest pomocna

    Poddanie komuś samej liczby niewiele mu mówi.

    Rozwijający muszą zobaczyć:

    • dlaczego uzyskano taki wynik
    • kterie czynniki miały największy wpływ
    • które problemy mają najwyższą wagę
    • co należy rozwiązać najpierw

    To jest uzasadnienie dla takiego projektu raportu – skupienia się na wyjaśnieniu wyniku zamiast traktowania go jako nieprzejrzystego rezultatu.

    SZT przyspiesza prace, ale nie w sposób, jakiego by się spodziewało

    GPT-5.6 i Codex wyraźnie przyspieszyły proces tworzenia.

    Mimo to największy wzrost produktywności nie wynikał z szybszego generowania kodu.

    Pochodził on z wykorzystania SZT jako partnera do myślenia: omawiania opcji projektowych, kwestionowania założeń i szybkiego testowania różnych pomysłów.

    Co będzie dalej

    To wydanie to tylko punkt wyjścia.

    Funkcje rozważane w przyszłych wersjach to między innymi:

    • Integracja z GitHub Action
    • Śledzenie historii raportów
    • Analiza trendów architektury w czasie
    • Rozszerzenie dla VS Code
    • Porównywanie projektów obok siebie
    • Paneli kontrolne dla całego zespołu
    • Poradnictwo architektoniczne oparte na SZT

    Długoterminowym celem jest pomaganie zespołom inżynieryjnym w ciągłym monitorowaniu, mierzeniu i udoskonalaniu architektury swojego oprogramowania z biegiem czasu.

    Zapraszamy do opinii

    Arcovia jest w pełni open source, więc opinie od programistów aktywnie tworzących aplikacje na React lub Next.js byłyby szczególnie cenne.

    Kilka pytań wartych rozważenia:

    • Czy ocena architektury rzeczywiście odzwierciedla coś istotnego?
    • Które inne problemy architektoniczne powinny być wykrywane?
    • Co sprawiłoby, że taki raport stałby się naprawdę przydatny w codziennej pracy?

    Kod źródłowy projektu znajduje się w jego repozytorium pod adresem github.com/gkhan205/arcovia, pakiet można zainstalować bezpośrednio z npmjs.com/package/arcovia, a pełne dokumentacje są dostępne pod adresem arcovia.ghazikhan.in.

    Idee, opinie, a nawet sprzeciw są szczerego powitania, ponieważ rzeczywiste zastosowanie jest najskuteczniejszym sposobem na stopniowe udoskonalanie Arcovii.

    Literatura pokrewna

  • 20 zaawansowanych patternów Next.js 16 dla architektury aplikacji na wysokim poziomie — Przegląd projektowania typu server-first, cache’ingu, strumieniowania danych, PPR, tras równoległych i przerywających oraz innych patternów służących do budowy skalowalnych aplikacji Next.js 16.