🧠 React больше не библиотека

Когда-то он был “про view”. Теперь — серверные компоненты, Suspense, компилятор, серверные экшены. Это уже не инструмент, а целая среда. React стал фреймворком.

Только делает вид, что нет.

💬 А вы всё ещё называете его библиотекой?

🐸 Библиотека фронтендера

#code_battle

🦾 ESLint vs Biome: что выберете вы

Два инструмента, одна цель — чистый и красивый код. Но подходы — кардинально разные 👇

ℹ️ ESLint

— Проверенный временем стандарт
— Тысячи плагинов и правил
— Гибкая конфигурация на JS/TS
— Работает в любой экосистеме

ℹ️ Biome

— Новый формат линтинга и форматирования «в одном»
— Написан на Rust — летает даже в монорепах
— Умное кеширование и мгновенный запуск
— Простая миграция с ESLint + Prettier

Голосуем реакциями:

👍 — ESLint
❤️ — Biome

🐸 Библиотека фронтендера

#code_battle

🧩 Задача на область видимости

При запуске кода в консоли — ReferenceError.

❓ Почему, если ветка `if (false)` даже не выполняется:

❤️ — Переменная a находится во временной мёртвой зоне (TDZ)

🔥 — let внутри блока не создаёт TDZ

⚡️ — Ошибка синтаксиса при объявлении

🐸 Библиотека фронтендера

#code_challenge #js

🔗 Разбор: временная мёртвая зона

Раннее мы выкладывали задачу 📎

Правильный ответ: переменная `a` находится во временной мёртвой зоне (TDZ)

🔛 Что происходит:

JS делит выполнение на две фазы:

1. Инициализация (создание окружения) — компилятор видит let a = 2 внутри функции и создаёт для неё локальную переменную a.

2. Выполнение — когда доходит до console.log(a), движок уже знает о локальной a, но она ещё не инициализирована.

⚠️ Поэтому обращение к ней до строки let a = 2 вызывает ReferenceError, даже если код в if не выполнится.

❗️ Это и есть Temporal Dead Zone (TDZ) — период между созданием переменной и её инициализацией, когда доступ к ней невозможен.

🐸 Библиотека фронтендера

#code_challenge #js

📎 React, Vue, Svelte — разные догмы, одни и те же боли

Кажется, вот он — новый порядок, чистый код, свежий старт. А потом снова файл на 600 строк и состояние, которое живёт своей жизнью. И вы ловите дежавю.

❓ Что бы вы сделали:

🔥 — Выбрали новый фреймворк
❤️ — Переписали старый проект с нормальной архитектурой

🔤 Как это сделать — разбираем на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#code_battle

🧑‍💻 Clean Architecture vs Pragmatic Architecture

Когда принципы сталкиваются с дедлайнами — рождается архитектурный холивар.

🈂️ Clean Architecture

— Чёткие слои и зависимости
— Контракты, интерфейсы, unit-тесты
— Легко масштабировать и поддерживать

🈂️ Pragmatic Architecture

— Меньше слоёв, больше пользы
— Фокус на фичах, а не абстракциях
— Решения под задачу, а не под учебник

Голосуем реакциями:

👍 — Clean Architecture
❤️ — Pragmatic Architecture

🐸 Библиотека фронтендера

#code_battle

👍 Задача для джуна+

Что выведет этот код и почему ❓

Подумайте, в каком порядке выполняются присваивания и как JS обрабатывает ссылки на объекты. Это частый вопрос на собесах, где проверяют понимание порядка вычисления выражений и поведения ссылок.

💭 Ответ оставляйте в комментариях

🐸 Библиотека фронтендера

#code_challenge

😸 Разбор задачи

Ранее мы выкладывали задачу для джуна+.

Сегодня разберем, что происходит в этом коде и как работают присваивания и ссылки на объекты в JavaScript.

🔤 Разбор:

1. let a = { n: 1 }; — создаём объект { n: 1 } и присваиваем его переменной a.

2. let b = a; — b теперь ссылается на тот же объект, что и a.

3. a.x = a = { n: 2 }; —

• Присваиваем новому объекту { n: 2 } переменную a.

• После этого свойству x объекта { n: 2 } присваиваем сам объект { n: 2 }.

4. console.log(a.x); — выводит undefined, так как свойство x в новом объекте { n: 2 } не было установлено.

5. console.log(b.x); — выводит объект { n: 2 }, потому что b ссылается на старый объект { n: 1 }, который теперь имеет свойство x, указывающее на { n: 2 }.

✅ Ответ:

• a.x — undefined
• b.x — { n: 2 }

🐸 Библиотека фронтендера

#code_challenge