Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Evolution Framework v1.4 beta (https://javascript.ru/forum/project/66053-evolution-framework-v1-4-beta.html)

xShift 22.11.2016 20:19

Evolution Framework v1.4 beta
 
Дело было вечером, делать было нечего... Рылся на Yandex.Disk и нашел старые и давно забытые кусочки кода (:

В связи с тем, что мне надоела разжирневшая jQuery, а от Angular сводит зубы и свербит в носу, я решил написать свой небольшой(микро) фреймворк.

Вот что из этого получилось:

* Большинство первичных функций jQuery(такие как Sizzle-подобный API для выборки HTML элементов, простенькие анимации свойств CSS);
* AJAX(и JSON);
* парочка базовых модулей слайдера, модальных окошек и табов в ядре;
* целая куча полезнейших хелперов для создания своих модулей;
* целых 10!кБ сжатого кода :D
* непритязательный нативный стиль программирования позволяет легко влиться в разработку;
* ну и так далее.

В перспективе хотел бы развивать данное решение и возможно довести сие творение до хорошего юзабельного уровня; в связи с чем прошу высказывать критику и пожелания(какой-то функционал буду реализовывать постоянно так делать на этом простецкие сайты можно уже сейчас).:write:

Git: https://github.com/xShiftx/javascript-framework

p.s.: огромное спасибо Dilettante_Pro за помощь с модулем rotate.

kobezzza 22.11.2016 22:58

Выложите код на GitHub, никто не будет скачивать zip архив с Яндекс диска.

xShift 23.11.2016 06:57

Добавил на гитхаб ...

xShift 26.11.2016 12:25

v.1.4.1 - подправлен модулей микротабов. немного улучшен код, исправлено влияние клика переключения активной вкладки на остальные вкладки и добавлена опция подсветки активного таба.

xShift 26.11.2016 14:30

v 1.4.2 - реализован интеллектуальный коннектор схем CSS для различных размеров экрана.

При инициализации автоматически определяется является ли браузер пользователя например мобильным(разрешение экрана меньше 960px) и включается нужный CSS файл схемы из папки /app/schema.

Работает в трех режимах:

MIN : <=960px
MED: от 1024 до 1280 px
MAX: экраны больше чем 1280px

Модуль также автоматически отслеживает resize окна и автоматически переключает схемы.

Для разработки(не на продакшн) рекомендую поменять параметр ReactionRate для того чтобы можно было нормально редактировать CSS код в браузере.

xShift 29.11.2016 22:54

v 1.4.3: анимация CSS свойств переписана более производительно и с использованием request animation frame. + небольшие правки багов

Rise 30.11.2016 13:24

Цитата:

Сообщение от xShift (Сообщение 436291)
интеллектуальный коннектор схем CSS

Сразу купить захотелось :)

xShift 01.12.2016 13:26

v 1.4.4: добавил поддержку LocalStorage(последняя версия доступна по ссылке на git в первом посте).

$.storage(['test=data-test','key2=data-2','evolution={"js framework": "1.4.4"}'],'set');
для установки значения или нескольких значений
$.storage('test'],'get')
для получения ключа
$.storage(['data','testing'], 'del');
для удаления одного или нескольких ключей

Нужны ли COOKIES если не планируется поддерживать IE9 и младше? В убогом IE Edge LocalStorage тоже нет. Будет fallback на куках для этого говна.

kobezzza 02.12.2016 14:28

Цитата:

В убогом IE Edge LocalStorage тоже нет.
В IE localStorage есть аж с 8-й или 7-й версии, в Эдже есть и LocalStorage/SessionStorage и IndexedDB, более того есть куча либ, типа localForage, который унифицируют интерфейс, а также есть PouchDB, MiniMongo, SQLLite и т.д.

xShift 04.12.2016 19:41

Цитата:

Сообщение от kobezzza (Сообщение 436898)
В IE localStorage есть аж с 8-й или 7-й версии, в Эдже есть и LocalStorage/SessionStorage и IndexedDB, более того есть куча либ, типа localForage, который унифицируют интерфейс, а также есть PouchDB, MiniMongo, SQLLite и т.д.

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

Да там и унифицировать то нечего особо ... три метода.

Запостил статью с обсуждением на хабре: https://habrahabr.ru/post/316606/.

kobezzza 04.12.2016 19:53

Цитата:

Да там и унифицировать то нечего особо ... три метода.
Я имел ввиду унифицирует интерфейс IndexedDB на мотив LocalStorage.

xShift 04.12.2016 20:07

Цитата:

Сообщение от kobezzza (Сообщение 437052)
Я имел ввиду унифицирует интерфейс IndexedDB на мотив LocalStorage.

Не думаю, что это хорошая идея и реализуемо. Вседь это MySQLi, если я не ошибаюсь. Как это можно унифицировать на мотив LS если речь идет о полноценной БД.

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

Вот LS - это хорошо. Теперь Cookies не нужны, да и места больше дают.

kobezzza 04.12.2016 20:22

Цитата:

Не думаю, что это хорошая идея и реализуемо.
Вы меня либо плохо читаете, либо не читаете вообще) Я уже говорил, что есть тысячи либ, которое это делают, например LocalForage. Зачем? Когда нам нужно асинхронное key-value для больших данных, то интерфейс СУБД избыточен и всё. Вообще голый интерфейс IndexedDB не удобный, и если нужно сахарное АПИ как к СУБД, то есть PouchDB, MongoLite и т.д. Я кстати об этом тоже писал.

Цитата:

Вообще могу попробовать и это реализовать, если нужны в движке.
Вы пишите библиотеку для себя и для развития себя как программиста. Практического смысла в ней нет, ввиду того, что в 2016 году библиотеки типа jQuery не нужны, а если будет нужно - возьму jQuery. Более того, идея засунуть "всё всё" в один неймспейс хуже некуда и именно за это ругают jQuery больше всего.

Но я не хочу разубедить вас писать свой велосипед, пишите, т.к. это отличный опыт.

Цитата:

Но мне кажется этим еще не скоро начнут пользоваться, да и излишество это на стороне клиента, на мой взгляд.
Пользуюсь IndexedDB уже года 4-5. Вы наверное удивитесь, но сейчас люди используют потоки, полноценные СУБД, С++ модули и прочее на клиенте.

xShift 04.12.2016 21:15

Цитата:

Сообщение от kobezzza (Сообщение 437055)
Вы меня либо плохо читаете, либо не читаете вообще) Я уже говорил, что есть тысячи либ, которое это делают, например LocalForage. Зачем? Когда нам нужно асинхронное key-value для больших данных, то интерфейс СУБД избыточен и всё. Вообще голый интерфейс IndexedDB не удобный, и если нужно сахарное АПИ как к СУБД, то есть PouchDB, MongoLite и т.д. Я кстати об этом тоже писал.



Вы пишите библиотеку для себя и для развития себя как программиста. Практического смысла в ней нет, ввиду того, что в 2016 году библиотеки типа jQuery не нужны, а если будет нужно - возьму jQuery. Более того, идея засунуть "всё всё" в один неймспейс хуже некуда и именно за это ругают jQuery больше всего.

Но я не хочу разубедить вас писать свой велосипед, пишите, т.к. это отличный опыт.



Пользуюсь IndexedDB уже года 4-5. Вы наверное удивитесь, но сейчас люди используют потоки, полноценные СУБД, С++ модули и прочее на клиенте.

>> в 2016 году библиотеки типа jQuery не нужны

Не нужны кому? Именно вам? А я считаю есть достаточное число не таких опытных программистов, которым бы такие библиотеки не помешали.

Мне тоже не нужна jQuery по большому счету, но пишется с ней проще и приятнее чем на нативном скрипте.

Я понимаю, что вам больше подавай ES6, но это будет актуально только для Node.js и для сервера. Браузер Edge его не понимает до сих пор, а это критическое в данном случае.

Да и Node.js это не панацея. Я вот предпочитаю PHP.

ИМХО, как-то писал обертку для API MySQLi на PHP на подобие Doctryne только без поддержки JOIN. Интересно, но мало чего полезного в итоге.

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


А пишу я не бесполезную библиотеку, а полноценный front-end framework ибо включаю в ядро уже более сложные по своему принципу модули. Это не библиотека.

kobezzza 04.12.2016 21:22

Цитата:

Не нужны кому? Именно вам? А я считаю есть достаточное число не таких опытных программистов, которым бы такие библиотеки не помешали.
Кому нужны, то те возьмут jQuery.

Цитата:

Я понимаю, что вам больше подавай ES6, но это будет актуально только для Node.js и для сервера. Браузер Edge его не понимает до сих пор, а это критическое в данном случае.
Хоспади, https://babeljs.io/. Пишу всё на ES6 уже года 4 точно, хотя мейнстримом он стал года 2 как, т.к. до появления бабеля всё было сложнее.

Цитата:

Мне тоже не нужна jQuery по большому счету, но пишется с ней проще и приятнее чем на нативном скрипте.
DOM API Level4 и так как жиквери.

Или fetch API для аякс запросов:

await fetch('/my-request')


Цитата:

А именно джойны - это основное полезное из того что есть в Indexed DB, но сложности синтаксиса таковы, что красивую обертку для них написать практически невозможно.
Откуда вы такие берётесь. JS тьюринг полный язык и вы можете написать на нём всё, что можно написать и на другом языке.

Цитата:

А пишу я не бесполезную библиотеку, а полноценный front-end framework ибо включаю в ядро уже более сложные по своему принципу модули. Это не библиотека.
Для начала разберитесь тогда в терминологии.

***

Ладно, вы явно не можете воспринимать критику, поэтому удаляюсь из треда.

xShift 04.12.2016 21:39

>> Хоспади, https://babeljs.io/. Пишу всё на ES6 уже года 4 точно, хотя мейнстримом он стал года 2 как, т.к. до появления бабеля всё было сложнее.

Упарываетесь полифилами. Ваш выбор. Не мой. Я не спешу.

xShift 05.12.2016 12:35

В очередной раз, пока мой рабочий ноут в ремонте со всеми данными, помаленьку пилю код фреймворка на мамкином ноутбуке (:

v. 1.4.7:

Добавлены легкие эффекты для анимации CSS свойств(easeInOutCubic, elastic, circ, back), которые были сперты из мануала(https://learn.javascript.ru/js-animation).

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

Да и bounce у меня почему-то не заработал(повесил всю страницу и разбираться в этом я пока не стал, но позже обязательно добавлю и его).

Добавлен $.hasClass для проверки имеет ли элемент установленный класс заданный в параметре; или классы.

Добавлен $externalScript, который при указании сорцы прикрепляет и запускает асинхронно искомый удаленный JS-файл.

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

Также принимаю идею по поводу реализации модулей.

xShift 13.12.2016 19:43

v 1.4.9.

Еще немного оптимизирован механизм анимаций и добавлена наиболее полная коллекция easing методов для рендеринга CSS анимаций.

Вот полный список способов(их 31!):

switch(r) {
					case 'easeIn': f = Math.pow( f, 5 );
						break;
					case 'easeOut': f = 1 - Math.pow( 1 - f, 5 );
						break;
					case 'easeOutQuad': f = f < 0.5 ? 2 * f * f : -1 + (4 - 2 * f) * f;
						break;
					case 'easeOutCubic': f = f * f * f;
						break;
					case 'easeInOutCubic': f = f < 0.5 ? 4 * f * f * f : (f - 1) * (2 * f - 2) * (2 * f - 2) + 1;
						break;
					case 'easeInQuart': f = f * f * f * f;
						break;
					case 'easeOutQuart': f = 1 - (--f) * f * f * f;
						break;
					case 'easeInOutQuart': f = f < 0.5 ? 8 * f * f * f * f : 1 - 8 * (--f) * f * f * f;
						break;
					case 'easeInQuint': f = f * f * f * f * f;
						break;
					case 'easeOutQuint': f = 1 + (--f) * f * f * f * f;
						break;
					case 'easeInOutQuint': f = f < 0.5 ? 16 * f * f * f * f * f : 1 + 16 * (--f) * f * f * f * f;
						break;
					case 'elastic': f = Math.pow(2, 10 * (f - 1)) * Math.cos(20 * Math.PI * 1.5 / 3 * f);
						break;
					case 'easeInElastic': f = (.04 - .04 / f) * Math.sin(25 * f) + 1;
						break;
					case 'easeOutElastic':  f = .04 * f / (--f) * Math.sin(25 * f);
						break;
					case 'easeInOutElastic':  f = (f -= 0.5) < 0 ? (0.01 + 0.01 / f) * Math.sin(50 * f) : (0.02 - 0.01 / f) * Math.sin(50 * f) + 1;
						break;
					case 'easeInSin':  f = 1 + Math.sin(Math.PI / 2 * f - Math.PI / 2);
						break;
					case 'easeOutSin':  f = Math.sin(Math.PI / 2 * f);
						break;
					case 'easeInOutSin':  f = (1 + Math.sin(Math.PI * f - Math.PI / 2)) / 2;
						break;
					case 'easeInCirc':  f = -(Math.sqrt(1 - (f * f)) - 1);
						break;
					case 'easeOutCirc':  f = Math.sqrt(1 - Math.pow((f-1), 2));
						break;
					case 'easeInOutCirc':  f = ((f /= 0.5) < 1) ? -0.5 * (Math.sqrt(1 - f * f) - 1) : 0.5 * (Math.sqrt(1 - (f-=2) * f) + 1);
						break;
					case 'easeInQuad':  f = f * f;
						break;
					case 'radical':  f = Math.sqrt(f);
						break;
					case 'harmony':  f = (1 + Math.sin((f - 0.5) * Math.PI)) / 2;
						break;  
					case 'back':  f = Math.pow(f, 2) * ((1.5 + 1) * f - 1.5);
						break;
					case 'easeInExpo':  f = (f === 0) ? 0 : Math.pow(2, 10 * (f - 1));
						break;
					case 'easeOutExpo':  f = (f === 1) ? 1 : -Math.pow(2, -10 * f) + 1;
						break;
					case 'easeInOutExpo':  f = ((f /= 0.5) < 1) ? 0.5 * Math.pow(2,10 * (f-1)) : 0.5 * (-Math.pow(2, -10 * --f) + 2);
						break;
					case 'easeOutBounce':  
						if ((f) < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2/2.75)) {
							f = (7.5625 * (f -= (1.5 / 2.75)) * f + 0.75);
						} else if (f < (2.5/2.75)) {
							f = (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375);
						} else {
							f (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375);
						}
						break;
					case 'bounce':  
						if (f < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2 / 2.75)) {
							f = (7.5625 * ( f -= (1.5 / 2.75)) * f + 0.75);
						} else if (f < (2.5 / 2.75)) {
							f = (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375);
						} else {
							f = (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375);
						}						
						break;
					case 'bouncePast': 
						if (f < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2 / 2.75)) {
							f = 2 - (7.5625 * ( f -= (1.5 / 2.75)) * f + 0.75);
						} else if (pos < (2.5 / 2.75)) {
							f = 2 - (7.5625 * ( f -=(2.25 / 2.75)) * f + 0.9375);
						} else {
							f = 2 - (7.5625 * ( f -=(2.625 / 2.75)) * f + 0.984375);
						}
						break;
					default: f = 1;
						break;
				}


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

xShift 14.12.2016 11:24

v 1.5.0

После некоторых раздумий было решено расширить возможные варианты схем CSS для различных устройств.

if(caseVal <= 480) {
				this.schema = "mobile";
			}
			if(caseVal <= 768 && caseVal >= 480) {
				this.schema = "tablet";
			}
			if(caseVal <= 960 && caseVal >= 768 ) {
				this.schema = "ptablet";
			}
			if(caseVal >= 1024 && caseVal <= 1280) {
				this.schema = "desktop-min";
			}
			if(caseVal >= 1280) {
				this.schema = "desktop-max";
			}


Автоматически подключаемые схемы:

1) мобильный телефон
2) таблетка(планшет)
3) таблетка в режиме портрета
4) десктопная схема минимум для меньше 1280px
5) десктопная схема максимум для больше 1280px

Таким образом упростилась верстка под разные устройства с использованием Evolution, а также произошло избавление от надобности писать media-queries.

CSS-схемы расположены в /app/schema.

также мною запланирована реализация сетки для удобной верстки шаблонов и небольшой bootstrap с готовыми стилями(возможно будут разные цветовые схемы по вкусу).

xShift 16.12.2016 12:06

v.1.5.1

Добавлены модули removeClass, addClass и hasClass.
Оптимизирован модуль $.scroll для работы с animate engine и возможностью использования easing.

xShift 17.12.2016 13:47

v 1.5.2

Закончил все мыслимые и немыслимые тесты и сделал первый релиз фреймворка(https://github.com/xShiftx/javascrip...ework/releases).

Есть пара багов связанных с ошибками Edge, о которых я написал разработчикам(два из них уже подтвердили и будут исправлять). Баги мелочные: при анимациях в IE желательно указывать изначально оба свойства и left и right ибо они по умолчанию не вычисляются браузером и отдаются как значения auto. Я не стал лепить костылей и просто попросил исправить код у разработчиков.

Вот ошибки:

https://developer.microsoft.com/en-u...sues/10216077/

https://developer.microsoft.com/en-u...sues/10216218/


В целом: вы можете спокойно использовать фреймворк на Production.
Пока нет сетки для верстки, но я над этим активно думаю(задача не простая).

Если вам нужны какие-то функции или модули - вы можете запросить об реализации здесь или написать мне на почту shift-sg@yandex.ru.

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

Пока над проектом работаю один. Присоединяйтесь. С радостью приму.

xShift 17.12.2016 19:27

v. 1.5.3

Добавлена возможность анимировать цвета.

xShift 22.12.2016 17:47

v 1.5.6 (Production release: https://github.com/xShiftx/javascrip...ases/tag/1.5.6)

Произведены некоторые оптимизации и устранена поддержка старых браузеров младше IE10.

Добавлена минифицированная версия движка размером в какие-то жалкие 18.5 kB(если на сервере gzip - выхлоп будет еще меньше, а в будущем, когда мой рабочий хакинтош привезут с ремонта я оптимизирую код еще на одну или две трети с помощью утилиты JavaScipt packer), что хорошо для мобильного интернета.

Теперь движек селекторов работает на чистом document.querySelectorAll и поддерживает все псевдоклассы и прочие прелести.

Добавлена поддержка анимации новых CSS3 2D transforms(3D в процессе). Теперь можно анимировать skewX, skewY, translateX, translateY, rotate и scale.

API анимаций осталось без изменений. Двигатель поддерживает одновременную анимацию нескольких трансформов сразу.

Например,

$.dom("a:first-child", "animate", ['transform:rotate(360deg) scale(0.7):2000']);


Добавлены новые эффекты Easings(полный список в описании проекта на главной страницу GitHub).

Переписан events API на более классический из-за бывшей некрасивости.
Теперь, к примеру, событие click можно создать так:

$.click('aside h3', 'click', function(e){ e.preventDefault(); })

nerv_ 23.12.2016 09:06

Цитата:

Сообщение от xShift
v 1.5.6

Цитата:

Сообщение от xShift
Переписан events API на более классический из-за бывшей некрасивости.

http://semver.org/

---

Как тебе помягче сказать... Это же лютый треш исходники твоего "фреймворка" :)

Например, почему у тебя функции проверки типов возвращают null?)

Кстати, isObject должна выглядеть по другому. Почему по другому, предлагаю тебе самому найти ответ)

xShift 23.12.2016 10:06

Цитата:

Сообщение от nerv_ (Сообщение 438723)
http://semver.org/

---

Как тебе помягче сказать... Это же лютый треш исходники твоего "фреймворка" :)

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

В версии 2.0 запланировано изменение API и уход от подхода коллекторов на свичах - там большинство бардака и разгребется.

Мне вот, например, хочется добавить поддержку анимации градиентов CSS3 для чего есть color animate, который для анимации цветов и animate move для простого просчета значений по времени, а еще есть теперь matrix animate для работы с матрицей трансформаций(она по get computed выставляется в виде matrix(1, 0, 0, 1, 0, 0), а не привычных свойств типа rotote или scale и еще до кучи в радианах, что приходится дважды пересчитывать по технической необходимости).

Плюсом придется делать костыль для распаковки 3D матрицы и ее уравнивания с дефолтной 2D матрицей. Это ощутимый говнокод, но без него работать просто не будет и желаемый функционал не получится хорошим ...
Можно конечно сказать что то вроде 'да говно это все' и плюнуть и ничего не делать, я же решил сделать поддержку некоторых вещей лучше чем в jQuery, меньше по коду и размеру чем в jQuery и сделать это на приемлемом уровне.

Как уж тут без треша?

Все это надо будет причесать в один двигатель и как-то разбить на компоненты экстракции свойств и их замены. Но как я это сделаю сразу, если код сразу потеряет читабельность в разы? Я ведь не знаю какие у меня возникнут сложности с распарсом синтаксиса градиентов и какие придется вносить изменения.

Посмотрите как это сделано у jQuery. Если мой код вы хотя бы прочитать сможете и обслуживать, то там вы просто переломаете ноги ...

Код изначально оптимизирован под максимальную минималистичность и компактность - поэтому выглядит немного трешово.

Дело в том что, как я уже пытался объяснить, при другом подходе вырастет и само количество кода в ощутимых размерах и его сложность.

Пока я в основном наращиваю функционал. А что вам показалось особенно трешовым?

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

Цитата:

Сообщение от nerv_ (Сообщение 438723)
Например, почему у тебя функции проверки типов возвращают null?)

А какая техническая разница в JavaSript условиях иcпользовать null или false? И то и другое работает одинаково ...

Цитата:

Сообщение от nerv_ (Сообщение 438723)
Кстати, isObject должна выглядеть по другому. Почему по другому, предлагаю тебе самому найти ответ)

Согласен. Но код работает и без нее в принципе, а по большому счету пока просто руки не дошли.

Насчет версионности спасибо за ссылку. Задумаюсь(чето там много букафф).

Еще что-то посоветуете?

Царь Леонид 23.12.2016 13:42

xShift,Какую цель преследует твоя библиотека? Для каких целей она мне, как разработчику, может пригодиться?

nerv_ 23.12.2016 17:41

Цитата:

Сообщение от xShift
я же решил сделать поддержку некоторых вещей лучше чем в jQuery, меньше по коду и размеру чем в jQuery и сделать это на приемлемом уровне.

Цитата:

Сообщение от xShift
Посмотрите как это сделано у jQuery

1. Ты уперся в жуквери, как в потолок. Жуквери -- это старая добрая библиотека, преимущественно, для работы с DOM + AJAX. Теперь понятно, почему ее: а) не рекомендуется использовать для анимаций; б)в нет нет расширеного фунционала для работы с анимациями?
2. Для анимаций существуют библиотеки гораздо более оптимизированные + full-featured как говорится. Та же Velocity.js. Причем с API jQuery.

Цитата:

Сообщение от xShift
А какая техническая разница в JavaSript условиях иcпользовать null или false? И то и другое работает одинаково

потом поймешь :)

---

Цитата:

Сообщение от Царь Леонид
Какую цель преследует твоя библиотека?

"как жуквери, только моя + с багами + с сайд эффектами" :)

---

Есть такая вещь как архитектура приложения. Когда передо мной, как разработчиком, стоит задача реализации какой-либо задачи/системы/(бизнес-логики), я разобью эту задачу на подзадачи, решу каждю из них, а затем из этих кирпичей построю дом.

Для решения каждой из подзадач я выберу инструмент (бибилотеку если тебе так яснее), которая делает это:
1. правильно (тесты)
2. быстро
3. имеет интуитивно понятное апи
4. поддержку/комьюнити
5. ...

Я не возьмусь возводить дом из одного большого монолитного кирпича, который кривой, косой, и вовсе не кирпич. Я просто не стану этого делать.

О чем это я? На мой взгляд твой "фреймворк" (да, да, именно в кавычках), не более чем твой собственный образовательный проект -- велосипед в учебных целях.

Велосипеды нужны. Если их не писать, ничему не научишься. Как раз именно после n+1 кол-ва велосипедов появляется полезный выхлоп :)

Но сейчас это просто велик на треугольных колесах и тебе стоит сконцентиророваться на обучении. Я так считаю.

Если хочешь, чтобы бородатые ребята с форума проревьювили твой код, оставь ссылку, они сделают это в меру своей загруженности. Но не стоит пытаться на данном этапе написать аналог жуквери. Даже близко не подойдешь. Кстати, Zepto есть еще =)

xShift 23.12.2016 18:12

Пишу с телефона.

1. Нет. Я взял самое часто мною юзаемое. Да и других потолков нет просто. Кроме того я уже переварил реак и ангуляр и знаю что нужно сделать. Лучше бы помогли чем засирать ))) из патриотических соображений. Иначе что мы лично сделали?

2. Я из патриотических соображений пишу свое решение.

Потом не пойму в чем разница между нул и фэлс. Это эквивалентно при использовании условия иф.

У меня нет большего числа разработчиков чем я сам. И я пишу рабочий во всех положенных на него задачах пусть и велосипед. С велосипеда начинаю и если бы не менталитет большинства из отечественных разработчиков это бы имело не плохие шансы на успех. Но большинство просто обсасывает тренды и вообще ничего не разрабатывает.

(Пьяный ответ)

Rise 24.12.2016 06:11

Цитата:

Сообщение от xShift (Сообщение 438728)
Посмотрите как это сделано у jQuery. Если мой код вы хотя бы прочитать сможете и обслуживать, то там вы просто переломаете ноги ...

Вот так сделано, только более масштабно, и видно почему называется библиотека (функций), печально что ты ноги переломал на ровном месте) в ангуляр с такой подготовкой ты бы погиб просто))

xShift 24.12.2016 17:50

Цитата:

Сообщение от Rise (Сообщение 438822)
Вот так сделано, только более масштабно, и видно почему называется библиотека (функций), печально что ты ноги переломал на ровном месте) в ангуляр с такой подготовкой ты бы погиб просто))

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

xShift 24.12.2016 18:55

v.1.5.7(https://github.com/xShiftx/javascrip...ses/tag/v1.5.7)

Реализована перепаковка 2D матрицы в принудительный 3D режим. Теперь поддерживаются 3D трансформации для анимирования.

Мысленно взял пирожок с полки и похвалил себя ибо этого пока еще не умеет больше ни одна библиотека.

xShift 24.12.2016 19:18

Цитата:

Сообщение от Царь Леонид (Сообщение 438752)
xShift,Какую цель преследует твоя библиотека? Для каких целей она мне, как разработчику, может пригодиться?

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

Все это богатство реализовано максимально эффективно и компактно, что позволило сделать размер очень маленьким, а значит быстрым для загрузки(в последней на момент написания версии 1.5.7 - это всего 20 кб сжатого кода против 150кб у jQuery с учетом всех компонентов и такого же функционала, который она полностью не обеспечит. если на сервере есть gzip, то размер движка будет еще компактнее).

Кароче лучше jQuery потому, что если вы для реализации того же функционала подцепите UI и плагины - это у вас вылезет в 1.5 мегабайта веса ...

Это пока. В будущем функционал будет расширяться(например задуман рутер). Если вам чего-то не хватает - попросите - я это реализую в меру загруженности и адекватности.

Может ли это вам пригодиться в 2017 году - решайте сами.

xShift 03.01.2017 14:04

Поскольку мой ноутбук починить не смогли, но я смог обменять его на новый, фреймворк продолжу писать на Linux(тошнит от венды а сборку хакинтош пока никто завести не сумел. в общем жду пока). Немного тяжеловато вспоминать как оно, но, тем не менее вроде бы как больше никаких подводных камней с IE не предвидится и можно кодить на линухе.

В этом году перепишу систему немного на другой стиль, чтобы удобство API соответствовало тому, что мы видим у jQuery. Хотя делать этого очень не хочется(может просто похмелье:).

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

Присоединяйтесь ;)

v.1.5.9

https://github.com/xShiftx/javascrip...ework/releases

Добавлена поддержка короткого формата записей для CSS3 transforms анимаций. Например translate(10px,20px,30px) будет автоматически транслирован в translate по всем трем осям X,Y,Z.

xShift 04.01.2017 12:32

Накидал простенький логотип ... Может такой и останется


xShift 08.02.2017 17:16

Наконец то завел Хакинош, все настроил и появилось время чтобы снова писать framework.

в version 1.6 добавлены модные хипсерские методы Foreach, map и filter. Хотя я до сих пор не понимаю зачем они нужны - все таки сделал. Может кому-то понадобятся.

Готовлюсь внедрить один из паттернов программировани и координально изменить архитектуру приложения. Сейчас у меня используется идея модулей и SOLID. Но почему-то хипстерам и прочим фаперам на паттерны она не нравится. Придется пойти по моде и слегка уступить этим людям.

xShift 08.02.2017 17:57

Вот еще мысли. я хотел сделать модуль роутера, но на реальном сайте SPA у меня вышло на тупую несколько строчек кода для реализации простой загрузки страниц на AJAX и выполнения каких-то стартовых функций.

Выглядит это примерно так:

<script src="./app/evolution.js?production=1.5.9" id="evolution">

	function liveRun() { // restart selectors on ajax or document load

		/* animations */
		$.dom( '#logotype img','style', ['width:10px','height:10px'] );
		$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );

		$.dom( '#logotype span','style', ['opacity:0'] );
		$.dom( '#logotype span','animate', ['opacity:1:3500'] );

		/* slider init */
		$.rotate('#rotate div', null, 6000);

		/* increase and descrease text size if telephone hovered */ 
		$.event('#logotype i', 'mouseover', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1.5,1.5) translateX(-40px):400']);
		});

		$.event('#logotype i', 'mouseleave', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1,1) translateX(0px):400']);
		});

		/* scroll top */
		$.event('#footer li:last-child a', 'click', function(e) {
			e.preventDefault();
			$.scroll();
		});

		/* route ajax path */
		$.event('#menu li a, #bottom-menu li:not(:last-child) a', 'click', function(e) {
			e.preventDefault();
			clearInterval(rotate);
			getPageLive(e.target.href, e.target.text);
		});

		// simple router
		function getPageLive(url, title) {
			$.ajax(url,'GET', null, 'dom', function() {
				$.dom('#shell','del');
				$.insert($.dom('body'), this[0].outerHTML);
				
				document.title = title;
				window.history.pushState({"pageTitle": title}, "", url);
				
				$.scroll();
				liveRun();
			});
		}

	}

	liveRun();

	</script>


Теперь я задумался над тем, а стоит ли перегружать Фреймворк такой мелочью как роутер если он пишется буквально за 5 минут и вполне нормально работает. Ведь то уже просто подачка тем, кто не хочет и не умеет программировать. С другой стороны нужно бы это сделать.

В будущих версиях будет модуль history, который я назову как-то по типу locations или наподобие.

xShift 08.02.2017 21:49

v 1.6.1

добавлено location API для косметической смены адреса и заголовка страницы с поддержкой callback. Модуль работает корректно вплоть до отрицательного значения state(ловушка на событие для установки title из стека и ловушка на запоминание нулевого индекса).

'$.location('Page Title','http://somedomain.com/index.html', function(){console.log(this)})'

xShift 09.02.2017 12:29

И все таки принято решение не использовать предложенную в этом топике семантическую модель версий. Использовать мажорные цифры буду только при смене API, а все остальные изменения обозначать минорными и дробными числами. Также как разрабатывается Clover. Не имеет смысла прогнозировать количество нововведений, но на данный момент запаса 39 версий мне вполне хватает до запланированного изменения API.

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

xShift 09.02.2017 14:51

v 1.6.2 добавлен модуль хинтов. (еще маленько в ядро и остальное в репозиторий плагинов)

Diphenyl Oxalate 09.02.2017 20:31

Цитата:

Сообщение от xShift (Сообщение 438838)
Реализована перепаковка 2D матрицы в принудительный 3D режим. Теперь поддерживаются 3D трансформации для анимирования.

Звучит внушительно.
Пример можно?


Часовой пояс GMT +3, время: 14:48.