Categories
Web And App Development

How Discord Achieves Native iOS Performance with React Native?

Discord is a patented freeware Voice Over IP (VoIP) application and digital distribution platform designed for video gaming communities, that specializes in text, image, video and audio communication between users in a chat channel. Discord uses the metaphors of servers and channels similar to Internet Relay Chat even though these servers do not map to traditional hardware or virtual servers due to its distributed nature. A user can create a server on Discord, managing its public visibility and access, and create one or more channels within this service. Within a server, depending on access controls, users can create channels within a category framework, with the visibility and access on the channels also customizable to the server.

Developing mobile with React Native is convenient when building applications on different platforms without having to completely re-code. Most companies developing mobile on the current native stacks find that they must compromise in some way. Either on productivity (develop the same product multiple times with different engineers on different stacks), on quality (make low-quality apps) or on a scope (focus on a single platform). The path towards stopping these compromises is inventing new mobile stacks — like React Native. To build its iOS app from the core of React app, Discord adopted React Native as soon as it became an open sourced.

Once the App started to display signs indicating that it is degrading across several vectors (frame drops, battery drain, time to interaction, etc.) the developers decided on getting to the root of the problem and tackle it. With this in mind, a mobile performance squad, was created whose mission was to execute a deep dive into driving top tier performance on across all supported iOS devices.

The following changes were made:

  • Phase 1: Flux Store Optimisations

Every action that triggered an update to the user store which holds the state of all known users resulted in a 30ms emit. The message load/cache restore actions which directly result in processing and rendering chat messages resulted in a 500ms on an iPhone XS and 1000mson iPhone 6s.

  • Phase 2: React Component Optimizations

React commits could cost up to 200ms when affecting things at the higher levels of the component tree. On top of this, Discord was going through up to three commit passes when the app was starting up. A change was made so that its stores could initialize with the correct data, avoiding multiple commit passes and even shrinking the view hierarchy.

  • Phase 3: Main Thread Optimizations

Once the Flux stores were performing well, it was discovered that the emoji picker itself was the source of the UI lockup. To address this logging was added to every ancestor component of emoji picker and it was found that the chat input component was remounting when switching between private messages and servers. Merging the two components reduced the 2s lockup down to 500ms, which was a win.

The final problem to tackle was that using Discord for a bit could result in the battery heating up. It was understood upon investigation that the main UI thread would sit at 10% CPU when looking at a Discord server; it always had a spinning animation in the background chewing away at CPU.

Phase 4: Perceived Performance Optimizations

One of the primary interactions with Discord involves the left and right drawers. The component that powers them was created the week that React Native was released in 2015, and still suffered from the shortcomings of those times. The other problem with the drawers was that they depended on React Native JS Responder system which works well in most cases, but not when there are gestures and scroll views involved. This was solved using ‘react-native-reanimated’.

Phase 5: RAM Bundles

Finally, one final optimization needed to tie everything together into a final TTI drop was RAM Bundles. The idea behind RAM bundles was to break it down into modules that can be loaded as needed instead of loading one gigantic JavaScript blob.

All these steps strung together made for a stable and usable Discord App with Native iOS performance using React Native.

By Sandeep Chauhan

Sandeep Chauhan is a Software Developer at plancoders. He loves to build beautiful Mobile Apps, and Websites.

In the past, he has worked in companies like OpenText, Intel, CenturyLink, and Walmart Labs.

He is the founding CTO of Dealsite (prev WorkingGroupLink), GoPetie, and HRaspirin. Sandeep created the first version of Doc.com (prev Docademic), and helped develop ScaleLab product.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s