Вопросы на собеседовании Frontend junior

DNS находит IP → TCP-рукопожатие → TLS-рукопожатие → HTTP-запрос → сервер (балансировщик, приложение, база) → ответ → браузер разбирает HTML, догружает ресурсы и рисует страницу.

XSS — злоумышленник заставляет сайт выполнить его JavaScript в браузере другого пользователя: скрипт работает с правами сайта — читает данные страницы, отправляет запросы от имени…

CSRF — чужой сайт заставляет браузер жертвы отправить запрос на ваш сайт; браузер сам приложит cookie, и запрос выполнится от имени пользователя. CORS — правила, когда скрипт с…

Cookies — небольшие данные, которые браузер отправляет на сервер с каждым запросом (сессия, настройки); localStorage и sessionStorage — хранилища, доступные только скриптам…

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

Все действия должны быть доступны с клавиатуры: Tab — перемещение по интерактивным элементам, Enter и пробел — активация, Esc — закрыть окно, стрелки — внутри составных виджетов…

Angular — полноценный фреймворк «всё включено» на TypeScript: компоненты, маршрутизация, формы, HTTP-клиент, тестирование, CLI. Компонент — класс с декоратором @Component…

Сервис — класс с @Injectable; Angular сам создаёт его экземпляр и передаёт компонентам и другим сервисам, которые его запросили (через конструктор или функцию inject())…

Observable — поток значений во времени (может выдать много значений, ленив до подписки, отменяется отпиской), в отличие от Promise с одним значением. HttpClient, события форм и…

ARIA — атрибуты, которые сообщают вспомогательным технологиям роль (role="dialog"), состояние (aria-expanded, aria-selected) и связи (aria-labelledby, aria-describedby…

Мутируют: push, pop, shift, unshift, splice, sort, reverse, fill. Возвращают новый: map, filter, slice, concat, flat, а с ES2023 — toSorted, toReversed, toSpliced, with. forEach…

async-функция всегда возвращает Promise; await приостанавливает её до завершения промиса, не блокируя поток (продолжение — микрозадача). Ошибки ловят обычным try/catch…

В CSS все классы глобальны, и в большом проекте стили начинают конфликтовать. БЭМ (блок, элемент, модификатор) даёт соглашение: .card — блок, .card__title — элемент блока…

Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При…

Сборщик берёт исходники (модули JS/TS, CSS, картинки, импорты из node_modules) и делает оптимизированные файлы для браузера: склеивает модули, транспилирует TypeScript и JSX…

Замыкание — функция вместе с лексическим окружением, в котором она создана: она помнит переменные внешней функции даже после её завершения. Применение: приватное состояние…

Вместо одного большого бандла код делят на части, которые грузятся по необходимости: по маршрутам (страница настроек не нужна на главной), по тяжёлым виджетам (редактор, графики…

Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый …

Поверхностная копия ({...obj}, Object.assign, [...arr], slice) копирует только верхний уровень — вложенные объекты общие. Глубокая — structuredClone(obj) (встроенная, сохраняет…

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS …

CSR — сервер отдаёт пустую страницу и JS, всё рисует браузер: просто, но медленный первый показ и слабое SEO; подходит для личных кабинетов. SSR — HTML собирается на сервере на…

Наследуются в основном свойства текста: color, font-, line-height, text-align, visibility, cursor. Не наследуются свойства блока: margin, padding, border, background, width…

@keyframes имя { from {…} to {…} } (или проценты 0%, 50%, 100%) описывает шаги, свойство animation применяет её: имя, длительность, функция времени, задержка, число повторов…

CSS Modules — обычный CSS-файл, классы которого сборщик превращает в уникальные имена (.title → Card_title__x7a2) и отдаёт объектом: styles.title. Стили изолированы без соглашений…

static — обычный поток. relative — остаётся в потоке, сдвигается относительно своего места и становится опорой для absolute-детей. absolute — выпадает из потока, позиционируется…

При конфликте правил побеждает: !important → более высокая специфичность → более позднее правило. Специфичность считается тройкой (id, классы/атрибуты/псевдоклассы…

transition плавно переводит свойство из старого значения в новое, когда значение меняется (hover, класс, состояние): transition: transform 200ms ease-out. Задаётся свойство…

px — абсолютные пиксели; rem — от размера шрифта корня (html), em — от шрифта текущего элемента (вложенные em накапливаются); % — от размера родителя; vw/vh — проценты окна…

Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут…

Дизайн-система — общий язык дизайна и кода: токены (цвета, типографика, отступы) в CSS-переменных, библиотека компонентов с доступностью из коробки, документация и песочница…

Токены — именованные значения дизайна: цвета, размеры шрифтов, отступы, радиусы, тени, длительности анимаций. Есть базовые (blue-600 = #2563eb) и семантические (color-accent…

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на…

Найти: querySelector(css-селектор) — первый элемент, querySelectorAll — статический список. Изменить: textContent — текст (безопасно), innerHTML — разметка (опасно с…

=== — строгое сравнение: типы должны совпадать, без преобразований. == — нестрогое: перед сравнением приводит типы по запутанным правилам ("1" == 1, 0 == "", null == undefined …

ESLint — линтер: находит ошибки и опасные конструкции (неиспользуемые переменные, нарушение правил хуков, сравнение через ==). Prettier — форматтер: единообразно расставляет…

CommonJS — исторический формат Node.js: require() и module.exports, загрузка синхронная и динамическая (require можно вызвать где угодно). ES-модули — стандарт языка…

JavaScript выполняется в одном потоке. Цикл событий берёт одну макрозадачу (скрипт, setTimeout, событие, сетевой ответ), выполняет её до конца, затем все микрозадачи (then у…

Уточнить требования (источник данных, объём, задержка, мобильные, офлайн), затем: debounce ввода (~150–300 мс), отмена устаревших запросов (AbortController) и защита от гонок…

fetch(url, options) возвращает Promise ответа. Важно: промис отклоняется только при сетевой ошибке — на 404 и 500 он выполняется успешно, поэтому надо проверять response.ok или…

Нестабильный тест подрывает доверие ко всем тестам: команда привыкает перезапускать и пропускает настоящие ошибки. Частые причины: ожидание по времени (sleep) вместо условия…

Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы…

Проверка на клиенте — для удобства (быстрая подсказка), на сервере — обязательно (клиент можно обойти). Встроенные атрибуты: required, minlength, pattern, min/max, типы email и…

Пайплайн: установка по lock-файлу → линтер и типы → тесты → сборка → проверки размера → preview-окружение на каждый PR → выкатка. Статика с хешами в именах кэшируется надолго на…

Код выполняется на тысячах чужих устройств — без мониторинга вы узнаете об ошибках от пользователей. Нужны: сбор ошибок (Sentry и аналоги) с source maps, чтобы видеть исходный…

Каждое поле — с label (for/id или обёртка): клик по подписи фокусирует поле, скринридер читает подпись. Правильный type (email, tel, number, date, password) даёт нужную клавиатуру…

Семантические теги описывают смысл содержимого: header, nav, main (один на странице), article, section, aside, footer, заголовки h1–h6 по иерархии, button для действий, a для…

После SSR браузер получает готовый HTML, но он «мёртвый»: гидратация — фреймворк загружает JS, повторно строит дерево компонентов и привязывает обработчики к существующей…

Картинки — часто самая тяжёлая часть страницы. Приёмы: современные форматы (AVIF, WebP; SVG для иконок), размер под экран через srcset и sizes (телефону не нужна картинка 3000px)…

IntersectionObserver — сообщает, когда элемент входит в видимую область: ленивая загрузка, бесконечная прокрутка, аналитика просмотров — без дорогих обработчиков scroll…

Модуль — файл со своей областью видимости: наружу видно только то, что экспортировано. Именованный экспорт export function sum импортируют import { sum } (имя совпадает), default…

Семь примитивов: string, number, bigint, boolean, undefined, null, symbol — и object (включая массивы, функции, даты). Примитивы неизменяемы и копируются по значению, объекты …

Переписывать всё с нуля — главный риск: годы без новых функций и вечная погоня за старой системой. Работает постепенная замена (strangler fig): новый стек встраивается в старое…

title — заголовок во вкладке и в выдаче (до ~60 символов), meta description — сниппет (~150 символов), viewport — для мобильных, canonical — основной адрес страницы, robots …

Микрофронтенды — разделение интерфейса на части, которые разные команды разрабатывают и выкатывают независимо, а оболочка собирает их в одно приложение (Module Federation…

Монорепозиторий хранит несколько приложений и пакетов (дизайн-система, клиент API, утилиты) в одном репозитории: атомарные изменения сразу во всех потребителях, единые версии…

package.json задаёт диапазоны версий (^1.2.0), а lock-файл фиксирует точные версии всего дерева зависимостей — у всех разработчиков и в CI ставится одно и то же. Lock-файл…

Раздел scripts в package.json — именованные команды проекта: npm run dev, npm run build, npm test. В скриптах доступны бинарники из node_modules/.bin без указания пути — поэтому…

Производительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение…

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

Цель — чтобы изменение в одной функции не задевало остальные и новый человек быстро находил код. Основа — разделение по функциональности (features, страницы, сущности), а не по…

Promise — объект будущего результата в одном из состояний: pending, fulfilled, rejected; состояние меняется один раз. then/catch/finally возвращают новый промис — получаются…

У каждого объекта есть ссылка на прототип; если свойства нет в объекте, оно ищется по цепочке прототипов. Методы хранятся в прототипе и разделяются всеми экземплярами. class …

Всё, что вложено в компонент между тегами, приходит в props.children — так делают обёртки: модальное окно, карточку, раскладку страницы, не зная, что внутри. Если мест для…

Набор компонентов, которые работают вместе и делят общее состояние через Context родителя: <Tabs>, <Tabs.List>, <Tabs.Tab>, <Tabs.Panel>. Пользователь сам собирает разметку в…

Способы: тернарный оператор {cond ? <A/> : <B/>}, логическое И {cond && <A/>}, ранний return из компонента, переменная с элементом. Ловушка &&: если слева число 0, React его…

Context передаёт значение всему поддереву без протаскивания через props: createContext → <Ctx.Provider value={...}> наверху → useContext(Ctx) в любом вложенном компоненте…

Все потребители контекста перерисовываются, когда value меняется по ссылке. Частая ошибка — объект в value создаётся заново на каждом рендере провайдера: value={{user, setUser}} …

Пользовательский хук — функция с именем use…, внутри которой вызываются другие хуки; так выносят повторяющуюся логику (подписка на размер окна, debounce, загрузка данных, работа с…

Если значение вычисляется из props или другого состояния (отфильтрованный список, сумма корзины, полное имя), его считают во время рендера, а не хранят в отдельном state…

Граница ошибок перехватывает исключения, брошенные при рендере дочерних компонентов, и показывает запасной интерфейс вместо белого экрана. Ставят на уровне страниц и виджетов…

Обработчик передают функцией: onClick={handleClick} или onClick={() => remove(id)} — не onClick={handleClick()} (это вызов при рендере). Событие — синтетическое объединение над…

Fiber — внутренняя структура React: каждый элемент дерева представлен узлом-«волокном» с ссылками на родителя, потомка и соседа. Это позволяет выполнять работу кусками…

Контролируемое поле: значение в state, value={name} и onChange={e => setName(e.target.value)} — React — источник истины, удобно валидировать и форматировать на лету…

По умолчанию ref на свой компонент не попадает в его DOM. В React 19 ref передаётся как обычный prop; в прежних версиях компонент оборачивали в forwardRef. useImperativeHandle…

React Hook Form держит поля неконтролируемыми (через register и ref) — мало перерисовок даже на больших формах — и даёт состояние ошибок, отправки, «грязных» полей. Zod описывает…

Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков…

HOC — функция, которая принимает компонент и возвращает обёрнутый с дополнительными props (withUser(Profile)). Render props — компонент вызывает функцию-проп для отрисовки (<Mouse…

JSX — синтаксис, который компилируется в вызовы создания элементов (<div className="a"> → jsx("div", {className: "a"})). В фигурных скобках — любое выражение JavaScript…

Данные в React текут сверху вниз через props. Если двум соседям нужно одно состояние, его поднимают в ближайшего общего родителя: родитель хранит state, передаёт значение вниз…

React.memo пропускает перерисовку компонента, если props поверхностно равны прошлым. useMemo кэширует результат вычисления, useCallback — саму функцию между рендерами. Они…

MSW (Mock Service Worker) перехватывает запросы на уровне сети и отвечает заданными данными: компонент работает с настоящим fetch и клиентом, а тест управляет ответами — успех…

React Native рендерит нативные компоненты платформы, а не DOM: View, Text, Image, Pressable, FlatList вместо div и span; текст — только внутри Text. Стили — объекты через…

Маршруты — папки в app/: app/orders/[id]/page.tsx → /orders/123. layout.tsx оборачивает вложенные страницы и не перемонтируется при переходах между ними; loading.tsx …

Стратегии: статическая генерация при сборке — для неизменного контента; ISR (revalidate по времени) — статика, которая пересобирается в фоне; ревалидация по требованию…

Эффект — для синхронизации с внешней системой (подписка, таймер, сторонний виджет, запрос). Лишние эффекты: вычисление из props и state (считать при рендере), реакция на событие…

Оптимистичное обновление показывает результат действия сразу, не дожидаясь сервера (лайк, отметка задачи), — интерфейс кажется мгновенным. В TanStack Query: в onMutate отменить…

createPortal(jsx, domNode) рендерит содержимое в другое место DOM (обычно в конец body), сохраняя его положение в дереве React. Это нужно модальным окнам, подсказкам, выпадающим…

Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные…

Redux — одно хранилище, состояние меняется только через action (объект «что произошло»), а reducer — чистая функция (state, action) → новое state: без побочных эффектов, поэтому…

Оба сохраняют значение между рендерами, но изменение ref.current не вызывает перерисовку, а setState — вызывает. Ref — «ящик» для значений, которые не влияют на вывод: id таймера…

Компонент перерисовывается, когда меняется его состояние, контекст, который он читает, или перерисовывается родитель (по умолчанию — все дети, даже с теми же props). React.memo…

loader маршрута — функция, которую роутер вызывает при переходе, параллельно для всех вложенных маршрутов, до рендера страницы; компонент читает результат через useLoaderData()…

Маршруты описывают деревом: путь → компонент. Вложенные маршруты рендерятся внутри родителя на месте &lt;Outlet/&gt; — так общая раскладка (шапка, меню) остаётся, а меняется…

Параметры пути (/orders/:id) читают useParams() — const { id } = useParams(). Параметры строки запроса (?page=2&sort=date) — useSearchParams(): чтение params.get("page") и запись…

Server Action — асинхронная функция с директивой "use server", которая выполняется на сервере, но вызывается из клиента: её передают в <form action={createOrder}> или вызывают из…

Серверный компонент выполняется только на сервере: может читать базу и секреты, его код не попадает в бандл браузера, но в нём нет состояния, эффектов и обработчиков событий…

SSR: сервер рендерит компоненты в HTML — пользователь сразу видит содержимое, поисковики его индексируют. Затем в браузере React гидратирует: загружает JS, сопоставляет его с…

Каждый рендер — снимок: функции компонента замыкают значения state этого рендера. setState не меняет переменную сразу, а планирует новый рендер. Поэтому setCount(count + 1) три…

React узнаёт об изменении, сравнивая ссылки (Object.is). Мутация (items.push(x), user.name = ...) оставляет ссылку прежней — перерисовки не будет, а memo и useEffect не увидят…

Сначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище…

props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз…

CSS Modules (Button.module.css) делают имена классов локальными для файла: styles.primary превращается в уникальное имя, конфликтов нет. Tailwind — служебные классы прямо в…

lazy(() => import("./Page")) превращает компонент в отдельный чанк, который загрузится при первом показе. Пока он грузится, ближайшая &lt;Suspense fallback&gt; показывает запасной…

Серверное состояние — копия данных сервера: его нужно кэшировать, обновлять, дедуплицировать. useQuery({ queryKey, queryFn }) даёт data, isPending, error, кэш по ключу, повторы…

getBy… — элемент должен быть сейчас, иначе ошибка. queryBy… — возвращает null, если элемента нет: для проверки отсутствия (expect(queryByText("Ошибка")).not.toBeInTheDocument())…

Хук нельзя вызвать вне компонента, поэтому используют renderHook из Testing Library: он рендерит служебный компонент и отдаёт result.current — текущее возвращаемое значение…

Testing Library проверяет компонент как пользователь: рендерит его, ищет элементы по роли, подписи, тексту, а не по классам и внутреннему состоянию. user-event имитирует реальные…

Тестировать поведение, важное пользователю: что показывается при разных данных (пусто, ошибка, загрузка, список), что происходит после действий (отправка формы, фильтр, удаление)…

useTransition помечает обновление как несрочное: ввод в поле применяется сразу, а тяжёлая перерисовка результатов идёт в фоне и может прерываться; isPending показывает индикатор…

События React имеют типы с параметром элемента: ChangeEvent&lt;HTMLInputElement&gt;, MouseEvent&lt;HTMLButtonElement&gt;, FormEvent&lt;HTMLFormElement&gt;, KeyboardEvent. Если…

Дженерик-компонент получает параметр типа из данных: function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }) — внутри render тип элемента известен без…

Props описывают типом или интерфейсом и указывают в параметре: function Button({ label, onClick }: ButtonProps). Необязательные — ?, значения по умолчанию — в деструктуризации…

В URL хранят то, что должно переживать перезагрузку, делиться ссылкой и работать с кнопкой «назад»: фильтры, сортировку, страницу, открытую вкладку, поисковый запрос. URL…

useEffect запускает побочный эффект после отрисовки: подписки, таймеры, запросы, синхронизацию с внешней системой. Зависимости определяют, когда эффект перезапускается: [] — один…

useReducer(reducer, initial) хранит состояние, которое меняется через действия: dispatch({type: "added", item}), а чистая функция reducer(state, action) возвращает новое…

const inputRef = useRef<HTMLInputElement>(null) и <input ref={inputRef}/> — после монтирования в inputRef.current будет DOM-элемент. Использовать его можно в обработчиках и…

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue…

Проект создают сборщиком Vite: npm create vite@latest app -- --template react-ts, затем npm install и npm run dev. React декларативный: вы описываете, как интерфейс выглядит при…

React экранирует строки, вставленные в JSX: {comment} с текстом <script> покажется как текст, а не выполнится. Защита не работает: в dangerouslySetInnerHTML (HTML вставляется как…

create создаёт хук-хранилище: состояние и функции изменения в одном объекте, без провайдера. Компонент подписывается селектором — useCart(s => s.items.length) — и…

У части людей движение на экране вызывает головокружение и тошноту (вестибулярные нарушения), других отвлекает. В системе они включают «уменьшить движение», а сайт узнаёт об этом…

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки…

Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые…

Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка…

Semver: MAJOR.MINOR.PATCH — major ломает совместимость, minor добавляет функции, patch исправляет ошибки. ^1.2.3 разрешает обновления до <2.0.0 (minor и patch), ~1.2.3 — только…

Поисковик должен получить содержимое страницы, понять его и оценить качество. Для этого: контент доступен в HTML без обязательного выполнения JS (SSR или статическая генерация для…

robots.txt в корне сайта говорит роботам, какие разделы не обходить (админка, корзина, бесконечные фильтры) и где лежит sitemap. Это не защита: страница может попасть в индекс по…

Source map — файл соответствия собранного (минифицированного, склеенного) кода исходному: строка 1, столбец 48231 в index-3f2a.js → Cart.tsx:42. Браузерные DevTools и системы…

Storybook — песочница, где компоненты разрабатывают и показывают изолированно от приложения: каждая история (story) — компонент в конкретном состоянии (обычная кнопка, загрузка…

Svelte — компилятор: компоненты (.svelte) превращаются при сборке в небольшой JS, который напрямую обновляет DOM, без виртуального DOM и тяжёлой библиотеки в рантайме — меньше…

Между родителем и ребёнком — props и колбэки (или bind). Для общего состояния нескольких компонентов в Svelte 5 выносят $state в отдельный модуль (.svelte.js) и импортируют его …

Tailwind — набор маленьких классов-утилит (flex, p-4, text-lg, md:grid-cols-2), из которых стиль собирается прямо в разметке. Плюсы: не нужно придумывать имена, стили не…

Принцип Testing Library: тестировать так, как пользуется человек. Компонент рендерят, ищут элементы по роли, подписи, тексту (getByRole('button', { name: 'Отправить' }))…

В обычной функции this определяется в момент вызова: obj.method() — obj; простой вызов f() — undefined в строгом режиме; new F() — новый объект; call/apply/bind — заданный явно…

Дженерик — параметр типа: функция или тип работает с разными типами, сохраняя связь между входом и выходом. function first<T>(xs: T[]): T | undefined — для string[] вернёт string…

Если переменная имеет тип-объединение (string | number, User | null), TypeScript позволяет использовать только общее. Проверка внутри кода сужает тип в ветке: typeof (примитивы)…

TypeScript добавляет к JavaScript статические типы, которые проверяются при компиляции и стираются в итоговом JS. Польза: ошибки до запуска, автодополнение, безопасный…

Оба описывают форму объекта. interface — расширяется через extends и сливается при повторном объявлении (удобно для расширения чужих типов). type — умеет больше: объединения…

var — область видимости функции, поднимается (hoisting) со значением undefined, допускает повторное объявление. let и const — область видимости блока {}, до строки объявления …

Юнит-тесты проверяют логику без браузера: функции форматирования, расчёты, валидацию, редьюсеры, хуки. Vitest (быстрый, совместим с Vite) и Jest — похожий API: describe, it/test…

Компонент Vue обычно — однофайловый (.vue): блоки <script setup>, <template> и <style scoped>. Шаблон — HTML с директивами: {{ }} для вывода, v-bind (:href), v-on (@click)…

Данные идут сверху вниз через props (defineProps), ребёнок их не меняет. Наверх ребёнок сообщает событиями (defineEmits, emit('select', id)), родитель слушает @select. v-model на…

Vue отслеживает, какие реактивные значения прочитал шаблон или вычисление, и при их изменении сам обновляет только зависимое. ref — обёртка для любого значения (в скрипте .value…

REST — ресурсы и HTTP-методы: просто, кэшируется HTTP, хватает для большинства приложений. GraphQL — клиент сам описывает нужные поля одним запросом: удобно при множестве экранов…