Management of Native Code and React Native at Shopify

A year ago, we announced our decision to place our bets, and our developer resources, on React Native. As you could expect, the move was met internally with a mix of excitement and apprehension, but a year later, we are still convinced that we made the right decision.

Shopify logo
Shopify
•
Colin Gray
•10 min read•intermediate•
--
•View Original
GraphQLJavaJavaScriptKotlinObjective-CReactSQLSwiftTypeScript

Overview

The article discusses Shopify's experience with integrating React Native into their mobile development process, particularly focusing on the management of native code. It highlights the challenges faced, the decisions made regarding native code usage, and the implementation of Kotlin Multiplatform Modules to improve performance and maintainability.

What You'll Learn

1

How to effectively integrate native code within a React Native application

2

When to leverage Kotlin Multiplatform Modules for cross-platform development

3

Why performance optimizations are crucial in mobile applications

Prerequisites & Requirements

  • Familiarity with React Native and mobile development concepts
  • Understanding of Kotlin and its ecosystem(optional)

Key Questions Answered

When should native code be used in a React Native application?
Native code should be used when React Native's performance limitations hinder the application's responsiveness, especially for complex UI components or background processes. Shopify found that certain features, like a grid of draggable buttons and background job management, required native solutions to maintain performance.
What are the benefits of using Kotlin Multiplatform Modules?
Kotlin Multiplatform Modules allow developers to share a single codebase across Android and iOS, significantly reducing code duplication. Shopify achieved approximately 95% code sharing, leading to improved performance and reduced sync times from 30 seconds to 2-3 seconds for their background job manager.
What challenges did Shopify face when adopting React Native?
Shopify encountered limitations with React Native's performance, particularly with complex UI interactions and background processes. The single-threaded nature of JavaScript and UI threads led to app unresponsiveness during heavy background job execution.
How did Shopify improve rendering performance in their React Native app?
Shopify improved rendering performance by reducing re-renders and implementing lazy rendering strategies. They utilized tools like the React devtools profiler and the Application Performance Index measuring tool to optimize their UI components effectively.

Key Statistics & Figures

Code sharing percentage
95%
This percentage reflects the shared code achieved using Kotlin Multiplatform Modules between Android and iOS.
Initial sync operation time
2-3 seconds
This is the time taken by the new sync manager compared to the previous 30 seconds for a medium-sized store.
Lines of code in common/
3,447 LOC
This indicates the amount of shared, OS-agnostic code developed for the Kotlin Multiplatform Modules.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used for building the mobile application interface at Shopify.
Backend
Kotlin Multiplatform Modules
Used to share code between Android and iOS, improving performance and maintainability.
Database
Sqldelight
Utilized for SQL database management within the Kotlin Multiplatform environment.
Backend
Apollo
Used for GraphQL requests in the Kotlin Multiplatform Modules.

Key Actionable Insights

1
Leverage native code solutions when React Native's performance is insufficient for complex UI components.
This approach can help maintain responsiveness and improve user experience, especially for applications requiring intricate animations or interactions.
2
Consider using Kotlin Multiplatform Modules for shared code across platforms to reduce duplication.
This can lead to significant performance improvements and easier maintenance, as seen in Shopify's experience with their background job manager.
3
Utilize performance profiling tools to identify and address rendering issues in React Native applications.
Regularly profiling your application can help you pinpoint bottlenecks and optimize rendering, leading to a smoother user experience.

Common Pitfalls

1
Underestimating the learning curve associated with Kotlin Multiplatform for developers unfamiliar with Kotlin.
Developers transitioning from Swift may find it challenging to adapt to Kotlin's syntax and ecosystem, which could slow down development if not addressed early.