Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Фреймворк Matreshka.js (https://javascript.ru/forum/project/42461-frejjmvork-matreshka-js.html)

FINoM 27.10.2013 17:06

Фреймворк Matreshka.js
 
Послезавтра, во вторник, выложу первую статью серии о моём фреймворке, а пока небольшая интрига:

Пр вызове кода внизу, таблица реагирует самостоятельно. Код реален и работает в Internet Explorer 8. Я поборол Object.defineProperty! Фак йеах.
Статья будет расположена по этому адресу: http://habrahabr.ru/post/196146/

nerv_ 28.10.2013 11:45

Цитата:

Сообщение от FINoM
Пр вызове кода внизу, таблица реагирует самостоятельно

ангуляр :)

upd: http://learn.javascript.ru/play/MNhEd

FINoM 28.10.2013 13:03

Цитата:

Сообщение от nerv_
ангуляр

Не MVVM :)
Вся логика в JS, никакой логики в HTML.

var Example = Class({
    'extends': MK.DOMArray,
    constructor: function() {
        this
            .initMK()
            .bindElement( this, 'table tbody' )
        ;
    },
    renderer: function( object ) {
        return '<tr><td class="a"></td><td class="b"></td><td class="c"></td></tr>';
    }
});


var ExampleObject = Class({
    'extends': MK.Object,
    constructor: function( o ) {
        this
            .initMK()
            .jset( o )
            .on( 'render', function() {
                this.bindElement({
                    a: this.$( '.a' ),
                    b: this.$( '.b' ),
                    c: this.$( '.c' )
                }, MK.htmlp );
            })
        ;
    }
});

nerv_ 28.10.2013 13:41

Цитата:

Сообщение от FINoM
Не MVVM

не понял

Цитата:

Сообщение от FINoM
Вся логика в JS, никакой логики в HTML

а где ты увидел логику в html? Зато я у тебя вижу классы для выборки:
Цитата:

a: this.$( '.a' ),
b: this.$( '.b' ),
c: this.$( '.c' )

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

И получается что все "биндинги" необходимо писать в js коде. А их, как правило, много, вместо того, чтобы задать декларативно - дешево и сердито.

FINoM 28.10.2013 14:15

Цитата:

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

Это делается в цикле, пробегом по свойствам и выборкой элементов по селектору (например, data-key). Давай через несколько дней поговорим :)

FINoM 29.10.2013 14:28

Хэхэй, смотри ссылку в первом посте.

nerv_ 30.10.2013 00:50

Цитата:

Сообщение от FINoM
Не MVVM

вот теперь понял

Ознакомился со статьей на хабре.
Цитата:

Правильный способ (подробнее о методе .each в статье об MK.Object):
Цитата:

Я предпочитаю разграничивать «комплексные» элементы приложения таким образом, чтоб каждый элемент являлся элементарным классом (что я имею в виду, будет понятнее в статье о наследовании), привязок в котором не так много. Возможно, мой подход сильно деформирован убеждением о том, что JS код и HTML должны быть максимально разграничены: верстальщик верстает, а программист, если и вносит, то только минимальные и необходимые изменения.
Я об этом и толкую :) Любой верстальщик может декларативно задавать поведение, глядя на написанное ранее js програмистом. Если сомневается - не использует. Все просто.

Попытаюсь обосновать плюсы декларативности:
<div>
    <input type="text" ng-model="model.field" />
</div>

- я вижу куда именно к модели привязан инпут, без необходимости лезть в js-код
- код привязок (биндингов) преимущественно "лапша". Только место занимает и внимание на себя отвлекает. Его, кстати, очень много в приложениях.
- возможность задавать поведение декларативно
<div ng-show="model.type[0|1]"></div>

- сходу не помню )

Цитата:

Цитата:

Обновлений в html будет много, а надо только одно, как этим управлять?
Почему вы так решили? ДОМ изменяется только тогда, когда меняется значение свойства:
DjDiablo об этом писал

Цитата:

Предложите, пожалуйста, какой-нибудь вариант решения.
Цитата:

Тут к сожалению нет решения, для js точно, в каком-нибудь TypeScript можно, а тут нет.
Цитата:

Искать по bindElement
Цитата:

Как-то нетривиально, а если ещё смешивать с какими-нибудь другими либами, вообще не представляю как люди будут ориентироваться в таком коде.
а как люди в борьще ориентируются? :D

p.s.: комменты на хабре веселят:
Цитата:

И снова зависимость от jquery :-/
required: a computer

FINoM 23.03.2015 16:51

Вышла первая версия Матрешки, ура! Как бонус, появилась полная, всеобъемлющая документация на русском: http://ru.matreshka.io/

Следите за блогом Матрешки на Хабре, скоро выйдет статья с подробностями
http://habrahabr.ru/company/matreshka/

FINoM 23.03.2015 17:02

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

FINoM 23.03.2015 17:30

Цитата:

Сообщение от рони
при скролинге ie уходит в аут

Честно говоря, в ИЕ дяже не проверял. А какая версия?

FINoM 23.03.2015 17:36

Да, вижу. Ему совсем плохо. Спасибо.

FINoM 23.03.2015 18:19

рони, по идее, сейчас должно работать. Только переключитесь в режим "по одному", в осле по-прежнему есть проблама со скроллингом на этом сайте, это временное решение.

FINoM 23.03.2015 18:41

Цитата:

Сообщение от рони
для тех кто не в танке что это?

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

рони 23.03.2015 19:16

FINoM,
:thanks:

FINoM 24.03.2015 13:43

рони, вы разрушили мои стереотипы о веб разработчиках. Я думал, что никто из прогроаммистов и верстальщиков не пользуется ослом :)

Сайт теперь доступен и из ИЕ, с некоторыми ограничениями:
- Нельзя задать вопрос (Facebook отказывается грузить свой виджет)
- Ширина модальных окон фиксированная (700 пикс)
- Для ИЕ9 переключатель "Всё подряд/по одному" не доступен вовсе. Используется исключительно второй.

clecar 24.03.2015 21:16

Для меня (слесаря ремонтника больших металлорежущих станков) всё это как {dyrashin} в джери. Прикол?....

FINoM 06.04.2015 09:58

Вышла первая версия фреймворка Matreshka.js

FINoM 08.04.2015 18:01

Matreshka.js: От простого к простому

FINoM 13.04.2015 16:37

*удалено*

FINoM 14.04.2015 19:25

10 причин попробовать Матрешку

FINoM 23.04.2015 13:13

Господа, не совсем понимаю, стоит ли поддерживать этот топик? Не хочется спамить без толку.

рони 23.04.2015 13:37

FINoM,
думаю да, не хабром единым маркетинговать :) - жаль я пока не дорос до фреймворков, всё больше квери балуюсь :cray:

FINoM 23.04.2015 13:39

Цитата:

Сообщение от рони
думаю да, не хабром единым маркетинговать

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

Safort 23.04.2015 18:35

Цитата:

Сообщение от рони (Сообщение 367899)
FINoM,
думаю да, не хабром единым маркетинговать :) - жаль я пока не дорос до фреймворков, всё больше квери балуюсь :cray:

Так, может, пора бы уже?

Safort 23.04.2015 18:37

Цитата:

Сообщение от FINoM (Сообщение 367900)
Я бы рад, только создаётся впечатление, что эта тема никому не интересна здесь.

Дело не в теме/фреймворке. Просто так уж получилось, что в этом разделе люди не особо активны.

Gozar 26.04.2015 22:49

Цитата:

Сообщение от Safort
в этом разделе люди не особо активны

Очень активны, если используют предлагаемый продукт.

А видео есть, где мы за 20 минут разработаем чат, или галлерею ака ACDSee с деревом и путем и они будут связаны и всё это будет логично и понятно, даже если через год откроешь?

Safort 27.04.2015 01:19

Gozar,
Цитата:

А видео есть, где мы за 20 минут разработаем чат, или галлерею ака ACDSee с деревом и путем и они будут связаны и всё это будет логично и понятно, даже если через год откроешь?
+1.

рони,
нет. //если хочешь продолжить разговор - пиши в лс

FINoM 10.06.2015 11:47

Несколько ресурсов
Шишки об матрешку от seokirill
Создание игр без canvas: Matreshka.js от seokirill
Matreshka.js by Igor Iakymenko (доклад)
RadioJS: Выпуск 23: Кушайте овощи, пишите на Матрёшке (гость - я; в выпуске несколько слов о Матрешке, остальное - обсуждение новостей веб разработки)
Самые актуальные новости Матрешки всегда есть в русскоязычном чатике

FINoM 13.08.2015 19:57

Теперь Матрешка быстрее Angular, Knockout и React

kobezzza 13.08.2015 21:28

Молодец! Поизучаю твою либу на выходных.

nerv_ 13.08.2015 22:27

FINoM, сравни в таком ключе.

К слову, Vue.js быстрее React.

Цитата:

Сообщение от kobezzza
Молодец!

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

kobezzza, если будет время, посмотри Vue.js (по-русски Мгу :)), будешь приятно удивлен.

Формат фреймворка далеко не всегда удобен. Тот же ангуляр форсит архитектуру, в отличии от библиотеки вью.

kobezzza 13.08.2015 23:41

Цитата:

kobezzza, если будет время, посмотри Vue.js (по-русски Мгу ), будешь приятно удивлен.
Спасибо:)

cyber 14.08.2015 00:42

Цитата:

Сообщение от nerv_
посмотри Vue.js

выглядит офигенно, как и по коду так и по возможностям)

FINoM 14.08.2015 22:15

Цитата:

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

Ок, учту, спасибо.
Цитата:

Сообщение от kobezzza
Молодец! Поизучаю твою либу на выходных.

Только не забудь отписаться тут :)

FINoM 15.08.2015 00:14

Еще немного новостей:
1. У Метрешки появился постоянный спонсор в лице Shooju
2. У меня взял интервью автор статей журнала Хакер: http://iantonov.me/page/matreshkoj-p...ka-matreshkajs
3. Будущие фичи фреймворка и то, что уже сделано можно увидеть здесь: https://trello.com/b/E5KcQESk/matreshka-js-features (можно голосовать, чтоб повлиять на приоритет)
4. Новую, боле-менее стабильную верию уже можно пощупать из бранча develop (официальный пре-релиз будет чуть позже).

B~Vladi 30.08.2015 11:57

FINoM, к успеху идешь!:dance:

FINoM 31.08.2015 10:33

B~Vladi, я надеюсь :)
Хотя, 300 звездочек на Гитхабе - маловато.

FINoM 14.09.2015 18:09

Цитата:

Сообщение от nerv_
Декомпозиция не помешала бы.

Сделал декомпозицию. Спасибо за ценный совет.
https://github.com/finom/matreshka/tree/develop/src

nerv_ 15.09.2015 01:16

Цитата:

Сообщение от FINoM
Сделал декомпозицию. Спасибо за ценный совет.

В таком случае ты готов к следующему ценному совету :D
Шутка, конечно, но в каждой шутке есть доля шутки :)

Цитата:

Сообщение от nerv_ (Сообщение 384167)
посмотри Vue.js

почти тоже самое, что у тебя, только mvvm
реализовано через геттеры/сеттеры

К, слову, у тебя синхронный рендер? Если да, я уже писал, чем он плох.

FINoM 15.09.2015 10:46

Цитата:

Сообщение от nerv_
почти тоже самое, что у тебя, только mvvm

Да, уже ознакомился, благодаря тебе. Крутая штука.

Цитата:

Сообщение от nerv_
К, слову, у тебя синхронный рендер? Если да, я уже писал, чем он плох.

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

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

Матрешка, при вставке нового айтема в коллекцию, рендерит одну ноду и вставляет её, не осуществляя никаких проверок (разве что, на наличие уже отрендеренной ноды). Эта логика очень проста и выигрывает по скорости (именно из-за отсутствия dirty-checking и virtual-dom) у Реакта и подобных.

Такой юз-кейс покрывает (по моей оценке) 99% задач по рендерингу. Оставшийся процент касается приложений с произвольным, частым ререндерингом, пересортировкой всей коллекции и когда данные коллекции всё время заменяются на новые с очень коротким интервалом.

Для таких задач, в списке дел по развитию фреймворка, есть опция, включающая асинхронность: https://trello.com/c/HN0pkjyS/61-deb...ng-and-binding

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


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