Когда инженерная команда в Brex решила обновить свой фронт, план состоял в том, чтобы перестроить, чтобы лучше обслуживать своих клиентов. Попутно, проект имел необычный побочный эффект: он сделал веб -сайт более дружелюбным для крупных языковых моделей (LLMS).
«Первоначально мы решили восстановить фронтальный стек Brex, чтобы лучше обслуживать наших клиентов — от стартапов до Fortune 500S — на предстоящие годы», — сказал старший инженер -программист Brex Marcelo Terreiro Prado, который курирует продукты AI, сказал новый стек по электронной почте. «Мы узнали, что когда люди легко понимают, он отлично работает и с LLMS».
Проблемы с фронтом
HQ BREX-это финансовая технологическая компания, которая предоставляет набор финансовых услуг, предназначенных для предприятий, особенно стартапов и высокорастущих компаний. Он предлагает корпоративные кредитные карты, счета управления денежными средствами, программное обеспечение для управления расходами и другие финансовые услуги.
По словам Террейро Прадо, оригинальный фронт Brex на основе React хорошо служил им в течение многих лет, но клиентская база Fintech менялась.
По его словам, компания Fintech Company переехала в более широкое место за последние два года и начала приобретать более крупные корпоративные клиенты.
«Мы поняли, что мы попали в потолок стека и больше не могли позволить себе ограничения, которые пришли с ним», — сказал он.
Было две основные проблемы, которые они столкнулись с оригинальной архитектурой. Во-первых, из-за чрезмерных сетевых запросов и дорогостоящих повторных ресурсов реагирования он страдал от проблем с производительностью. Во -вторых, сложность кодовой базы взлетела.
«Я чувствовал, что мне нужна степень доктора философии, чтобы понять нашу FE [frontend] Кодовая база », Terreiro Prado, поделившийся через X. Он не был один, добавил он: новые сотрудники поделились его разочарованием.
Четыре веб -разработчика «Первые принципы»
С помощью восстановления команда веб -разработчиков хотела вернуться к первым принципам для разработки фронта. Первые принципы мышление включает в себя разбивание сложных проблем на их самые основные элементы, а затем рассуждать вверх оттуда.
Инженерный менеджер Дерек Ставис, старший инженер -программист Виктор Магалхаз и Террейро Прадо разработали четыре руководящих принципа для перепроектированного фронта:
Тупой код может показаться странным дополнением. Но это ключевой компонент их редизайна.
«Мы думаем, что глупый код — лучший тип кода», — написал Террейро Прадо на X. «Глубокий код — это тот, который каждый в вашей компании может сразу же прочитать и понять его, не прыгая в десятки обручей и абстракций».
Проблема с крючками React
Команда была довольна React, которая используется на всех «поверхностях фронта», сказал он. Они хотели придерживаться этого, но сделали обновление с React 17, чтобы React 18 как часть обновления.
По словам Террейро Прадо, обновление React 18 еще больше усугубило преимущества производительности новой архитектуры благодаря параллельной модели рендеринга.
Одна большая проблема, с которой они возникли, была с React Hooks.
React Hooks — это особенность React, которая позволяет разработчикам использовать состояние и другие функции реагирования в функциональных компонентах. Они предоставляют способ управлять логикой компонентов, такой как состояние, побочные эффекты и контекст, без написания компонентов класса.
Но крючки имеют побочный эффект, позволяя простым для плохих схем GraphQL остаться незамеченными, отметил Террейро.
«Самая лучшая вещь в Hooks — это также худшая проблема: она скрывает сложность», — сказал Террейро. «При работе с GraphQL ваши данные должны быть легко доступны, читая график. Если вам нужно несколько обручей или причудливая логика для вычисления логического, который пахнет как плохая схема.
«Скрытие его в крючке не решит проблему для вашей организации — это просто подметать грязь под ковер».
«Вот почему сильные и самоуверенные принципы так важны. Он устанавливает фундамент и тон для сотрудничества в вашей организации».
— Marcelo Terreiro Prado, старший инженер -программист, Brex
В своей потоке он дал примеры крючков, скрывающих плохую схему GraphQL.
«Например, такой крючок, как« usecansubmitReimbursement », широко используется на нашем фронте», — написал он. «Невинный с первого взгляда, но наполненный массой запросов водопада и безумной логикой для вычисления лоб».
Он указал, что некоторые могут противостоять, что является результатом плохой схемы GraphQL, а не реагировать крючки.
«Безусловно, я не мог бы согласиться. Однако крючки делают это ** действительно ** легко остаться незамеченным, — написал он на X.« И из -за их вирусной природы у вас скоро будет много мест, использующих эту плохую реализацию ».
Одним из трудных уроков, которые он усвоил, является то, что инженеры -продукты будут использовать все, что им доступно, независимо от того, что реализация является хорошей или нет.
«Поэтому крайне важно избегать доставки дерьмовых крючков, иначе ваша производительность будет медленно деградировать со временем», — написал он в Твиттере.
Предыдущая архитектура также не поощряла сотрудничество frontend и backend, добавил он. Это привело к большему использованию крючков.
«Когда инженер-фронтам нужны были данные, которые не отображали схемы, они часто по умолчанию вычисляли их с помощью крючков. Этот крюк часто запускает несколько запросов, чтобы извлечь необходимые данные, а затем вычислил значение, используя frontend Business Logic, которая всегда является кодовой смелькой»,-сказал он новому стеку.
В новой архитектуре это невозможно, потому что это нарушит принципы 1, 2 и 3, добавил он.
Под редизайном, когда разработчику frontend нужны данные, которые не отображаются на график Brex, он должен сотрудничать с бэкэнд, чтобы исправить схему GraphQL.
«Вот почему сильные и самоуверенные принципы так важны», — сказал Террейро Прадо. «Он устанавливает фундамент и тон для сотрудничества в вашей организации. В частности, GraphQL был на вершине сознания нашего инженерного руководства».
Переключение Apollo для реле: как он изменил сайт для LLMS
Чтобы уменьшить проблемы, с которыми они сталкивались с React Hooks, команда заменила Аполлона на реле.
Apollo-это клиент GraphQL общего назначения по дизайну, объяснил Террейро Прадо.
«В рамках этого это делает такие вещи, как запросы изнутри компонентов действительно простыми (идеи, которые идут против наших принципов)», — сказал он. «С другой стороны, реле было разработано с учетом требований Meta. Он никогда не был создан, чтобы быть клиентом общего назначения».
Реле является структурой JavaScript от Meta для создания приложений React, управляемых данными. Он специально предназначен для работы с GraphQL, который является языком запросов и временем выполнения для API.
«Реле предполагает, что ваш код будет написан очень конкретным образом, и из -за этого он способен получить несколько умных оптимизаций», — добавил Террейро. «Такие концепции, как маскировка фрагментов, предварительные запросы и колокация данных — это идеи, выпеченные в ядро реле».
Switch to Relay и его поддержка Colocation также привели к неожиданному результату, чтобы LLMS было легче понять сайт.
Старший инженер Brex Marcelo Terreiro Prado’s Post к X.
«Оказывается, что когда вы пишете меньше запросов, и делаете ваши компоненты тесно связаны со своими требованиями данных, вся ваша архитектура становится легче понять», — сказал он. «Проверка одного компонента — это все, что требуется, чтобы объяснить, как он работает. Вам больше не нужно прыгать в десятки вложенных крючков или осмотреть его родителя, чтобы найти данные, от которых он зависит».
Это идея, которую он назвал местным рассуждением. Локальные рассуждения — это практика структурирования и организации кода таким образом, чтобы позволить разработчикам понимать и изменять отдельные компоненты или разделы кода без необходимости иметь всеобъемлющее понимание всего приложения.
«Чем меньше обручей модели должны прыгать или файлы, чтобы загрузить в свой контекст, чтобы понять кодовую базу, тем эффективнее будет», — сказал он.
Это также было ключом к включению LLMS.
«Создание нашей архитектуры очень принципиальным и самоуверенным способом также обеспечивает более структурированное руководство для LLMS», — сказал он. «У нас есть много рецептов и документов о том, как решить потребность в фронте. Мы подаем это в LLM, поэтому он точно знает, как решить определенную проблему, по сравнению с изобретением решения».
Колокация данных, которая является третьим «принципом, принятой командой, также играет роль в этом», — продолжил он.
LLMS связаны с окном их контекста, и чем более сфокусированные и конкретные подсказки, тем выше вероятность того, что результаты будут соответствовать тому, чего желают разработчики, сказал он.
«Колокация — это принцип, который сильно резонирует с этим», — сказал он. «Наличие большей части кода в одном файле означает, что LLMS не нужно искать через большую кодовую базу, чтобы найти, как вычисляется конкретное поле».
Будущее LLMS и Web Dev
В то время как весенний выпуск Брекса, который включал в себя развертывание React 18 и реле миграции, хорошо работал для LLMS, ландшафт быстро развивается, и то, что работает хорошо, не всегда всегда сопоставляется с более новыми моделями, он предупредил.
«Тем не менее, наш опыт пока показывает, что есть одно ключевое понимание: облегчить понимание вашего кода и API для людей», — сказал он. «Это простое, но удивительно мощное наблюдение».
Брекс недавно отправил сервер протокола контекста модели (MCP), который позволяет LLMS генерировать несколько компонентов, таких как входы опций, таблицы, маршруты и многоэтапные потоки, которые строго следуют за золотыми путями команды, сказал он. Одна область исследований Terreiro взволнована, как сделать машины осведомленными и способными использовать обширную библиотеку систем проектирования Brex.
Он поделился одним последним важным уроком о разработке фронта: согласование между лидерством и фронтом имеет решающее значение для решения проблем веб -разработки.
«Если бы единственная цель нашей руководящей команды была в том, чтобы отправить несколько вещей как можно быстрее, а не качество/архитектуру, было бы трудно защищать эти изменения», — сказал он.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Loraine Lawson — ветеран -репортер, который в течение 25 лет освещал технологические проблемы от интеграции данных до безопасности. Прежде чем присоединиться к новому стеку, она работала редактором Banking Technology Site Bank Automation News. Она … читайте больше от Лорейн Лоусон
