Migrating Coinbase's 56 Million Users to React Native: Key Lessons and Takeaways

Updated: November 20, 2024

Harry Tormey


Summary

Harry Tori and Nick Cherry discuss their experiences with database and application performance at Coinbase and Forecaster. They delve into Nick's transition to React Native at Coinbase, the challenges faced during the replatforming process, and the performance issues encountered. The conversation also covers optimizing React Native performance, tackling navigation challenges, utilizing native libraries, Expo benefits, and the importance of addressing small issues promptly in crypto and financial apps. Additionally, they touch on data synchronization patterns, AI's role in frontend development, and holistic system performance analysis in high-traffic scenarios.


Introduction and Background

Introducing Harry Tori and Nick Cherry, discussing their backgrounds and experiences with database and application performance, focusing on their work at Coinbase and Forecaster.

Getting into React Native at Coinbase

Nick's transition from a backend Ruby Dev to working with React Native at Coinbase, facing challenges and issues with mobile clients, leading to the decision to replatform the whole mobile app to React Native.

Performance Issues with React Native Rewrite

Exploring the performance issues faced during the React Native rewrite at Coinbase, including issues with rendering, crashes, and low velocity, leading to the adoption of instrumentation tools.

Identifying Performance Problems

Discussing the process of identifying performance problems in React Native, focusing on issues with rendering counts, FPS drops, and the impact on user experience.

Optimizing React Native Performance

Exploring strategies to optimize React Native performance, including memoization, context-based rendering, and navigation challenges on mobile compared to web.

Dealing with Navigation Challenges

Discussing navigation challenges in React Native, comparing the differences between mobile and web navigation, and the impact on performance and rendering.

Solving Navigation Issues

Exploring solutions to navigation issues in React Native, including delegated keys, managing data layers, and optimizing performance for both Android and iOS platforms.

Building FarCaster Mobile App

Nick's experience in building the FarCaster mobile app, utilizing libraries like React Navigation and Tailwind CSS, as well as discussing performance challenges and solutions during the development process.

Integration with Native Libraries

Addressing the use of native libraries in the FarCaster app development, overcoming performance issues with intensive operations by using a native library and bridging it with React Native.

Expo and CI Pipelines

Highlighting the benefits of Expo in app development, including Expo modules, CI pipelines, OTA updates, and the ease of development for React Native apps, particularly in larger teams and enterprises.

Fixing Business Logic in Crypto and Financial Apps

Discusses the importance of quickly fixing small issues in business logic in crypto and financial apps to mitigate problems affecting large numbers of users.

Starting a Mobile Application in 2024

Considers the possibility of starting a mobile application again in 2024 and the focus on elegant data normalization patterns and skepticism towards server-side solutions like GraphQL.

Synchronizing Important Data in Apps

Focuses on the challenges of synchronizing data in apps, the need for unique IDs for data sources, and the benefits of creating a pattern for synchronization.

Reducing Network Latency with Batching

Discusses a prototype for reducing network latency by batching requests in mobile applications, which showed a significant reduction in network latency.

AI Opportunities in Frontend Development

Explores how AI can assist in frontend development, specifically in optimizing rendering, identifying data access patterns, and prefetching data for improved performance.

Analyzing System Performance Holistically

Highlights the importance of analyzing system performance holistically, especially in high-traffic scenarios like price notifications in crypto, and the potential benefits of anomaly detection and AI in proactive problem-solving.


FAQ

Q: What challenges were faced during the rewrite of the mobile app to React Native at Coinbase?

A: The challenges faced during the rewrite included issues with rendering, crashes, and low velocity, which ultimately led to the adoption of instrumentation tools to address the performance issues.

Q: What are some strategies mentioned to optimize React Native performance?

A: Some strategies to optimize React Native performance mentioned include memoization, context-based rendering, and addressing navigation challenges specific to mobile compared to web.

Q: How were navigation challenges in React Native discussed in the context of mobile and web platforms?

A: Navigation challenges in React Native were compared between mobile and web platforms, highlighting differences in navigation systems and their impact on performance and rendering.

Q: What benefits were highlighted regarding the use of Expo in app development for React Native apps?

A: The benefits of Expo in app development include Expo modules, CI pipelines, OTA updates, and ease of development particularly in larger teams and enterprises working on React Native apps.

Q: What is the importance of quickly fixing small issues in business logic in crypto and financial apps?

A: Quickly fixing small issues in business logic in crypto and financial apps is crucial to mitigate problems that could impact large numbers of users.

Q: What was discussed regarding the use of AI in frontend development for optimizing rendering and performance?

A: The discussion included how AI can assist in optimizing rendering, identifying data access patterns, and prefetching data to improve performance in frontend development.

Logo

Get your own AI Agent Today

Thousands of businesses worldwide are using Chaindesk Generative AI platform.
Don't get left behind - start building your own custom AI chatbot now!