26.12.2016 12:51
zShift 11 1300 Источник
С момента презентации мной первой публичной бета версии 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.

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

Комментарии (11)


  1. de_arnst
    27.12.2016 09:28
    #9984746
    +1

    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).


    Хочу порекомендовать вам хорошую статью про брейкпоинты в адаптиве http://css-live.ru/articles-css/pravilnye-kontrolnye-tochki-v-css.html


    1. zShift
      27.12.2016 10:04
      #9984814

      Я долго думал над этим и сделал аналогично тому, что есть у twitter bootstrap. Например chrome предлагает еще несколько другой вариант, но чаще всего встречаются на мой взгляд именно такие поинты.

      image


      1. de_arnst
        27.12.2016 15:04
        #9985788

        на мой взгляд


        А вы прочитали статью? Там как бы есть картинки со статистикой


        1. zShift
          27.12.2016 15:56
          #9985926

          Да, я глянул.


  1. DigitalSmile
    27.12.2016 09:41
    #9984760

    Заглянул в код и ужаснулся.

    Код
    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) {


    1. zShift
      27.12.2016 09:55
      #9984794

      А что вас испугало? eval?


      1. DigitalSmile
        27.12.2016 09:59
        #9984810

        eval в частности.
        Свитч тройной вложенности, имена переменных однобуквенные, разный стиль кодирования в разных местах (как будто копипаста)… Могу конечно продолжить, но смысла не вижу. Такой код невозможно поддерживать и читать, а следовательно говорить об эффективности, легкости, скорости совсем не приходится (невозможно что-то доказать, поскольку нельзя проанализировать).


        1. zShift
          27.12.2016 10:10
          #9984820

          Ну бы вас сказать… Бояться eval — это что-то детсадовское. Проект писался с большими разрывами и поэтому стиль кодирования разный.

          > Могу конечно продолжить, но смысла не вижу. Такой код невозможно поддерживать и читать, а следовательно говорить об эффективности, легкости, скорости совсем не приходится (невозможно что-то доказать, поскольку нельзя проанализировать).

          То, что уже написано в большинстве своем уже поддерживать не придется. Сделано как автомат калашникова. Предельно просто и предельно обфускано. Ну и гарантированно надежно.

          То что вас смутило в свиче аджакса — это остатки от предыдущей версии где сканировались все состояния запроса, но, в как выяснилось в будущем, они особой пользы не имеют так как код работает и так эффективно.

          > (невозможно что-то доказать, поскольку нельзя проанализировать).

          А вы хотели с наскока влиться в разработку? Даже не знаю где у вас это получилось бы проще всего ;] Посмотрите на сорцы той же jQuery. Не думаю, что они покажутся вам проще.


          1. DigitalSmile
            27.12.2016 10:24
            #9984842

            Бояться eval — это что-то детсадовское.

            Да, если точно знаешь зачем и где его использовать, а также покрыв такой код необходимыми проверками. У вас такого не заметил.

            То, что уже написано в большинстве своем уже поддерживать не придется. Сделано как автомат калашникова. Предельно просто и предельно обфускано. Ну и гарантированно надежно.

            Ха-ха. Откуда такая уверенность, что не придется? Гарантировано чем? Где юнит тесты, где интеграционные тесты и тесты производительности?

            но, в как выяснилось в будущем, они особой пользы не имеют так как код работает и так эффективно.

            Знаете, есть такое понятие как стандарты кодирования. Где-то они негласные, где-то явно закреплены. Кусок с тройным вложенным свитчем нечитаемый и нерасширяемый от слова совсем. Ну и тот же вопрос про «эффективно» — где тесты?

            А вы хотели с наскока влиться в разработку? Даже не знаю где у вас это получилось бы проще всего ;] Посмотрите на сорцы той же jQuery. Не думаю, что они покажутся вам проще.

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

            В итоге — нет тестов, код плохо читается, б*г знает сколько в таком коде багов. Его еще надо очень долго дорабатывать.
            Не обижайтесь, но на хабр я бы постеснялся выкладывать такой фреймворк.

            Тем не менее, удачи!


            1. zShift
              27.12.2016 10:28
              #9984852
              +1

              Спасибо! Обязательно учту ваши замечания.


    1. de_arnst
      27.12.2016 15:05
      #9985796

      Вы не бережете себя, я с первого поста не решаюсь туда заглядывать