Migrating Coinbase's 56 Million Users to React Native: Key Lessons and Takeaways
Updated: November 20, 2024
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.
TABLE OF CONTENTS
Introduction and Background
Getting into React Native at Coinbase
Performance Issues with React Native Rewrite
Identifying Performance Problems
Optimizing React Native Performance
Dealing with Navigation Challenges
Solving Navigation Issues
Building FarCaster Mobile App
Integration with Native Libraries
Expo and CI Pipelines
Fixing Business Logic in Crypto and Financial Apps
Starting a Mobile Application in 2024
Synchronizing Important Data in Apps
Reducing Network Latency with Batching
AI Opportunities in Frontend Development
Analyzing System Performance Holistically
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.
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!