Boosting Chat Performance and Creating a Custom UI Library
We enhanced the performance of the Dream11 platform by optimizing chat functionality for low- and medium-end devices, and creating a custom UI component library.
Dream11 aimed to provide a seamless user experience during a high-traffic cricket tournament. The goal was time-sensitive as the tournament was around the corner. In view of the fact that we also wanted to ensure the in-house team could smoothly develop the app in the future, our collaboration focused on two main areas:
Optimizing chat performance to deliver a smooth user experience to prevent churn and brand reputation issues.
Creating a new design system with reference to the React Native Paper library to make further development more cost and time-efficient.
WORK DONE
Optimizing chat performance
First, we cleaned up the codebase from React Native anti-patterns, libraries, and components misusage. Then, we introduced the DMAIC optimization cycle, taking the following steps:
define
Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.
measure
Used Macro tool measurements.
ANALYZE
Selected the most promising performance changes.
IMPROVE
Implemented changes following React Native best practices.
CONTROL
Re-measured with the Marco tool and compared to the 4.58.0 native version.
Deployment
Developed the release process for both Android and iOS.
API DESIGN
Proposed an API based on the Rive Android library features.
INTEGRATION
Implemented Rive SDK integration for Android and created an example app for testing.
iOS SUPPORT
Extended the integration to iOS after successful Android testing.
AUTOMATION
Created a Github Action workflow for automated library releases.
PUBLIC RELEASE
Made the library publicly available on platforms like CocoaPods and Maven.
DEPENDENCIES
Managing dependencies, including Expo and react-native packages for each new release.
RELEASES
Automating the release process with custom GitHub Actions.
TRAINING
Providing React Native training through pair programming, code reviews, and workshops.
Performance analysis let us identify critical areas that we wanted to optimize in the first place because that would bring the biggest benefits for the app’s users. In our experts’ opinion, the problems that needed immediate addressing included slow rendering time of chats, slow load times on chats for subsequent visits, frame junk when scrolling, slow parsing of crypto nodes, and slow parsing of data models.
Performance Findings and Optimizations
Rendering time
Minimized bundle size (50 MB to 11 MB).
Eliminated unnecessary re-renders, reducing average mounting time by 30%.
Reused Android Fragment of React Native Chat screen for subsequent visits, making navigation to chat screen instant.
Implemented Flashlist instead of Flatlist, enhancing chat screen performance to 21 FPS on low-end devices.
SETUP PROCESS
CREATING A CUSTOM UI COMPONENT LIBRARY
Before developing components, we received Figma mockup designs and acceptance criteria. Using these, we refined the tasks, with the Dream11 team available to clarify any doubts.
01
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
linking
Sorted out links, integrated content, and implemented html rendering.
We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.
01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
design
Developed the basis of the design – color, layout, and typography.
Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!
Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.
16.8s
App start time, before 48.5s
8.6s
Report screen load time, before 15.9s
2.5s
Sending a message, before 14.5s
60FPS
Average FPS on LHN
2.6s
Search screen load time, before 11.8s
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle
04
Introducing
Fast Refresh for accelerated development iterations
The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
New PoC
features like biometrics and mobile health kit integration.
Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.
Enhanced app performance by over 200%.
Improved Core Web Vitals metrics to meet Google's standards.
Reduced refresh time to ~2s with Fast Refresh feature.
Improve code quality and ongoing efforts to add advanced functionalities
Students new to programming and React Native
Web developers unfamiliar with device APIs and native apps
Native developers exploring web app frameworks and React Native's UX potential
React Native developers prototyping and sharing ideas
Library maintainers creating examples and documentation
Users providing reproducible cases for bug reports
Speakers and workshop presenters conducting live coding sessions
RESULTS
As a result of our partnership, Dream11 now has:
More performant app that fulfills the needs of its end-users.
Time and cost-efficient solution for future development.
Sports fans with low-end Android devices enjoy a smoother and faster chat. The performance improvement directly impacts business metrics, such as churn rate or new customer acquisition.
Moreover, a tailored UI component library allows the in-house team to develop the app faster, reducing costs for new screens. Users also enjoy an improved experience as buttons and components behave consistently across the app.
We optimized the client’s mobile app performance and introduced a custom tool to measure performance regressions. We set up performance tests and documentation to enable a seamless transition of knowledge with the in-house team of developers.
Client Info
Entain is one of the world’s largest sports betting and gaming entertainment groups.
Industry
Commercial gaming
Company type
Enterprise
Region
Australia, Asia & Oceania
Tech Info
Performance optimization project with the best practices, approaches & tech solutions
Technologies
React Native | Native
Platforms
iOS | Android
Stack
Redux | Tanstack | Reassure | GraphQL
Performance Boost
87.5%
In 87.5% of the screens, the number of rerenders decreased or remained the same, which affected the acceleration of the initial performance.
In brief
Dream11 is the world’s largest fantasy sports platform, with over 120 million users. The app allows users to create fantasy teams based on real players and participate in virtual events.
The company wanted to achieve two goals. Firstly, the app had to provide a seamless user experience for people using it on low- and medium-end devices to enjoy virtual sports tournaments in real time.
This goal was time-sensitive as a cricket tournament was coming up. As it’s one of the most popular sports in India, Dream11 wanted to be ready for the influx of users.
Secondly, we wanted to ensure that the in-house team could seamlessly develop the app in the future. That’s why we created a custom components library.
That’s why our collaboration focused on two main areas:
Optimizing chat performance to deliver a smooth user experience to prevent churn and brand reputation issues.
Creating a new design system with reference to the React Native Paper library to make further development more cost and time-efficient.
First, we cleaned up the codebase from React Native anti-patterns, libraries, and components misusage. Once we cleaned the codebase, we introduced the DMAIC optimization cycle.
Performance optimization
The DMAIC cycle looks like this:
Step 1 – Define – laser focus on already confirmed/reported issues such as re-renders and the creation of a backlog of potential performance improvements.
Step 2 – Measure – Macro tool measurements.
Step 3 – Analyze – selection of the most promising performance changes.
Step 4 – Improve – implementation in line with the latest React Native best practices.
Step 5 – Control – the Marco tool measurement re-run compared to the 4.58.0 native version.
To identify all areas that need improvement, we profiled the whole app. The comprehensive approach combined with the DMAIC methodology allowed us to pinpoint the issues that would help our client achieve its business goals.
Performance Analysis
We began our work with performance analysis. We analyzed four areas of focus:
Initial load of Chat List
Loading of messages in the Chat window
Scrolling Through the Chat List
Scrolling Through the Chat Window
In our experts’ opinion, the most critical problems of the app that needed immediate addressing included slow rendering time of chats, slow load times on chats for subsequent visits, frame junk when scrolling, slow parsing of crypto nodes, and slow parsing of data models.
Performance Findings
Performance analysis allowed us to prepare a list of performance findings – areas that we wanted to optimize in the first place because they yield the biggest benefits for the app’s users.
Slow rendering time on chats
The first problem we needed to tackle was slow rendering time on chats. This was top priority for Dream11, as slow chats had a direct negative impact on user experience.
To optimize the rendering time, we had to improve several aspects of the app.
First, we minimize the bundle size. We excluded parts unrelated to the chat from the bundle to do that. Ultimately, we reduced the bundle size from 50 MB to 11 MB.
We got rid of unnecessary re-renders. This improvement allowed us to optimize multiple parts of the Chat screen. As a result, we reduced the average mounting time by 30%.
Our initial performance analysis discovered that the app uses a JS bundle instead of highly-optimized Hermes. That caused React Native to parse much data when the Chat mounted. This change improved the initial load time between 60 and 70%.
In the next step, we disabled lazy loading. Lazy loading consumed additional resources during important interactions. Disabling lazy loading improved the totla screen mount time by 5% on low-end devices, as the app doesn’t have to parse extra chunks in memory.
Another performance issues we solved was shimmers optimization. We replaced the implementation done with <rte-code>Animated Gradients<rte-code> and replaced it with <rte-code>NativeShimmers<rte-code>. This action improved rendering of shimmers by over 60%. But we didn’t stop there. Further optimization with the <rte-code>MaskedView<rte-code> approach allowed us to reach a final 88% improvement.
And last but not least, we calculated Animated styles only for already mounted components. We optimized the mounting time for each Chat message by 40%.
Slow load times on chats for subsequent visits
The Android Fragment of the React Native Chat screen wasn’t reused when the user came back from the home tab to the chat. That resulted in unnecessary re-mounting of the whole screen.
That change resulted in subsequent navigation to chat screen being instant.
Frame junk when scrolling chat screen
Another performance aspect we wanted to improve was frame junk when scrolling. We encountered this problem while profiling chat screen. To make the experience more user-friendly, we decided to implement Flashlist instead of Flatlist. We enhance the chat screen to 21 FPS on low-end devices
Slow parsing of crypto-nodes
In Dream11 app, the <rte-code>SendBird<rte-code> data is parsed into models. The models used a lot of resources and included decrypting data using <rte-code>crypto-js<rte-code>.
To solve this issue, we introduced <rte-code>rect-native-quick-crypto<rte-code> the time to parse improved by 90% on a real device.
Slow parsing of data models
As explained above, data from <rte-code>sendBird<rte-code> was parsed into models. These models were associated with each item in the list. As the models were bloated with unnecessary data, we analysed them and removed the data models didn’t need to operate. As a result, we observed a decrease in the component mounting time.
Key Optimization Gains
The optimization introduced by our team directly impacted user experience. We were able to address the issues that we uncovered during the performance analysis phase.
The key gains included:
up to 500% quicker parsing of crypto models, thanks to switching to more performant modules.
50% faster rendering time for chats. We were able to achieve it by simplifying logic.
up to 50% quicker load times for chats on subsequent visits, thanks to optimized memoisation.
decreasing shimmer render time by 88% due to using <rte-code>MaskedViewNativeShimmer<rte-code> approach.
up to 18% less frame junk when scrolling by using Native Stack Navigator and Flashlist
Delivering the library
Before developing components, we received mockup designs created in Figma and acceptance criteria for each element.
Using the Figma models and acceptance criteria, we refined the tasks. The Dream11 team was available to dispel any doubts.
We divided the project into four parts:
Setup,
Design foundations,
Development of the components, and
Testing
First, we set up a fork based on the React Native Paper library.
To automate the integration of the code written by two of our React Native developers, we set up continuous integration. The code was always up to date regardless of who was working on the project.
Finally, we set up a Storybookto test the components.
In the second part, we developed the basis of the design – color, layout, and typography.
Once we had the basics down, we started working on the UI library components.
The components we developed included:
AppBar,
TextField.
Button,
Icon Button,
Toast, which included animation and swipe-to-dismiss,
Match Status,
Search, and
many more!
After development, we performed unit, integration, and accessibility tests and ran the storybook stories for every component.
We presented finished components during demo sessions to Dream11’s key stakeholders. During the meetings, we received feedback and implemented it later on. But, because we got comprehensive explanation and acceptance criteria initially, most components were accepted on the first try.
More performant app and time and cost-efficient solution for future development
As a result of our partnership, Dream11 now has a performant app that fulfills the needs of its end-users. Sports fans with low-end Android devices enjoy a smoother and faster chat. The performance improvement directly impacts business metrics, such as churn rate or new customer acquisition.
Moreover, a UI component library tailored to their needs. The in-house team can develop the app faster, thus reducing the costs of building new screens. Moreover, the users can enjoy an improved user experience as buttons and other components behave consistently across the app.