Pull to refresh

Revolver: микро библиотека для frontend на Java Script

Сам проект был начат достаточно давно и развивался под другим именем и с другими более амбициозными целями, но времени вечно не хватает и мотивации было недостаточно, чтобы доработать полноценный 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.

Буду рад критике и предложениям.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.
Change theme settings