Техлид за работой, решаем вопрос декомпозиции модуля в приложении, позже сделаю пост с примерами кода, как одно и тоже в react можно решить пятью способами. Я архитектор картинок, обращайтесь 🏝

Анимешники на месте, "новый" react фреймворк вышел 👹

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

Есть люди, которые считают fetch удобным 😵‍💫

Ребята, fetch имеет самое худшее апи по уровню dx на рынке, это доказывается количеством библиотек, которые его оборачивают. Также я не понимаю хейта в сторону axios, он весит больше чем аналоги, но он и дает больше, а еще вы правда боретесь за 20 кб ? Кто бы, что не говорил, но у axios самое удобное апи и многие библиотеки вдохновлялись именно им. Я уже в чатах писал, как разработчик хочу получить просто вот такой код:

const response = await isntance.get<Response>()

Многие библиотеки действительно дают более гибкий контроль над запросами, но суть в том, что в 99.9% случаях мы работаем просто с json. Я очень ленивый, поэтому создал свою обертку на fetch с таким же апи, как у axios. А вообще у нас в комьюнити с выбором технологий очень большая проблема, вот вы бы взяли библиотеку в 2025 году без тестов, без typescript ? А вот 400.000 берут ее каждую неделю.

Самое близкое к axios по уровню удобства я бы отметил ребят из unjs с ofetch, а вообще забавно, что есть защитники нативного fetch и что действительно есть люди, которые говорят, что им удобно пользоваться ❌

Как и обещал, время поговорить 📞

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

1. Props drilling — самый базовый React-подход, ему больше лет, чем я занимаюсь IT. Всё просто: объявляем в родительском компоненте всё необходимое и передаём в дочерние. Подход крайне плохо масштабируется, да и структуры в нём немного. Я бы назвал его так: «мы хотим, чтобы это просто работало».

2. Context — следующий эволюционный шаг: выносим всё в контекст, делаем для каждого шага инкапсулированный компонент и описываем в нём уже свою логику. Получается оркестратор, который даёт данные и методы, а шаги живут сами по себе и пользуются ими. Не буду скрывать — я фанат этого подхода: структура становится чёткой, разделение по моделям — аккуратным. Конечно, появляется стандартный для React бойлерплейт, но кейс простой, и контекст здесь выглядит чисто и уместно.

3. Внешний store — по сути, то же, что и контекст, только с использованием сторов напрямую. Это позволяет полностью отделить шаги друг от друга. Единственная задача — синхронизировать стор (например, не забыть его сбросить). Обычно в React мы об этом не думаем, ведь за нас это делает фреймворк. Здесь же мы берём ответственность на себя, но получаем меньше бойлерплейта и простую работу с данными.

4. Activity — прежде чем объяснить метод, расскажу, как он решал проблему. У нас часть данных нужна только на втором шаге, но пользователь может переходить между шагами. Стандартный вариант — вынести эти данные выше по дереву и подставлять их при монтировании шага. Activity-подход позволяет спрятать компонент, не размонтируя его, сохраняя данные. Проблема в том, что пришлось бы реализовывать кастомную activity-логику, а это чревато кучей сложностей: визуально скрыть компонент можно, но приоритет ререндеров или эффекты мы отключить не сможем. Да и в React пока нет полноценного API для этого (и неизвестно, появится ли).

5. Двойной стейт — вариант, когда есть внешний и внутренний стейт. Такой трюк часто делают в UI-китах, чтобы позволить компоненту работать и самостоятельно и явно через props. В нашем случае шаги могли бы принимать дефолтные значения, работать внутри со своим стейтом, а при переходах вперёд и назад — синхронизироваться с внешним.

6. Web Storage — мы даже рассматривали вариант просто сохранять данные второго шага в localStorage или sessionStorage. Но это противоречит самой идее стораджей: они нужны для персиста между сессиями, а не между шагами в одном флоу. Тем не менее, технически это тоже рабочий вариант.

Мораль всей басни 🥄: вариантов, как решать задачу, всегда много. Главное — чтобы решение было согласовано внутри команды и органично вписывалось в рамки проекта. У каждого может быть своё мнение: для меня, например, первый пункт в наше время — уже дикость, а в этом конкретном кейсе я полностью за контекст. При этом подходы вовсе не обязаны быть взаимоисключающими — их можно комбинировать, а в большом проекте вполне могут сосуществовать сразу все из перечисленных. Ключевое — не искать «единственно правильный» способ, а выбрать тот набор инструментов, который лучше всего подходит вашей команде и продукту.

p.s. примеры реализаций 😉

Любить и вкладывать в свою компанию и команду — это благо ☎️

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

Колектив — если бы не было сильных специалистов рядом, которые заставляли бы меня и дальше развиваться, не было бы ребят, с которыми мы можем неформально общаться на любые темы, то я бы давно ушел

Компания — пока компания, дает мне повод развиваться, дает разные проекты и задачи, то я не вижу смысла, что-то менять. Я делаю кучу проектов, мы развиваем сообщество, делаем образовательные программы, а самое главное мы играем в cs2, обеды по 800 рублей

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

Спасибо моей команде и компании, мне очень повезло, но кто ищет тот всегда найдет, будьте добры к другим людям, растите и становитесь крутыми спецами. А все это кстати подводка, что у меня компания делает самый топ турнир по cs2 🤟 11 avgуста

Сегодня знаменательный день, я хочу получить от вас максимальную отдачу, слушайте внимательно, 300 бананов на пост 🛀

🍿 АНОНС СТРИМА 13 августа в 15:00 по мск

youtube — twitch — vk

Сериал в середине сезона закидывает нам удочку 🥸

Антон опять сливает переписку, в ней мы можем увидеть, как Максим непрофессионально общается с уволеным человеком, а после еще и редактирует сообщение. Это все. Ну Антон еще добавляет масла в огонь, говоря: "Как же наверное неудобно щас чувствуют себя публично поддержавшие Максима. Че ребят, как вам диалог?"

Ну и это обычный трюк из сериалов, знаете когда ничего не произошло, но все об этом говорят. Почему эта переписка не двигает сюжет к развяке. Во-первых, мы видим не всю переписку и можем только строить теории, красивое ли сообщение, конечно нет, доказывают оно чью-то вину, тоже нет. Если сливать, то сливать весь контекст. Но Антон умеет манипулировать аудиторий и знает, как такая штука повлияет на сообщество. Во-вторых, данная переписка не подтверждает информацию ранее по поводу СБ и камеры пыток с подписанием. Угрозы в сообщении были, контекст или нет, они есть.

Антон поднял вопрос медийно, пока официальных ответов нет, судебных дел не против Максима или Антона тоже нет. Будет ли в конце договорничок или судебное дело, ждем развязки и посмотрим, как авторы склеют всю картинку 👍

Сериал выпустил пару дополнительных материалов 📱

🐺 Антон сходил на какой-то подкаст и там по факту пересказал историю, причём в слово в слово из постов. Самое интересное — есть слух о подаче заявления на Максима.

🌟 Максим же выложил вчера интересный пост, в котором явно показывает, как в реальности работает накрутка. Человек просто накрутил вымышленный опыт, не работая в компании. А также рассказал о подмене фио, для попытки попасть в компанию, все данные кейсы ведут к "волкам".

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

🍿 АНОНС СТРИМА 16 августа в 15:00 по мск

youtube — twitch — vk

Я делал обзор на Gravity UI год назад, и тогда мы на стриме выявили несколько проблем. Из того, что я помню лично, — использование классовых компонентов, перегруженные компоненты, а также жёсткая привязка к сторонним инструментам. Скорее всего, эти проблемы появились из-за того, что изначально компоненты разрабатывались в рамках конкретного проекта, а уже позже начали переезжать в UI-кит.

Недавно я рассказывал про zustand, и мы там затронули тему react flow — это очень крутая библиотека, но даже у неё есть ограничения по производительности. И вот задача команды Gravity стала — сделать оптимизированный интерактивный холст, и это у них получилось. Их граф, например, поддерживает Level of Detail в зависимости от уровня зума.

По API я быстро пробежался — в коде React точно есть лишний useEffect, и, возможно, снова присутствуют проблемы с API. Но ребята выложили статью, где подробно рассказали о внутреннем устройстве — и это очень круто. Потому что если вам вдруг предстоит решать похожую задачу — вот вам и открытый код, и идеология, на которой всё построено. Задача специфичная, но мало ли — может, вам тоже придётся реализовывать что-то подобное 😍

Добавил кучу тестов в reactuse 😎

Тестирование в нашей сфере очень не развито, это можно сказать посмотрев на все reactuse библиотеки и даже глянуть vueuse. Очень много опускается или игнорируется. Когда мы пишем тесты на хуки мы должны: покрыть все параметры тестами, проверить все подписки и отписки, проверить работает ли наш код на серверной части и так далее.

Написание тестов помогают мне найти баги и быть уверенным в завтрашнем дне, когда делаете свои утилитарные пакеты не забудьте продумать и автотесты. Стек все еще vitest + react testing library, лучше на рынке нет. Сейчас еще думаю о интеграционных тестах в browser mode, как будут новости сообщу 👌

🍿 АНОНС СТРИМА 20 августа в 14:30 по мск

youtube — twitch — vk

MoscowJS 67 + siberiacancode = 🥰

Приглашаем вас на регулярную встречу фронтенд-сообщества в неформальной обстановке. В этот раз — MoscowJS в гостях у Альфа-Банка. Ребята хорошие друзья с Докой 😆 — платформой с понятными статьями от разработчиков для разработчиков.

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

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

MoscowJS: https://www.tg-me.com/moscowjs
Задать вопросы спикерам: https://moscowjs.org/qna/

🍿 АНОНС СТРИМА 24 августа в 10:00 по мск

youtube — twitch — vk

Возможно, кому-то будет интересно, что есть второй канал с нарезками со стрима 📞

🍿 просыпаемся, а потом css

youtube — twitch — vk