Flashlight, a Lighthouse for Mobile Apps

Hi, everyone. I'm Alex. I've been working with React Native for the past eight years at BAM, and today I'm very happy to talk to you about measuring mobile app's performance. I've always wanted to have an easy way to know whether the performance of my app was good or not. And I've always been jealous of web developers for Lighthouse. Have you ever used Lighthouse? You can go to any website and with it, with a simple few clicks, just generate a performance report and get a performance score for the web page you visited, which is pretty neat, right?

Wouldn't it be nice if we had something similar, but for mobile apps? Well, today I'm very proud to present you our new tool called Flashlight. It's meant as a mobile Lighthouse. So let's see how it works. You can go right now, if you like, on app.flashlight.dev and upload any Android app, iOS support is on the way. So let's say, for example, this is sharing my phone. We have an app like this, like I have sort of a Netflix clone. I can generate a release APK for it and upload it right here. And then I can configure what I want Flashlight to measure. So by default, you can measure app start performance quite easily. You just need to input here some text that will appear when the app has loaded. For example, here when my app has loaded, I know that family and history will appear so I can just input family here, and then click send me my performance report.

Now a new page opens, depending on traffic, it should take roughly 10 minutes to finish and Flashlight to get the report. So I'm going to split this up a little bit. So when Flashlight is finally done, after roughly 10 minutes, this is what you would see. You would see that essentially what happened is that Flashlight has started the app 10 times and measured performance and what's really nice is that you have this see report button and if you click it, boom, you have your performance report. And in our case, we can see that it's pretty bad. Luckily, Flashlight gives us some performance metrics to understand why it's that bad.

Here we can see, for example, that this one here is the one that seems to be problematic. High CPU usage. We see that we have a thread using a lot of CPU for a lot of time, a thread called mqtjs. We can check the graphs. So we have frame rates, we have total CPU usage and we have CPU usage per thread and we can see again mqtjs in fact, basically for the whole duration of measure it's really really high. It uses way too much CPU. Okay, we can ask ourselves, what is mqtjs? You guessed it, it's the JS Thread. You never want this guy to be close to 100% of CPU usage because then that's the same as having zero JSFPS, your app would not respond to anything. The JS Thread is blocked. So, that's what happens when we open our app, basically, and flashlight is telling us we have a big issue. Note that actually Flashlight is running on a real low-end android device, a Samsung Galaxy A10s by default. So on a low-end device yeah, performance is really bad. What can we do to fix? Well, our app is basically a vertical list composed of horizontal nested lists. And we're using flat lists for both of those, horizontal and vertical. But let's see what happens if we change to using the Shopify component called Flashlist. Then we can just regenerate our APK and do exactly the same thing as before to get a new report with Flashlist. And boom! Ah, this is much better. We get a score of 75 out of 100. But what's really nice is we can actually go onto the history section here. We can click both reports, so the first one, MyAppWithFlatlist and the second one called Flashlist. And we can open the comparison view. We have the video as well. I'm just going to close them. And for example, if I jump to the CPU usage per thread, we can see quite easily that yeah, in green with Flashlist, CPU usage of the Jez thread is in fact much better with Flashlist.

But what's nice with Flashlight is you can also use it locally to quickly measure performance changes in your app with our open source CLI. It's very simple to install. And then, for example, if you have a device plugged in with a React native app running, you can just run Flashlight measure. Then auto detect to automatically detect the currently focused app. And let's say I want to measure scrolling performance. I can hit start measuring. Start scrolling in my app. And it will measure the performance this scroll. You can see the score actually changing rapidly to a zero. Again, we have a massive issue on the JS thread when scrolling.

So let's say you implemented a fix. For example, switching from flat list to flash list. We can reload. And we can basically do the same thing again. Let's start measuring again. Scroll again. And we can see that now, performance is actually much better.

That's it for this short presentation of Flashlight. If you want to know more about what it can do, you can check out the docs at docs.flashlight.dev or you can also check out this article about comparing list scrolling performance in a React Native app between FlatList and FlashList, which goes into more details. Otherwise, if you have any questions you can also ping me on Twitter or GitHub.