A?.Frontend B-Day Meetup

🎉 Уже завтра - 29 октября в Санкт-Петербурге пройдет frontend-meetup, где будем праздновать день рождения комьюнити A?.Frontend.

Приглашаю всех на событие: участвовать можно как офлайн, так и онлайн 🧑‍💻 .

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

Зарегистрироваться и ознакомиться с полной программой мероприятия можно по ссылке:
https://digital.alfabank.ru/events/frontend-b-day-meetup

🧑‍💻 Инкапсуляция контекста

На досуге решил поизучать как устроен Fastify - фреймворк для Node.js. Если вы еще не знакомы с ним - советую присмотреться повнимательнее: он обещает высокую производительность и гибкость благодаря минимальному оверхеду и продуманномой архитектуре.

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

🤔 Что такое инкапсуляция контекста?

Это способ организации кода таким образом, чтобы каждый хук/декоратор/плагин имел доступ лишь к нужным объектам данных, т.е. к нужному контексту (см. картинку). Это помогает избежать проблем с глобальными обработчиками, сплетением хуков/обработчиков/переменных внутри проекта. Фактически, это значит, что ваш код становится чище и проще в поддержке.

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

Fastify документация:
https://fastify.dev/

Про инкапсуляцию:
https://fastify.dev/docs/latest/Reference/Encapsulation/

#fastify #nodejs #javascript #typescript #js #ts #frontend #webdev #context

Мой доклад на FrontendConf 2025

Делюсь с вами ссылками на видео моего доклада на FrontendConf 2025!

📱 Смотреть на YouTube:
https://youtu.be/-p9HlfTrZkw

📺Смотреть в VK Видео:
https://vkvideo.ru/video-163338141_456239798?list=ln-9nWZi5eW3aadSoc4Rf

TanStack Query — польза инструмента на практике

Более 2 лет назад мы стартанули с нуля разработку нашего платформенного проекта, много времени уделив анализу и подбору подходящих и актуальных библиотек и инструментов.

Для взаимодействия с серверными данными был выбран TanStack Query (ранее известный как react-query). Вот несколько практических примеров в реальных задачах 👇

1️⃣ Гибкая система инвалидации кэша

Есть у нас UI который рисует граф (дерево) сущностей. При обновлении одной точки или связей надо перерисовать точку и дочерние ветки. При правильном указании queryKey и запуске в нужный момент invalidateQueries ваш UI автоматически перерисуется в нужных местах.

// получаем данные
useQuery({
    queryKey: [‘schema’, itemKey]
})

// инвалидируем после обновления
onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: [‘schema’, itemKey] });
},

💡 Еще лучше — когда ключи генерируются в одном месте (утилитой/фабрикой), чтобы со временем ключи не разъехались.

2️⃣ Не простой refetchInterval

refetchInterval может принимать функцию. Вот когда она может пригодиться: отображаем карточку сущности, которая имеет статусную модель. В определенном статусе надо совершать пуллинг (получать актуальный статус с сервера). Делаем это так:

useQuery({
    queryFn: // получение данных
    refetchInterval: (query) => {
        if (query.state.data?.statusCode === STATUS_CODE.WAITING) {
            return REFETCH_WAITING_INTERVAL;
        }

        return false;
    },
})

Таким образом пуллинг будет выполняться только когда сущность в нужном вам статусе.

3️⃣ Всевозможные статусные состояния и refetch

useQuery и useMutation возвращает различные флаги: isLoading, isFetching, isError и т.д. Все это позволяет с точностью отображать загрузки/ошибки в нужном вам дизайне. В нашем случае таблица сперва загружается со скелетоном, а следующих апдейтах скелетон отображается только в строках таблицы. При ошибках загрузки остается только навешать refetch в нужную кнопку на UI.

👨‍💻 После реализации множества наших микрофронтов я бы сказал, что являюсь фанатом этой библиотеки :)

А ведь у TanStack есть еще router, store и прочие инструменты. А вы используете что-нибудь от TanStack?

React.lazy — еще один полезный сценарий 🚀

Одни из самых популярных кейсов использования React.lazy + Suspense — динамическая загрузка отдельных страниц или тяжелых библиотек:

// code splitting по роутам
const Dashboard = lazy(() => import('./Dashboard'));

<Route path="/dashboard" element={<Suspense fallback={<Loader />}><Dashboard /></Suspense>} />

// code splitting для тяжелых библиотек
const ImageEditor = lazy(() => import('./ImageEditor'));

<Suspense fallback={<Loader />}><ImageEditor /></Suspense>

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

👨‍💻 Для подобных сценариев можно собрать компонент-контейнер с Suspense+ErrorBoundary, который будет показывать процесс загрузки и отлавливать ошибки независимо от уровня вложенности remote-модулей. Итоговая структура выглядит так:

// контейнер для remote-модулей 
const ModulesContainer = ({ loadingView, errorView, children }) => (
  <Suspense loadingView={loadingView}>
    <ErrorBoundary errorView={errorView}>
      {children}
    </ErrorBoundary>
  </Suspense>
);

// используем модули на любом уровне с одним лоадером:
<ModulesContainer 
 loadingView={<CustomLoader />} 
 errorView={<CustomError />}
>
  <ComponentHeader>
    <ComponentBody>
      <RemoteModule2 value="a" />
    </ComponentBody>
  </ComponentHeader>
  <RemoteModule1 value="b" />
</ModulesContainer>

P.S.: Не забываем логировать ошибки в ErrorBoundary! 📊

#react #microfrontends #lazy #js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs

Поздравляю прекрасных дам с 8 Марта!

Пусть весна цветет не только на улице, но и в душе!

Ну а чтобы сделать такой градиент+ascii-арт или прокачать ваши cli-скрипты прикладываю набор полезных npm-пакетов, в том числе, которые использую в работе:

1. Это база - различные утилиты для цветного текста в консоли:
https://www.npmjs.com/package/chalk

2. Для написания текста через ascii символы:
https://www.npmjs.com/package/figlet

3. Для окрашивания градиентом результатов вызова в консоль:
https://www.npmjs.com/package/gradient-string

4. Обводка текста рамкой (блоком):
https://www.npmjs.com/package/boxen

5. Готовая уведомлялка в консоль про выход новой версии вашего npm-пакета:
https://www.npmjs.com/package/update-notifier

6. Готовый лоадер в консоли для ваших скриптов с поддержкой смены статусов и текста:
https://www.npmjs.com/package/ora

7. Отображение красивых шрифтов в консоли:
https://www.npmjs.com/package/cfonts

8. Готовые шаблоны для вывода уведомлений об успехе, ошибках или предупреждениях:
https://www.npmjs.com/package/cli-alerts

👨‍💻 Ну и на последок - фреймворки для интерактивного взаимодействия вашего скрипта с пользователем через консоль:
https://www.npmjs.com/package/commander
https://www.npmjs.com/package/inquirer
https://www.npmjs.com/package/@clack/core
https://www.npmjs.com/package/@oclif/core

#js #javascript #typescript #frontend #фронтенд #разработка #dev #webdev #react #nodejs