Shopify

Shopify Engineering blog (shopify.engineering). Tier-2 source on the sysdesign-wiki. Shopify is a Canadian commerce platform serving millions of merchants with checkout/flash-sale infrastructure, a Ruby/Rails-at-scale backend, a React Native mobile footprint (Shopify Mobile + Shopify Point of Sale), and extensive public writing on all three. Their engineering blog covers substantive platform architecture (sharded commerce infra, Kafka/Pulsar event streams, POS reliability, mobile migration, CI infra) interleaved with design-engineering and brand-engineering pieces (the annual Black Friday Cyber Monday 3D visualization globe being the canonical example of the latter — deeply technical but out-of-scope for this wiki's distributed-systems focus).

Key systems

• systems/react-native — Meta's cross-platform mobile framework; Shopify's 2020 commitment now runs Shopify Mobile
• Shopify POS. The canonical wiki instance of a large consumer-app React Native adoption at scale, with two public retrospectives ingested: 2025-01 five-year retrospective + 2025-09 new-architecture migration writeup.
• systems/flashlist — Shopify's open-source high-performance React Native list component; v2 rebuilt on the new architecture with dual-architecture support in a single package version.
• systems/reanimated — Software Mansion's animation library (not Shopify-owned, but Shopify is a major consumer and surfaced scale-level bugs during the new-architecture migration that drove upstream fixes).
• systems/tophat-shopify — Shopify's internal mobile developer testing platform; the operational backbone for dual-architecture CI builds during the RN migration.
• systems/app-store-connect / systems/google-play-console — the two store portals whose asymmetric rollout controls shaped Shopify's platform-asymmetric rollout schedule.

Key patterns / concepts

• concepts/hot-reloading-devloop — sub-second save-to- running-device feedback loop; load-bearing React Native differentiator over native's minutes-scale compile cycles.
• concepts/shared-mobile-foundations — lifecycle discipline: per-app autonomy first, shared foundations (Identity, monitoring, performance) extracted after.
• concepts/cross-platform-client-library — TypeScript/JS portability at the whole-app-framework altitude.
• concepts/dual-architecture-compatibility — the discipline of keeping both old and new runtime architectures buildable during a framework migration.
• concepts/view-flattening — React Native new-architecture rendering optimization that silently breaks refs and testID lookups; Shopify built a Babel plugin to fix the testID case at compile time.
• concepts/state-batching — new-architecture behavior that collapses intermediate setState values; exposes latent tech debt in consumer components.
• concepts/legacy-native-module-main-queue-deadlock — iOS failure mode where requiresMainQueueSetup: true + main- thread animations = ANR; root cause of Shopify's production ANR spikes.
• concepts/platform-asymmetric-rollout-control — Play Store fine-grained %/halt vs App Store pre-determined schedule; forces Android-ahead-of-iOS rollout.
• concepts/stability-threshold-rollout-tiers — pre-committed named stability thresholds paired with named response actions (fix-forward / pause-hotfix / rollback).
• patterns/mixed-native-plus-cross-platform-mobile-stack — "Think native and React Native, not native or React Native"; RN for feature parity, native for device-hardware / memory- constrained / long-running-background surfaces.
• patterns/rotating-framework-upgrade-team — small dedicated team absorbs RN-version-upgrade cost so feature teams aren't blocked.
• patterns/dual-architecture-ci-builds — PR-level gate building under both architectures (via TopHat).
• patterns/feature-flagged-dual-implementation — fork native-module implementations behind feature flags for architectures a library doesn't yet support.
• patterns/phased-mobile-rollout-with-stability-tiers — platform-asymmetric staged rollout with pre-committed tier response playbook.
• patterns/native-side-lifecycle-for-hybrid-component — fix for shadow-tree manipulation failures by moving component lifecycle entirely to native (Mobile Bridge TransportableView).
• patterns/babel-plugin-automatic-collapsable-false — compile-time auto-fix for view-flattening breaking testID lookups.
• patterns/upstream-fixes-to-community — Shopify ↔ Meta ↔ Software Mansion collaboration pattern: discover at scale, upstream the fix.

Recent articles

• 2025-09-12 — sources/2025-09-12-shopify-migrating-to-react-natives-new-architecture (Migration of Shopify Mobile + Shopify POS to React Native's new architecture while maintaining weekly releases. Dual- architecture CI builds on every PR via TopHat; minimize- change-first refactor-later discipline; upgrade-RN-first sequencing; feature-flagged dual native-module implementations; platform-asymmetric rollout — Android 8%/30%/100% across 3 days vs iOS 0%/1%/100% — with pre- committed three-tier stability response playbook; Fabric wins at ~10% Android / ~3% iOS launch-time; production surprises including 20% load-time regressions on complex components, ANR spikes from main-thread native-module deadlocks, and scale-only Reanimated frame-rate bugs that drove upstream fixes to RN and Reanimated.)
• 2025-01-13 — sources/2025-01-13-shopify-five-years-of-react-native-at-shopify (Mustafa Ali's five-year retrospective on Shopify's 2020 commitment to React Native; all apps now on RN via per-team per-app migrations; <500ms P75 screen loads + >99.9% crash-free sessions portfolio-wide; canonicalises mixed-native-plus-RN architectural posture and the rotating-upgrade-team org pattern.)

Skipped (logged)

• 2024-11-09 — How we built the BFCM 2023 Globe (Tier-2, WebGL/Three.js/GLSL 3D rendering deep-dive for the Black Friday Cyber Monday real-time purchase-visualization globe; architecturally deep but 100% frontend-graphics, 0% distributed-systems / storage / streaming / networking / consistency / observability — out of scope per AGENTS.md).