Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
1–10 of 15 posts
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#2Hi 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.
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!
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#3It'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.
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#4It'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.
EDIT: someone sent in a PR for it!!
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#5What makes it a "react" toolbox? Is it because it is made w/ react?
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#6It'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. EDIT: someone sent in a PR for it!!
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...
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#7What makes it a "react" toolbox? Is it because it is made w/ react?
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.
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#8I 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!
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#9What makes it a "react" toolbox? Is it because it is made w/ react?
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 ma…
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.
Re: Show HN: Lag Radar Chrome Extension from Dan Abramov's Beyond React 16 Demo
#10Earlier quoted context omitted.
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 ma…
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.
enough people have given me this feedback that I will change the repo name/branding. thanks for your feedback.