Отличия от Popper.js

Floating UI и Popper.js решают схожие задачи позиционирования всплывающих элементов в веб-приложениях, однако их архитектура и подход к API существенно различаются. Основное отличие заключается в модульности, поддержке современных браузерных стандартов и акценте на «универсальность» Floating UI.

Модульная архитектура

Floating UI строится вокруг концепции плагинов и middleware. Каждый шаг позиционирования, будь то смещение, избегание выхода за границы, сдвиг относительно курсора или автоматическое изменение направления, реализован через отдельные middleware-функции. Это позволяет:

  • Подключать только необходимые функции, минимизируя вес.
  • Легко комбинировать несколько эффектов позиционирования.
  • Писать кастомные middleware для уникальных сценариев.

Popper.js использует более монолитную архитектуру. Хотя в Popper 2.x появились модификаторы, они всё ещё тесно связаны с ядром библиотеки и не всегда позволяют легко интегрировать собственные алгоритмы позиционирования.

Современные стандарты и универсальность

Floating UI разработан с учётом современных API браузеров:

  • Использует Floating UI DOM для браузерных элементов, поддерживает virtual elements, что позволяет позиционировать элементы вне DOM (например, для canvas, WebGL или кастомных рендеров).
  • Полностью поддерживает TypeScript, обеспечивая строгую типизацию middleware и конфигурации.
  • Легко интегрируется в React, Vue, Solid, Svelte, благодаря официальным адаптерам и хукам.

Popper.js ориентирован в первую очередь на классический DOM и HTML-элементы. Работа с виртуальными элементами и интеграция с современными фронтенд-фреймворками требует обёрток сторонних библиотек.

Поддержка виртуальных элементов

Floating UI позволяет позиционировать всплывающие элементы относительно виртуальных объектов, которые не существуют в DOM. Например:

import { computePosition } from '@floating-ui/dom';

const virtualReference = {
  getBoundingClientRect() {
    return { x: 100, y: 200, width: 0, height: 0, top: 200, left: 100, right: 100, bottom: 200 };
  },
};

computePosition(virtualReference, tooltipElement, {
  middleware: [offset(10), flip(), shift({ padding: 5 })],
});

Popper.js не имеет встроенной поддержки таких сценариев и требует обходных решений.

Принцип работы middleware

Middleware в Floating UI выполняется последовательно, и результат каждого шага передаётся следующему. Это отличается от системы модификаторов Popper.js, где модификаторы могут влиять на расчёты друг друга, что иногда приводит к непредсказуемому поведению при сложной цепочке изменений.

Примеры middleware Floating UI:

  • offset(value) — смещает всплывающий элемент на заданное расстояние.
  • flip() — автоматически изменяет направление при выходе за границы видимой области.
  • shift(options) — корректирует позицию, чтобы элемент оставался в пределах контейнера.
  • arrow({ element }) — корректирует положение стрелки относительно целевого элемента.

Middleware можно комбинировать в любых последовательностях, создавая кастомные стратегии позиционирования, что в Popper.js сложнее из-за жёсткой структуры модификаторов.

Размер и производительность

Floating UI, благодаря своей модульной природе, значительно легче Popper.js. В современном веб-приложении это позволяет уменьшить бандл и ускорить время загрузки. Кроме того, оптимизация расчётов позиционирования для виртуальных элементов и динамически изменяемых контейнеров снижает нагрузку на рендеринг при сложных интерфейсах.

API и удобство использования

  • Floating UI предоставляет низкоуровневый API, ориентированный на точный контроль позиции и кастомизацию.
  • Popper.js предлагает более «готовый к использованию» API с встроенными опциями, что удобно для стандартных всплывающих подсказок, но ограничивает гибкость.
  • В Floating UI проще интегрировать нестандартные сценарии: позиции по координатам мыши, динамические размеры всплывающего окна, сложные комбинации слайдов и перелетов.

Совместимость и будущее

Floating UI активно развивается и ориентирован на новые стандарты веба, включая поддержку виртуальных элементов, анимаций с requestAnimationFrame и работу вне браузера (например, для SSR и Canvas-приложений). Popper.js исторически ориентирован на классический DOM, и его возможности в современных SPA-фреймворках ограничены без адаптеров.

Ключевое различие между Floating UI и Popper.js сводится к модульности, универсальности и поддержке виртуальных элементов. Floating UI предоставляет гибкий, современный инструмент для позиционирования, легко настраиваемый под уникальные задачи, тогда как Popper.js остаётся более традиционным и ориентированным на стандартные DOM-элементы.

Оглавление