If there's one thing that has set React community apart, it's the focus on developer experience (DX). Historically developer tools haven't been the greatest, but this is slowly and surely changing. Reactotron by Steve Kellock is a good example of this trend. Read on to learn more.
Hi. I’m Steve. I live with my wife and 2 boys (4 and 2) in Tiny, Canada (2 hours north of Toronto). It’s pretty rural. Farms and tractors. That sort of thing. =)
Been a professional dev for 23(ish?) years. First computer was a TI 99/4A. First real language was Turbo Pascal, which turned in long love affair with Borland Delphi.
I’m currently working with the crazy-awesome folks at Infinite Red doing mobile dev. React Native to be specific.
If the app you’re building had a Twitter feed, it’d be Reactotron. It streams to you information about your app’s state, API calls, benchmarks, exceptions, and other stuff.
If you love debuggers like gdb or lldb, this isn’t for you. If your debugging experience consists of well placed
console.log calls, then, welcome home my friend.
It plugs into your React JS or React Native app and relays info up to 1 of the 2 flavours of Reactotron running on your computer: Desktop or CLI.
If your app uses Redux, you can track state changes, subscribe to parts of your state tree, and even replay & dispatch actions. There are ways to pass data like you would
console.log and even supports images.
So, I consider
console.log the “other solution”. There’s something magical about it, right?
It’s first tool that most people turn to when something goes sideways. With little effort, it is placed in (hopefully) the right place to lift up the answer to your problem. Maybe an API response? Maybe a piece of poorly-behaving state?
Now, there are wonderful tools out there that specialize in specifics like breakpoints & code stepping. There are fantastic add-ons for working with just Redux.
Continue to use them. They’re great. The harder problems will require these heavy hitters.
But for me, streaming a series of manually-placed debug logs or automatically-streaming API calls & state changes is a pretty pleasant experience.
Classic itch scratching.
The apps I was helping build exceed the limit working memory & attention capacity of my aging brain.
This pattern was becoming too common:
Well, I couldn’t follow it.
I mean, I could. But it involved focusing; which is not a strength of mine. Squirrel!
And I didn’t want to litter log statements everywhere.
I just wanted to see the final state.
Or better yet, the journey of actions & network calls it made along the way.
I have a big list of candidates. The things that top that list are visualization problems.
Windows compatibility is up there too.
MobX is coming. Reactotron is built with MobX but can only track Redux-based state. Awk....ward.
Reactotron will likely stay in JS and try to service that passive-debugging need that lives between
console.log and a real debugger.
Reactotron started out as a CLI app.
But it wasn’t until I ported it to the desktop with Electron did I realize just how deep the web dev rabbit hole goes.
React Native feels more like web dev than mobile dev, but it wasn’t until I finished building the desktop version that it donned on me: this “way” to create apps is MUCH better.
Next few years will be a steamroller for “web” and compile-to-js.
The web isn’t just the web anymore. Web apps, mobile apps, and desktop apps are just apps, so try to focus on things that help you do one thing: ship.
Focusing only on the tech is a mistake. No stack will guarantee a successful product. There are always multiple right answers.
Don’t get hung up in the great “State Wars” of 2016 or the upcoming Battle of JS Compilers in 2017. You’ve got work to do.
I’d like to hear more about Ken Wheeler’s React adventures. Behind the hilarious persona is a guy delivering some crazy awesome open source React-based projects.
Janic Duplessis, the unsung hero of React Native, would be another good pick.