Our React Native EU Conference is back
REGISTER
.svg)
Aaqua is a Singapore platform that aims to connect like-minded people everywhere. It was created to enable global users to share their passions through groups built MAGIC: Music, Arts, Games, Interests, and Community.
We were asked to audit the Aaqua app - to check its overall performance, find pain points and give technological recommendations. All the time we were upskilling Aaqua developers. We shared our knowledge about tooling and best practices related to performance. We also provided code refactor and support on a daily basis.
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.
On our technical end, there were Jakub Binda, Bartosz Klonowski, and Michał Przyszczypkowski involved. The whole project was coordinated by Sławomir Wiśniewski.
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.
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
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.
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.
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.
For more insights into React Native Performance Optimization, take a look at Jakub Binda's talk from the React Native EU 2022 Conference!
Need help with React or React Native? Let us know!
I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.
