FrontendConf 2025

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

Пользователь вводит свое имя, номера карт, адреса, логин и пароль в формы, которые мы пишем. Имея эти данные можно узнать о человеке все: от того, где он покупает утренний кофе, до того, какие у него планы на вечер через 2 недели.

НО опыт показывает, что не все проекты добросовестно обрабатывают данные. Давайте разберем несколько вариантов, как можно снизить риск утечки данных.

На реальном опыте рассмотрим случай в большом продукте, когда количество заводимых багов было практически равно количеству решаемых за спринт (плато). На реальных графиках поймем, как нам помогли тесты, а также концептуально разберемся, как их писать, не вдаваясь во внутренние методы библиотеки.

Вы узнаете:
* почему даже у опытных разработчиков возникают сложности;
* что тестировать, а что не надо;
* как тестировать, а как не надо;
* лайфхаки, основанные на практическом опыте.

При разработке интерфейсов нам требуется уметь создавать элементы, которые будут связаны друг с другом. Например, иконка и текст тултипа или селектбокс и выпадающий список. При этом нам важно, чтобы связанность и видимость элементов сохранялась при изменении вьюпорта, скролла или взаимодействиях пользователя с интерфейсом.

Обычно для реализации подобного поведения нам необходимо использовать JavaScript. Однако теперь это необязательно благодаря новой фиче в CSS.

В докладе расскажу про CSS Anchor Positioning и как с его помощью упростить разработку связанных друг с другом элементов.

В докладе покажу, как может выглядеть современная разработка фронтенда без VDOM с использованием веб-компонентов и фреймворка Lit.

Поговорим про:
* процесс миграции большого проекта на веб-компоненты;
* нюансы работы с ShadowDOM;
* ограничения технологии.

Не справляетесь с безграничным потреблением ресурсов в NextJS при использовании картинок? Надежда на сообщество Open Source-разработчиков фреймворка угасла? После этого доклада вы избавитесь от всех страданий!

Я расскажу, как мы столкнулись с утечками памяти в NextJS из-за модуля оптимизации изображений и первыми решили проблему, вызванную модулем оптимизации изображений. Мы прошли весь путь от локализации проблемы до разработки Open Source-решения и разработали утилиту next-image-cache-cleaner, которую вы можете переиспользовать у себя.

В ходе доклада вы научитесь:
* оптимизировать потребление ресурсов NextJS-приложений;
* оперативно локализировать проблемы, которые не имеют явных и прозрачных решений;
* сделать показатели мониторинга ресурсов достоверными.

HTTP-кеширование — мощный, но ограниченный фундамент для современных SPA. Мы разберем его правильную настройку, а также подключение Service Workers для обхода ограничений и библиотек вроде TanStack Query для интеллектуального управления состоянием приложения.

Иногда интерфейс начинает вести себя неожиданно: компонент обновляется, но получает устаревшие данные, или часть приложения перестает рендериться под нагрузкой. С такими эффектами я столкнулся при разработке корпоративного чата.

Оказалось, дело в приоритизации обновлений в React: он может отбрасывать низкоприоритетные изменения, что приводит к tearing (разрывам интерфейса).

В докладе проведу разбор реального кейса: обсудим работу React под капотом и рассмотрим, как устроены lanes и concurrent rendering.

Принято считать, что исследования нужны, важны, влияют на траекторию развития продукта, а значит, на происходящее в разработке. Но будем честны, не всегда очевидно, в чем именно выражается это влияние и точно непонятно, как его измерить. Разработчику может казаться, что исследования — это причуда бизнес-команды, не связанная с его задачами напрямую.

В рамках доклада я покажу эту связь и расскажу о ценности исследований для команд разработки:
* как исследования влияют на технические задачи разного типа: от инфраструктурной рутины до инноваций;
* по каким метрикам можно оценить влияние исследования на задачи разработки;
* как по доле UX-обоснованных задач в бэклоге определить UX-зрелость вашей команды;
* и наконец, в чем польза от исследований не для продукта, а для разработчика.

Что происходит с производительностью, когда у тебя сотни модулей, микрофронты, отдельные команды на каждый крупный блок, и все это работает в общем приложении, которым ежедневно пользуются миллионы людей?

В этом докладе я расскажу, как мы выстраивали систему измерения производительности в Сбербанк Онлайн, чтобы понимать реальную картину.

Web Vitals — это только начало: пришлось внедрять собственные метрики, отслеживать поведение отдельных компонентов и делать замеры не на синтетике, а в реальном продакшне.

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