Centrifugal. Fluid UI для создания standalone веб-приложений

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

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

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

Проект разрабатывался изначально, чтобы создать набор высокопроизводительных, гибких инструментов и компонентов для построения веб-приложений. Но на одной из итераций разработки я решил обеспечить поддержку для построения All-in-One интерфейсов, т.е. добавил режим 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 взаимодействует с остальными компонентами по иерархической цепи, применяя определенное «физическое» взаимодействие. Могут применяться силы сжатия или растяжения, передаваться импульсы и т.п.

В библиотеке нет обработки привычных веб-скролл-контейнеров, 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>

API

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

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

Примеры

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

P.S.

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

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

И вот уже долгое время я ищу работу в чудесной России, буду очень признателен, если кто может помочь предложением работы!)