С момента презентации мной первой публичной бета версии front-end фреймворка Evolution прошло порядка месяца и я успел порядочно доработать код до Production release и существенно расширить функционал.
Стоит сказать, что основная идея создания своего фреймворк лежала в основном в ключе минимализма и мобильности. Очень хотелось свой отечественный вариант фреймворка с частичным функционалом jQuery, набором некоторых готовых компонентов вроде табов и слайдера, а так же поддержкой адаптивности.
На данный момент получился движок размером всего в около 50Кб со стилями и кодом, где основная функциональная часть в минифицированной версии весит всего 19,4Kb.
Первым делом был существенно доработан механизм анимаций, который теперь поддерживает full stack 3D и 2D трансформаций. Движок автоматически устанавливает контекст работы с трансформациями в 3D режим и поддерживает все свойства CSS3 transform.
Пример:
Кроме того, функционал анимаций теперь располагает функционалом для анимации цветов в режиме 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 и так далее.
Теперь это делается так:
Помимо множественных оптимизаций и рефакторинга появились новые функции.
Local Storage API:
Class API:
Достаточно сильно переработан модуль Grid, который адаптивно подключает одну из 5ти схем CSS в зависимости от размера экрана пользователя:
> Скачать фреймворк можно со страницы проекта github
В следующих версиях планируется сильное изменение API по просьбам хабровчан, которое будет соответствовать синтаксису jQuery, а также в ядро войдет модуль router.
До сих пор принимаю предложения по улучшению функционала и заказы на реализацию каких востребованных вами фич.
Стоит сказать, что основная идея создания своего фреймворк лежала в основном в ключе минимализма и мобильности. Очень хотелось свой отечественный вариант фреймворка с частичным функционалом 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.
До сих пор принимаю предложения по улучшению функционала и заказы на реализацию каких востребованных вами фич.
Поделиться с друзьями
Комментарии (11)
DigitalSmile
27.12.2016 09:41Заглянул в код и ужаснулся.
КодsetTimeout(function(){ eval($.treeHacks($.get('#evolution')).innerHTML); }, 100);
switch(state) { case 4: // wrap statuses switch(this.status - 0) { case 200: switch(f +"") { case "text": // as is as result = datas; break; case "dom": // revert from [string] to [object html] var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; result = $.convertSTRToHTML(pattern.exec(datas)[0]); break; case "json": // revert to object result = JSON.parse(datas.replace(/\\'/g, "'")); break; } break; case 404: result = "404: not found"; break; } break; };
// create a Gray Box modal windows modal: function(t,d,s,q,c) {
zShift
27.12.2016 09:55А что вас испугало? eval?
DigitalSmile
27.12.2016 09:59eval в частности.
Свитч тройной вложенности, имена переменных однобуквенные, разный стиль кодирования в разных местах (как будто копипаста)… Могу конечно продолжить, но смысла не вижу. Такой код невозможно поддерживать и читать, а следовательно говорить об эффективности, легкости, скорости совсем не приходится (невозможно что-то доказать, поскольку нельзя проанализировать).zShift
27.12.2016 10:10Ну бы вас сказать… Бояться eval — это что-то детсадовское. Проект писался с большими разрывами и поэтому стиль кодирования разный.
> Могу конечно продолжить, но смысла не вижу. Такой код невозможно поддерживать и читать, а следовательно говорить об эффективности, легкости, скорости совсем не приходится (невозможно что-то доказать, поскольку нельзя проанализировать).
То, что уже написано в большинстве своем уже поддерживать не придется. Сделано как автомат калашникова. Предельно просто и предельно обфускано. Ну и гарантированно надежно.
То что вас смутило в свиче аджакса — это остатки от предыдущей версии где сканировались все состояния запроса, но, в как выяснилось в будущем, они особой пользы не имеют так как код работает и так эффективно.
> (невозможно что-то доказать, поскольку нельзя проанализировать).
А вы хотели с наскока влиться в разработку? Даже не знаю где у вас это получилось бы проще всего ;] Посмотрите на сорцы той же jQuery. Не думаю, что они покажутся вам проще.
DigitalSmile
27.12.2016 10:24Бояться eval — это что-то детсадовское.
Да, если точно знаешь зачем и где его использовать, а также покрыв такой код необходимыми проверками. У вас такого не заметил.
То, что уже написано в большинстве своем уже поддерживать не придется. Сделано как автомат калашникова. Предельно просто и предельно обфускано. Ну и гарантированно надежно.
Ха-ха. Откуда такая уверенность, что не придется? Гарантировано чем? Где юнит тесты, где интеграционные тесты и тесты производительности?
но, в как выяснилось в будущем, они особой пользы не имеют так как код работает и так эффективно.
Знаете, есть такое понятие как стандарты кодирования. Где-то они негласные, где-то явно закреплены. Кусок с тройным вложенным свитчем нечитаемый и нерасширяемый от слова совсем. Ну и тот же вопрос про «эффективно» — где тесты?
А вы хотели с наскока влиться в разработку? Даже не знаю где у вас это получилось бы проще всего ;] Посмотрите на сорцы той же jQuery. Не думаю, что они покажутся вам проще.
От инструмента, которым я пользуюсь в разработке, я жду полной прозрачности и быстрого старта. И да, сорцы JQuery мне кажутся значительно проще в понимании.
В итоге — нет тестов, код плохо читается, б*г знает сколько в таком коде багов. Его еще надо очень долго дорабатывать.
Не обижайтесь, но на хабр я бы постеснялся выкладывать такой фреймворк.
Тем не менее, удачи!
de_arnst
Хочу порекомендовать вам хорошую статью про брейкпоинты в адаптиве http://css-live.ru/articles-css/pravilnye-kontrolnye-tochki-v-css.html
zShift
Я долго думал над этим и сделал аналогично тому, что есть у twitter bootstrap. Например chrome предлагает еще несколько другой вариант, но чаще всего встречаются на мой взгляд именно такие поинты.
de_arnst
А вы прочитали статью? Там как бы есть картинки со статистикой
zShift
Да, я глянул.