FINoM,
:)
Карточная игра: реализуем атаку и найдем применение ShadowDOM

рони, спасибо :)

Ловите новую версию: http://ru.matreshka.io/#!whats-new

Сегодня опубликовал два поста: Matreshka.js 1.1: еще больше крутостей и Matreshka.js: события. Самое большое изменение - поддержка нативных объектов.

var object = {a: {b: {c: {d: 1}}}};

MK.on(object, 'a.b.c@change:d', function(evt) {
	alert('"d" изменилось на ' + evt.value);
});

object.a.b.c.d = 2; // "d" изменилось на 2
object.a.b = {c: { d: 42 }}; // "d" изменилось на 42

По поводу скорости: http://mathieuancelin.github.io/js-r...rfs/matreshka/
Для примера, можете сравнить с тем же Vue: http://mathieuancelin.github.io/js-repaint-perfs/vue/

FINoM,
matreshka: Repaint rate: 11.20/sec , разброс небольшой
vue: Repaint rate: 10.82/sec и ниже до Repaint rate: 9.66/sec

рони, ну это я к тому, что Матрешка примерно так же быстра, как и Vue, React и пр. То, что она немножко быстрее, можно не брать в расчет.

В Файерфоксе, кстати, наоборот: Vue немного быстрее.

FINoM,
во всех по разному :)

FINoM, неа.

Firefox 41
Ubuntu 15.04

Matreshka 9.17 - 10.71
Vue 13.5 - 16.08

Lemme, я писал об этом выше. Скорость, в целом, сравнима.

Выложил код сайта в опен-сорц: https://github.com/matreshkajs/matreshka.io

Набросал немного примеров: https://github.com/matreshkajs/matreshka_examples

Датабиндинг это не логика, это биндинг. В яваскрипте пишем данные, а в html эти данные рисуем, и датабиндинг это то место КУДА мы рисуем, и определять его нужно в html, потому что РИСУЕМ МЫ в HTML, а у тебя все с ног на голову. ты в явскрипте решаешь куда оно будет рисоваться, а связь должна быть обратная. у тебя есть данные, контроллер какойнибудь, и в том месте в html где ты хочешь с него данные подцепить ты их подцепляешь. а ты пишешь что все на своих местах, хотя на деле у тебя все как раз наоборот, все с ног наголову. верстка и оформление, ВНЕШНОСТЬ по сути, переместились в яваскрипт.


Селкекторы ты где пишешь? В яваскрипте. А если ты хочешь в 2 места нарисовать? А если в 10? Тут связь "один к многим" и многие должны сами "подцеплться" к одному, а не он всех их перечислять. Ты плохой архитектор раз не знал этого) не в обиду.

Ты не обижайся но лучше тебе бы забить на свой фреймворк и скоро присоединиться к команде разработчиков юишки) Потому что это небо и земля. Она как ангуляр 2 только круче.

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

this.on('click::sandbox(.my-inner-node)', handler);

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

грубо говоря у тя биндинг не автоматический, у меня там где html вьюха пытается свойство какое то читать, автоматически вешается Object.observe() если он поддерживается, сеттер если он поддерживается, а если и он не поддерживается то вешается ватчер дирти чекинг. Если же 10 {{Выражений}} пытаются отслеживать одно свойство, то к тому свойству просто добавляется хендлер, а не вешается еще один обсервер или сеттер(ну 2 геттера и так не повесить)
когда же все ватчеры отменены или переведены в спящий режим (например когда какой-то елемент display:none ватчеры автоматически засыпают), то все обсерверы снимаются, ну или если это долго (если снятие всех сеттеров и замена их на обычное значение заняла больше 17 миллисекунд) то снятие прекращается и ватчеры просто переходят в режим игнорирования сеттеров.

я к тому что этим дожлен вреймфорк заниматься а не человек, а у тебя это не автоматизировано, ну и бред.
смысл юишки в том что я пишу в html как на html, а в javascript как в javascript. А как оно там все соединяется решает фреймворк, я об этом вообще не думаю, максимум это во время верстки какие-то данные из яваскрипта подцеплю где они мне нужны. Например:

<button on-click='User.popup = true'>register</button>
<div css-show='User.popup'>register popup</div>

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

п.с. кстати, on-click='User.popup = true' вообще то по уму это уже не датабиндинг, это логика, и она должна быть в яваскрипте описана, по хорошему надо создать метод User.showPopup() и в нем логику описать, а в on-click просто забиндится к нему on-click='User.showPopup()'

Тут я просто для наглядности показал как css-show реагирует на булево значение)

вот глянь на юишку


контроллер:

<script src='http://localhost/ui/build/ui.js'></script>

<script>
ui.controller('User', {
    q: 11,
    plus: function () {
        this.q++
    }
})
</script>


<div>{{User.q}}</div>
<button on-click="User.q++">plus++</button>

компонент:

<script src='http://localhost/ui/build/ui.js'></script>

<script>
ui.component('ui-ololo', {
    cnt: 11,
    template: '<span on-mousemove="this.cnt++">span {{this.cnt}} </span>'
})
</script>


<ui-ololo data-repeat='5'></ui-ololo>

можно даже попрограммировать на html:

<script src='http://localhost/ui/build/ui.js'></script>

<body on-mousemove='x=$event.clientX, y=$event.clientY'>
x: {{x}} y:{{y}}

<button data-if='x > 195' style='height:{{y}}px'>не нажмешь ;)</button>
</body>

И кстати, у тебя распространенная ошибка новичка, описывать ВНУТРЕННЕЕ УСТРОЙСТВО компонента, и ВНЕШНЕ его использовать это разные вещи. ТО есь в яваскрипте и шаблонах нужно опсиывать внутреннее устройство компонента, а в html лишь его использовать, дерагя за нужные рычажки и настроечки. То есть вначале мы описали кубик лего, а потом его используем где хотим. И вот это использование ты ошибочно и называешь "программированием в html".

То есть код функции мы пишем в яваскрипте, а используем в html, данные хранятся в яваскрпте, а рисуем в html.
Логика и программирование в яваскрипте. Вьюха и отображение html.


То есть датабиндинг должен быть в том месте КУДАААА мы рисуем, а не откуда мы рисуем.
Иначе есть вот какие минусы:

1) это неудобно, ну да идиотам может и удобно но профессионалам не удобно
2) поменял верстку, лезь и в яваскрипт ищи что там могло в эту верстку пытаться нарисовать и менай там селекторы
3) нечайно назвал класс одинакого, он подошел под селектор, теперь что то из яваскрипта в него рисует и ты не можешь понять с какого хрена, ты ведь не просил.
4) Читая верстку непонятно что где в ней будет происходить, где статические даныне а где класс изменяться будет например, непонятно к чему привязан инпат и.т.п.

Ну то есть датабиндинг должен быть в месте КУДА мы рисуем, а не откуда рисуем, почему? Потому что связь "один к многим". Это как не перент решает для кого он будет перентом и кто его чайлдами, а чайлды вызывают его метод appendsChild чтобы связаться с ним и добавиться в его список. потому что связь один к многим.

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

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

а у тебя получается на каждый чих пых вызывается рендер) тупо от того что ты НЕ СМОГ организовть грамотно отрисовку "только изменений" без каких либо проверок и сравнений)) пипееец, и у тебя еще берут интервью)? жесть чувак)) мой фреймворт в кллочья дерет твой но мне и то стыдно пока показывать, я хочу чтобы все в обморок падали а не просто "Ну есть и есть", а ты с таким чудищем в люди показался...

Как она узнает что я вставил в массив что то без дирти чекинга?

Или у тебя там вообще нет массивов и фреймворк ОБЯЗЫВАЕТ юзать ссаные коллекции и запрещает делать что-то вроде arr[9999] = 11 ?

типа мляя пасоны, не смог я отслеживать изменения в массивах чтобы не тупило по этому юзайте коллекции? или что?
а че тогда не за место сеттеров запилил бы типа obj.set('key', val) хули! если не справляешься с нормальным ПРОЗРАЧНЫМ для юзера обсервингом, да чтобы без тормозов было, то тебе в 2009 год бакбонов емберов и прочей шелупени.



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

если за эти 50 миллисекунд что то изменилось то рендер смотрит стоит ли ему с самого начала начинать рендерить, или же изменились данные которые ниже будут.
=====================
так вот, ДАЖЕ ТОГДА МНЕ БЫЛО СТЫДНО ДЕЛАТЬ РЕЛИЗ!!!! а ты выпускаешь ЭТО??? ЕЩЕ И СТАТЬИ НА ХАБРЕ ПИШЕШЬ??? ЖЕЕЕЕЕЕЕСТЬ!!!

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


ТОТ_САМЫЙ, давай я тебе документацию напишу. Еще думаю видеокурс сделать о твоём фреймворке. Думаю, ты не против.

Оффтоп почистил, а Максимус в очередной раз отправился в страну бананов на недельку.

Эгэй! Вышел следующий минорный релиз под номером 1.4. Что нового: http://ru.matreshka.io/#!whats-new

Опубликовал небольшой ролик. Это проба пера, поэтому, не судите строго.

https://www.youtube.com/watch?v=n6YUX4-PJTs

Опубликовал пост на Хабре: http://habrahabr.ru/company/matreshka/blog/270437/

В ролике и в посте кратко объясняется почему был выбран синтаксис связывания с указанием селектора и почему это офигительно.

FINoM,

рони, прикольно. Хотя, у меня немного другие результаты.

Может, кто Хабр не читает, вот пост о плагине, реализующем нечто похожее на роутинг.

Демка

Код из демки:

new class App extends Matreshka {
  constructor() {
    super();
    this
      .initRouter('/a/b/c/')
      .initRouter('/d/e/f/', 'history')
      .bindNode({
        a: '.a',
        b: '.b',
        c: '.c',
        d: '.d',
        e: '.e',
        f: '.f'
      });
  }
};

FINoM,
:victory:

Выпустил вторую версию, переписав всё с нуля, удалив ненужное и добавив несколько удобностей. Псто на Хабр

Свежий пост подъехал: https://habrahabr.ru/company/matreshka/blog/325480/