Всем привет! Меня зовут Евгений, я фронтенд‑инженер с большой экспертизой в разработке современных веб‑приложений. Сегодня хочу рассказать про свой очередной open‑source проект для построения веб‑приложений на основе Angular.

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

Итак, встречайте Centrifugal. Посмотрите официальный сайт проекта, там очень много крутых примеров использования!

Проект разрабатывался изначально, чтобы создать набор высокопроизводительных, гибких инструментов и компонентов для построения веб‑приложений. Но на одной из итераций разработки я решил обеспечить поддержку для построения All‑in‑One интерфейсов, то есть добавил режим standalone‑приложений с отображением собственной виртуальной клавиатуры, которую можно полностью кастомизировать. Тем самым обеспечил полноценную поддержку создания пользовательских интерфейсов, например, под киоски самообслуживания и тому подобное.

Демонстрация виртуальной клавиатуры в режиме standalone.
Демонстрация виртуальной клавиатуры в режиме standalone.

Позиция клавиатуры, раскладки, наборы клавиш и стили полностью кастомизируются.

Реализован собственный механизм фокусировки экранных элементов. При фокусировке текстовых полей, в зависимости от конфигурации выдвигается виртуальная клавиатура и происходит многоуровневая прокрутка scroll‑контейнеров до фактической границы клавиатуры, обеспечивая удобство ввода и читаемость.

Так как используются собственные scroll‑контейнеры, обработка стандартных интерактивных HTML‑компонентов, таких как <button/>, <a/>, <input/>, <textarea/> и так далее, немного изменяется. Для корректной обработки создана специальная директива NtControl, которая должна применяться ко всем стандартным интерактивным HTML‑компонентам.

Пример:

<button ntControl (onVirtualClick)="onVirtualClickHandler($event)">
  My button
</button>

Реализована полноценная обработка типов <input/> таких как text, password, number, email, tel и url. В дополнение можно задать пользовательский тип текстового поля и настроить соответствующую раскладку клавиатуры под этот тип.

<input type="text" ntControl value"Text">

Пример пользовательского типа и раскладки клавиатуры см. по ссылке Virtual keyboard.

Использовать компоненты Centrifugal достаточно просто, посмотрите на пример создания scroll‑view:

<nt-scroll-view #scrollView>
  <div class="scroll-view__content" [style.width.px]="3000" [style.height.px]="3000"
    [class.grabbing]="scrollView.$grabbing | async">
    My content
  </div>
</nt-scroll-view>

или пример слайдера:

<nt-slider [step]="1" [max]="100" [value]="value()" thumbSize="50%" (onChange)="onSliderChangeHandler($event)"></nt-slider>

Fluid UI

Теперь я хочу продемонстрировать концепцию Fluid UI и принципы его работы.

Каждый из компонентов пользовательского интерфейса, разработанного на основе библиотеки Centrifugal взаимодействует с остальными компонентами по иерархической цепи, применяя определенное «физическое» взаимодействие. Могут применяться силы сжатия или растяжения, передаваться импульсы и тому подобное

Представление взаимодействия Fluid UI компонентов между собой.
Представление взаимодействия Fluid UI компонентов между собой.

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

Каждый базовый компонент помимо «физического» движка, принимает ряд параметров для формирования эффекта размытия в движении (Motion blur). По умолчанию motion blur отключен, так как является относительно ресурсоемким постэффектом.

Пример демонстрирующий сжатие/растяжение компонентов пользовательского интерфейса.
Пример демонстрирующий сжатие/растяжение компонентов пользовательского интерфейса.

Виртуальные списки, помимо motion blur, могут применять трансформации элементов, с помощью которых можно создавать 3D пространства для списков, глубину резкости (Depth of Field) и туман (fog) для уходящих на задний план элементов списка.

Компонент шторка с отбивками по высоте
Компонент шторка с отбивками по высоте

Поддерживаются сложные комплексные манипуляции с компонентами, например как в примере на изображении выше, где продемонстрирован веб‑компонент Sheet с разбивкой на секции. Пользователю помимо управления самим компонентом (открытие/закрытие), может одновременно взаимодействовать с внутренними компонентами.

Самое главное обратите внимание на то, как просто использовать сложные реализации компонентов в коде:

<nt-sheet #sheet class="sheet" position="bottom">
  <div class="sheet__content" [class.grabbing]="sheet.$grabbing | async">
    Content
  </div>
</nt-sheet>

Разрабатывается с учетом простоты использования для разработчиков.

Всё это и многое другое позволяют создавать сложные Next Gen веб‑интерфейсы для Ваших приложений!

API

API доступен для расширений, позволяя создавать захватывающие компоненты. См. пример кастомного компонента на базе стандартного API библиотеки.

Полное описание API и примеры использования предоставлены на официальном сайте проекта.

Примеры

В разделе centrifugal/examples представлены крутые примеры использования инструмента. А их живые примеры Вы можете посмотреть на официальном сайте проекта в разделе Advanced Examples.

P. S.

Смело делитесь в комментариях своим мнением, критикой и идеями)

Поддержите проект поставив звёздочку на Github) ⭐Centrifugal.