Shopify Mobile Hybrid Architecture

4/25/2025

This post introduces Mobile Bridge, a framework designed to enhance WebViews within the Shopify mobile app. It addresses three key goals: making WebViews faster by preloading and caching them (improving load times by ~6x), making them look native by disabling zoom, removing text selection, hiding unnecessary UI elements, and adapting Polaris components, and making them feel native through two-way communication using @remote-ui/rpc. Specific implementations include solving page titles and actions, enabling WebView navigation with TransportableView, handling back navigation with snapshots, and presenting modals natively. It also details integrating native features like the Date Picker and Barcode Scanner. Future work involves rendering Polaris components natively using remote-dom.

12/27/2022

This post details the iterative porting strategy for migrating the Shopify Mobile app to React Native. It outlines the challenges of the initial gradual adoption approach and introduces the 'Iterative Porting' strategy, which involves building new features in React Native and migrating existing features in parallel. Key aspects include an internal RN Accelerator training program, a RICE scoring model for prioritizing migration, and the decision to prioritize high-impact root screens for migration to accelerate the transition to a fully React Native app.

11/22/2022

This post details the implementation of a server-driven UI architecture for the Shop App's Store Screen. Previously client-driven, the architecture now allows the server to control UI layout and components, enabling personalization for merchants and faster experiment launches. The server-side architecture includes a template processing layer, orchestrator, data loading layer, and GraphQL layer. The client-side architecture features components like ServerDrivenStoreScreen, StoreSectionContainer, ProductSection, CollectionsSection, ProductShelf, and CollectionShelf. Key GraphQL calls include StoreSections and ShopInfo. The author contributed to ProductGrid, ProductsSection, StoreSectionContainer components, and the StoreSections query and hook.

12/1/2021

This post details the evolution of Shopify's UI extension system, introducing the concept of 'remote rendering' where UI definition is separated from UI rendering. It explains the technical challenges and solutions, including the use of `MessageChannel` for communication, the `@remote-ui/rpc` package for remote procedure calls with automatic memory management, and the `RemoteRoot` and `RemoteReceiver` for defining and reconstructing UI component trees. It also covers the `DomReceiver` for rendering to the DOM and integration with React via `@remote-ui/react`. A key focus is on sandboxing extensions for security and reliability, with a simple sandbox implementation and examples of host-extension interaction using an `api` object for native functionality.

9/2/2021

This post introduces a solution for implementing a Kotlin-like `.copy()` function in Swift structs to facilitate immutable object patterns. It details the challenges with Swift's default initializers and optional properties, proposes a builder pattern as an alternative, and highlights the use of Sourcery for automating the generation of initializers and builders, thereby reducing boilerplate code for developers working with immutable state in the iOS codebase.

5/27/2021

This post contributes to the Shopify Mobile Hybrid Architecture thread by detailing best practices for React Native development within Shopify. It covers strategies for managing state between React Native and native modules, emphasizing React Native as the source of truth. It also discusses UI flexibility using Restyle and breakpoints, testing methodologies with Jest, and the use of Buildkite for CI. The post clarifies the approach to brownfield app development and the use of Reanimated 2 in production.

4/16/2021

This post details how Shopify leverages Kotlin Multiplatform Modules (KMM) to write native code for background processes in their React Native mobile applications, specifically for the Point of Sale app. It explains the challenges of single-threaded JavaScript and UI threads impacting responsiveness during background jobs and how KMM allows for shared, OS-agnostic code for tasks like database synchronization. The post also discusses the decision to keep UI components in React Native, leveraging tools like Reanimated 2 for complex animations and gestures, and outlines the process of integrating KMM libraries into existing React Native projects.

1/22/2021

This post details the adoption of GraphQL for mobile applications, highlighting its benefits over REST APIs in terms of strong typing, schema introspection, and compile-time error detection. It also provides best practices for using GraphQL in mobile development, including the use of fragments for reusability, aliases for readable data models, directives for conditional fetching, and code generation tools like Syrup. The post emphasizes the importance of considering query costs for performance optimization.

1/29/2020

This post details Shopify's strategic decision to adopt React Native for all new mobile app development, moving away from a purely native approach. It explains the rationale behind this decision, including the increasing importance of mobile commerce, the desire to unify development stacks, leverage existing web development expertise in React, and improve developer productivity. The post highlights lessons learned from experiments with the Arrive, Point of Sale, and Compass apps, emphasizing high code sharing percentages and increased productivity. It also outlines scenarios where native development will still be preferred (e.g., extensive processing, ultra-high performance) and the continued use of native modules for low-level functionalities.

1/16/2020

This post details the extension of Shopify's mobile development practices by treating mobile apps as services, enforced through the ServicesDB system. ServicesDB codifies best practices such as service ownership, contact information, CI/deployment configuration, versioning, and monitoring. This system allows for the enforcement of tooling usage and the identification of misconfigured projects, with automated issue creation on GitHub for non-compliant projects. The goal is to abstract tooling and configuration away from mobile developers, allowing them to focus on commerce problems.

9/29/2017

This post introduces a hybrid architecture for the Shopify Mobile app, integrating native iOS/Android components with web views. It details the implementation of a JavaScript bridge to enable communication between web views (rendering embedded third-party apps) and native mobile code. This bridge intercepts calls to the Embedded App SDK (EASDK), allowing native UI elements like navigation bars and buttons to be rendered, optimizing screen real estate and providing a consistent user experience. The post outlines the technical implementation on both iOS (WKWebView, postMessage, WKUserScript, WKScriptMessageHandler) and Android (Java Object injection, WebView), as well as the middleware system for message augmentation and suppression. It also describes how native interactions are communicated back to the web via HTML postMessages.

6/15/2017

This post details strategies for maintaining a hybrid Swift and Objective-C codebase in mobile applications. It covers ensuring interoperability through nullability annotations, leveraging the `@objc` attribute for granular bridging control, wrapping Swift-only types in NSObject subclasses, and using Swift extensions to add Objective-C-visible methods and categories. The goal is to enable the adoption of Swift for new development while continuing to support and integrate with existing Objective-C code.