How Shopify Built Shop.app: A Remix Success Story

Shop is a popular mobile application by Shopify that allows users to discover merchants, make purchases, and track orders across various delivery services. In early 2023, Shopify decided to bring Shop to the web, aiming to achieve feature parity with the native apps and capitalize on the unique advantages of the web platform. This decision was driven by the potential to capture more users, create a faster feedback loop, and enable rapid experimentation and improvement.

Shopify selected Remix as the framework for building Shop.app due to several key factors. First, Remix's compatibility with React allowed the team to reuse logic, styles, and UX from the existing React Native app. Second, Remix offered the flexibility to accommodate the team's existing patterns, such as data fetching with Apollo Client. Additionally, Remix provided essential features like server-side rendering for improved UX and SEO. The framework's adaptability was initially proven in a smaller project, Shop.ai, which gave the team confidence in Remix's capabilities for the larger Shop.app project.

The development of Shop.app with Remix leveraged Shopify's existing monorepo structure, which contained the source code for iOS, Android, and web versions of Shop. This setup simplified the migration of existing marketing pages and allowed for easy collaboration between native and web developers. Remix's flexibility enabled seamless integration with the existing infrastructure, allowing the team to start development rapidly. The team was able to launch the initial product page within just three months, showcasing Remix's efficiency in facilitating fast development cycles.

One challenge the team faced was slow Hot Module Replacement (HMR) times, initially taking about 9 seconds. This issue was addressed by adopting Remix's new Vite plugin, which immediately improved HMR times to 2.3 seconds. Further optimization, including parallelizing the build process for Tailwind CSS, reduced HMR times to an impressive 0.1 seconds. This 90x improvement in development speed significantly enhanced the team's productivity and ability to iterate quickly.

The successful development of Shop.app with Remix demonstrated several key achievements. The team was able to rapidly transform a simple marketing site into a fully functional web application, serving millions of users worldwide. Remix's flexibility allowed for the integration of existing patterns and libraries while providing the option to incrementally adopt Remix-specific features. The project highlighted the importance of choosing the right tools that align with project constraints and goals. Ultimately, Shopify's experience with Remix in building Shop.app showcases the framework's potential for efficiently developing complex, scalable web applications in a short timeframe.