Building apps at Shopify with React Native + Kotlin Multiplatform

Building mobile apps is hard, and the technical landscape changes constantly. At Shopify, we've gone "all-in" on React Native as our default for mobile development. But what happens when you hit the limitations? What about ultra-high performance needs, extensive processing, or heavy background tasks ?

This talk is a real-world case study of our "React Native-first" approach and how we pragmatically solve its limitations by integrating Kotlin Multiplatform (KMP). We will demonstrate that "context matters" and that the best solution is often a hybrid one.

Transcript

1. Bruno Aybar Building apps at with React Native + Kotlin Multiplatform
2. Last year...
6. Building mobile apps is hard.
7. Context matters a lot when taking tech decisions. Building mobile apps is hard.
8. Context matters a lot when taking tech decisions. Building mobile apps is hard. Mobile landscape changes frequently.
9. • Discuss every single pitfalls of a given technology. • Try to convince you that React Native is the best approach out there. • Try to convince you that Kotlin Native is the best approach out there. • Specifics about how we do React Native / KM at Shopify. Out of the scope of this talk...
10. Shopify & React Native
11. - Farhan Thawar, 2020 React Native is the Future of Mobile at Shopify Public blog post: https://shopify.engineering/react-native-future-mobile-shopify
12. 2020 Shopify officially goes RN-first 2021 5 fully RN apps Still a handful native apps 2018 - Experimentation - Shop (prev: Arrive) written in RN. - POS Android written in RN. - Compass (deprecated) written in RN. - Analysis: - Native vs Flutter vs RN Brief but company-wide RN experimentation 2015
13. Three key areas: - Developer Support / Happiness - Maintainability - Performance / User Experience Framework comparison
14. Developer Support / Happiness
15. Developer Support / Happiness Specific to Shopify's context
16. Maintainability
17. Performance
18. Performance Through experimentation, proved that risk was worth reward.
19. - Farhan Thawar, 2020 React Native is the Future of Mobile at Shopify Public blog post: https://shopify.engineering/react-native-future-mobile-shopify
20. • Outstanding tooling • Partnerships • Open source Organizational Support for React Native
21. There are situations where React Native would not be the default option for building a mobile app at Shopify: • deploying on older hardware (CPU <1.5GHz) • extensive processing • ultra-high performance • many background threads. When Will We Not Default to Using React Native?
22. Shopify & Kotlin Multiplatform
23. 2020 Shopify officially goes RN-first 2021 "Management of Native Code and React Native at Shopify"
24. There are situations where React Native would not be the default option for building a mobile app at Shopify: • deploying on older hardware (CPU <1.5GHz) • extensive processing • ultra-high performance • many background threads. When Will We Not Default to Using React Native?
25. - Point of Sale (POS) app - A huge # of background processes to keep data up to date. - JS implementation was slow! And when jobs were running the app was unresponsive. Native Sync overview
26. - Database interactions - Network (graphQL) interactions
27. Goals: - Increase responsiveness to provide merchants a better experience. - Provide same experiences across platforms by reusing code. Introducing KMM
28. KMP Library Takes care of all heavy lifting
29. KMP Library Takes care of all heavy lifting ios android common
30. 2020 Shopify officially goes RN-first 2021 "Management of Native Code and React Native at Shopify" 2019 Internal research: "Kotlin Native At Shopify"
31. Some key areas of research: • How much code can be shared • Infrastructure • Concurrency model • Memory management • Compiler implications • Runtime performance
32. Regarding the research: • Conducted by experts in native mobile technologies. • Back then, Kotlin Native was still experimental and the roadmap was still not fully settled. • Shopify worked closely with Kotlin Native teams, back when it was still experimental.
33. - 4-5 Internal SDKs were developed as multiplatform libs and are still being used. - Those libs mostly deal with "lower level" integrations for which we still have business logic to be shared. - More info, see the Native section of "How We Write React Native Apps" Building native code with KMP
34. - Internal research: "Kotlin Native At Shopify" - Multiple native, multiplatform libs that pre-date full RN adoption. 2020 Shopify officially goes RN-first 2021 "Management of Native Code and React Native at Shopify" 2019
35. Using KMP in the context of a RN-first project... … but also within the context of an standard native project Building native code with KMP
36. Context matters a lot when taking tech decisions. Building mobile apps is hard. Mobile landscape changes frequently.
37. Resources • React Native is the Future of Mobile at Shopify (article): https://shopify.engineering/react-native-future-mobile-shopify • How We Write React Native Apps (video): https://shopify.engineering/shipit-writing-react-native-apps • Management of Native Code (article): https://shopify.engineering/managing-native-code-react-native
38. Thanks!
39. https://smrtr.io/7dGBj