React Native at Scale
Summary
Munjiri Moghe, a Staff Software Engineer at Coinbase, discusses scaling React Native applications, an open-source framework by Meta that enables building iOS and Android apps from a single JavaScript codebase. Coinbase utilizes React Native for its financial application, prioritizing development velocity and feature parity across platforms. Moghe outlines key adoption strategies, including implementing comprehensive observability, establishing guardrails with TypeScript and ESLint rules, and setting clear performance budgets. She details performance optimization techniques like React profiling to address cold start times and navigation fluidity, alongside ensuring reliability by closely monitoring error rates and traffic spikes. The conversation also covers utilizing GraphQL for efficient data fetching, the benefits of React Native's new architecture (JSI and Turbo Modules) for faster native interactions, and the significant role of AI in accelerating development workflows at Coinbase, where over 50% of code is now AI-generated.
Key takeaway
For Software Engineers or Directors of AI/ML scaling React Native applications, prioritize robust observability and automated guardrails like ESLint to prevent performance regressions. Implement a shared design system and utilize GraphQL with Suspense for efficient data fetching and a smooth user experience. Critically, integrate AI agents with codebase context to accelerate development velocity, as Coinbase achieves over 50% AI-generated code, but always review AI output for accuracy and adherence to established patterns.
Key insights
React Native offers rapid, consistent cross-platform mobile development, but demands rigorous observability, guardrails, and AI integration for sustained performance and reliability at scale.
Principles
- Observability must be a foundational requirement for mobile app development, not a non-functional one.
- Automated guardrails, like ESLint rules, are more effective than documentation for enforcing good coding patterns.
- Performance metrics will inevitably regress over time without continuous discipline and automation.
Method
Debug performance by profiling with React DevTools, auditing data requests, and deferring long-running JavaScript tasks to native threads. Measure reliability via error rates and traffic spikes, using experimentation for ambitious changes.
In practice
- Configure ESLint rules, such as "exhaustive dependencies," to proactively catch performance regressions.
- Establish a shared design system to ensure UI consistency, improve developer velocity, and streamline new engineer onboarding.
- Utilize GraphQL's Defer and React's Suspense to optimize data loading, prioritize critical UI rendering, and enhance user experience.
Topics
- React Native
- Mobile Development
- Performance Optimization
- Reliability Engineering
- GraphQL
- AI-Assisted Development
- Design Systems
Best for: Software Engineer, Director of AI/ML
Related on AIssential
Editorial summary, takeaway, and curation by AIssential. Original article published by Software Engineering Daily.