App Performance Boost for Aaqua

The prime objective was to improve the overall app performance. Aside from enhancing performance, our goal was also to create a solid base for other developers in the project so that they can make use of our experience and recommended practices in their daily work. 

User experience first: mobile features

To review the app thoroughly we collected information about all the performance issues reported by the client. We scrutinized the app to find the root cause of the problems and ways of eliminating them. In the beginning, we took part in the enhancement of mobile features to improve user experience. We took care of chat and profile settings modules. We implemented a screen with an active list of user chats and integrated it with GetStream.io service. 

We were also responsible for implementing a new way of signing up/in such as restricting app interactions to signed-in users or introducing authentication codes. The new sign-up flow was to change user engagement. The very next step was to improve FlatList and address any issues that came up when scrolling content on FlatList based screens. As a matter of fact, the issues found stemmed from ill-structured components and the fact that they were simply not designed to be used as FlatList items.

Full performance analysis & improvement

The very next step was to improve FlatList and address any issues that came up when scrolling content on FlatList based screens. As a matter of fact, the issues found stemmed from ill-structured components and the fact that they were simply not designed to be used as FlatList items.

After Jakub identified the problem, he started to dig into the app architecture using profiling based on Flamechart. The shapes of flame charts demonstrated the need for refactoring the app components - they took way too long to render which proved they were definitely not optimized for scrolling via FlatList components.

Our work resulted in refactoring and optimizing the components used in FlatList so that they could load faster and interact properly without displaying blank spaces when scrolling. 

All in all, we improved and provided recommendations for further improvements in many areas such as

• Initial screen loading time
• Screen displaying search results
• Navigation structure
• Scrolling in FlatList based screens

To give a specific example, the <LoadingView /> component - a component that is supposed to be light and fast - needed 140-160ms to load when entering the Notification Screen. As a consequence, the screen rendering took much longer than expected. After refactoring, the render time dramatically improved (by approximately 30%).

‍

It was important to work on the component as it affected user experience (UX). Minimizing the component’s render time was a great UX enhancement.

Comprehensive audit reports

During our collaboration, we handled performance audits looking for functionalities that could impact the app performance. On the basis of the audits, we prepared a detailed report for the client. They could make an informed decision on how they wanted to proceed - if they wanted us to take care of the improvements listed or if they wanted to implement the improvements themselves.

Partnership model

Within the context of auditing the Aaqua application, our work followed these steps: investigation, pull requests’ review, performance audit, and full reporting. Working on the app features let us dive deep into the code and get to know the product better, which directly resulted in a deeper understanding of the client’s needs. Also, based on the knowledge gained, we could perfectly adapt the direction of our work and provide in-depth insights into a performance audit.

Throughout the project, we were happy to apply our know-how and share expertise with Aaqua developers. To effectively monitor the performance work, Jakub joined the Core App team and navigated the whole process from the inside. Our main focus was to analyze the app performance, implement any improvements as well as pass the knowledge on how to maintain good performance levels in the future.

On our technical end, there were Jakub Binda, Bartosz Klonowski, and Michał Przyszczypkowski involved. The whole project was coordinated by Sławomir Wiśniewski.

For more insights into React Native Performance Optimization, take a look at Jakub Binda's talk from the React Native EU 2022 Conference!