Front-end JavaScript framework Evolution :: release 1.5.7

С момента презентации мной первой публичной бета версии front-end фреймворка Evolution прошло порядка месяца и я успел порядочно доработать код до Production release и существенно расширить функционал.

Стоит сказать, что основная идея создания своего фреймворк лежала в основном в ключе минимализма и мобильности. Очень хотелось свой отечественный вариант фреймворка с частичным функционалом jQuery, набором некоторых готовых компонентов вроде табов и слайдера, а так же поддержкой адаптивности.

На данный момент получился движок размером всего в около 50Кб со стилями и кодом, где основная функциональная часть в минифицированной версии весит всего 19,4Kb.

Первым делом был существенно доработан механизм анимаций, который теперь поддерживает full stack 3D и 2D трансформаций. Движок автоматически устанавливает контекст работы с трансформациями в 3D режим и поддерживает все свойства CSS3 transform.

Пример:

// установим правильный контекст для элемента
$.dom("a:first-child", "style", ['display:inline-block', 'transform:perspective(200px)']);
// анимируем все, что заблагорассудится
$.dom("a:first-child","animate",['left:-170px:3000:pulse', 'font-size:30px:1000', 'color:gold:3000', 'transform:rotateX(360deg) rotateZ(360deg) perspective(40px):2000:flicker']);

Кроме того, функционал анимаций теперь располагает функционалом для анимации цветов в режиме RGBa. Делать для этого чего-то особенного не нужно. Можно указывать цвета в формате RGB или просто по названию(имеется коллекция поддерживаемых имен), а так же в формате #dcdcdc. Система автоматически сконвертирует цвета в RGBa и применит анимацию к свойствам color, background-color или border-color.

В движке появились эффекты easing. Вот полный список временных функций для работы с анимациями: easeIn, easeOut, easeOutQuad, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, elastic, easeInElastic, easeOutElastic, easeInOutElastic, easeInSin, easeOutSin, easeInOutSin, easeInCirc, easeOutCirc, easeInOutCirc, easeInQuad, easeInExpo, easeOutExpo, easeInOutExpo, easeOutBounce, bouncePast, bounce, radical, harmony, back, expo, easeOutStrong, easeInBack, easeOutBack, swingTo, swingFrom, spring, blink, pulse, wobble, sinusoidal, flicker, mirror.

Evolution JS — это первый микрофреймворк с подобным функционалом весом всего 20кб и отсутствием каких либо зависимостей.

На основе мнений с прошлой моей презентации было решено слегка изменить API для применения событий типа click, hover и так далее.

Теперь это делается так:

	$.event('a:first-child', 'click', function(e){
		e.preventDefault();
	})

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

Local Storage API:

$.storage(['evolution={"js framework": "1.5.8"}'],'set');
$.storage('evolution','get');
$.storage('evolution','del');

Class API:

$.addClass('#some','class-test');
$.removeClass('#some', 'class-test');
$.hasClass('#some', 'class1 class2 class3'); //returns true if all classes defined for element #some

Достаточно сильно переработан модуль Grid, который адаптивно подключает одну из 5ти схем CSS в зависимости от размера экрана пользователя:

• 1 — mobile.css(экраны размером 480px и меньше),
• 2 — tablet.css(экраны от 480 до 768 px),
• 3 — ptablet.css (экраны от 768px до 960px),
• 4 — desktop.min(от 960px до 1280px),
• 5 — desktop-max.css(экраны больше 1280px).

→ Скачать фреймворк можно со страницы проекта github

В следующих версиях планируется сильное изменение API по просьбам хабровчан, которое будет соответствовать синтаксису jQuery, а также в ядро войдет модуль router.

До сих пор принимаю предложения по улучшению функционала и заказы на реализацию каких востребованных вами фич.