
Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo - swyx
https://github.com/sw-yx/async-react-toolbox
======
swyx
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](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...](https://chrome.google.com/webstore/detail/fbchcodfbfjeededacomngobhnndcgol)

(also im not very experienced at chrome extensions so i welcome feedback)

p.s. Thanks @dang for re-upping this!

~~~
swyx
hello based on feedback this toolbox has been renamed to async-RENDER-toolbox
and we will no longer focus on React.

[https://github.com/sw-yx/async-render-toolbox](https://github.com/sw-
yx/async-render-toolbox)
[https://chrome.google.com/webstore/detail/fbchcodfbfjeededac...](https://chrome.google.com/webstore/detail/fbchcodfbfjeededacomngobhnndcgol)
[https://addons.mozilla.org/en-US/developers/addon/async-
rend...](https://addons.mozilla.org/en-US/developers/addon/async-render-
toolbox/)

thanks for your support!

------
huehehue
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.

Great work!

~~~
swyx
i actually dont even know there's a max. I thought you just keep adding 9's.

yes absolutely. rather than messing around with css i want actual helpful
diagnostics. i'll spend more time on that.

------
TheAceOfHearts
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.

~~~
swyx
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.

EDIT: someone sent in a PR for it!!

~~~
sp332
Check #webextensions on irc.mozilla.org. Here's an old list of people who have
"office hours" for helping people port extensions. [https://public.etherpad-
mozilla.org/p/WebExtensions_office_h...](https://public.etherpad-
mozilla.org/p/WebExtensions_office_hours)

------
aytekin
Here is the actual demo video: [https://reactjs.org/blog/2018/03/01/sneak-
peek-beyond-react-...](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-
react-16.html)

------
ramenmeal
What makes it a "react" toolbox? Is it because it is made w/ react?

~~~
swyx
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.

~~~
fouc
This could be useful for other vdom libraries, like Mithril. It would be nice
if it didn't get tied to react, or the react parts were optional.

~~~
swyx
hello based on feedback this toolbox has been renamed to async-RENDER-toolbox
and we will no longer focus on React.

[https://github.com/sw-yx/async-render-toolbox](https://github.com/sw-
yx/async-render-toolbox)
[https://chrome.google.com/webstore/detail/fbchcodfbfjeededac...](https://chrome.google.com/webstore/detail/fbchcodfbfjeededacomngobhnndcgol)
[https://addons.mozilla.org/en-US/developers/addon/async-
rend...](https://addons.mozilla.org/en-US/developers/addon/async-render-
toolbox/)

thanks for your support!

