С момента презентации мной первой публичной бета версии 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.
До сих пор принимаю предложения по улучшению функционала и заказы на реализацию каких востребованных вами фич.
ссылка на оригинал статьи https://habrahabr.ru/post/318472/
Добавить комментарий