{"action":"created","issue":{"url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/72","repository_url":"https://api.github.com/repos/clearwater-rb/clearwater","labels_url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/72/labels{/name}","comments_url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/72/comments","events_url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/72/events","html_url":"https://github.com/clearwater-rb/clearwater/pull/72","id":208318214,"number":72,"title":"Add AsyncRender component","user":{"login":"jgaskins","id":108205,"avatar_url":"https://avatars.githubusercontent.com/u/108205?v=3","gravatar_id":"","url":"https://api.github.com/users/jgaskins","html_url":"https://github.com/jgaskins","followers_url":"https://api.github.com/users/jgaskins/followers","following_url":"https://api.github.com/users/jgaskins/following{/other_user}","gists_url":"https://api.github.com/users/jgaskins/gists{/gist_id}","starred_url":"https://api.github.com/users/jgaskins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jgaskins/subscriptions","organizations_url":"https://api.github.com/users/jgaskins/orgs","repos_url":"https://api.github.com/users/jgaskins/repos","events_url":"https://api.github.com/users/jgaskins/events{/privacy}","received_events_url":"https://api.github.com/users/jgaskins/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-02-17T02:49:05Z","updated_at":"2017-02-17T02:51:32Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/clearwater-rb/clearwater/pulls/72","html_url":"https://github.com/clearwater-rb/clearwater/pull/72","diff_url":"https://github.com/clearwater-rb/clearwater/pull/72.diff","patch_url":"https://github.com/clearwater-rb/clearwater/pull/72.patch"},"body":"This proposal for an `AsyncRender` component is intended for apps that expect to generate large amounts of DOM changes in a single render. It uses `requestAnimationFrame` to delay updating the subtree (on both mount and update) until the following frame. This lets the rest of the UI update itself and saves itself and all its descendants for later.\r\n\r\nIn effect, it splits the render up into multiple diff/patch cycles.\r\n\r\n### Example\r\n\r\n```ruby\r\ndef render\r\n  div([\r\n    h1('Async Render Demo'),\r\n    Clearwater::AsyncRender.new(div('This part is delayed.')),\r\n    Clearwater::AsyncRender.new(MyLargeComponent.new),\r\n  ])\r\nend\r\n```\r\n\r\nIn this example, the inner `div` and the `MyLargeComponent` instance are not inserted into the DOM until the following frame. The example is to show that you can use either components or regular vdom nodes. On subsequent renders, the updates will be delayed one frame, as well.\r\n\r\nNote: this is not intended to be used at the same level of the DOM tree as hundreds of other renders. That is, don't build a giant list of `AsyncRender` components. Instead, you should wrap the parent element/component inside an `AsyncRender`.\r\n\r\nI'm kind of excited about this because the React team has been talking about this concept as \"partial diffing\" for a while. They don't have it implemented yet AFAIK, and I don't think it can't be implemented inside a component like this PR uses — the React reconciler can't replace the top-level node. The closest I've been able to get it in React is [this pen](https://codepen.io/jgaskins/pen/Kaboxg), which has to wrap the child nodes inside an element of its own."},"comment":{"url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/comments/280534818","html_url":"https://github.com/clearwater-rb/clearwater/pull/72#issuecomment-280534818","issue_url":"https://api.github.com/repos/clearwater-rb/clearwater/issues/72","id":280534818,"user":{"login":"jgaskins","id":108205,"avatar_url":"https://avatars.githubusercontent.com/u/108205?v=3","gravatar_id":"","url":"https://api.github.com/users/jgaskins","html_url":"https://github.com/jgaskins","followers_url":"https://api.github.com/users/jgaskins/followers","following_url":"https://api.github.com/users/jgaskins/following{/other_user}","gists_url":"https://api.github.com/users/jgaskins/gists{/gist_id}","starred_url":"https://api.github.com/users/jgaskins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jgaskins/subscriptions","organizations_url":"https://api.github.com/users/jgaskins/orgs","repos_url":"https://api.github.com/users/jgaskins/repos","events_url":"https://api.github.com/users/jgaskins/events{/privacy}","received_events_url":"https://api.github.com/users/jgaskins/received_events","type":"User","site_admin":false},"created_at":"2017-02-17T02:51:32Z","updated_at":"2017-02-17T02:51:32Z","body":"Now that I think about it, maybe we should scope it within the `Clearwater::Component` namespace. Then, when including the mixin, you can reference `AsyncRender` inside your component without name spacing it under anything."}}
{"actor":{"display_login":"jgaskins"}}