React Frontend Developer

Question 1

Что такое CSS Modules и как они помогают в организации стилей?

Accepted Answer

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

Question 2

Как webpack-dev-сервер обрабатывает замену горячего модуля (HMR)?

Accepted Answer

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

Question 3

Работал ли с Module Federation?

Accepted Answer

Module Federation — это технология, встроенная в Webpack 5, которая позволяет нескольким независимым JavaScript-приложениям динамически импортировать код друг у друга во время выполнения. Это основа для архитектуры Micro Frontends. Она позволяет разбить одно большое приложение (монолит) на более мелкие, автономные части, которые могут разрабатываться, развертываться и обновляться независимо друг от друга, но при этом работать как единое целое в браузере пользователя.

Question 4

В чем отличие Module Federation от монорепозитория и одной большой SPA?

Accepted Answer

Одна большая SPA — это единое приложение, где весь код собран и развёрнут вместе. Монорепозиторий — это способ хранения кода нескольких проектов в одном репозитории, но они могут быть собраны и развёрнуты как отдельные приложения или как один монолит. Module Federation — это технология Webpack, позволяющая динамически загружать части приложения (модули) с других, независимо собранных и развёрнутых приложений во время выполнения, создавая эффект единого приложения из распределённых источников.

Question 5

В чем особенности подхода без Module Federation при построении микрофронтов?

Accepted Answer

Без Module Federation микрофронтенды интегрируются на этапе сборки или на стороне сервера. Основные подходы: сборка всех модулей в один бандл (build-time), использование iframe для изоляции, компоновка на сервере (SSI, Edge-Side Includes) или клиентская маршрутизация с загрузкой отдельных приложений. Эти методы часто требуют пересборки всего приложения для обновления, создают сильную связность или проблемы с производительностью и совместным использованием состояния.

Question 6

Что такое SCSS modules?

Accepted Answer

SCSS Modules — это подход, который комбинирует возможности препроцессора SCSS с концепцией CSS Modules. CSS Modules — это система, которая автоматически генерирует уникальные имена классов для селекторов, изолируя стили в рамках конкретного компонента. SCSS добавляет к этому миксины, вложенность, переменные и другие удобства. В результате разработчик пишет SCSS-код в отдельных файлах (например, Button.module.scss), а сборщик (например, Webpack) преобразует его в CSS с уникальными именами классов, гарантируя, что стили одного компонента не повлияют на другой.

Question 7

Как можно передать CSS-переменную через JavaScript внутрь CSS Modules, чтобы динамически менять стиль компонента?

Accepted Answer

CSS-переменные (custom properties) можно динамически изменять через JavaScript, устанавливая их значения через свойство style элемента или через setProperty. В CSS Modules переменные объявляются в глобальном селекторе :root или локально. Для динамического изменения достаточно обратиться к DOM-элементу и задать новое значение переменной, которая будет использована в стилях модуля.

Вопросы React Frontend Developer