Shopify Mobile Hybrid Architecture

12 posts · Jun 2017 – Apr 2025

What this trail covers

Shopify has developed and enhanced its mobile applications using a hybrid approach, combining native iOS and Android development with web technologies through the Mobile Bridge framework. This framework reinvents WebViews to improve performance, appearance, and integration, making web content blend seamlessly with native screens. Key improvements include preloading and caching WebViews for faster load times (reducing P75 from 6s to 1.4s), adapting Polaris components and hiding unnecessary UI elements. Future work involves rendering Polaris components natively from web code using remote-dom for greater flexibility and improved user experience.

All Shopify trails

Apr 2025Mobile Bridge: Making WebViews Feel Native (2025) - ShopifyThis post details the creation and enhancements of Mobile Bridge, a framework to improve WebView performance, appearance, and integration in Shopify's mobile app. Key technical contributions include: 1. Performance improvements via background preloading and caching of WebViews, reducing P75 load times from 6s to 1.4s. 2. Visual improvements by disabling zoom, removing text selection, hiding unnecessary UI elements, and adapting Polaris components. 3. Enhanced integration through a two-way communication layer (@remote-ui/rpc) for page titles, actions, and navigation. Introduced TransportableView for seamless WebView movement between screens and snapshotting for back navigation. Also details native integration of Date Picker, Barcode Scanner, and 'Add to Wallet' features. Future work involves rendering Polaris components natively from web code using remote-dom.
Dec 2022Migrating our Largest Mobile App to React Native - ShopifyThis 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.
Nov 2022Implementing Server-Driven UI Architecture on the Shop App - ShopifyThis 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.
Dec 2021Remote rendering: Shopify’s take on extensible UI - ShopifyThis 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.
Sep 2021A Kotlin Style .copy Function for Swift Structs - ShopifyThis 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.
Advertisement
May 2021Shipit! Presents: How We Write React Native Apps - ShopifyThis 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.
Apr 2021Management of Native Code and React Native at Shopify - ShopifyThis 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.
Jan 2021Using GraphQL for High-Performing Mobile Applications - ShopifyThis 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.
Jan 2020React Native is the Future of Mobile at Shopify - ShopifyThis 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.
Jan 2020Scaling Mobile Development by Treating Apps as Services - ShopifyThis 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.
Sep 2017Building Shopify Mobile with Native and Web Technology - ShopifyThis post details the technical implementation of the Mobile Bridge framework for Shopify's mobile applications. It explains how a JavaScript middleware is injected into web views to intercept and adapt calls to the Embedded App SDK (EASDK). This middleware forwards calls to platform-specific JavaScript files, which then communicate with native code (Swift for iOS via WKWebView and postMessage, Java for Android via injected objects). The system intercepts navigation bar configurations, collapses redundant web navigation elements into native bars, and uses HTML postMessages to communicate user interactions from native back to the web. This enables a hybrid architecture where native and web views coexist seamlessly, optimizing screen real estate and providing a consistent user experience for embedded third-party apps without requiring code changes from app developers.
Jun 2017Maintaining a Swift and Objective-C Hybrid Codebase - ShopifyThis 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.