Flipper: The Extensible DevTool Platform for React Native

Bookmark

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

32 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Flipper is an extensible dev tool platform for React Native, developed at Facebook, that allows inspection of the React development tree and native elements. It offers plugins for image cache inspection, preference modification, and network requests. Flipper can be used to build application-specific plugins and integrates with Redux and ReactorTron. The tool is undergoing a major redesign with new features like dark mode and a standardized component library. Maintainers can debug plugins within plugins and there are plans to integrate with GraphQL.

1. Introduction to Flipper and React Native

Short description:

Welcome to my talk about Flipper, the extensible dev tool platform for React Native. React Native provides a fast feedback loop, optimizing development speed. Flipper is a mobile app development platform developed at Facebook, used by all our mobile engineers. We introduced support for React Native and I'll show you a quick demo. Download Flipper, start the emulator, and load the project. Flipper allows us to inspect the React development tree and native elements, making changes if needed.

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

2. Exploring Flipper and Building a Bitcoin App

Short description:

We add native elements used by React Native and explore the available plugins, including image cache inspection, preference modification, and the powerful network plugin. In this demo, we build a small application that shows Bitcoin data using components like coin view and coin item. We can inspect the data using console.log, but Flipper provides richer capabilities such as log level, copying details, and searching. We can also directly inspect network requests.

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.

3. Inspecting Data and Developing Plugins

Short description:

Flipper provides an interactive tree to inspect data in the request body. Attaching the Hermes debugger allows for breakpoint debugging without relying on network requests. Flipper is an extensible platform with generic and application-specific plugins. Developing a Flipper plugin involves adding JavaScript to the Flipper desktop and extending the mobile application. In the next demo, we'll build a plugin to aggregate and visualize Bitcoin data over time. We remove the consulted log and scaffold a new plugin using the paper package.

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.

4. Implementing the Coins Plugin and Sending Data

Short description:

When starting, there is a user generator that stores events and dumps the data to the screen. Restarting Flipper loads our plugin. We implement the plugin in the mobile application, handling events and sending data to the desktop. The plugin is loaded conditionally for development builds. Native bindings are installed, and data is sent to the Flipper desk. After restarting the Android application and enabling the plugin, data is displayed in the Flipper UI, ordered per coin and aggregated.

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.

5. Building Application-Specific Plugins

Short description:

We can use Flipper as a remote control for our mobile application, which is convenient for mobile development. In the next demo, we introduce a pause button to stop refreshing data while debugging. By sending a pause event to the mobile application, we toggle the current state using the setPause method. The effect now depends on the current pause state, allowing us to return early from the effect when paused. This enables us to visualize and control the behavior of our mobile application using Flipper.

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.

6. Community Plugins: ReactorTron and Redux Debugger

Short description:

There are two community plugins worth mentioning: ReactorTron and Redux debugger. ReactorTron integrates the ReactorTron stack into Flipper, providing debug utilities for native applications that use specific stacks like Redux or MobXtate3. The Redux debugger is a community plugin that allows for easy debugging of Redux stores by displaying events and showing diffs with adjacent actions.

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.

7. Using the Redux Debugger Plugin

Short description:

In this part, I demonstrate the Redux debugger, a community plugin for Flipper. I create a simple Redux store and use the plugin as middleware. The debugger shows events and diffs with adjacent actions. Flipper is an extensible platform with ready-to-use components. We're refreshing the design and improving extensibility. Flipper is open source, so feel free to contribute. Flipper is a powerful development platform for React Native, providing tools to analyze applications.

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.

QnA

Flipper Q&A and Future

Short description:

Clearly, it's a default Flipper. Let's get started with some questions from the community. Can you use Flipper without Hermes? Does Flipper work with Expo? I want to hear about the future of Flippr and what else you would like to learn from it. We're working on a completely redesigned Flipper with dark mode and a standardized component library. It provides a new API.

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.

Flipper Redesign and Community Plugins

Short description:

Flipper is undergoing a major redesign, making it easier to extend and introducing new features like dark mode. Additionally, there are three interesting community plugins: Redux, Reactortron, and a performance measurement plugin for native app boot time.

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.

Flipper Plugin Integration and Maintainer Life

Short description:

There's a plugin that measures your native application's boot performance, taking advantage of Flipper's integration at the native level. Debugging plugins within plugins is possible through Chrome DevTools or by running the source version of Flipper. As a maintainer, the early phase is the most exciting, while the later phase focuses on keeping things running. One plugin idea is to integrate with GraphQL, such as Apollo, to manipulate requests and add value outside of Facebook.

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.

Q&A and Conclusion

Short description:

Just DM me if you have any questions. We use emojis a lot, and sometimes I make them up. The name Flipper was chosen due to a previous name conflict. Thank you for joining us, Michelle. If you want to hang out, join the Zoom room. Goodbye!

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance
&
user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript
You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.
A brief history of JavaScript package managers
The isolated node_modules structure created pnpm
What makes pnpm so fast
What makes pnpm disk space efficient
Monorepo support
Managing Node.js versions with pnpm


React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community


React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React
&
React Native in combination.


React Advanced Conference 2021React Advanced Conference 2021
27 min
Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon.


Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Workshop Free
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.
The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.
React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.


React Summit 2022React Summit 2022
118 min
Detox 101: How to write stable end-to-end tests for your React Native application
Workshop Free
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and
used by React Native itself
as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites
- iOS/Android: MacOS Catalina or newer
- Android only: Linux
-
Install before the workshop
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Workshop Free
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.
You will know:
- Quick presentation about what FlashList, why we built, etc.
- Migrating from FlatList to FlashList
- Teaching how to write a performant list
- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)
- Using the Flipper plugins (flame graph, our lists profiler, UI
&
JS FPS profiler, etc.)
- Optimizing performance of FlashList by using more advanced props like `getType`
- 5-6 sample tasks where we’ll uncover and fix issues together
- Q
&
A with Shopify team
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Workshop
- Intro - Cleo
&
our mission
- What we want to build, how it fits into our product
&
purpose, run through designs
- Getting started with environment set up
&
“hello world”
- Intro to React Native Animation
- Step 1: Spinning the wheel on a button press
- Step 2: Dragging the wheel to give it velocity
- Step 3: Adding friction to the wheel to slow it down
- Step 4 (stretch): Adding haptics for an immersive feel


React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
Workshop Free
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.
you will know:
- The different kinds React Native tests, and where component tests fit in
- A mental model for thinking about the inputs and outputs of the components you test
- Options for selecting text, image, and native code elements to verify and interact with them
- The value of mocks and why they shouldn’t be avoided
- The challenges with asynchrony in RNTL tests and how to handle them
- Options for handling native functions and components in your JavaScript tests
Prerequisites:
- Familiarity with building applications with React Native
- Basic experience writing automated tests with Jest or another unit testing framework
- You do not need any experience with React Native Testing Library
- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on
https://docs.expo.dev/get-started/create-a-new-app/