Кстати, если вы не успели или не могли прийти на стрим с решением задач, он тоже уже на ютубе👉

https://www.youtube.com/watch?v=WBVxOhcscvU

Рубрика: база. Часть 1.

Fiber - это тема, знание которой может пройти вам React-собеседование, а на вопросе про reconcillation и рендер можно ответить гораздо интереснее чем кажется. Поехали:

🧱 Основная идея Fiber
React Fiber — это реализация виртуального DOM в виде связанного списка (а не дерева), которая позволяет:
- разбить рендеринг на мелкие задачи (units of work),
- приостанавливать и возобновлять работу,
- реализовать кооперативную многозадачность внутри браузера.

До Fiber обновления происходили синхронно и рекурсивно: всё дерево компонентов проходилось и обновлялось за один проход. Это означало, что React не мог остановиться, отложить часть работы или расставить приоритеты.

🔄 Цикл работы Fiber
Fiber работает в две фазы:

1. Render phase (Work Phase)
React проходит по компонентам и строит новое Fiber-дерево.
- Создает FiberNode для каждого компонента.
- Эта фаза может быть прервана — например, если у пользователя событие click.

2. Commit phase
Вносит изменения в реальный DOM.
-Эта фаза непрерывна и должна быть быстрой.

🧩 Что же такое FiberNode?
Каждый компонент (функция, класс, DOM-элемент) представлен объектом FiberNode:

interface FiberNode {
  type: string | Function;// Тип компонента
  key: string | null;// Ключ для списка
  stateNode: DOM | instance | null; // DOM-узел или экземпляр класса
  child: FiberNode | null;// Первый дочерний узел
  sibling: FiberNode | null;// Следующий "брат"
  return: FiberNode | null;// Родитель
  alternate: FiberNode | null;// Старый Fiber (для сравнения)
  flags: Flags;// Какие изменения внести 
  pendingProps: any;// Новые пропсы
  memoizedProps: any;// Старые пропсы
  memoizedState: any;// Старое состояние
}

🧠 Это похоже на двусвязный список, а не просто дерево — это позволяет гибко перемещаться по узлам.

⚙️ Алгоритм работы: пошагово
- Начинаем с корня (RootFiber) и проходим вниз по дереву.
- Создаём "units of work" — каждый Fiber обрабатывается как отдельная задача.
- React делает depth-first traversal: спускается в child, потом sibling, потом вверх по return.
- Когда все узлы пройдены — React имеет новое дерево.

Далее идет сравнение alternate (старого Fiber) с новым — что поменялось?
- На основе flags (например, Placement, Update, Deletion) формируется список изменений.
- Commit phase: React применяет изменения к DOM за один батч.


📌 Это позволяет React быть асинхронным и отзывчивым, даже при сложных рендерах.

🔁 Double Buffering (alternate)
React использует стратегию двойной буферизации: для каждого узла есть alternate.

current — текущее дерево, отображаемое в DOM.
workInProgress — новое дерево, создающееся в render phase.

После коммита:
workInProgress становится current, а старое дерево отправляется в alternate.

🚦Приоритеты (Lanes)
С React 18 ввели систему Lanes — механизм управления приоритетами работы.

click → высокая приоритетная полоса.
fetch data → низкая.

Fiber может приостановить выполнение низкоприоритетной задачи, чтобы обработать что-то более важное.

💬 Подытожим
Fiber — это архитектура реакта, которая:

✅ Представляет каждый элемент UI как FiberNode, связанный с другими.
✅ Позволяет прерывать работу, планировать и расставлять приоритеты.
✅ Делает React асинхронным и отзывчивым.
✅ Использует две фазы: render (можно прерывать) и commit (синхронная).
✅ Поддерживает time slicing, useTransition, useDeferredValue и другие оптимизации.

Рубрика: база. Часть 2. Микрофронты.

Есть много способов реализовать то, что называется общим словом - микрофронт. При исследовании темы я нашёл даже такие способы, которые в целом то никто и не использует. К счастью, их мы обсуждать не будем. Я подготовил только то, что встречается в проектах и что делал я сам. Поэтому пост должен получиться содержательным.

1. 🧩 Module Federation с Nx Monorepo
Что это: динамическая загрузка удалённых модулей на runtime, с шарингом зависимостей между ними.
Почему важно: при использовании Nx можно легко организовать хост и модули внутри одного репозитория c CLI, кешом и девсервером.

🔧 Пример на Nx:

nx-project/
├─ apps/
│   ├─ shell/             # Host-приложение
│   │   └─ module-federation.config.ts  # содержит remotes
│   ├─ shop/              # Remote micro‑frontend
│   └─ cart/              # Remote micro‑frontend
└─ libs/                  # общие библиотеки (UI, utils)

Подключается примерно так: (очень упрощённо)

export const config = {
  name: 'shell',
  remotes: ['shop', 'cart'],
};

Плюсы:
- Независимый деплой – каждое приложение может деплоиться отдельно. Команды разработчиков не зависят друг от друга.

Минусы:
- Возможны ошибки при несовместимых версиях зависимостей.
- Для коммуникации между микрофронтами придётся изучить несколько интересных подходов 🙂

Когда использовать:
Если у вас монорепо + несколько команд, но хотите разделить деплой. Каждый микрофронт проще рассматривать как отдельную страницу.

2. 🧷 Iframe
Что это: каждый микрофронт — отдельное приложение в <iframe>.

Пример коммуникации:

// Родитель
iframe.contentWindow.postMessage({ type: 'init', data }, origin)
window.addEventListener('message', e => {
  if (e.origin !== origin) return;
  console.log(e.data);
});

Плюсы:
- Полная изоляция (JS, CSS).
- Прост в реализации.

Минусы:
- Медленнее UX: два документа, переходы.
- Коммуникация через postMessage — громоздкая.
- Ограниченное взаимодействие с окружением родителя.

Когда использовать:
Когда нужен строгий барьер безопасности, например для админки или внешних виджетов.

3. 🛠 Custom import()
Что это: вы создаёте оболочку, которая динамически подгружает модули через import(), без использования Module Federation.

🔧 Простой пример:

async function loadRemote(name, url, container) {
  const mod = await import(/* @vite-ignore */ url);
  await mod.init(channel);
  mod.render(container);
}


// Где-то в UI
loadRemote('chat', '/mfe/chat/remote.js', document.getElementById('chat'));

Коммуникация между модулями:

const channel = new Channel();

channel.subscribe('user', fn);
channel.set('user', { id: 1 });

Плюсы:
- Полный контроль загрузки.
- Гибкая интеграция prefetch, loader-style, lifecycle API.
- Не привязан к сборщику.

Минусы:
- Нужно самому реализовать lifecycle и shared dependencies.
- SSR потребует ручного подхода.
- Больше boilerplate.

Когда использовать:
Если вам нужен максимальный контроль, легковесность и неважна поддержка SSR из коробки.

Часто ко мне обращаются за составлением резюме. Я всегда рад помочь, но есть важный момент. Резюме это только 10% в поиске работы. Да и за час/два невозможно составить рабочий вариант.

Почему?

Это итерационный процесс. Когда мы делаем CV на менторстве, оно может вернуться на правки до 10-12! раз. Мы выпускаем резюме на рынок только после аппрува от 10 менторов и HR из нашей команды.

Теперь это финальный вариант и можно расслабиться? - Нет)

При недостаточном кол-ве собеседований или для теста конверсий, лучше делать 2-3-4 версии резюме. Разные CV цепляют разные компании.

Окей, мы составили 3 версии, резюме, его аппрувнула вся команда, теперь я точно найду работу? - Нет)

Традиционный вариант - сделать 100-200 откликов на hh и ждать что будет хороший оффер и новое место работы - не работает в 2025.

Важно куда и как резюме отправлять. Мы работаем рассылая ваше резюме 20-100 компаний напрямую. Этот список есть только у аутстафф-агенств и галер, и у нас)
Помимо прямых откликов работают рекомендации и прямой контакт с HR от знакомых. То есть по рекомендации от сотрудника/того кто прошёл у них все этапы, но по какой-то причине отказался.
Сейчас трафик с этих каналов сопоставим или превышает то, что приходит с hh.

Окей, мы отправили резюме вообще всем, теперь я найду работу? - Нет)

Тут мы прошли подготовительный этап и уже будут собеседования. 30% работы проделано. В реальности большинство кандидатов её не делают/не знают/привыкли к легкому поиску в 2022-2024 гг. Осталось 50% - технические собеседования и 20% - пройти финал.

Ну, техническое я точно пройду, я решаю каждый день leetcode и codewars.

Да, часть задач будет на алгоритмы и логику. Но мы не видели задач на Event Loop, TypeScript, контекст, рефакторинг, React/Vue/Angular на этих платформах. Там этого нет, а на собеседованиях - есть. Даже Яндекс спрашивают не только алгоритмы.

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

Так и не смогли придумать смешное описание к картинке) 😑

Кстати, сделаем завтра стрим с решением задач?

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

🔥Сегодня в 20:00 делаем стрим с решением Event Loop и React задач

В этот раз решать будем только вместе с чатом, так что активное участие приветствуется 🙂

Ждём вас в 20:00 🚀
Место: Telegram

Через 5 минут начинаем)

Тут будет чат🤘

Трём людям, кто правильно решит больше всех задач - дарим 1000 р на карту🤓

Кажется, спустя десятки проб и ошибок, мы нашли идеальный формат стримов. Где есть баланс межу спикером и аудиторией, максимальная польза и классное общение 🙂

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

На вчерашнем стриме мы немного затронули тему реакта, а в следующем готовим полноценный ликбез по задачам с собеседований. Также мы решили увеличить "призовой фонд" и выделить 5000, 3000, 2000 тысяч за первое, второе и третье место соответственно.

Стрим планируем на понедельник в 20:00. Всех ждём🤝

А для новеньких хотим напомнить, что мы с Сергеем и командой из 10 менторов и HR ведём разработчиков от резюме до оффера, при этом работаем до момента, пока оффер не будет вами принят, а прибыль зафиксирована

Стоимость программы варьируется от 15 до 21 т.р. в месяц*, после выпуска прирост к окладу путем смены работы - от 50 до 150 тысяч рублей***.

Но программа подходит не всем. В случаях если:

- У вас уже зарплата выше 300 т.р.
- Вы только после курсов или не знаете фреймворк
- Вы считаете, что нужно всё учить самому
- Вы ищете волшебную таблетку или гарантии, что за вас всё сделают

- Мы не сможем помочь.

Но точно поможем, если:

- У вас зарплата от 40 до 220 т.р. и нужно больше
- У вас хороший опыт и нет приглашений
- Вы вообще без работы и нужно срочно что-то найти
- Вы готовы пройти подготовку 1-2 мес и выйти на рынок

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

Если готовы встать на этот путь - we are ready too🤘

* Стоимость при разбитии на несколько месяцев
** Даже прибавка 30 т.р. к зарплате - это 360 т.р. в год