Video details

Flipper: The React Native DevTool | Michel Weststrate


Michel Weststrate

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used by the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps.
Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool.
And best of all: Flipper is extensible, so let's build our own plugin while at it!


Hi, folks, welcome to my talk about Flipper, the extensible deathtoll platform for among other. My name is Michel Weststrate and I'm working on Flipper. And so at Facebook, we discovered that your name is quite an awesome development, some of our developments line basically because it provides this very fast feedback loop. Basically optimises. You have to be making and seeing an on screen. So that's pretty cool and that's pretty important to include developing states where it is not a question we have to ask and how fast can figure out which you have to make. And so Dennis basically 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 Nagase. And so I'm going to give you a picture of how that's going to look like. So first of all, we're going to download Flippa websites. Now, I skip this part because I already read some of it, and when you start to depart, you stated as a pretty. So, for example, I've had a small education, and it is education we've to show based on data. So here we have to go. It's a freshly generated project, and the only chance I'm going to make is to enable Herm's. And so with that, I'm going to stocks them later, I'm going to start my project. So that takes a little while. We're done now and here we have a freshly made budget. And immediately we see that Flipper has a lot of convent's. So on the left, the sections we can recognize the first section as our applications declines application in this case and it shows all the plug ins are not connected to. This application. And so we also see programs connected to the device itself, for example, the locks. And secondly, we have this connection to the metro itself, so it allows us, for example, to inspect the locks, but also to inspect the development train. So were we can directly use the skills and inspect the. But what's even cooler is because Flipper is a tool that was developed for native mobile development and means that we can also inspect the native elements that are used by our nails. So if he was allowed to speak, we can expect a certain elements and we can even make changes to its. So, for example, if I change the text over here. You will see that that's applies to what's happening on the screen, so now we're actually adding the native elements used by native. And as weapons of war against Xbox Live inspection, seeing the preferences are multiplying then. And a very powerful obligation as a network, so this basically allows you to inspect all the matter in question not being made by our. And we're going to dive deeper into that. But so this is basically what you gets out of the books if you start to out on a. Now, that's what I want to today for this demo as a small indication of Joe's Bitcoin like And so. I'm going to take a little shortcuts and based on files I have on my clipboard. And basically replace that Etta James with some UI and some logic that's just Bitcoin data and put. And so we show some Bitcoin data. So we have this quite a few components and fetches data and then it uses all the data show. Next, I just is going to be components and deadenders. So, for example, if I have a client, I can inspect once what's in there. So I do. That's what it says that. One way to figure is a look at the data I received. And let's take a look at the Metro. So what I see now is that it's sprinting, although they were. But I can take a look at the same data from Filiba, which is a lot richer. So this is basically the same. But if you in this and we have a bit more accountability so I can feel all I can, I can search. So this is a bit more powerful. And actually, we don't even need that console because we could just have looked directly at our being sent. So, for example, I can expect one of those requests, and since this is a decent response, I get this nice interactive screen that shows me all the data available and the request for. So this is an even easier way to figure out what is going on and which data is arriving application. Even more powerful is that that's in your heart. So that's why I'm determined to give that star. So what I can do when he is in the debate is fine, that's not a component, a set of breakpoints, and then the next time we have a vendor had to break once and we inspect the object. So now this is a much more general search and doesn't rely on Richard Quest to be able to see what's happening on. So basically, we found different ways of inspecting our application, which are all really hot when you don't have available. So there's a lot of building power to Flippa, but it's actually not all that Phillippa is an extensible platform. And if, for example, you have an application, when we're looking at Facebook, that's probably going to have that allows you to inspect several features, searches and application. And so for us, accessibility is very important and basically two types of prevention, and they didn't do the same with their conception, very different. So first of all, there are the generic versions these were we saw so far, which generically apply to a stick to a text that. So, for example, inspecting network requests may also be EPIK Asia-Pacific rebalance. So applicants that have knowledge about the meaning of your application and your investment experience, and that's what. And I'm going to be a small example of that. So when it comes to developing a Republican. There are still parts that need to be implemented. So first of all, there is some JavaScript that needs to be added to that separate desktop just to make sure that you have like a nice UI which can share today. Secondly, you have to extend education to enrich our obligation and, for example, send events to that Schnipper Destil. So what I want to do and then next time up 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 very hard. But just looking at the luxury network that's passing by. So when we look at it looks we see a lot of data, but we can't really tell whether what the causes of death squads are doing, so let's build a living for that. So first, we must also look into this area. And next, we're going to get involved in a group of. So Professor Terminal get the first victory and we settled the whole thing. And so that's been important because that's one alliance, the desktop and the mobile side of things. We met Reinstallation. And let's take a look at what has been generated for us. So when we start, there is basically a that takes the events and by default, just awesome and as a simply lie that basically dumps all the data to the screen, which we have so far. So unnecessary. That should not happen again. And so if you go to the management screen, we see now that's has been. So but so far, we only have the distal side of things, so let's head back to our mobile application and implement our. So for now, I'm just going to do this and this father, so I'm going to begin with first and foremost, I'd remember to connect to the desolate side of things. Now, secondly, it has to handle a few events. So, for example, it will receive more connected events with a connection whenever the user selects the light. And it means that a connection is open to development and we can stop sending messages. So for then I introduce a set of methods and given a connection that send some data over the wire to the desktop. Now, I want to not only if I'm having a gentleman Baltes sound prediction, I want to go to be treated in a way. So that's why I'm missional. And now I have to install that. Bindings for natives as well. I once. So that's happening in the background. And now whenever we receive new data and we're developing bills, I'm going to send a bill after the. So this should basically be everything we need to our moral obligation to our. Now, I'm going to restock my Android division just one time because we just saw someone at expensive and for most people, bombing's. And also, I'm going to stock and watch Mark to make sure our desktop, again compiles every time I make some changes in that. So let's work up to be. Now, we know that some data. And now A is also visible and line, so I have never again, and now we see the data coming through and being dumped on the screen. So this kind of moves in a way and works. Now, do I suppose so, again, I read something much about to make this nice. Chances are picked up. And so if we refresh the data, what you see now is that the data is growing and we aggregated data as well so that if a second request comes in, we can show trends between declarant and previous. So this is very specific for our application. So basically, we didn't know what one way integration where we generate data on the mobile application and displayed. We can also do a generator and you can basically use Flipper as a remote control for our mobile application, and that is pretty convenient because especially when doing mobile development visually on your screen to introduce the. So in the next demo, what I want to make sure is that rather than refreshing the data all the time and the background, which can be pretty annoying when you're debugging, I want to be able to close this process. So that as a developer, I'm not looking at something that's coming in. So let's start by introducing our and simple pause button. And if I click, it's I'm going to send in Defence Force so the client segments, the mobile application. So desperate support. The beating shows up nicely, and now, of course, we have to get some data on the other side's. And so that's where that connection object comes in handy as well. So on the connection, I can start receiving new events. So I used my connection with perceive and I'm going to put the sports events that might have some parents disguised as a special responder, which we can watch against them, there was nothing in this case. But on this event, we call the police methods. And in the polls, we're going to go a step necessary thing and grant states. Now set that is basically in your state's definition, so that which we passed to the beginning again is developing. So the last thing we have to do is make sure that our effect now depends on where this was set and if the sentence falls, then we can return early from the effects rather than fetching. Let's wait for jury. No, no. It's taken a few seconds, Miles, all the data from the direness. And so now I can press a button and it will stop a new network requests. Now, this is a little hard to see now, so let's visualize it just for this demo. So we're going to double standards. We say, let's wait to refresh. Let's wait until the end point, despite this, some data. Now, if I have to assume that the states and the nation changes, so basically we have some remote control from inside Cuba to. Interactive on mobile application and alter its behavior. So that is how we can build applications specifically against. But since it's also possible to build generic events, require some community programs available and there are, do I want to highlight shortly? The first one is Director Tom. So what this does is the tools they give for applications that use sticks, for example, redux because they try and sell off the reactor dump again, directed as can be integrated, and you directly from Flippa, which is great, because then that's all in one place. Another one, which is pretty cool is the radix. Again, this is a community event, and I'm going to quickly show you how to use it. I already installed restrictions, checking our websites just from example, I'm going to create a reading store, the most simple reducer possible, which takes some action and simply makes it the next step. Again, this is just the show, the. And so if I could really start. And this is a gentleman I'm going to live in and uses this as middleware to read. So the store now, whenever I receive something that I'm going to and especially when I receive. And now if I had no. There news. So I can enable this now. And as soon as some new data arrives. We see all the events coming in and actually even shows us that it's less than the previous inspections. Or we can sit and look at it as a holistic whole. That's the nice thing about this, is that it's like really maybe two glasses, but the reason is that like all components you see over here, like the screen displaying the day you does, are all components which are anything. So Flipper is a pretty accessible platform. And I remember as being pretty great as well, if you intend to be applicants and why? Because we're design and component library. And also, we're going to improve the extensibility to make it even easier to build up again, that is now. So Flip is open. So feel free to contribute by writing or by improving itself. So that is basically what I wanted to share with you. I think it's a pretty awesome platform right now, providing a lot of boxes to some larger applications. So thanks for listening. And if you have any questions, just remain for the Q&A. Thanks.