Привет! Хочу пообщаться с теми, кто хочет получить оффер Х2 от своей ЗП и не знает, как это сделать, или не получается.

Задумался над тем, как сделать менторство и канал еще лучше, а для этого мне нужно понять, чего вам не хватает в первую очередь.

Предлагаю 2 формата: заполнить анкету и созвониться.

Заполнить анкету займет минут 10 – сделай это прямо сейчас:

👉ЗАПОЛНИТЬ АНКЕТУ

При отправке заполненной формы можно будет скачать гайд по поиску работы и сборник задач с реальных собеседований по теме Hash-map.

А также приглашаю на интервью минут на 30. Что вы от этого получите:
- Найдете свои точки роста
- Станете партнером создания продукта
- В благодарность я бесплатно проведу для тебя мок-собеседование на 30 минут.

Кто готов – пишите сюда: @codepunks_bro

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

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 из коробки.