Wraz z rosnącą popularnością dużych modeli językowych (LLM), firmy technologiczne zaczynają dostosowywać swoje środowiska deweloperskie do wymagań nowoczesnej sztucznej inteligencji. Jedną z takich firm jest Brex – fintech, który postanowił przeprojektować swoją architekturę frontendową, by nie tylko poprawić wydajność i czytelność kodu, ale także uczynić go bardziej przyjaznym dla LLM.
Przestarzała architektura frontendu przeszkodą dla rozwoju
Brex, jako dostawca usług finansowych dla firm, od lat opierał swój frontend na React, zdobywając tym samym stabilną platformę do obsługi klientów – od startupów po korporacje. Jednak w miarę jak firma zaczęła obsługiwać coraz większe przedsiębiorstwa, inżynierowie dostrzegli ograniczenia istniejącej architektury.
Główne problemy, z jakimi się borykali, to niska wydajność spowodowana dużą liczbą zapytań sieciowych i kosztownych renderów w React oraz skomplikowana i trudna do zrozumienia struktura kodu. Wielu nowych pracowników miało trudności z wdrożeniem się do zespołu przez stopień skomplikowania kodu, co negatywnie wpływało na produktywność.
Powrót do podstaw w projektowaniu nowego frontendu
Głównym celem przebudowy było uproszczenie architektury i zwiększenie jej wydajności. Inżynierowie z Brex przyjęli podejście oparte na fundamentalnych zasadach web developmentu, koncentrując się na czterech kluczowych założeniach:
1. Preloadowanie danych – wszystkie dane powinny być pobierane już na poziomie głównego komponentu ścieżki, eliminując konieczność wykonywania nadmiernych zapytań w trakcie renderowania.
2. Przejrzyste zależności komponentów – tylko wybrane komponenty powinny mieć możliwość inicjowania zapytań do serwera, co pozwala na eliminację tzw. problemów z „kaskadowymi zapytaniami”.
3. Lokalizacja danych w komponentach – każdy komponent powinien mieć jasno określone, jakie dane wykorzystuje, bez konieczności śledzenia ich w innych miejscach kodu.
4. Minimalizacja konfiguracji na rzecz konwencji – standardowe procedury, narzędzia i dokumentacja powinny ułatwiać stosowanie sprawdzonych praktyk, zamiast wymuszać skomplikowane dostosowania.
To podejście miało kluczowe znaczenie nie tylko dla deweloperów, ale także wpłynęło na przyswajalność kodu przez systemy sztucznej inteligencji.
Problemy z React Hooks i sposób ich rozwiązania
Jednym z głównych wyzwań, jakie zidentyfikował zespół Brex, było niewłaściwe wykorzystanie React Hooks. Choć są one potężnym narzędziem, ich nadmierne stosowanie prowadziło do ukrywania problemów z nieoptymalnymi schematami GraphQL. Hooks umożliwiały uzyskanie dostępu do danych w dowolnym miejscu kodu, jednak często prowadziło to do problemów związanych z wielokrotnymi, złożonymi zapytaniami.
Aby rozwiązać ten problem, inżynierowie z Brex postanowili zastąpić używany dotąd klient Apollo narzędziem Relay, które narzuca bardziej rygorystyczne podejście do struktury zapytań. Dzięki Relay wprowadzono zasadę, że komponenty mogą pobierać dane tylko w miejscu, gdzie są one faktycznie używane, co pozwoliło na eliminację zbędnych zapytań i zwiększenie przejrzystości kodu.
Optymalizacja kodu pod kątem dużych modeli językowych
Jednym z nieoczekiwanych efektów przeprojektowania kodu było jego lepsze przyswajanie przez duże modele językowe. Dzięki relacyjnemu podejściu do struktury kodu, LLM zyskały możliwość łatwiejszego analizowania zależności między poszczególnymi komponentami.
Lokalizacja danych w komponentach pozwoliła modelom AI szybciej identyfikować, jakie informacje są wykorzystywane w danym miejscu. Wcześniejsze rozwiązanie wymagało od systemów LLM „skakania” między wieloma plikami w poszukiwaniu źródła informacji, co utrudniało automatyczne generowanie i analizę kodu.
Co więcej, Brex zaimplementował Model Context Protocol (MCP), który pozwala na dynamiczne generowanie komponentów przez AI w sposób zgodny z przyjętymi zasadami projektowania. Takie podejście nie tylko przyspiesza rozwój oprogramowania, ale także zwiększa spójność kodu na poziomie całej organizacji.
Kluczowe wnioski i przyszłość web developmentu
Projekt przebudowy frontendu w Brex pokazuje, jak ważna jest przejrzystość kodu zarówno dla ludzi, jak i dla maszyn. To, co jest łatwe do zrozumienia dla inżynierów, staje się również bardziej przystępne dla sztucznej inteligencji, która coraz częściej odgrywa kluczową rolę w procesach deweloperskich.
Brex pokazał, że nawet stosując popularne technologie, takie jak React, można znacząco poprawić wydajność i czytelność aplikacji poprzez prawidłowe zarządzanie zależnościami i usunięcie ukrytych problemów architektonicznych. Dzięki temu firma nie tylko usprawniła rozwój swojego produktu, ale także przygotowała fundament pod przyszłe innowacje z wykorzystaniem sztucznej inteligencji.
To podejście może wskazywać kierunek dla całej branży web developmentu, gdzie coraz większą rolę będzie odgrywać kod zoptymalizowany nie tylko dla ludzi, ale i dla zaawansowanych systemów AI.
