The benefits of async rendering are very hard to communicate, mostly because we are so used to webapps with screens that lock up or unintentionally rearrange that we don't even see it as a problem. What Dan Abramov and team did at JSConf Iceland was to make devtools to isolate and visualize the problem, and therefore sell the idea that this was a worthwhile problem to fix.
One of the key devtools used to show this off was this cool "lag radar". It's just an svg animation that updates using requestAnimationFrame - the longer the time it takes between each update, the redder the svg gets. So this has a very nice effect of making screen lock-ups very obvious. @mobz from facebook open sourced this a couple days ago (https://github.com/mobz/lag-radar) and I decided to turn it into a Chrome Extension so that anyone can use it on their own websites and potentially identify unacceptable lockups!
Longer term I think we can build up a set of tools for diagnosing and improving async rendering, thats why I decided to call this the "async-react-toolbox" (also didnt want to conflict with any offical devtools the React team might put up). There's nothing inherently to do with react in this initial launch right now, but I fully expect it will morph into a react tool in future.
this is an easy to use and fully open source chrome extension, knock yourselves out! https://chrome.google.com/webstore/detail/fbchcodfbfjeededac...
(also im not very experienced at chrome extensions so i welcome feedback)
p.s. Thanks @dang for re-upping this!
thanks for your support!
And you mentioned building out more tools to help diagnose specific problems -- when the radar goes red, I'd kill to have a report of what was running there, mem use, and so on.
yes absolutely. rather than messing around with css i want actual helpful diagnostics. i'll spend more time on that.
EDIT: someone sent in a PR for it!!