React Frontend Developer

Question 1

Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?

Accepted Answer

HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.

Question 2

Что такое функции и миксины в css?

Accepted Answer

Функции и миксины используются в CSS-препроцессорах для создания переиспользуемого кода. Миксины позволяют группировать стили и применять их к различным элементам, в то время как функции выполняют вычисления и возвращают значения, которые могут быть использованы в других стилях.

Это помогает сократить количество дублирующегося кода и делает стили более управляемыми.

Question 3

Как работает механизм импорта и экспорта функций между файлами?

Accepted Answer

Импорт и экспорт позволяют явно определять, какие части модуля доступны снаружи. Экспортируемые сущности объявляются в одном файле, а импортируются в другом. Связь между модулями создаётся на этапе загрузки, а не во время выполнения функций. Модули выполняются один раз и кэшируются. Это делает код предсказуемым и структурированным.

Question 4

В чем разница между централизованным и модульным state?

Accepted Answer

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

Question 5

В чем разница между композицией и декомпозицией?

Accepted Answer

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

Question 6

Какие подходы к изоляции стилей существуют?

Accepted Answer

Изоляция стилей предотвращает конфликты CSS между компонентами. Основные подходы: BEM (методология именования классов), CSS Modules (автоматическая генерация уникальных имен), Shadow DOM (инкапсуляция в веб-компонентах), Scoped Styles (атрибут scoped в Vue/Svelte) и CSS-in-JS (стили в JavaScript). Выбор зависит от фреймворка и требований к производительности.

Question 7

Видите ли вы минусы модульной архитектуры, особенно при росте проекта?

Accepted Answer

Модульная архитектура упрощает разработку, но при росте проекта возникают минусы: усложняется управление зависимостями между модулями, растёт время сборки, появляется дублирование кода и сложности с версионированием. Также требуется строгая дисциплина команды для поддержания границ модулей.

Question 8

Была ли UI-библиотека вынесена в отдельный слой или пакет?

Accepted Answer

Вынесение UI-библиотеки в отдельный слой или пакет означает, что все компоненты интерфейса собраны в изолированном модуле, который не зависит напрямую от бизнес-логики. Это упрощает переиспользование, тестирование и замену UI-фреймворка. Такой подход часто реализуется через монорепозиторий или отдельный npm-пакет.

Вопросы React Frontend Developer