{"action":"created","issue":{"url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/52","repository_url":"https://api.github.com/repos/yandex-ui/noscript-react","labels_url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/52/labels{/name}","comments_url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/52/comments","events_url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/52/events","html_url":"https://github.com/yandex-ui/noscript-react/issues/52","id":171064363,"number":52,"title":"Тоже самое, но наоборот.","user":{"login":"bt4R9","id":1858946,"avatar_url":"https://avatars.githubusercontent.com/u/1858946?v=3","gravatar_id":"","url":"https://api.github.com/users/bt4R9","html_url":"https://github.com/bt4R9","followers_url":"https://api.github.com/users/bt4R9/followers","following_url":"https://api.github.com/users/bt4R9/following{/other_user}","gists_url":"https://api.github.com/users/bt4R9/gists{/gist_id}","starred_url":"https://api.github.com/users/bt4R9/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bt4R9/subscriptions","organizations_url":"https://api.github.com/users/bt4R9/orgs","repos_url":"https://api.github.com/users/bt4R9/repos","events_url":"https://api.github.com/users/bt4R9/events{/privacy}","received_events_url":"https://api.github.com/users/bt4R9/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-08-14T15:39:02Z","updated_at":"2016-08-14T18:39:25Z","closed_at":null,"body":"TL;DR\r\n\r\nВдоволь наигравшись с `noscript-react` понял, что переписывать большие noscript view несколько сложно из-за сильной интеграции между `ns.View` и `ns.Model`.\r\nТипичный (для меня) кейс.\r\n```\r\n- ns.ViewCollection\r\n- - view-1\r\n- - - model1\r\n- - - state-model-1\r\n- - view-2\r\n- - - model2\r\n- - - state-model-2\r\n- - view-3\r\n- - - model3\r\n- - - state-model-3\r\n```\r\nЗдесь `state-model` нужна, чтобы определять как вид `view` будет выглядеть. `view` подписан на изменение `state-model` и запускает `patchLayout`, который определяет дальнейшее дерево видов.\r\n\r\nПри переписывании этой коллекции на `noscript-react`, собственно, есть 2 пути.\r\n1) Сделать из `ns.ViewCollection` `ns.ViewReactCollection`, а из `view` `reactView`, а в методе `render` написать `this.createChildren()`.\r\n2) Сделать из `ns.ViewCollection` `ns.ViewReactCollection`, а дальше писать всё исключительно на реакт компонентах, то есть в render уже будет такое.\r\n```js\r\n{{this.props.models.modelCollection.map((model) => {\r\n  return <Component { ...this.getModelData(model) } />\r\n}}\r\n```\r\nПо некоторым личным предпочтениям, мне симпатизирует второй вариант, но вот незадача, при таком подходе нет нормальной возможности задекларировать модели и их события в дочерних видах. То есть, теперь мы работаем исключительно с React компонентами, но теряем нормальную возможность реагировать на нужные нам `noscript` события в моделях, например, чтобы обновить дочерний компонент.\r\nОдин из возможных, и вероятно правильных подходов в этой задаче — это воспринимать теперь коллекцию как отдельное реакт приложение и самому реализовать всю логику создания, подписки моделей и обновления в этой компоненте. По-большому счету, получаем огромный json данных и все подписки моделей в одном месте.\r\nМне такой вариант совсем не нравится, и хочется сохранить прежнее удобство декларации событий моделей, но при этом писать именно на React без оберток.\r\n\r\nТеперь в порядке бреда, наброски костыля.\r\n\r\n**NoscriptReactComponent**\r\n```js\r\nimport React from 'react';\r\n\r\nexport default class NoscriptReactComponent extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    // здесь доступна декларация моделей через this.models и параметры для моделей\r\n    this.bindModelsEvents();\r\n  }\r\n\r\n  bindModelsEvents() {\r\n    // примерно вот это https://github.com/yandex-ui/noscript/blob/master/src/ns.view.js#L313\r\n  }\r\n\r\n  unbindModelsEvents() {\r\n    // примерно вот это https://github.com/yandex-ui/noscript/blob/master/src/ns.view.js#L364\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    this.unbindModelsEvents();\r\n  }\r\n}\r\n```\r\n**ReactComponentInNoscriptApp**\r\n```js\r\nimport NoscriptReactComponent from 'components/NoscriptReactComponent';\r\n\r\nexport default class ReactComponentInNoscriptApp extends NoscriptReactComponent {\r\n  constructor(props) {\r\n    super(props);\r\n  }\r\n\r\n  get models() {\r\n    return {\r\n      'model': {\r\n        'ns-model-changed': false\r\n      },\r\n      'model-state': {\r\n        'ns-model-changed': false,\r\n        'ns-model-changed.state': function() {\r\n           // а вот тут теперь можно вызывать апдейт реакта любым удобным способом.\r\n           // this.forceUpdate() or this.setState();\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n  render() {\r\n    // do some staff\r\n  }\r\n}\r\n``` \r\n\r\nЭто полный бред, я не должен такого хотеть? :)"},"comment":{"url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/comments/239689093","html_url":"https://github.com/yandex-ui/noscript-react/issues/52#issuecomment-239689093","issue_url":"https://api.github.com/repos/yandex-ui/noscript-react/issues/52","id":239689093,"user":{"login":"Rebulus","id":587265,"avatar_url":"https://avatars.githubusercontent.com/u/587265?v=3","gravatar_id":"","url":"https://api.github.com/users/Rebulus","html_url":"https://github.com/Rebulus","followers_url":"https://api.github.com/users/Rebulus/followers","following_url":"https://api.github.com/users/Rebulus/following{/other_user}","gists_url":"https://api.github.com/users/Rebulus/gists{/gist_id}","starred_url":"https://api.github.com/users/Rebulus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Rebulus/subscriptions","organizations_url":"https://api.github.com/users/Rebulus/orgs","repos_url":"https://api.github.com/users/Rebulus/repos","events_url":"https://api.github.com/users/Rebulus/events{/privacy}","received_events_url":"https://api.github.com/users/Rebulus/received_events","type":"User","site_admin":false},"created_at":"2016-08-14T18:39:25Z","updated_at":"2016-08-14T18:39:25Z","body":"Какие плюсы от `ns.ViewReact` 😄 \r\n1. Сохраняется возможность дикларативно описывать layout. Это позволяет определить движку, какие элементы страницы будут отрисованы и какие данные для этого надо запросить. Фактически в этом весь `noscript` 😄 \r\n2. Noscript отслеживает невалидность данных для `ns.ViewReact` и при необходимости автоматически перерисовывает её.\r\n3. Основываясь на 2-м пункте, нет необходимости отслеживать какие именно данные изменились. Перерисовка полностью ложится на `ns.ViewReact`. А если, необходимость есть, можно использовать `shouldComponentUpdate`, но только дочерних компонентов, т.к. по хорошему, `ns.ViewReact` - это контейнер (https://github.com/yandex-ui/noscript-react#setstate-не-вызывает-перерисовку). Очень похоже по поведению на `redux`, можно думать в том же стиле - контейнер поставляет данные, а дочерние компоненты отвечают за отрисовку.\r\n\r\nПочему не создали просто React компонент, который был бы связан с моделями. Поэтому что `noscript` занимается анализом будущей визуализации страницы и запросом необходимых данных для её отрисовки самостоятельно. Т.е. в компонент придётся внести ещё и эти элементы, что в итоге приведёт его к `ns.ViewReact` подобию.\r\n\r\nПоправь, пожалуйста, если на твой взгляд это не так?"}}
{"actor":{"display_login":"Rebulus"}}