Фреймворк Matreshka.js
 

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

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

ангуляр :)

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

Не 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 );
            })
        ;
    }
});

не понял

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

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

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

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

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

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

Попытаюсь обосновать плюсы декларативности:

<div>
    <input type="text" ng-model="model.field" />
</div>

- я вижу куда именно к модели привязан инпут, без необходимости лезть в js-код
- код привязок (биндингов) преимущественно "лапша". Только место занимает и внимание на себя отвлекает. Его, кстати, очень много в приложениях.
- возможность задавать поведение декларативно

<div ng-show="model.type[0|1]"></div>

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

DjDiablo об этом писал

а как люди в борьще ориентируются? :D

p.s.: комменты на хабре веселят:
required: a computer

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

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

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

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

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

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

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

FINoM,
:thanks:

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

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

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

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

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

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

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

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

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

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

Gozar,
+1.

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

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

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

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

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

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

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

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

Спасибо:)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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