Helping Dream11 migrate to React Native

Client

Dream11

Expertise

React Native
Performance Engineering

Deliverables

React native app screens

With over 160 million active users, Dream11 is India’s largest fantasy sports platform. In late 2022, the company decided to migrate its apps to React Native. The move would allow for cross-platform development and cut down development costs and timelines dramatically. However, the sheer scale of Dream11 made such a move tricky to choreograph and execute.

Over the next few months, a small pod of Proximity engineers worked with the Dream11 tech, product, and design teams to migrate core sections of the product to React Native.

Along the way, we forged relationships with several factions of Dream11’s excellent tech team and learned critical lessons about working efficiently in a hybrid-remote setup.

The brief —

A massive undertaking

Migrating to React Native would boost productivity and dramatically cut costs for Dream11. However, given its scale, the move had to be planned and executed very, very carefully.

The plan was to migrate the app to React in a staggered manner. Sections would be developed individually, tested thoroughly, and released to production only when they matched or surpassed the performance of their native counterparts. With very little time on hand to pull off the first phase of this project, Dream11 needed to join forces with a team that had proven expertise with React Native.

01

What we did —

Crushing remote — in a non-remote team

People are only as effective as the processes they use.

Our initial weeks with Dream11 were challenging — not because of the problems we were solving, but because we had to reconcile our very different ways of working. The Dream11 team were used to working on-site and returned to their offices soon after the project kicked off. We, on the other hand, are a fully distributed team with finely tuned processes that make remote work possible.

But how does one remote team slot into an almost entirely offline organisation? The key is to catch and solve issues almost before they can arise.

On-site beginnings for remote collaboration

Early on, our engineering managers spent a few days in the Dream11 offices. They spent time with various factions of the Dream11 tech team, learning what problems were being solved by each, what processes were in place, and evaluating the best ways to stay on the same page as them all.

Harnessing the power of in-person sessions

We swear by remote work, but we do appreciate the energy and the spontaneity that comes from getting people together in the same room. Problems are often solved more organically when you’re face-to-face, and our managers used these precious in-person days to iron out complex requirements with the Dream11 team.

02

Making the best
‍choices

Freed up from all operational friction, our engineers now put their heads down and started to code. The brief itself was clear — we were to migrate the product to React Native, one section at a time. What was tricky was maintaining the high performance benchmark that Dream11 users had come to expect on the native apps. Besides, the cost of poor performance multiplies dramatically at scale, and Dream11 is huge.

Performance considerations drove our decisions at all levels, down to every last line of code.

We discarded some screens that were already underway because we knew we could make better choices. We evaluated scores of libraries to facilitate various functions and ensured that we introduced only the best, most tested ones into the Dream11 codebase. We even created our own version of an open-source library and modified it to resolve internal code conflicts. The library can now be maintained locally by the Dream11 team.

03

Cleaning up inconsistencies proactively

Dream11 is a large organisation with many teams contributing simultaneously to a single product. Inconsistencies are bound to creep up in such situations. But for us, starting afresh on a new platform, this presented a rare opportunity.

Going beyond the immediate requirements, we took a short but necessary segue to create a central design system. Every screen we worked on would now pull from this system, eliminating both inconsistency and redundancy.

For any design system, adoption is the surest sign of success. So we were thrilled when the other tech teams began using the system as well, especially since it was something we’d started as our own initiative.

The impact —

Optimising for the 99%

India is populous, to say the least. And a large percentage of that population is cricket-crazy. For every urban user with high-speed internet and a state-of-the-art device, there are several in the rural hinterlands on 2g connections and low-end devices. Dream11 has always been determined to cater equally to both kinds.

Building an accessible, performant hall of fame

A smooth scroll for 1000+
items

Deployed an optimised nested FlatList that renders a list of 1000+ items in a smooth vertical scroll.

170% improvement
in load time

The filter render timings improved from 300ms to 176ms.

Optimised for low-end
devices

The page, which previously often failed to load on 2gb devices, now works smoothly for all users

600% performance
improvement

The time taken for loading and rendering the filtered list went down from 439ms to 65ms.

The road ahead —

A solid partnership

In a short span of 4 months, we migrated 10 epics of the Dream11 app to React Native. What started out as a shaky collaboration grew into a solid, fruitful partnership. With the first phase of our collaboration complete, we handed over the screens to Dream11. The React Native screens have all met or surpassed the performance of their native counterparts, and are currently being shipped to production, one at a time.

8

Engineers

12

Teams collaborated with

300+

File changes

10+

Screens optimised

All brand and product assets displayed in this case study are designed by and belong to Dream11.