Галоўная / Артыкулы / Arcovia: Адаптаваны ўстатку для архітектуры на аднойчынных правілах для дапрацоўак у React

Arcovia: Адаптаваны ўстатку для архітектуры на аднойчынных правілах для дапрацоўак у React

Адзнайце, як проект хакатона аналізуе кодавесы React і Next.js за дапамою дэтэрміністычных правілаў, каб ацэніць стан архітектуры і выявіць схованы тэхнічны дыват.

1169 слоў

Задача, яка запусціла гэты проект

Падчас няўзабавнае хакатону OpenAI Build Week команда ставілася да задачы проста: стварыць ўсё тое, чаго разработчыкі справжня будуць хацець викорыстоўваць ў павсякдзеннай працы.

До канца першага вечара концэпцыя была ясная. За ўсьмо тры дні гэтая концэпцыя ператворылася на рабочы проект з відкрытым кодам пад назвай Arcovia.

Гэта не мяў быць ентычным дэманстрацыйным прыкладам AI. Ёго мета — рашыць частаю проблему, з якою сталквуюцца разработчыкі пад час адтрымання вялікіх кодавых базаў на React пра дзейны час.

Прасоцін у існуючых інструментах

Ўжо існуе множнацьце якісных інструментаў для падтрымання чыстоты коду.

  • ESLint выяўляе проблематычныя шаблоны.
  • Prettier адпаведае за форматаванне.
  • SonarQube выяўляе прычыны падвышанай якосці.
  • Рэвізоры на адной з AI-тэхналогій пропануеюць удосконаленні на рэвені коду.

Адзін з гэтых інструментоў не можа даць адказ на болей структурныя запытанні, такія як:

  • Чы ў цэлым архітектурны план у гарнай форме?
  • Калікі модулі стаюць вузькімі месцаў?
  • Дзе накапліваецца тэхнічны борг?
  • Калікі файлы патрабуюць переработкі першымі?
  • Што насправдзе запячатала атрыбуты конкрэтнага проекту?

Архітектурныя проблемы зазвычай выяўляюцца толькі пад час обсужэння коду, або, ў горшым разе, калі працаваць з кодавой базай вже стае складна. Недастатком быў спосаб размяроўваць стан архітектуры прычым яна не ператворылася на справжню проблему.

Пазнайоміцеся з Arcovia

Arcovia — это інструмент Architecture Intelligence, створаны для кодавых базаў React і Next.js.

У працоўніку не паказваецца дужы список незв’язаных адзывоў, а проект ацэнюецца цалістычна і выдаецца інтэрактыўны HTML-атрыбут.

У тым звярненні ўключаецца:

  • Рэйтынг стану архітектуры
  • Граф залежнасцяў
  • Актуальныя проблемы архітектуры
  • Разбор, як быў вылічаны рэйтынг
  • Расадкі, базаваныя на правілах
  • Паказчык навантажэння на тырджоўку
  • Практычныя рэкамендаціі

Arcovia не прагне заменіць інструменты для перагляду коду. Яго мета — даць разработчыкам можлівасць бачыць большую структурную кантэкст, які не можна пазначыць за дапамогою адзінаковых правілаў перагляду коду.

Як функцыонуе

Інструмент усередзіне выканаў цэлы праграмны канвей для детерміністычнага аналізу.

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

Аналізатор наразе можа пазначыць розныя структурныя проблемы. Серед іх:

  • Чрэзмерна центрычныя „Божыя модулі“, ад якіх залежыць занадта больша частка прыкладнення
  • Компаненты або файлы з вялікай колькасцю залежнасцяў
  • Компаненты або файлы з вялікай колькасцю выходных залежнасцяў
  • Модулі-сироты, якія нічым іншым не аб’яднуюцца
  • Вялікія складовыя, якія сталі занадта вялікімі
  • Глыбока іерархія JSX
  • Модулі занадта вялікага размеру
  • Павтарэння імпортаў, распаўзлыя па файлах
  • Невыкарыстаныя экспорты, засталыя ў базе коду
  • У замест на тое, каб перыяднальваць гэтыя нараджэнні аддзельна, Arcovia аграгуе іх у адны, зрозумілы бал архітэктуры.

    Правілы — першыя, AI — другія

    Адна з рашынакоў, якія стваральнікі супрацоўна прыменяюць, — гэта адстаўканне AI ад основнай логіки аналізу.

    Сам бал архітэктуры ніколі не вырачваецца мовным моделем.

    У замест таго Arcovia працуе так:

    • парсаванне базы коду через яе AST
    • стварэнне графаў залежнасцяў
    • апрацоўка рэзультатаў па дэтэрміністычныях правілах архітэктуры
    • вырачэнне балоў па кожной катагорыі
  • Расчытак паметрака навантажэння на тырджоўку
  • Аб’еднанне всіх гэтых дадзеных у фінальную оцэнку архітектуры
  • Заводзка гэтага дыяжнага рэзультаты застаюцца адносова стабільнымі і можна ўтварыць занова.

    Шырэйшы план — карыстацца ШІ для падтрымкі процэсу, а не для самастойнага расчытку оцэнак. Планаваныя застосоўванні включаюць:

    • Паспяшчанне індывідуальных нараджэнняў простым языкам
    • Прапанаванне падходаў да рефакторынгу
    • Адказванне на пытанні, якія стосуюцца дакладнай інфармацыі
    • Адказванне на дапаможныя пытанні пра атлас

    Дэтэрміністычны аналіз застаецца ўнікальным источнікам правды, а ШІ выступае як інтэрпретар над ўсім гэтым.

    Работа з GPT-5.6 і Codex

    Гэты хакатон таксама стаў першым моментам, калі команда выкарыстоўвала ШІ як справжньага саавтара працы, а не як проста паспяшчальнік заповнэння тэксту.

    У першыя дні выходных былі выкарыстоўваны GPT-5.6 і Codex для:

    • створэння спісу архітектурных правіл, якія маглі б быть уключаны
    • дапрацоўкі спосабу, яким модэль ацэнкі вазавае разныя сигналы
    • рэалізацыі адзінаковых функцый
    • удосконалення візуальнага дизайnu атласу
    • спроставання складнай логікі
    • пераканальвання рашэнняў па рэалізацыі

    ChatGPT Images таксама быў выкарыстоўваны для стварэння бренду Arcovia, укладаючы ў сябе маскота-сову, логаі і іншыя матэрыялы для запуску.

    Загальны процес работы выглядаў прыродней, чым чакалася. У замест на таго, каб перадаваць цэлыя функцыйны элементы на абработку з самага початку да канца, найбольшая практычная корысть выйшла з швайных ітерацый, падобных да супрацоўкі з другім інжынерам, які дапамагаў рассмотрваць варыянты дизайна і вазаваць практычныя аспекты.

    Выводы з выходных

    Складанне цієї версіі за адзённы вікенд практычна дала калькі корыстных урокаў.

    Архітектура не паддаецца простым метрыкам

    Оцэнка якасці коду ізольавана ўсё-такі ёст механічная.

    Оцэнка архітектуры ўсё складнейшая, адколі яна залежыць ад контэксту, супернікаючых компромісаў і рэтельна налаштаваных ваг у меры больш чым адзінакоў правілаў.

    Знаходжэнне правага балансу межы практычна корыстнымі сигналамі і шумнымі хвальбовымі рэзультатамі застаецца адкрытым, трывалым завадам.

    Бал без контэксту не ўжо корыстны

    Даўжанне кому-небудзь цяперашняе число самае по сабе мало чаго не паведамляе.

    Разработчыкі муцяць бачыць:

    • чаму бал выйшаў такім, якім ён є
    • якія фактары зробілі найбольшы вплыв
    • якія проблемы маюць найбольшую вагу
    • што трэба рашыць перша

    Гэта прычына, чаму адзінакоўку было спроектавана так, каб яна адпавядала на запытанні пра рэйтынг, а не была проста незрозумелым выходным дадзеннем.

    Штучны інтэлект прышвартоўвае процес, але не так, як можна было бы спадзявацца

    GPT-5.6 і Codex явна прышвартавалі процес стварэння.

    Протыякож найбольшая парадактнаець у продуктывасці не выйшла з быстрэйшага стварэння коду.

    Яна выйшла з викорыстоўванняя штучнага інтэлекту як партнера для раздумоў: аналізу выбораў у дизайне, ставлення запытанняў да прыпускаў і швайнае тэставанне разных ідэй.

    Што будзе далей

    Гэта выданне — толькі пачатак.

    Функцыі, якія расследуюцца для будучых версый, включаюць:

    • Інтэграцыя з GitHub Action
    • Адстаўленне історыі адзінакоўкаў
    • Аналіз тэндэнцый архітектуры з часам
    • Расшырэнне для VS Code
    • Порэванае адзіначэнне проектаў
    • Панелі керування для всіх членоў команды
    • Кансалтатыванне па архітектуры з викорыстоўванняем штучнага інтэлекту

    Даўгастрачныя цілі — гэта адказванне інжынерным камандам у ўсё большай меры стежыць, вылічваць та паспрабаваць удосконаліць архітектуру іх програмнага забезпечэння з часам.

    Мы радзімеся пра вашыя мнення

    Arcovia ўжо зараз є абсалютна адкрытым кодам, і мнення разработчыкаў, які актываўна ствараюць прыкладнасці на базе React чысця Next.js, будуць выключна ценнымі.

    Калькі пытанні, якія варта розглядаць:

    • Чы не дае рэйтинг архітектуры можлівасць з’ясаваць што-небудзь значны?
    • Калькі іншых архітектурных проблем трэба выявляць?
    • Што зробіла б такая атласна інфармацыя практычнаю ў вашай повсякдзеннай роботе?

    Код выкантроўку проекту знаходзіцца ў яго рэпазітарыі на github.com/gkhan205/arcovia; пакет можна запісаць безпосередня з npmjs.com/package/arcovia, а полныя дакументы размешчаны на arcovia.ghazikhan.in.

    Ідэі, адзінакі і нават працоўныя заперчання ўсе абоўязкова ласкава прыймаем, калі ўжо таму, што практычныя выкарыстанні ў рэальных умовах — гэта найэфектывышы спосаб з часам падняць якосьць Arcovia.

    Спадневаная літэратура

  • 20 адвансаванных шаблонаў Next.js 16 для архітектуры прыкладных програм высокага рангу — апіс прыемаў сервер-фарст дизайну, кэшавання, стрімінгу, PPR, паралельных і перехопляючых маршрутаў, а таксама іншых шаблонаў для стварэння масштабавальных прыкладных програм на Next.js 16.