Reactotron – CLI and OS X app for inspecting React Native and JS apps | Hacker News Reader

Reactotron – CLI and OS X app for inspecting React Native and JS apps

github.com

126 pointsskellock23 comments

I've been doing react web and native apps for a while. Why do I want this exactly? Seems like a lot of stuff that's almost competing with my ide stuff but not quite useful enough to switch off?

Not attacking, just want some perspective.

Unlike (traditional) IDEs, this is a runtime tool. It lets you dynamically interact with your program by essentially turning it into a REPL where the language is defined by your actions and reducers. I also like how the CLI makes you feel like Iron Man. Very cool project, and I'm excited to see where tools like this are headed.

Edit: I just integrated with my app and just realized a reason why Redux is so important. It makes integrations like this actually, truly a several minute task, no matter how your state is stored _inside_ of Redux.

Totally legit concerns.

For me, I have visibilty issues into my apps when they grow. The ability to query your redux state tree for answers at any time without logging is helpful for me.

Same with API calls... wait what did I just send? Thats not right!

The subscribe feature allows you to keep an eye on subsets of your state tree as they change.

Its all about focusing. Which is my achillies heel.

What kind of tools are you using for this now?

Cheers man. Appreciate the honest feedback.

If you're using Chrome, I highly recommend the Redux DevTools extension. You'll have insight into your state, actions and even a timeline. With a little extra work (less than Reactotron) you'll get it working in React Native as well. I find it quite helpful.

+1 for Redux DevTools! Its great! The guy who wrote it is much smarter than me. :)

Reactotron has a slightly broader scope (read: not as feature complete with redux - eg, no time travel debugging). I do have things like api monitoring, logging, error tracking with source maps, and benchmarking.

I couldnt quite fit that in my demo gif. It took 11 takes to get what I settled on. I could use some improvement with that.

What did you use for the CLI UI? It looks really nice.

Blessed. It does a lot. Theres also a contrib repo for it that does graphs, a grid sytem, maps (if you can believe it), etc.

Problem is, colorizing the code can be cpu heavy.

For me, one of the big drawbacks this has when compared to Redux logger middleware is that I can't inspect each object associated with a given action. Being able to watch my state mutate and look at it after the fact has been a great boon.

The new App supports this when you subscribe to paths in your state tree. It'll tell you: of the keys you're tracking, heres the adds, edits, and deletes. At mutation time.

Redux logger indeed shows you all this info. My goal with this is not to show you everything, but just what matters.

Debugging is a very personal thing. Hell, I remember using MessageBeep() in the 90's to help me debug. Whatever works!

Excellent, didn't know about the update.

I am curious of the use of React to build desktop apps. Can anyone give me an overview?

Have a look to Electron http://electron.atom.io/ it provides the APIs to the host OS, then about the React part maybe using one of the popular boilerplates https://github.com/chentsulin/electron-react-boilerplate

I am sorry, I meant to ask if React is as fast as writing applications in other langs like C/Java/Python/Go.

I hear that JS is slow, plus I use a lot of apps based on electron and they are a bit slow, VSCode is a remarkable exception to that norm.

React Native uses native OS components, meaning they'll render fast. But if you want to do heavy computing you may get frame drops. Some bundled components are partially native and partially custom, so you'll still need to be mindful of how you work with them.

There's a section in the React Native documentation dedicated to explaining this and I think it does a good job of it: https://facebook.github.io/react-native/docs/performance.htm...

In my opinion, for many use cases you'll be able to write an app that really feels native an performs very well. If you need more performance or other custom stuff you are also able to integrate your own native components (e.g. Swift/Objective-C, etc.) into React Native.

Thank you!

This kind of tool would be very nice when integrated into IDEA, maybe using a plugin?

I'm team Atom and considered a plugin for that. However my Vim friends would have killed me, so I went Electron instead.

This looks interesting! Nice to see some solid open source tooling emerging for React.

Thanks. There's lots of action going on right now in the tools space.

For React Native there's Redux Dev Tools, Deco, Ignite, Exponent, and this to name a few. All active, interesting, and open.

Hey skellock, I see you're using AVA for testing. As an AVA team member, thanks!

I absolutely adore AVA. Two way dependency tracking is underhyped.

You've done amazing work. Thank you.

Though off topic. Could you explain a bit more on what you mean by "two way dependency tracking" ? Something along the lines of why that is useful and how ava helps in this would be really helpful.

In watch mode, most testing frameworks can detect that you saved your test file and re-run it.

With AVA, if you save the file your test is targeting, it will re-run your test.

And every other test targeting it.

And every other test that has a nested dependency on it.

Reply on news.ycombinator.com