BlogsShopifyMobile Tophatting Process

Mobile Tophatting Process

Mobile Tophatting Process

5
posts
2015–2024

Shopify has developed and enhanced its mobile release process with the introduction of Tophat, a desktop macOS application that streamlines the tophatting of mobile changes. Tophat provides a seamless and interactive experience for testing pull requests on real devices or simulators without requiring local compilation. It integrates with CI pipelines to provide links to build artifacts, and includes a 'Quick Launch' feature for developers to easily grab the latest native builds. For iOS, Tophat leverages the `ios-deploy` utility and Fastlane's `match` for signing, addressing the lack of direct Apple APIs for remote device installation and debugging. This tool aims to improve developer experience, increase testing frequency, and serve as a foundation for future mobile development tooling.

2024

Tophat: Crafting a Delightful Mobile Developer Experience - Shopify

8/23/2024

This post details the development of the Tophat macOS application, a tool designed to streamline the mobile developer experience by enabling easy testing of pull requests on real devices or simulators without local compilation. It introduces the 'Quick Launch' feature for developers to grab the latest native builds and integrate with local JavaScript bundlers. For iOS, it addresses the challenges of remote app installation and signing by bundling `ios-deploy` and integrating with Fastlane's `match` utility for development certificate signing.

2020

Tophatting in React Native - Shopify

9/9/2020

This post details the development of a tool to streamline tophatting for React Native applications at Shopify. It extends the existing mobile tophatting process by focusing on the efficient handling of JavaScript bundles. The system triggers a CI pipeline upon new PRs or commits, which builds, compresses, and uploads the JavaScript bundle to cloud storage. Metadata is stored in a SQL database via a backend service. Developers can then download the bundle via QR codes, bundle IDs, or direct links, which are processed by a React Native component library that loads the new bundle and restarts the app. The backend service abstracts third-party SDK interactions and provides a scalable solution for storing bundle metadata, enabling features like pre-download confirmation and querying.

2019

Mobile Release Engineering at Scale with Shipit Mobile - Shopify

5/17/2019

This post introduces Shipit Mobile, a new platform designed to automate and streamline the mobile app release process at Shopify. It addresses the manual and error-prone nature of previous mobile releases by providing a unified interface for creating, managing, and distributing app releases. Key features include automated build and version number management, integration with CI pipelines, support for multiple distribution channels (Google Play and App Store) via official APIs and Fastlane, a configurable setup favoring convention over configuration, and enhanced visibility through Slack notifications. The post also details the branching model used (trunk-based development with release branches) and the role of the Release Captain, emphasizing transferability and reduced burden.

2018

Mobile Tophatting at Shopify - Shopify

9/11/2018

Introduced a new 'tophatting' process for mobile developers to reduce the time spent verifying changes. This involved modifying the CI pipeline to export application binaries (zipped .app for iOS, APK for Android) and creating a command-line interface using the internal 'dev' tool. The CLI allows developers to specify a pull request, repository, or build URL to download and install pre-compiled apps onto local simulators or emulators. The process automates simulator selection, app installation, and launching, significantly reducing manual setup and compilation time.

2015

Introducing Shipit - Shopify

6/17/2015

This post introduces Shipit, an open-source deployment tool developed at Shopify. It addresses the challenges of coordinating frequent deployments in a large development team by providing features such as deployment locking, easy project configuration via `shipit.yml`, synchronization mechanisms, an audit trail of deployments, and performance improvements by leveraging GitHub webhooks. It also supports pre-deployment checks like displaying key metrics and checklists, and visualizing deployment progress.