Молоток в руках знатока: как ИИ помогает фронтенд-разработчикам

Автоматизация задач с помощью ИИ помогает быстрее писать шаблонный код, находить и систематизировать нужную информацию, а также упрощать коммуникацию. Большую роль во фронтенд-разработке играет выбор инструмента, поскольку при одинаковом запросе модели могут вести себя по-разному. О работе лингвистических моделей в теории и о практике решения задач с их помощью рассказал старший эксперт по технологиям в Сбере и преподаватель онлайн-курса «Frontend-разработчик» Андрей Сухов на вебинаре Центра непрерывного образования ФКН НИУ ВШЭ.

Содержание:

«Чтобы не отбить себе молотком пальцы, надо знать, как им бить»

«Сколько нужно искусственных интеллектов, чтобы написать to-do list (список задач – Ред.)? Один – чтобы написать, второй – чтобы проанализировать техдолг (накопленные в коде или архитектуре проблемы, которые возникли из-за пренебрежения качеством ради быстрой реализации функциональности – Ред.), третий – чтобы переписать всё на WebAssembly (язык программирования низкого уровня, используемый в браузерах – Ред.) и четвёртый – чтобы объяснить клиенту, почему MVP (англ. most valuable player, наилучший инструмент) всё ещё не вышел», – говорит Андрей Сухов. Это типичное рассуждение разработчиков, перед которыми стоит выбор правильного ИИ. Из-за обилия решений на рынке запутаться в выборе просто, в том числе при работе над фронтендом (создание интерфейсов для сайтов и веб-приложений – Ред.). Поэтому для фронтендеров важно понимать принципы работы разных решений: «Чтобы не отбить себе молотком пальцы, надо знать, как им бить», – подчеркнул Андрей Сухов.

Для начала эксперт выделил типичные задачи для ИИ:

Генерация шаблонного кода. ИИ упрощает создание шаблонов страниц, позволяет удобнее проводить тесты решений и использовать различные библиотеки данных. Рутинные действия можно отдать помощнику, а самому думать больше о бизнес-логике, считает Андрей Сухов;
Поиск информации и планирование – составление планов, дополнение поисковых систем, помощь в поиске стека технологий;
Нейросеть может выступать ментором – она объясняет суть простым языком и улучшает коммуникацию между сотрудниками, а также помогает быстро адаптироваться к новому проекту;
Сопровождение кода – в разработке можно столкнуться с ошибками и получить рекомендации по исправлению.

Андрей Сухов также подчеркнул, что следующим витком развития ИИ становятся MCP агенты – протоколы взаимодействия между клиентом и сервером.

MCP агент (англ. Model Context Protocol, контекстный модельный протокол) – это протокол, который стандартизирует интерфейс между клиентом и MCP сервером. Они функционируют для решения определённого набора задач на основе нескольких компонентов: клиента, MCP – сервера и LLM (англ. language learning model, языковая модель обучения). Клиентом называется входная точка, с которой начинается взаимодействие. Это может быть любой плагин или приложение, управляемое ИИ. MCP сервер – сервис предоставления услуги на основе файловой системы или документации. Благодаря ей клиент получает данные от LLM – языковая модель, которая обрабатывает запросы и выдаёт результат.

Для фронтенд-разработки ИИ полезен, так как может помочь на определенном этапе работы, например – при генерации контента. Так, если при верстке сайта все может выглядеть неплохо, то на практике сайт может выглядеть иначе. Больше не требуется вставлять lorem ipsum (текст-заполнитель, часто используемый в дизайне и верстке для демонстрации внешнего вида текстовых блоков – Ред.) на сайт, так как ИИ может сгенерировать изображение за вас, подчеркнул Андрей

«Важно отличать хорошие результаты от плохих»

Варианты работы с ИИ-решениями всегда будут давать разный результат, подчеркнул эксперт. Среди его опыта – разработка игры для платформы Roblox и чат-бота в Telegram с помощью ИИ-ассистента Cursor, который уже зарекомендовал себя на рынке.

«Для нейросети полезно задавать контекст и указывать, как нейросети думать», – считает Андрей Сухов. В работе фронтенд-разработчика полезно использовать разные решения и задавать роли для эффективного мыслительного процесса – например, опытного фронтенд-разработчика. Кроме того, на результат влияет и язык промта.

На примере ряда задач и промтов Андрей Сухов показал разницу откликов ИИ-сервисов на один и тот же типовой запрос. Среди рассмотренных моделей были LMArena, Gemini, Gigachat, YandexGPT (Алиса) и Cursor.

При создании кнопки полезно указывать применение кнопки – например, её использование в будущем большом проекте, добавляет он.

Промт: Создай кнопку на React (JavaScript-библиотека с открытым исходным кодом, предназначенная для создания пользовательских интерфейсов (UI) – Ред.) с TypeScript (расширение языка программирования JavaScript для типизации данных в виде функций и переменных – Ред.). Пропсы (входные данные для компонента – Ред.): variant, size, isLoading, для стилизации используй postCss.

Результаты:

LMArena

Результат такой, какой можно встретить и в реальном проекте, считает Андрей. Решение представляет из себя дерево классов. Особенность сервиса LMArena в том, что можно сравнивать пару решений. «Справа решение более удачное, поскольку учитываются и те библиотеки данных, которые могут нам понадобиться», – подчеркнул Андрей Сухов
.
Код от LMArena для создания кнопки. Источник: презентация Андрея Сухова

DeepSeek

Эта модель ИИ пишет цепочку своих размышлений при выдаче Результат, по словам эксперта, похож на предыдущий кейс: «Сам по себе код далёк от идеала», – считает Андрей.

Цепочка рассуждений DeepSeek при создании кнопки. Источник: презентация Андрея Сухова

Gigachat

Для этого запроса ИИ выдал классический код и документацию, объяснил Андрей Сухов. Сервис также показал пример использования кнопки.

Пример использования компонента от Gigachat. Источник: презентация Андрея Сухова

YandexGPT

По словам Андрея, сервис хорошо справился с задачей и показал примеры использования кнопки.

Cursor

Особенность сервиса в том, что у него задан системный промт, который всегда учитывается при результате. Он также интегрируется с чатами необходимого проекта, поэтому отдельно переносить данные не нужно. Если есть правила конкретного проекта, их тоже можно внедрить в работу. «Важно отличать хороший результат отличается от плохо», – подчеркнул Андрей Сухов. Эффективность кода всегда выясняется на выходе, либо с помощью заранее прописанной системы оценок.

Для сервиса Cursor задача Андрея была в другом. Разработчик задал задачу с кнопкой, но уже с контекстом. ИИ был должен думать как опытный React-разработчик. Было необходимо создать конверт-обертку для списка, что тоже часто делают фронтенд-разработчики.

Конверт-обертка – код, который обертывает или оборачивает другой код, функцию или объект, обычно для добавления дополнительной функциональности, упрощения использования или адаптации к определенной среде.

Промт: Создай универсальный компонент-обертку для списка на react. Компонент должен уметь рендерить дочерние компоненты с помощью подхода рендер-функции, стилизация должна быть адаптивной (под разные устройства – Ред.), на больших разрешениях (более 1280 рх) три компонента в ряд, на средних (более 1024 рх) два, на маленьком (меньше 768 рх) разрешении один. Компонент должен соблюдать правила доступности. Оптимизируй компонент с помощью memo (функция, которая предотвращает перерисовку компонента – Ред.). перед тем, как писать код, опиши план реализации в виде конкретных шагов и объясни, почему ты принимаешь определенные решения.

Результат:

ИИ выдал всё необходимое в плане, а также обосновал полезность тех или иных функций, а также обозначил соблюдение правил адаптивности.

Итоговый план от Cursor по созданию компонента. Источник: презентация Андрея Сухова

Код с примером использования компонента от Cursor. Источник: презентация Андрея Сухова

Решение от ИИ имеет описание интерфейса и функцию getkey, позволяющую менять назначение тех или иных клавиш. Хотя код Cursor не использует стрелочных функций (сокращённый вариант записи функций – Ред.), с результатом в виде шаблона кода можно работать, считает эксперт. Кроме создания цельной кнопки возможна и работа с её отдельным компонентами. Это удобно, поскольку появляется возможность вносить изменения в одном месте, объяснил эксперт.

Работа с TypeScript

Это генерация типов объекта. Типизация нужна для того, чтобы была строгая работа с типами данных и конкретизации результатов. Без определения типизации строго, результат может отличаться от того, что мы хотели, объяснил Андрей Сухов.

Промт: сгенерируй typescript тип для такого объекта { id: 1; email: test@test.test; personalInfo: { firstName: Andrey; lastName: Sukhov; birthDate:01.01.1990; }; preferences: { theme: 'light' | 'dark'; notificationsEnabled: true; }; }

Результаты:

LMArena

Список получился неоптимальным, поскольку использовались неподходящие библиотеки данных, такие как CSS (Cascading Style Sheets) и JSS JavaScript Style Sheets, объяснил Андрей.

DeepSeek

Рабочий код, прописал особенности типа и рекомендации, выполнил промт.

Gemini

Разделил результат на составные типы. Это удобно, потому что получается генерация шаблонного кода, считает эксперт.

Типизация данных от Gemini. Источник: презентация Андрея Сухова

YandexGPT

Сгенерировала интерфейс, разбила более сложные типы на отдельные интерфейсы

TypeScript от Алисы. Источник: презентация Андрея Сухова

Вывод данных после TypeScript позволяют делать специальные функции, например, с выводом элементов массива данных. Для комментирования результатов обычно нужны jsdocs (комментарии полученного результата и аннотация с кратким примером использования – Ред.).

Обоснование решений

Андрей Сухов привёл в пример использование ИИ для принятия решений по проектам. По его словам, это упрощает процесс обновлению стека и даёт комплексный взгляд на изменения в команде. Поэтому эксперт дал задачу ИИ обновить стек и обосновать, как от этого выиграет предприятие. «Человек может столкнуться с проблемой белого листа, ИИ может понять с чего стартовать», – подчеркнул Андрей.

Промт: Ты тимлид команды фронтенд-разработки, на твоем проекте используется react 17, напиши обоснования для бизнеса почему необходимо выделить время на миграцию на современную версию, оформи результат в виде списка, учитывай что бизнесу важно знать какую выгоду он получит в результате доработки

Результаты:

LMArena

Ответы в виде пунктов, которые в целом были идентичны при сравнении двух вариантов ответа:

Улучшение производительности в UX
Снижение затрат на хостинг и ресурсы
Повышение безопасности
Доступ к современной экосистеме инструментов
Упрощение найма и удержание талантов
Улучшение опыта разработчиков
Повышение безопасности
Упрощение найма
Поддержка и масштабируемость
Конкурентное преимущество

DeepSeek

Выгода и результат для бизнеса сформулированы здорово, хотя пункты почти те же самые, что и у LMArena.

Выгоды для бизнеса от DeepSeek. Источник: презентация Андрея Сухова

Показательна также возможность ИИ сравнивать технологии. Это может быть важно для улучшения клиентского опыта. Модель может вывести сравнение в удобной форме.

Промт: Сравни GraphQL (язык запросов данных и язык манипулирования данными с открытым исходным кодом для построения веб ориентированных программных интерфейсов – Ред.) и Rest API (архитектурный стиль для создания веб-сервисов, который использует протокол HTTP для взаимодействия между клиентом и сервером – Ред.), опиши сильные и слабые стороны каждого подхода, опиши кейсы для выбора подхода, результат оформи в виде сравнительной таблицы возможностей.

Результаты:

LMArena

Подробный анализ с рядом критериев. Однако язык изложения оставил желать лучшего, считает Андрей. «Учитывая наш обширный запрос, мы можем опираться на результат, который выдал нам ИИ», – сказал эксперт. Хотя рекомендации по использованию получились не такими полными и подробными.

DeepSeek

Дал больше критериев, сноски и подробности, рекомендации для выбора, обозначил сильные и слабые стороны.

Пример критериев при сравнении решений от DeepSeek. Источник: презентация Андрея Сухова

Gigachat

Предоставил удобно оформленную таблицу, однако скудные рекомендации.

Эксперт предупредил: ИИ не должен полностью работать за вас. Это инструмент для ускорения работы, скучных и рутинных операций, но не замена человеку. «Если проект требует внимательного отношения и гигиены кода, то без человека не обойтись», – подчеркнул разработчик. Поэтому Андрей Сухов советует не доверять ИИ слепо: ИИ может галлюцинировать и генерировать не очень чистый код. Однако полезно воспринимать ИИ как ментора, который может что-то подсказать. Для разработчиков остаётся важным постоянное развитие вслед за ИИ: «Важно уметь писать код без ИИ, чтобы писать его с ИИ», – подытожил выступление Андрей Сухов.

В Центре непрерывного образования НИУ ВШЭ Андрей Сухов ведёт онлайн-курс «Frontend-разработчик». В течение четырёх месяцев слушатели курса осваивают инструменты разработки интерфейса сайтов и приложений. Начало курса намечено на конец октября.

Автор: Федор Артюшенко, исследователь Проектно-учебной лаборатории экономической журналистики НИУ ВШЭ