Под капотом фреймворков: доверяйте примитивам веба

Каждый раз, добавляя зависимость от фреймворка, вы делаете ставку на то, что эта библиотека переживёт ваш проект. Между тем, веб-платформа поставляет возможности, которые браузеры обязуются поддерживать вечно. Разрыв между тем, что предоставляют фреймворки, и тем, что теперь обрабатывают нативные API браузеров, резко сократился.

В этой статье рассматриваются конкретные примитивы веб-платформы, которые снижают зависимость от фреймворков, — и как оценивать их готовность, используя Baseline в качестве ориентира.

Понимание Baseline Web Features

Перед внедрением любого нативного API браузера вам нужен надёжный способ оценки кроссбраузерной поддержки. Baseline предоставляет именно это. Функция получает статус «недавно доступна» (newly available), когда она реализована в последних стабильных версиях Chrome, Edge, Firefox и Safari. После продолжительного периода доступности во всех этих браузерах (примерно 30 месяцев) она становится «широко доступной» (widely available).

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

Вы можете проверить текущий статус кроссбраузерной поддержки любой веб-функции на панели Web Platform Status по адресу https://webstatus.dev, которая отслеживает классификацию Baseline и поддержку браузеров в одном месте.

Нативные API браузеров, заменяющие паттерны фреймворков

Popover API для модальных окон и всплывающих подсказок

React-разработчики часто обращаются к библиотекам вроде Radix или Headless UI для создания доступных поповеров. Popover API, теперь недавно доступная функция Baseline, обрабатывает это нативно:

<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>
  <p>Menu content here</p>
</div>

Браузер управляет захватом фокуса, поведением при закрытии лёгким нажатием и рендерингом в верхнем слое. Для базовой функциональности JavaScript не требуется. Определение поддержки функции выполняется просто:

if ('popover' in HTMLElement.prototype) {
  // Use native popover
} else {
  // Fall back to framework solution
}

View Transitions для анимации страниц

Одностраничные приложения существуют отчасти потому, что многостраничная навигация казалась резкой. View Transitions API меняет это уравнение, обеспечивая плавные переходы между состояниями DOM:

document.startViewTransition(() => {
  updateDOMSomehow();
});

Для переходов между документами достаточно только CSS:

@view-transition {
  navigation: auto;
}

Семейство View Transitions теперь недавно доступно в Baseline для переходов внутри одного документа (same-document). Браузеры без поддержки просто пропускают анимацию.

Navigation API для клиентской маршрутизации

Роутеры фреймворков, такие как React Router, существуют потому, что History API был неудобен. Navigation API предоставляет более чистую модель для перехвата навигации:

navigation.addEventListener('navigate', (event) => {
  event.intercept({
    handler() {
      return loadContent(event.destination.url);
    }
  });
});

Navigation API теперь недавно доступен в Baseline, но это не означает, что вам следует немедленно выбрасывать свой роутер. Это означает, что вы можете начать оценивать, где нативные примитивы навигации могут упростить ваш стек — особенно для более лёгких «приложениеподобных» интерфейсов.

Современные возможности CSS, устраняющие JavaScript

Anchor Positioning

Позиционирование всплывающих подсказок и выпадающих списков относительно элементов-триггеров традиционно требовало JavaScript-вычислений. CSS Anchor Positioning обрабатывает это декларативно:

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
}

Эта функция пока не доступна в Baseline во всех основных браузерах, поэтому используйте её строго как прогрессивное улучшение с JavaScript-откатами там, где это необходимо.

Container Queries и :has()

Container Queries широко доступны и позволяют компонентам реагировать на размер их контейнера, а не области просмотра — устраняя множество хрупкой логики компоновки на JS.

Селектор :has() недавно доступен и открывает паттерны, которые ранее требовали «осведомлённости о родителе» на основе JS и отражения состояния. Поскольку он ещё не широко доступен, в зависимости от вашей аудитории может потребоваться осторожность — но теперь это реальная опция для разработки с продуманными откатами.

Declarative Shadow DOM для SSR веб-компонентов

Серверный рендеринг веб-компонентов ранее требовал гимнастики с гидратацией. Declarative Shadow DOM решает эту проблему:

<my-component>
  <template shadowrootmode="open">
    <style>/* scoped styles */</style>
    <slot></slot>
  </template>
</my-component>

Shadow DOM существует в начальном HTML-пакете — для первого рендера не требуется выполнение JavaScript. Это теперь недавно доступно и используется в современных браузерах, но для старых версий Safari, в частности, могут потребоваться откаты.

Прогрессивное улучшение как архитектура

Паттерн здесь не «отказаться от фреймворков». Это признание того, что примитивы веб-платформы теперь решают конкретные проблемы, которые ранее требовали слоёв абстракции.

Определение поддержки функций обеспечивает этот подход:

1. Проверьте, существует ли нативный API
2. Используйте его, когда доступен
3. Откатывайтесь к решениям фреймворков, когда нет

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

Заключение

Проверьте свои зависимости от фреймворков на соответствие текущим функциям Baseline. Popover API, View Transitions, современные возможности CSS и Declarative Shadow DOM решают реальные проблемы, которые оправдывали код фреймворков всего два года назад.

Веб-платформа развивается медленно, но постоянно. Функции, достигающие статуса Baseline, представляют стабильную основу. Стройте на этом фундаменте и дополняйте только там, где платформа действительно не справляется.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.