Росбанк провел 22 марта митап для frontend-разработчиков в Казани. На встрече эксперты Росбанка, VK Добра и СберМаркета представили 4 доклада:
- Анастасия Постойко, Росбанк – «Наши круги ада со State Managers»;
- Никита Журавель, Росбанк ؘ– «От любви до любви – Tanstack Query (React Query)»;
- Даниил Трофимов, СберМаркет – «npm: node packages madness»;
- Павел Кочура, VK Добро – «Прощай, легаси: переезд 10-летнего проекта на Next.js».
Регистрацию участников Росбанк организовал на платформе Codenrock. Как прошло мероприятие – в нашем кейсе.
Подготовка к проведению
Организация митапа – не только поиск зала и подготовка докладов. Главное – люди, которые придут на конференцию. Перед Росбанком стояла задача привлечь на мероприятие профильных специалистов, чтобы повысить узнаваемость бренда в регионе среди разработчиков.
Для регистрации посетителей митапа банк выбрал платформу Codenrock. Площадка поддерживает проведение событий разного типа: от хакатонов и ML-соревнований до One Day Offer и конференций. Первый этап – запуск страницы-лендинга, где пользователи могут оставить заявку и заполнить анкету участника. Новости о мероприятии регулярно публикуются в социальных сетях, дайджестах и рассылках Codenrock. Перед встречей все посетители, прошедшие регистрацию, получают уведомление.
Митап прошел 22 марта в казанском творческом центре «Смена». Авторы лучших вопросов получили в подарок мерч от организаторов, а после конференции участников ждали пицца-пати и нетворкинг-сессия.
Видеозапись докладов
Наши круги ада со State Managers
Анастасия Постойко, fullstack-разработчик из Росбанка, рассказала о проблемах при использовании менеджеров состояний. Сейчас Анастасия занимается созданием и поддержкой внутреннего банковского портала для сотрудников. На проекте используется два стейт-менеджера: Pinia и Vuex. И проблема в том, что они усложнили разработку.
Анастасия выделила несколько недостатков State Managers:
- Сложная архитектура сторов.
- Жесткая связка компонентов.
- Сложность рефакторинга.
- Растягивание процесса онбординга сотрудников.
- Сложности масштабирования.
Одно из предлагаемых решений – унификация работы со стором. Вот что может помочь:
- Следовать строгой структуре наименования.
- Вместе с коллегами решить, какие глобальные данные необходимо выносить в стор.
- Определить допустимую вложенность компонентов без внедрения сторов.
- Соблюдать архитектуру.
Закончить хотелось бы фразой Дэна Абрамова: «Flux-подобные библиотеки как очки: мы всегда знаем, когда они нам нужны».
Анастасия Постойко, fullstack-разработчик из Росбанка
Node Packages Madness
Даниил Трофимов, разработчик интерфейсов в СберМаркете, подготовил доклад о Node Package Manager (NPM). На выступлении эксперт рассказал об истории развития менеджера пакетов, инцидентах, которые с ним происходили, и способах обеспечить безопасность проектов:
- Боритесь за уменьшение зависимостей.
- Используйте Nexus и Verdaccio.
- Лучше применять PNPM или собственные менеджеры.
- Смотрите на лицензию, под которой распространяется пакет.
Стартуя проект с нуля, я бы в 90% случаев взял PNPM, потому что это достаточно прикольный быстрый инструмент, по API похожий на NPM. В остальных 10% – менеджеры, которые вы используете в компании, они не то чтобы драматически хуже.
Даниил Трофимов, разработчик интерфейсов в СберМаркете
Прощай, легаси
Павел Кочура, старший frontend-разработчик из VK Добра, поделился опытом переноса 10-летнего проекта на Next.js. До этого он был написан на корпоративном шаблонизаторе Fest, который не обновлялся с 2014 года. Главные проблемы легаси-кода:
- Низкая производительность.
- Несоответствие современным стандартам безопасности.
- Сложность поддержки.
Архитектура – огромное количество папок, каждая из которых соответствовала странице. При сборке в них генерировались 11 tmp-файлов. На начальном этапе проект еще поддерживался – было всего 2 папки на React, и можно было позволить при разработке одной пересобирать другую, но их количество постоянно росло. Критерии выбора нового фреймворка:
- Популярность.
- Поддержка React.
- Использование Server-Side Rendering.
- Простота использования.
Выбор пал на Next.js. Советы по результатам перехода:
- Проверять гидратацию.
- Не забывать про динамический импорт для оптимизации.
- Удалять дубликаты зависимостей модулей.
- Проверять размеры подключаемых библиотек.
- Проводить рефакторинг docker-контейнера.
- Проверять настройки аналитики.
Я против того, чтобы пытаться поддерживать то, что уже мертво. Хорошее решение в прошлом не всегда является хорошим решением в настоящем – разработчики становятся его заложниками. Но следует помнить, что рефакторинг – это хорошо, но он не должен мешать бизнес-приоритетам.
Павел Кочура, старший frontend-разработчик из VK Добра
От любви до любви
Никита Журавель, frontend-разработчик Росбанка, рассказал о TanStack Query. Это мощный асинхронный менеджер состояний, который поддерживает фреймворки React, Solid, Vue и Svelte, а также JavaScript и TypeScript. Он декларативный, автоматический, простой и расширяемый.
Никита объяснил способы применения TanStack Query на нескольких реальных примерах:
- Снижение числа запросов к серверу для базовых компонентов.
- Реализация таблицы с фильтрами, поддержкой нескольких состояний и обновлением данных.
- Разбор документации, самых часто используемых API и передаваемых параметров.
- Способы интеграции TanStack Query в уже существующие старые проекты.
В жизни так бывает: что-то начинается с любви, заканчивается ненавистью. Или начинается с ненависти, заканчивается любовью. В случае, если вы будете использовать TanStack Query, у вас будет начинаться все с любви и заканчиваться также любовью.
Никита Журавель, frontend-разработчик Росбанка
Об организаторе
В Росбанке много команд, которые занимаются фронтендом. Пишем на очень разных современных технологиях: Vue, React, Angular и не только. У нас распределенная команда – многие люди работают удаленно.
Росбанк регулярно проводит внутренние и внешние митапы. Для сотрудников есть программа поддержки и наставничества: все время общаемся с нашими ребятами, помогаем разобраться в системе. Если возник вопрос или проблема, то можно прийти практически к любому человеку в банке и спросить совета или что-то предложить. Дух Росбанка мне очень нравится именно таким отношением.
Игорь Поляков, тимлид и лидер Гильдии Frontend в Росбанке
