Hi HN! I'm Swyx, a React dev who has been really excited by all the async rendering stuff the React team has been putting out recently.
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.
It'd be neat if you added Firefox support. Cross browser support for extensions nowadays doesn't require much additional effort, and you get to reach more developers.
yes I should have mentioned that I am aware that this is a thing. I definitely dont want to only support Chrome. However I have no experience doing Firefox ports of stuff. I would welcome contributions for doing that and will add this to the README todo.
totally fair question, one I tried to answer in the README. This current version doesn't require react at all, but I dont want to just make a lag radar extension and leave it be. I think theres a broader potential to make dev tools to help all the React developers who will be making stuff in AsyncMode. So I want to (is target the right word? im not even selling anything) the Async React developer use case and just make one thing that works for them.
I like the cheeky z-index val, but I'd use the max supported value if you want this to work with apps that have that cranked way up.
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.
14 comments
[ 2.5 ms ] story [ 46.6 ms ] threadThe 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!
https://github.com/sw-yx/async-render-toolbox https://chrome.google.com/webstore/detail/fbchcodfbfjeededac... https://addons.mozilla.org/en-US/developers/addon/async-rend...
thanks for your support!
EDIT: someone sent in a PR for it!!
https://github.com/sw-yx/async-render-toolbox https://chrome.google.com/webstore/detail/fbchcodfbfjeededac... https://addons.mozilla.org/en-US/developers/addon/async-rend...
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.
Great work!
I agree. As it stands right now I don't see a use for it.
yes absolutely. rather than messing around with css i want actual helpful diagnostics. i'll spend more time on that.