Skip to main content

Command Palette

Search for a command to run...

Illuminating Mobile App Performance

Updated
3 min readView as Markdown
Illuminating Mobile App Performance
N

OPEN FOR WORK.

Hey there, i am Abderrahim, a passionate React Native & Expo developer, specializing in creating captivating mobile applications for exceptional user experiences. My knowledge encompasses JavaScript, React, React Native with Expo, TypeScript, Redux, GraphQL with Apollo Client, and cloud services like AWS and Firebase. I adapt swiftly to meet the specific needs of any project.

Good day, fellow tech wizards and React Native aficionados! Let's discuss an enlightening talk I recently stumbled upon that completely changed my perspective on mobile app performance. Alexandre Moureaux, a renowned tech-savant and programming maestro, took the stage to discuss something that, quite frankly, feels like the dark arts of development - Lighthouse scores and the enigmatic world of mobile app performance.

The Lighthouse Score and Performance

From the start, Moureaux stressed the significance of performance in mobile apps. He shared an anecdote about a client with ridiculously high-performance standards for both web and app development (we've all been there, right?). Of course, the conventional answer to gauge web performance is Lighthouse scores and ensuring your app is smooth like butter at 60 FPS. However, our tech guru took it a notch further by considering less mainstream metrics like JS thread usage and the seismic effects of major architecture changes. So far, so good - or is it?

Enter 'Flashlight,' a project Moureaux introduced to combat these challenges. This was not just a new plugin, but an entire mobile adaptation of Lighthouse for app performance metrics. Talk about an upgrade, am I right?

Changing the Game in Mobile Performance

In his next segment, Moureaux unveiled the details of the Flashlight plugin for mobile apps. This wonder of a tool lets you measure performance metrics such as frame rate, CPU usage, RAM usage, and more. The best part? It works on Android and can be used to test any app, be it in debug or production mode. We love a non-discriminatory plugin!

In a particularly exciting demo, he showed us how to measure scrolling performance in a Twitter-like app (bird is the word, people!). Here, he emphasized the importance of focusing on Android due to its noticeable performance disparity with iPhones. For all those Android devotees, this one's for you!

To ensure a foolproof performance measurement, Moureaux encouraged a methodical approach involving averaging measures over multiple iterations, maintaining consistent conditions, and automating the desired behavior. If you were worried about the heavy lifting, breathe easy, my friend. Flashlight also offers a CLI command to run end-to-end tests and gather performance metrics. Isn't automation just a blessing?

Flashlight in Action

Continuing his journey to enlightenment, Moureaux delved into the improved performance of a mobile app using Flashlist instead of Flatlist. Spoiler alert: CPU usage and other metrics took a nosedive! This improvement was demonstrated with the aid of Flashlight's graphs, making it look like child's play. But wait, there's more! Flashlight offers a convenient drag-and-drop feature for APK files, so you can analyze performance metrics without breaking a sweat.

A Bright Horizon

Flashlight now also boasts a 'Cloud' feature, promising users the ability to measure performance anywhere within their app, right in the cloud. Imagine integrating Flashlight with any CI or the EAS (Expo Application Services) hook and conveniently uploading your APK or Maestro test. You're greeted with a performance score in return. We're living in the future, folks!

Moureaux wrapped up his talk with some exciting news: a Flashlight Launch Contest where users could win prizes by sharing screenshots of their Flashlight report and app. He also shared future plans for Flashlight - app Auto exploration, adding more metrics like battery life and network, and improving stats. The session concluded with an open invitation for feedback and more information on the Flashlight Dev website.

To sum it up, if you're into React Native and have an insatiable hunger for optimization, this talk was the equivalent of a seven-course meal. All in all, this is one flashlight you're definitely going to want to keep in your developer's tool belt.

Until next time, stay illuminated.

NBR0KN