React + Noscript

[vitkarpov]

Мысли про react и ns: некоторые эксперименты, чтобы было с чего начать разговор.

Первое — лейаут. Каким образом провести границу между ns и react в этом месте.

Для примера:

ns.layout.define('app', {
    app: {
        view1: true,
        // view2 — это реакт-компонент
        'view2^': {
            component1: {
                component2: true
            }
        }
    }
});

Лейаут должен понимать, что с какой-то ветки дерева начинает реакт.

По аналогии с @ и &, можно добавить префикс, например, ^ — означает, что это реактивная вьюшка, все дети которой — реакт-компоненты.

Реактивная вьюшка может нарисоваться одной нодой и отрендерить внутри себя соответствующий реакт-компонент: это то место, где пересекаются react и ns — с одной стороны view2 это обычная ns-вьюшка, которую нужно положить на свое место в yate-шаблоне app, с другой стороны есть реакт-компонент view2, который нарисуется внутри вьюшки view2.

Первое, о чем нужно подумать: научить апдейтер понимать, что какую-то часть лейаута обрабатывать как обычно не нужно.

Теперь о apply /.views ns-view. Как может выглядеть шаблон реакт-компонента view2:

var View2 = React.createClass({
    render: function() {
        return (
            <div>
                ...
                    // это аналог apply /.views ns-view
                    { this.props.children }
                ...
            </div>
        )
    }
});

Сейчас это работает. Пример

Второе, о чем нужно подумать: научиться создавать инстансы компонентов по «реактивной» части дерева, поднимаясь все выше и выше к корню — view2, в конечном итоге, вызов ReactDOM.render для него нарисует всю вьюшку.

Пример

Можно набросить еще мыслей для обсуждения

[vitkarpov]

Апдейтер, в итоге, дергает _updateHTML у корневой вьюшки в дереве рендеринга, которая рекурсивно дергает их у своих детей.

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

[vitkarpov]

Обсудили