Питання на співбесіді з патернів проєктування з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Патерни проєктування · Junior

1. Що таке патерн проєктування?

   Правильна відповідь: Типове рішення задачі проєктування, що часто трапляється

   Патерн - не код, а опис ідеї: яку проблему розв'язує, з яких частин складається рішення, які в нього плюси й мінуси. Реалізація залежить від мови й контексту. Знання патернів дає команді спільний словник: «тут потрібна стратегія» зрозуміло без довгих пояснень.

2. На які три групи поділяються класичні патерни GoF?

   Правильна відповідь: Породжувальні, структурні, поведінкові

   Породжувальні відповідають за створення об'єктів (Фабрика, Будівельник, Одинак), структурні - за композицію об'єктів (Адаптер, Декоратор, Фасад), поведінкові - за взаємодію й розподіл обов'язків (Спостерігач, Стратегія, Команда). Книга «Банди чотирьох» (1994) описала 23 патерни.

3. Що гарантує патерн «Одинак» (Singleton)?

   Правильна відповідь: Клас має лише один екземпляр і глобальну точку доступу до нього

   Приклади: один клієнт API, один логер, одне підключення до БД. У JS найпростіше зробити синглтон модулем: export const api = new ApiClient() - модуль виконується один раз, і всі, хто імпортує, отримають той самий об'єкт.

4. Чому Singleton часто називають антипатерном?

   Правильна відповідь: Він вносить прихований глобальний стан і ускладнює тестування

   Код, що звертається до синглтона напряму, неявно від нього залежить: тести впливають один на одного, підмінити реалізацію складно. Компроміс - створювати один екземпляр, але передавати його явно (впровадження залежностей), щоб у тестах підставляти мок.

Патерни проєктування · Middle

1. Чим Декоратор відрізняється від Замісника (Proxy), якщо структура в них схожа?

   Правильна відповідь: Наміром: Декоратор додає поведінку, Proxy контролює доступ до об'єкта

   Обидва обгортають об'єкт із тим самим інтерфейсом. Декоратори зазвичай складають у ланцюжок, щоб нарощувати функціональність (логування + кеш + повтор). Замісник керує життєвим циклом і доступом: ліниве завантаження, перевірка прав, віддалений об'єкт. Багато патернів різняться саме метою.

2. Чим Адаптер відрізняється від Фасаду?

   Правильна відповідь: Адаптер припасовує інтерфейс до очікуваного, Фасад спрощує роботу з підсистемою

   Адаптер зазвичай обгортає один об'єкт і робить його сумісним із наявним кодом. Фасад визначає новий, простіший інтерфейс поверх багатьох об'єктів. На практиці API-шар часто поєднує обидва: фасад над HTTP і адаптери для даних.

3. Коли доречна «Абстрактна фабрика», а не проста фабрика?

   Правильна відповідь: Коли потрібні сімейства пов'язаних, сумісних об'єктів

   Приклад: UI-кит для двох платформ - фабрика створює кнопку, поле й модалку в одному стилі, і змішати їх не можна. Проста фабрика обирає один продукт за параметром. Не варто вводити абстрактну фабрику, якщо сімейство лише одне.

4. Чим небезпечний модульний синглтон (export const cache = new Map()) у SSR-застосунку?

   Правильна відповідь: На сервері модуль спільний для всіх запитів, і дані користувачів змішаються

   У браузері модульна змінна живе в межах однієї вкладки. Серверний процес обслуговує тисячі користувачів, і спільний кеш чи store на рівні модуля може віддати дані одного користувача іншому. Стан запиту створюють на запит (наприклад, cache() з React, QueryClient на запит).

Патерни проєктування · Senior

1. Чим модель «сигналів» (Solid, Preact Signals, Angular Signals) відрізняється від моделі React?

   Правильна відповідь: Оновлюються лише залежні місця, без перерендеру компонента

   Сигнал - реактивне значення (Observer): під час читання реєструється залежність, під час запису оновлюються саме її підписники (текст, атрибут, обчислення). React натомість перемальовує компонент і порівнює віртуальне дерево; React Compiler зменшує цю вартість, але модель інша.

2. Який головний компроміс мікрофронтендів?

   Правильна відповідь: Незалежність команд і деплоїв ціною складності, дублювання й узгодженості UX

   Мікрофронтенди виправдані за багатьох автономних команд і великого продукту: кожна частина деплоїться окремо. Ціна - дублювання залежностей, складна інтеграція, спільний дизайн, маршрутизація й комунікація між частинами. Для невеликих команд зазвичай вистачає модульного моноліту.

3. Чому в Module Federation React оголошують shared як singleton?

   Правильна відповідь: Дві копії React в одному застосунку ламають хуки й контекст

   Хуки й контекст прив'язані до конкретного екземпляра React: компонент із віддаленого модуля з власною копією спричинить «Invalid hook call», а контексти не буде видно. Спільні singleton-залежності потребують узгодження версій між командами.

4. Як працює патерн Strangler Fig під час міграції легасі-фронтенду?

   Правильна відповідь: Нова система поступово перехоплює маршрути й функції старої, доки та не зникне

   Наприклад, проксі спрямовує /checkout у новий Next.js-застосунок, а решту - у старий. Ризики нижчі, ніж у «великого переписування»: цінність постачається поступово, відкотитися можна на будь-якому кроці.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.