Tophatting in React Native

To provide a more convenient and painless experience, we built a tool enabling React Native developers to quickly load their peer’s work within seconds.

Shopify logo
Shopify
•
Charles Zhang
•8 min read•intermediate•
--
•View Original
Google CloudJavaScriptReactSQL

Overview

The article discusses the practice of tophatting in React Native at Shopify, emphasizing its importance in ensuring software quality through manual testing of code changes. It introduces a new tool designed to streamline the tophatting process by allowing developers to quickly load their peers' changes without the need for extensive rebuilding.

What You'll Learn

1

How to implement the Tophat tool for React Native tophatting

2

Why using a backend service enhances the tophatting process

3

How to utilize QR codes for seamless bundle downloads

Prerequisites & Requirements

  • Familiarity with React Native development
  • Access to cloud storage services and GitHub(optional)

Key Questions Answered

What is tophatting and why is it important in React Native?
Tophatting is the practice of manually testing a coworker's code changes before approving their pull request. It is crucial for maintaining software quality, especially at Shopify, where billions of dollars in transactions are handled weekly.
How does the new Tophat tool improve the tophatting process?
The Tophat tool allows developers to quickly load their peers' JavaScript bundles without the need to rebuild the entire app, significantly reducing the time and effort required for testing changes.
What are the steps involved in the CI pipeline for React Native?
When a new pull request is created, the CI pipeline builds the JavaScript bundle, compresses it, stores metadata in a SQL database, uploads the bundle to cloud storage, and comments on the PR with download options.
What options do developers have to download the JavaScript bundle?
Developers can download the bundle via a QR code, a bundle ID through the Tophat screen, or a direct link from a GitHub notification email, allowing flexibility in how they access the changes.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used for building mobile applications at Shopify.
Tools
Github
Used for version control and managing pull requests.
Backend
Google Cloud
Utilized for cloud storage of JavaScript bundles.
Database
SQL
Used for storing metadata related to the JavaScript bundles.

Key Actionable Insights

1
Implement the Tophat tool in your React Native projects to streamline the testing process.
By using the Tophat tool, developers can quickly access and test changes made by their peers, which enhances collaboration and reduces the time spent on manual testing.
2
Utilize QR codes for quick access to JavaScript bundles during the testing phase.
This method allows developers to bypass traditional download methods, making it easier to test changes on mobile devices without interrupting their workflow.
3
Consider using a backend service to manage bundle metadata and authentication.
A backend service can simplify the integration with third-party services and provide a scalable solution for storing metadata, which is crucial for maintaining an efficient development process.

Common Pitfalls

1
Neglecting to properly configure the backend service can lead to authentication issues.
Without a well-configured backend, developers may face challenges in accessing third-party services, which can hinder the tophatting process.
2
Failing to update the Tophat component library can result in outdated functionality.
Keeping the library updated is essential to ensure that developers have access to the latest features and improvements, which can enhance the overall testing experience.