Figure out Haul Dashboard

[grabbou]

We were chatting today that it would be great to do Ken Wheeler like webpack-dashboard but for React Native, showing you logs, network stuff, performance (frames per second, CPU, etc).

We will be investigating that and will try to come up with mockups. Ideas appreciated.

CC: @Kureev for your idea on network logging

[skellock]

Any interest collaborating on Reactotron? We’re ramping up on v2 shortly. Could even resurrect our original CLI if there was interest.

[Kureev]

Hah, interesting. My idea of network logging was born after I took a look under the hood of reactotron. I think if we can merge some features of Reactotron into Haul Dashboard, that would be awesome.

Regarding the idea itself (Haul Dashboard):

• Great, I was thinking about to build a UI for Haul/Metro as well 🙌
• I'd rather focus on RN-specific things: managing packages (so we can pause packager, install/remove npm package, link/unlink it, unpause packager), provide network throttling options and some more (let me know if you're interested) 🤔
• I'm all for cooperation here. Community will benefit from moving packager to the new level 🚀

Should we discuss it on Slack and document our conclusions here?

[grabbou]

Yeah, I believe this is fantastic idea @Kureev. There's that #haul channel on our open source Slack. I believe we can sit down and discuss it at some point.

We are having weekly meetings on Wednesdays - 12pm -> how about you join next one on Slack and we discuss it there?

[grabbou]

@skellock haven't played with it much yet so hard to tell. Happy to check it out!

[skellock]

Reactotron TL;DR

• There's two parts. client and server and they talk via web sockets passing json objects of a "known" protocol. [1]

• The client comes as a library [2] that plugs into the RN or web app you're making.

• The server also comes as a library that plugins into an Electron app [3]. This used to be a CLI (r.i.p.) but i "upgraded" it when i launched 1.0.

• It has many great features [4] for RN dev. From basic logging [5], to redux plugins, to tracking network requests, and async storage, etc.

• enabling reactotron in your app is pretty easy [6]

The Pitch

Let's make a new shared lib that both haul and reactotron use to communicate from app-to-server.

If haul had the ability to inject express middleware, I suspect we could use that channel with websockets to host the reactotron-core-server functionality.

With that in place, you could tap into this (event emitter & a few functions?) to build your own baked-in haul-cli dashboard, but start out of the gate with a bunch of features.

And both haul and the Reactotron Electron app could share a metric ass tonne of cool stuff. [7]

Next?

I can put together a proof-of-concept together inside haul (i wouldn't have time until this weekend) if you kinda need to see this action first. brace yourself, it won't be pretty, but it'll be awesome!

Then, if you're in, we could firm up the reactotron client/server protocol [8].

My game plan (and @rmevans9 as well) for 2.0 is to focus on building a plugin system for the Electron app & to bring more RN things online.

Others Who Want To Help

/cc @rmevans9 - he's helping me built v2 and built many features in v1 /cc @GantMan - huge evangelist and also contributor /cc @jamonholmgren - my employer who goes out of his way to let me work on OSS

Others Who Might Be Interested?

• Ram from Microsoft has a lib that would be a good fit to use this... https://github.com/nparashuram/maya-kai
• the storybook crew?
• any else who needs to communicate between their RN app and a "server/app".

Finally

💩 That wasn't TL;DR at all.

1. current socket.io, i have a branch where i've converted this to websockets. ws on the server, and straight up websockets on the front.
2. yarn add -D reactotron-react-native or npm i -D reactototron-react-js -- we support both platforms
3. Enhanced copy & paste, dragging images, better keystroke functionality, a lot more.
4. Some links: 4a. https://infinite-red-staging.herokuapp.com/reactotron 4b. https://www.youtube.com/watch?v=tPBRfxswDjA 4c. brew cask install reactotron 4d. https://twitter.com/reactotron <-- lots of pics
5. Reactotron.log({ a: 1, b: 2, wtf: this.props })
6. example:

// on startup
import Reactotron from 'reactotron-react-native'

Reactotron
  .configure() // can change things like ip address, port, etc.
  .use(plugin) // can use plugins like `redux`, `redux-saga` or make your own
  .useReactNative() // or use a nice preset to give you a lot
  .connect() // connect to the app (server)

// then elsewhere, you use it within your app to do things like:

Reactotron.clear() // clears the app's logs
Reactotron.log('hi') // prints strings or objects
Reactotron.display({ name: 'HAUL', value: this.props, preview: 'wtf' }) // prints nicer stuff

// ghetto benchmarks
const bench = Reactotron.benchmark('please go faster')
await slowThings()
bench.stop()

7. For example: 7a. you: tap s to save a copy of the redux state tree to disk 7b. us: click 📷 to save a copy of the redux state tree to disk
8. A few things would have to change from it's current implementation. A few examples: 8a. * during handshake I'd like the clients to identify capabilities (device/plugins/etc) 8b. i'd like to have the notion of "active" and "passive" clients for replaying certain types of messages (great for automation, remote control, and for remote pair programming) 8c. this wouldn't have to happen immediately, we could absolutely thin slice this to start.

[Kureev]

Great proposal, @skellock!

I only have one concern regarding coupling Haul with Reactotron. I think it would be great if we can conform to Reactotron protocol so we can use its plugins etc, but depending on the package itself would be an overkill for me (I'd like to hear your opinion, @grabbou).

[grabbou]

Yeah, I totally agree with you @Kureev. I still haven't had enough time to dive into Reactotron much yet, but I quite like it. However, I think that using its API and ecosystem but with a different frontend (Haul Dashboard via CLI) would make a lot of sense and resolve quite a few problems when it comes to writing such integration.

[grabbou]

@Kureev, are you still interested in doing it? I saw you writing this idea at Metro Bundler discord. I just wanted to express that I am extremely interested in helping you with this (maybe by providing some UX, however I know you are awesome at this as well)

[Kureev]

Yeah, I am. Just need to see someone really aims for building it. I don't have enough resources to handle it on my own. Will be nice to plan something serious there.

In my mind, UI should be pluggable. That said, I think we need to:

• Create a spec/contract that packagers should comply with in order to be able to use it (UI)
• Create a PoC UI and bridge create adapter for Haul so it complies to the standard and therefore can be used with the UI

If you wonder which functionality for the PoC I have in mind:

• Start/Stop/Restart packager
• Bundle information

I'm very open for collaboration if by any chance you have similar vision.

[Kureev]

Any updates/thoughts so far?

[grabbou]

Thanks for the write-up. In general, I would love to see this sort of functionality in the wild, compatible with Haul.

Unfortunately, we (Haul team at Callstack) are busy as well in the upcoming quarter and it's unlikely we will pick this up ourselves. However, if there's any interest from outside collaborators to help to land this, I would be more than happy.

[Kureev]

@grabbou I can pick it up concept-wise, but for the UI solution I would love to pair up with someone who has UI design skills. Do you know someone who may be interested?

[grabbou]

Unfortunately, I don't. Let's tag this issue as help wanted to see if there's any interest in the future.

[thymikee]

cc @zamotany who's been working on something similar (CLI) recently.