Сам проект был начат достаточно давно и развивался под другим именем и с другими более амбициозными целями, но времени вечно не хватает и мотивации было недостаточно, чтобы доработать полноценный framework. Поэтому было решено отбросить мечты о том, что когда-нибудь маленькое творение станет полноценной системой, выпилить из проекта все компоненты и части, которые идеологически прокладывали мосты к большей системе и попутно переработать большую часть кода.
Собственно, Revolver — микробиблиотека для frontend (всего чуть более 1500 строк несжатого кода), которая включает в себя API (можете назвать это синтаксический сахар, если вам угодно) для работы с элементами DOM, поддерживающая ряд модулей для создания анимаций и асинхронных запросов.
В Revolver также включено некоторое число полезных хелперов, которыми можно пользоваться в контексте приложения для работы с быстрой и компактной проверкой типов и различные конвертеры данных обеспечивающие например работу с анимацией и распарсингом CCS цветов включая большинство популярных форматов от #ABF варианта до hsla (100, 15%, 30%, .4).
Также можно выделить особенность Revolver анимировать CSS 3D матрицу и все известные свойства CSS transform и даже большинство таких редких сочетаний как border-color или padding, которые не умеет делать больше ни одна библиотека самостоятельно.
Большинство кода написано на ES6 / ES 7 и я очень ожидаю появления полноценной поддержки import чтобы реализовать код модулями и разбить проект на более мелкие независимые компоненты.
Интерфейс инициализации позволяет изолировать контекст приложения чисто в выбранной пользователем системе namespace. Сам код приложения изолирован в тот же скрипт тег, которым подключается библиотека, что позволяет реализовать авто инициализацию на базе конструктора класса (можно меня покритиковать за такое использование конструктора).
<script src="./app/revolver.js?production=1.0.4" async id="revolver">
// charging weapons with namespace
const revolver = new Revolver('$');
// fast draw shouting
...
</script>Например, чтобы использовать REVOLVE для целевого индекса API достаточно просто указать в приложении:
// charging weapons with namespace
const revolver = new Revolver('REVOLVE');
А дальше можно использовать как обычный объект с методами:
REVOLVE.dom("a:first-child","animate",['left:-70px:3000:pulse', 'font-size:30px:1000', 'color:hsl(20, 50%, 40%):3000', 'transform: rotate(360deg,360deg,360deg) perspective(40px) skew(0deg,0deg,360deg):2000:bounce']);
В данном примере представлено API для анимации сразу нескольких свойств CSS и цвета. Для более подробных примеров вы можете обратиться к документации(она написана только на английском языке) или посмотреть код страницы unit тестов.
Кстати, код библиотеки написан максимально производительно без использования лишний раз медленных методов в пользу более быстрому, но более нативному коду(к примеру в проекте нет ни одного foreach или map, или reduce; а также отдано предпочтение работе с массивами нежели с объектами) на манер спортивной дисциплины Fast Draw(скоростная стрельба, как у ковбоев на диком западе).
К сожалению, я не смог скомпилировать Revolver в реализации ES 7 с помощью babel 6 и плюнул на это занятие. Я, как основной и единственный на данный момент разработчик, считаю более целесообразным дождаться полноценной поддержки ES7 кода в браузерах MS — это важнее, чем убивать логику программы транспайлером в обратную совместимость.
Код покрыт тестами, но по моей личной системе. Я тестировал только работоспособность модулей в разных ситуациях. Например для враппера fetch было применено просто тестирование способности загружать контент в разных форматах с разными типами запроса, а также способность корректно передавать данные форм на сервер.
Код, документация и исходники
Страница UNIT test
тест не будет пройден на localhost без развертывания сервера из-за location API, который меняет history.
Буду рад критике и предложениям.
Автор: Лунтик
