Flipper: The Extensible DevTool Platform for React Native

♪ Hi, folks. Welcome to my talk about Flipper, the extensible dev tool platform for, among others, React Native. My name is Michel Estrada and I'm working at Facebook on Flipper.

And so at Facebook, we discovered that React Native is quite an awesome development stack for mobile developments. Why? Basically, because it provides this very fast feedback loop. And, basically, it optimizes the time you have between making changes in the code and seeing it on screen. So that's pretty cool and it's pretty important to get a good development speed.

But there's another question we have to ask, and it's like, how fast can you figure out which change you have to make? And so that is basically where Flipper comes in. Flipper is a mobile app development platform developed at Facebook. And it's used by, basically, all of our mobile engineers. And so earlier this year, we introduced support for React Native. And so I'm going to give you a quick show of how that's going to look like.

So first of all, we're going to download Flipper from our website. Now I skipped this part because I already preinstalled it. And when you start Flipper, you see that there's a pretty empty canvas. So for this demo, I've prepared a small application, and in this application, we're going to show some Bitcoin data. So here we have the code. It's a freshly generated React Native project. And the only change I'm going to make is to enable Hermes. And so with that, I'm going to start the emulator, and I'm going to start my project. So that takes a little while, but we're done. It's loading now, and here we have a freshly-made project. And immediately we see that Flipper has a lot of contents. So on the left, there's two sections we can recognize. The first section is our application, so the coins application in this case, and it shows all the plugins that are connected to this application. And so we also see plugins connected to the device itself, for example, the logs. And secondly, we have this connection to the metrobundler itself, so it allows us, for example, to inspect the logs, but also to inspect the React development tree. So with Flipper, we can directly use the React Dev tools and inspect the layouts. But what's even cooler is because Flipper is a tool that was developed for native mobile development, it means that we can also inspect the native elements that are used by native to create our layout. So if you use the layout inspector, we can inspect a certain element and can even make changes to it.

So for example, if I change the text over here, you will immediately see that that applies to what's happening on the screen. So now we're actually adding the native elements used by React Native. And there's a bunch of more plugins available out of the box, like the image cache inspection, seeing the preferences and modifying them. And a very powerful plugin is the network plugin. So this basically allows you to inspect all the network requests that are being made by our application. And we're going to dive a little bit deeper into that.

So this is basically what you get out of the box if you start Flipper on a fresh React Native project. And now that's what I want to build today for this demo as a small application that shows Bitcoin data like in this mockup. And so I'm going to take a little shortcut and paste some files I already have on my clipboard. And this basically replaced Apps.js and with some UI and some logic that fetches Bitcoin from a remote endpoint. And so we show some Bitcoin data with its own bitting components. So we have this coin view component. It fetches the data and it uses an effect. And then it uses a flatlist to map over all the data and show it. Next there is this coin item component. And that renders mutual records.

So for example, if I have a coin, I can inspect what's in there. So we have rank and icon, but what else is there? One way to figure it out is to use console.log. So I print the data I receive. And let's take a look at Metro Bundler. So what I see now is that it's printing all the data. But I can take a look at the same data from Flipper, which is a not richer. So this is basically the same log. But by viewing this in Flipper, we have a bit more capabilities. So I can fill in log level. I can copy details. I can search. So this is a bit more powerful. And actually, we don't even need that console.log, because we could just have looked directly at the network request that are being sent. So for example, I can inspect one of those network requests.

And since this is a JSON response, I get this nice interactive tree that shows me all the data available in the request body. So this is an even easier way to figure out what is going on and which data is arriving in my application.

Even more powerful is attaching the Hermes debugger. So that's why I'm able to the Hermes debugger at the start. So what I can do when using the debugger is find that coin item component, set a breakpoint, and then the next time we have a rendering, we'll hit the breakpoint, and can inspect the object. So now this is a much more general solution and doesn't rely on network request to be able to see what's happening in our application.

So basically, we found different ways of inspecting our application, which are all really hard when you don't have Flipper available. So there's a lot of build and power to Flipper, but that's actually not all of it. Flipper is an extensible platform. And if, for example, you open an application when working at Facebook, there's probably like 50 plugins you'll have that allows you to inspect several feature services in the application. And so, for us, extensibility is very important. And basically, there are two types of plugins you can develop. They're technically the same, but they're conceptually very different.

So first of all, there are the generic plugins. These are the plugins we sell so far, which generically apply to a stack to a text stack. So for example, Inspecting Network Request Layout, which can also build application-specific plugins. So plugins that have nodes about the meaning of your application and enrich your development experience in that way. And I'm going to build a small example of that.

So when it comes to developing a Flipper plugin, there's two parts that need to be implemented. So first of all, there is some JavaScript that needs to be added to the Flipper desktop, just to make sure that you have like nice UI which you can share the data. Secondly, you have to extend the mobile application to enrich your application and, for example, send events to the Flipper desktop. So what I want to do in the next demo is to basically aggregate Bitcoin data we have and aggregate over time to be able to see trends. So that is something that would be fairly hard by just looking at the logs with native requests that are passing by. So let's build a plugin for that.

So first we remove the consulted log we introduced earlier, and next we're going to scaffold a new plugin using paper package. So we have a fresh terminal, get a fresh directory, and we scaffold the whole thing using paper package. And so we give the ID coins, that's pretty important because that's what aligns the desktop and the mobile side of things. We wait for the installation, and let's take a look at what has been generated for us. So when we start, there is basically a user generator that takes the events and by default just stores them.

So when we start, there is basically a user generator that takes the events and by default just stores them. And as a reasonably why that basically dumps all the data to the screen which we have so far. So, and let's restart flipper, that should load our plugin. And so if you go to the plugin management screen, you see now that's our coins plugin has been loaded.

So, but so far we only have the desktop side of things. So let's head back to our mobile application and implement our plugin. So for now I'm just going to do this in this file directly. So I created coins plugin with first has to expose this ID remember to connect to the desktop side of things. And secondly, it has to handle a few events. So for example, it will receive a connected event with a connection whenever the user selects this plugin in the UI. And that means that a connection is open to developer desktop and we can start sending messages. So for that I introduce a send coins methods and given a connection and send some data over the wire to the desktop.

Now I want to load the plugin only if I'm having a development build. So prediction builds are once going to be tree-shaking ways, so that's why I make it conditional. And now I have to install the triple bindings for native as well. I need to do that only once. So that's happening in the background. And now whenever we receive new data and we're in the development build, I'm going to send that data to the Flippr desk. So this should basically be everything we need to wire the mobile application to our new plugin. Now I'm going to restart my Android application just one time because we just installed my native dependencies in front of the Flippr bindings. And also I'm going to start Flipr packets in watch mode to make sure our desktop again gets recompiled every time I make some changes in there. So let's wait for the app to be loaded. There we go, it has some data. And now our plugin is also visible in the Flippr UI. So I've enabled the plugin and now we see the data coming through and being dumped on the screen. So this kind of proves that a wiring works. Now the UI so far is a little bit ugly. So again, I've got something on my clipboard to make this nice. And the chances are picked up. And so if we refresh the data, what you see now is that the data is ordered per coin and we aggregate that as well.

So that's if a second request comes in, we can show the trends between the current and previous states. So this is very specific for our application.

So basically we did now a one-way integration where we generate data on the mobile application and display the flipper. We can also do it the other way around. We can basically use flipper as a remote control for our mobile application. And that is pretty convenient because especially when doing mobile development, there's usually not a lot of place on your screen to introduce debug utilities.

So in the next demo, what I want to make sure is that rather than refreshing the data all the time in the background, which can be pretty annoying when you're debugging, I want to be able to pause this process so that as a developer, I'm not looking at something and in the meantime, new data is coming in. So let's start by introducing in our desktop plugin in the button a simple pause button. And if I click it, I'm going to send a new event called pause to the client. So that's the mobile application. So that's pretty straightforward. The button shows up nicely. And now, of course, we have to process the data on the other side. And so that's where that connection objects comes in handy as well. So on the connection, I can start receiving new events. So I use the method connection.receive, and I'm going to, for this post event, that might have some parents, not in this case, and it also has a responder, which we can, which we can send data with, nothing in this case, but on this event, we call the pause method. And in the pause method, we're going to call a setPause method, if you have such a thing, and toggle the current state. Now, setPause, that is basically a new state, a data function, which we pass to the plugin, again, in a development build. So the last thing we have to do is to make sure that our effect now depends on the current sPause state. And if the current state is paused, then we can return early from the effect, rather than fetching data. Let's wait for the refresh, again. There we go. It's taken a few seconds now to load the data from 10 points, but there it is. And so now I can press the pause button and it will stop fetching new network requests. Now, this is a little bit hard to see now, so let's visualize it just for this demo. So we're in the paused state, we save it, wait for the refresh. Let's wait until the endpoint is back, and there it is, some data. And now if I click the button, you see immediately that the state and the application changes. So basically we have now built a remote control from inside Flippr to interact with our mobile application and alter its behavior. So that is how you can build application-specific plugins.

But since it's also possible to build generic plugins, there are quite some community plugins available. And there are two I want to highlight shortly. The first one is the ReactorTron plugin. So what this does is, if you're not familiar with the ReactorTron tools, they give debug utilities for native, for applications that use specific things, as stacks. For example, Redux or MobXtate3. And so with the ReactorTron plugin, the ReactorTron stack can be integrated and used directly from Flipper, which is great because then you have all your debug utilities in one place.

Another one which is pretty cool, is the Redux debugger. Again, this is a community plugin, and I'm going to quickly show you how to use it. I already installed it, but for installation instructions, check their website. But just for this demo, I'm going to create a Redux store, the most simple Redux possible, which takes an action and simply makes its payloads to the next state. Again, this is just to show the wiring.

And so if I create a Redux store, and this is a development build, I'm going to load the plugin and use it as middleware to Redux. So I created the store, now whenever I receive some new data, I'm going to dispatch the new data I received. And now, if I head back to a flipper, there it is. Okay. So I can enable this debugger now. And as soon as some new data arrives, we see all the events coming in. And actually, it even shows us the diff with the adjacent actions. Or we can look at a state as a holistic whole.

Now the nice thing about this plugin is that it's really not about, it's like maybe 200 lines of code. The reason is that all the components you see over here, like the screen, the div thing, the tables, the overview, those are all Flipper components, which are ready to use if you're building a plugin. So Flipper is a pretty extensible platform. And our roadmap is looking pretty great as well if you intend to build plugins. Why? Because we're refreshing the design, and component library, and also we're going to improve the extensibility to make it even easier to build a plugin than it is now. So Flipper is open source. Feel free to contribute either by writing fresh plugins or by improving Flipper itself. So that is basically what I wanted to share with you. I think Flipper is a pretty awesome development platform for eight natives, providing a lot of powerful tools to analyze your applications. So thanks for listening. And if you have any questions just remain for the Q&A. Thanks. Thanks for sitting with us. How's it going? Pretty good. Thanks. And yes, there's a Flipper emoji. I mean, a dolphin emoji.

Clearly, it's a default Flipper. Hopefully it will draw some in the chat.

All right. Let's get started with some questions from the community. A couple about Flipper and Paola asks, can you use Flipper if you're not using Hermes? Is Hermes, Hermes? So you can use Flipper fine without the Hermes engine. The only benefit the Hermes engine offers is you can use the debugger tools to like step to your codes if you're using Hermes. But like all the other features are available on any setup. Okay. Amazing. And Adam asks, does it work with Expo? Honestly, I've never tried. I expect it to work, but please tell me if it doesn't. If somebody knows, make sure to drop it in the chat. I don't know if anyone from Expo is here even. Cool.

I want to hear a little bit about how you see the future of Flippr and sort of what else would you like to learn from it? I'm actually pretty excited about it. And funny enough, this is the reason why I haven't been very public lately about Flippr, like not giving a lot of noise. And the reason is that we're changing to fundamental things. One is we're working on a completely redesigned, which looks pretty cool. It offers also dark mode. Yes. So we're working on this. And so we've redesigned, we support dark modes out of the box. So like we immediately incorporated it. But the benefit for our plugin authors is that we now use a standardized component library. So we were previously maintaining our own one. And that means like certain things were like really fancy on files and some basic things were missing just because like nobody ever needed it before. So what we do now is we're standardizing on the end component system. So that means that like you have immediately a gazillion components out of the box which are like well documented, well styles. And we just providing some additional higher level components on top of that like fancy tables and such. And also it provides a new API.

So a Feather was originally written. It was a Java application and later on we added Flow and TypeScript. Now we're redesigning the APIs to make sure that like way more easy to make sure new types. We use provideaimler out of the box if you're writing read users subscription mechanisms is way simpler.

So that should overall make the developer experience for extending flipper way, way more easy. So that's two things that are upcoming and we're still pretty excited about. So once they like, we're now testing them eternally at Facebook and like once we convinced the stable enough, we will make sure that they become available in the public version as well. That's exciting. So it's like a major major version. Yes. In principle, yes. That's very exciting. I can't wait, especially for dark mode.

Yes. You know, you mentioned in your talk, I think one or two community plugins, but I wanted to ask you about how the community is going and whether you had any like favorite plugins or like cool ones that you'd want to highlight. For the ones that are publicly available, there's three that are pretty interesting. One is the Redux plugin, which I showed in the talk. And I think the cool thing about that plugin is it's minimal effort, maximal results. So like, I don't think it was a lot of work for the authors to write it. It's a pretty short plugin, but it immediately gives you a lot of insight in what your Redux store is doing, et cetera.

The second one, which is cool to mention is Reactortron. Reactortron is an existing native tool. People might be using it standalone, but you can also use it as a Flipper plugin. It's basically the same thing, but just embedded in Flipper so that you have all your tools in one place. And what I find kind of funny about it is that Reactortron has its own plugin system. So you have this really big plugin inception where you have Reactortron as a plugin which itself has plugins. So that's kind of funny. And the third one, honestly, I forgot the name. But there's a plugin that measures your starter performance of how fast your native application boots.

But there's a plugin that measures your starter performance of how fast your native application boots. And then you can see that it really takes advantage of the fact that Flipper doesn't integrate just at the JavaScript level. It really integrates at the native C Sharp or Java level. So it's originally built for native application development. And so there you can see that that's really benefited. So you can get access to things you wouldn't be able to get access to from the JavaScript world.

That sounds really helpful actually. How do you debug the plugins within the plugins? Well, actually that's not very hard. So you can, it's open source so you can, so what you can do is like, you can just open the Chrome DevTools, there's actually a menu entry for that if you're running Flipper. So you go to View Developer Tools and then you get the normal Chrome Developer Tools because it's an electron application. But what's even better is if you want to go deep is you can check out the source version and run it from Flipper from source. There's just one yarn, install yarn, start away. It's really easy, just clone repo story. For the real hardcore Flippers.

Exactly, for the real hardcore stuff. And then you also get fast refresh and that kind of things which makes life way better if you like redesigning a lot and that kind of stuff. That's really cool. I asked Brandon this earlier, but obviously you've been very involved in open source with this and Imer and MobX. What is maintainer life like? And how is that going for you? I was thinking about it lately. So I noticed like for projects, like the first two years, it's really cool when they're growing and you have all those discussions with the early adopters and it's like super energizing. And after that, I noticed it's mostly about keeping the lights on, right? Like everything is settled, the scope is clear. Everything is generally working, like the ecosystem is continuously changing. So that's why you keep making changes as well. But then it's only keeping things running. So I definitely noticed I find like the early phase the most exciting one and then once like, everything is running, I'm like, okay, let's do something else.

Okay, I have one more question for you. If you had the choice to make any plugin for Flipper, whether serious or not, do you have one in mind that you would want to see built? Yes, I think one which we should really should have and which we don't have now is one that integrates with GraphQL, for example, with Apollo or something. So the interesting thing is inside Facebook, we have a separate GraphQL stack or basic, yes, so we have a plugin for that, but it doesn't add any value outside of Facebook and I think we really should have it for the source setup as well. So if you're using Apollo or something, or you Pericle that you can able to, that you can expect those requests as well and manipulate them. If anyone from Apollo or Ercle are listening to this, you know what you have to do.

Yeah, just DM me. Are your DMs open though? Yes. Okay, great. Let me just make sure there's no more questions from the audience. You did get some dolphins in the chat. So it is a real emoji. I wasn't sure. It happens to me sometimes that I think there is an emoji, but it doesn't exist. And I just made it up. So it's always good to check.

All right. I cannot tell you how often we use it inside the emoji. Oh, I bet. Were you involved with picking the name? No. I actually do like a few name changes in the past. So in the source code, you'll find now and then the name Sonar and that was because like there was another commercial product with the name Sonar. So I would switch to Flipper. It's still pretty close, but slightly different. And honestly, Flipper- I'll take them. Yeah, I like it.

All right, Michelle, thank you for hanging out with us. That's all the time we have, but Michelle will be in a Zoom room later, I believe, right after this, if you wanna hang out. And I'm gonna say thank you and goodbye and we'll reveal the poll afterwards. All right, perfect. See you.