
Reactotron – CLI and OS X app for inspecting React Native and JS apps - skellock
https://github.com/reactotron/reactotron
======
jbhatab
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.

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

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

~~~
skellock
+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.

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

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

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

~~~
skellock
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!

~~~
yawgmoth
Excellent, didn't know about the update.

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

~~~
alfonsodev
Have a look to Electron [http://electron.atom.io/](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](https://github.com/chentsulin/electron-react-boilerplate)

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

~~~
scarlac
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...](https://facebook.github.io/react-
native/docs/performance.html)

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.

~~~
thewhitetulip
Thank you!

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

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

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

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

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

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

You've done amazing work. Thank you.

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

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

