Front-end JavaScript framework Evolution beta

Evolution — это JavaScript микрофреймворк для front-end разработчиков написанный мною в свободное время, основной идеей которого была простота, малое количество кода, удобное API для работы с элементами HTML-DOM и наличие небольшого числа микромодулей.

Микро-фреймворк на данный момент имеет довольно гибкое API для фактически любых манипуляций с HTML-элементами, также способен анимировать свойства CSS.

Например, для получения ссылки HTML элемента можно воспользоваться следующим API:

$.dom("#elem, .withClass, div:last, p:first")';

Для создания нового элемента в дереве HTML и последующей его вставки в документ можно использовать вот такой простейший синтаксис:

$.dom('dfn',"new|before|footer:first", {
html: '<a style="color:#b06400" href="#">version 1.4.2 beta</a>',
attr: {
	style: "color:#b06400; text-align:center; display:block",
} });

Как видно из примера, можно смело употреблять опции :first\:last и вставлять элемент в начале или конце целевого элемента(after и before). API я старался сделать максимально простым и удобным(как читается, так и срабатывает).

Также Evolution умеет удалять HTML-элементы:

$.dom('.prost div', "del");

Микрофреймворк умеет работать и с атрибутами элементов. Для получения их используется API:

$.attr('h1', 'data-test, style, etc');

Код сниппета для установки значения атрибутов и их удаления:

$.attr('h1', {'data-test': 'some value'});
$.attr('h1', {'data-test': null});

Кроме прочего уже сейчас реализована поддержка анимации CSS-свойств HTML. Например, для анимации border-radius можно использовать следующий синтаксис:

$.dom("#mainContents","animate",['border-radius:25px 0px:100']);

В массиве можно указывать сколько угодно CSS-свойств элемента, все они будут анимированы одновременно. Последний аргумент указывает время анимации в ms.

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

Например модуль $.scroll:

$.scroll([100,400],true); //промотка от верхнего угла текущего положения на ...
$.scroll('#shell code pre:first',true); // скроллинг до элемента плавно
$.scroll() // грубая установка верхнего положения страницы
$.scroll('#chapter_8'); // установка положения экрана на высоту элемента с id

Также есть поддержка AJAX в форматах строки, HTML и JSON данных:

$.ajax('http://www.domain.ru/framework/ajax.html','GET','dom', function(){
	$.dom('div',"new|before|#mainContents", {
		attr: {
			id: "ajaxData",
		}
	});

	for(var i in this) {
		$.insert($.dom('#ajaxData'), this[i].outerHTML);
	}
});

$.ajax('http://www.domain.ru/framework/JSON.html','GET','json', function(){
 // callback functions contains Data in variable [this](Object in JSON notation)
});	

Пример полученных JSON данных:

{
	"great": "test",
	"level1": {
		"level2": {
			"test": "this is JSON Object"
		}
	}
}

К сожалению, я пока не реализовал должной поддержки методов POST и OPTIONS, но они обязательно появятся в будущем. Модуль $.toggle:

$.dom('h1','tog');

Также движек предоставляет функции для работы с событиями типа click, hover и т.д.:

// collapsed lists
var sideLists = $.dom('aside ul');
for(var w in sideLists) {
	sideLists[w].style.display = 'none';
}

$.click('aside h3', function(x){ 
	x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none';
});

$.dblclick('dt', function(x){ 
	x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none';
});

$.hover('dt', function(x){ 
	x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none';
});

$.xhover('dt', function(x){ 
	x.nextElementSibling.style.display = ( x.nextElementSibling.style.display === 'none' ) ? 'inherit' : 'none';
});

Обо всех функциях писать здесь большого смысла нет, но вот еще некоторые из функций, которые я реализовал: модальные окна с возможностью перемещения по экрану; модуль микро-табов для организации контента разделенного вкладками и модуль $.rotate для создания простейшего слайдера.

Помимо прочего framework Evolution умеет автоматически отслеживать размеры экрана браузера пользователя и автоматически подключать нужный CSS файл в зависимости от ситуации(схемы min, med и max). Кажется, что я правильно разбил их и поэтому доступны только три основных режима: для экранов меньше 980px(мобильные телефоны), для маленьких мониторов и планшетов(980-1280px) и схема для крупных мониторов(больше 1280px).

С радостью выслушаю критику и пожелания так как код буду развивать и дополнять новыми модулями.

На данный момент доступна beta версия для ознакомления и экспериментов так как основной код еще находится в состоянии шлифовки и мелких доработок.

Ссылка на git
Метки:
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 42
  • 0
    Кажется, что я правильно разбил их и поэтому доступны только три основных режима

    Зачем изобретать велосипед, если есть bootstrap grid system, ставшая стандартом де-факто? Да и называть экраны меньше 980px мобильными телефонами — не верно (тот же iPad 1024×768 ).
    • 0
      Сейчас вообще ничего нельзя сказать с уверенностью просто потому что экраны постоянно становятся больше и больше.

      iPad же все же не мобильный телефон.

      Мне не нравятся media-queries. Не люблю SASS и LESS, к примеру. А эта штука позволяет моментально и автоматически подцепить нужную CSS-схему. А для коррекции всего-то необходимо отконфижить один из CSS файлов.

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

      Мне же удалось уложиться в какие-то 32кб кода с комментариям в последней версии.

      Я не стал поддерживать старые IE с учетом того, что таких пользователей остается единицы и благодаря этому удалось сделать фреймворк минимального веса.
      • 0
        iPad же все же не мобильный телефон.

        У меня маленький телефон 1920*1080 ;)

        Вы с этой либой опоздали лет минимум на 10.

        И даже десять лет назад никто не пользовался бы либой, где команды отдаются строками:
        $.dom('.prost div', "del");
        $.dom('h1','tog');
        


        Зачем?!
        Чтобы было неудобнее?
        Чтобы не работало автодополнение?
        Чтобы был нечитаемый стектрейс?
        Чтобы легче было допустить ошибку?

        Почему не самые обычные методы, как 10 лет назад в JQuery?
        $.dom('h1').toggle()
        
        • 0
          >> Почему не самые обычные методы, как 10 лет назад в JQuery?

          Постеснялся боянить. Ладно, убедили
          • 0

            Я однажды упаровшись написал такое: https://github.com/RubaXa/jquery.zen#zen-school ;]

            • 0
              	var _append = {
              		'+': 'append',
              		'+>': 'appendTo',
              		'+!': 'prependTo',
              		'+^': 'insertBefore'
              	};
              


              Да уж :) Слава богу я до такого пока не дошел. Хорошо! Будет сделано красивое jQuery-style API в версии 2. И, я надеюсь, я все таки не хуже какого нибудь Bootstrap. Ибо обладаю немалым опытом верстки и могу сделать небольшой grid system(но только без БЕМ и LESS — не люблю много тегов и повторения при перестройке).
        • 0
          >> Зачем изобретать велосипед, если есть bootstrap grid system, ставшая стандартом де-факто? Да и называть экраны меньше 980px мобильными телефонами — не верно (тот же iPad 1024×768 ).

          Все таки подумав сделал по другому. Теперь схем 5:

          1) меньше 480 — мобильные телефоны
          2) от 480 до 768 — планшеты
          3) от 768 до 960 — планшеты в портретном режиме
          4) от 960 до 1280 — десктопная схема минимум
          5) больше 1280 — десктопная схема максимум.

        • НЛО прилетело и опубликовало эту надпись здесь
          • React.JS это тоже библиотека.

            • +1
              AngularJS — фреймворк, но ReactJS — библиотека, ибо не предоставляет инфраструктуру из коробки.
              • 0
                И то, сам по себе react.js тоже считается библиотекой.
              • +2

                Непонятно, зачем такая библиотека нужна в 2017 году. Прямая манипуляция DOM-элементами давно уже моветон. Более того, подозреваю, что в библиотеке не предусмотрена компонентизация хотя бы в стиле jQuery. И вообще, API выглядит довольно уныло даже по сравнению с ванильным Web API.

                • 0
                  Про API это вы о чем именно? Я делал обертки ванильного API только для сложных действий. Например для анимации.

                  Могу сделать также как у jQuery($(sel).().()), но делать много действий с одними и теми же элементами получается в основном у новичков jQuery. А для каких-то дополнительных функций, если они нужны, я предусмотрел callbacks.

                  Что бы вы изменили в этом API?
                  • 0

                    Я подразумевал, что для современного фронтенда библиотеки типа jQuery слишком низкоуровневые. Даже Knockout и Backbone предполагали абстракцию от вёрстки и компонентизацию приложения. При этом цель в очистке кода от манипуляции нативными элементами дабы оставалась практически только бизнес-логика приложения. Когда я разрабатываю какую-нибудь очередную админку или CRM мне неинтересно думать: "Ага, тут у нас вёрстка календарика, нужно сбросить на его днях все подсветки и добавить подсветку на день date". Я просто хочу передать компоненту календаря желаемую дату, а он пусть сам с ней разбирается. Да, в jQuery-компонентах такая абстракция уже предусмотрена, но при этом я сначала должен в вёрстке создать некий div, а потом из кода превратить его в календарь, сохранив ссылку. jQuery позволяет создавать хотя бы такие компоненты, отчасти из-за чего она и стала популярна.


                    Кроме того, под унылостью я понимал то, что тут вам уже пояснили. API нетривиален: функция dom делает совершенно разные вещи в зависимости от значения и типов её параметров. При этом, однако, есть и такая функция, как insert, хотя dom также умеет добавлять новый элемент. В любом случае, показывайте не статичное добавление элементов, а какое-то использование данных и их обновление. Например, чем ваша библиотека выиграет в кейсе "textbox и div, в который выводится текущее значение текстбокса" против реализации на jQuery, не говоря уже о более современных библиотеках?

                • 0
                  Если вы хотите чтобы библиотекой начали пользоваться, то рекомендую выложить её в NPM и Bower.
                  • 0
                    Благодарю. Обязательно сделаю и это.
                  • +1

                    Больше походе на невнятный набор хелперов, а размер совсем не микро.
                    Кроме этого, уже есть Zepto, который умеет намного больше, а главное лучше.

                    • 0
                      Не знал про Zepto. Есть к чему стремиться, но я не ставил себе цель сделать клон jQuery, как это сделано у Zepto.
                      • 0

                        Стремиться? Какую нишу вы хотите занять?


                        Например Zepto поставили цель сделать удобное API для работы DOM, событиями, анимацией, ajax, touch-устройствами и маленький размер. Удобный API для перечисленного — это jQuery-style, как не крути.


                        Или вот микро библиотека Voyeur пытается предложить альтернативный взгляд, спорный, но всё же альтернативный.


                        У вас же просто набор методов объединенных единым namespace, который с лихвой покрывают возможности Zepto имеющего тесты, доку и коммьюнити.


                        Так что взгляните на всё это и подумайте, что же вы хотите, велосипед ради велосипеда (не осуждаю, это нормально, но только для себя в рамках образования) или альтернативный вариант/свежий взгляд?

                        • 0
                          >> Стремиться? Какую нишу вы хотите занять?

                          Осуждаете…

                          >> У вас же просто набор методов объединенных единым namespace, который с лихвой покрывают возможности Zepto имеющего тесты, доку и коммьюнити.

                          Чтобы никто не схватил и не начал потом жаловаться на сильные изменения я прислушиваюсь ко всем на стадии beta. С чего-то надо начинать.

                          Да без проблем. Во второй версии я сделаю такие же нунчаки как у jQuery, если уж другое кажется смешным.

                          • 0
                            > Zepto имеющего тесты, доку и коммьюнити
                            Сделал первый релиз версии 1.5.3(https://github.com/xShiftx/javascript-framework/releases протестировал все что мог) документация на английском написана.
                            Дело осталось за коммьюнити так как идеи для модулей у меня закончились.
                            Буду ждать предложений и просьб о реализации, если мой фреймворк начнет хоть как-то использоваться.
                            • 0
                              протестировал все что мог

                              Эээ… okay ;]

                              • 0

                                а где же тесты?

                                • –1
                                  я руками проверяю. какие еще тесты могут быть нужны?
                                  примеры кода есть в документации в Readme.MD…
                                  • 0

                                    Регрессии тоже руками отлавливать будете?

                                    • 0
                                      У меня регресси только на эффектах анимации. Пришлось почти с нуля разбираться и писать формулы поштучно тестируя эти самые регрессии. Все относительно правильно.

                                      Или вы у меня в коде где-то еще их нашли?
                                      • +1
                                        Я вам объясню. Хороший фреймворк — это такой фреймворк, который постоянно развивается, быстро реагирует на запросы и при этом новые версии не ломают старый функционал неожиданными багами.

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

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

                                        Любой код имеет такую особенность, что в нем возможны баги. И часто в самых неожиданных местах. Иногда баги появляются не там, где вы ожидали. Например, вы правили где-то часть, которая отвечает за ДОМ, а оно повлияло на анимацию в одном определенном редком случае. Это и называется регрессией — когда изменения в коде заставили функционал, который ранее работал корректно сейчас работать некорректно. Регрессии практически очень сложно проверять руками, ибо для этого необходимо делать полное тестирование всего функционала (тем более в JS, уж я то знаю) в любой комбинации.

                                        А вот автоматические юнит-тесты дают пользователям вашего фреймворка гарантию, что хотя бы то, что ими покрыто работает так, как в них описано.

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

                                        Потому фреймворк, не покрытый тестами от и до имеет мало шанса на выживание и интерес широкой публики.
                      • 0
                        А чем эта библиотека лучше jQuery?
                        • +1

                          Очевидно, имела фатальный недостаток :)

                          • 0
                            Не утверждаю, что написал лучше или хуже, но вот например jQuery не умеет так:

                            $('div').animate({'border-radius':'20px 50px 200px 10px'},1000)
                            


                            А evolution так умеет:

                            $.dom("#mainContents","animate",['border-radius:25px 10px 15px 5px:1000:circ','opacity:1:2000']);
                            


                            Обратите внимание на разные easing и разное время анимации для каждого из CSS свойств.

                            (:
                            • 0

                              А не правильнее ли делать такое через css animations?

                              • 0
                                Правильнее, только если вы в 2016 году не тянете за собой IE<10 которые их не поддерживают.
                                • 0

                                  Согласен, но у автора в коде используется requestAnimationFrame (IE10+)

                                  • 0
                                    Так сейчас у всех используются современные браузеры и даже если речь об IE, то и у них в качестве движка по умолчанию все обновляется до Edge(речь не идет о тех, кто отключил обновление системы умышленно — они продивинутые и у них навряд ли нет того же Chrome).

                                    Я пользователей Windows XP уже своей целевой аудиторией не считаю, да и те пользуются или Opera или Chrome, что равнозначно из-за webkit.

                                    В общем их единицы единичные.

                                    Нужен ли этот fallback?
                                    • 0

                                      Движок IE не обновляется до Edge. Он так и остаётся на версии 11. Edge — отдельное самостоятельное приложение.


                                      Если не поддерживаете старые браузеры, то фоллбек не нужен. Речь шла только о способе задания анимаций.

                                      • 0
                                        Вот IE11 под Windows 7. В эмуляции указано Edge. Систему не обновлял бог знает сколько.

                                        image
                                        • 0

                                          Edge в данном случае буквально означает "крайний". Фактически же это IE11. Даже на Windows 10. По возможностям IE11 сильно отличается от реального браузера Edge. Можете убедиться сами на kangax.

                                          • 0
                                            Для меня главное, что он поддерживает request animation frame в данном конкретном случае. Иначе я бы скорее всего написал просто на SetTimout. У jQuery, например, сделан такой fallback, но я вот его реализовывать по понятным причинам не стал.
                                • 0
                                  Писать этот бардак в inline или переключать тысячу классов? Можно и так, но мне было удобнее через JS.
                                  Со временем, кстати, планирую добавить и поддержку CSS-animations(rotate, translate, skew и т.д.)
                                  • 0

                                    А сообществу как удобнее?

                                    • 0
                                      Думаю, что очевидно. Если вам удобнее через CSS, то это вам просто не нужно, но наличие и такого варианта хуже точно не сделает.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.