Comment Shopify a construit Shop.app : Une histoire de succès Remix

Shop est une application mobile populaire de Shopify qui permet aux utilisateurs de découvrir des commerçants, d'effectuer des achats et de suivre des commandes à travers divers services de livraison. Au début de 2023, Shopify a décidé de porter Shop sur le web, visant à atteindre une parité fonctionnelle avec les applications natives et à tirer parti des avantages uniques de la plateforme web. Cette décision a été motivée par le potentiel de capter plus d'utilisateurs, de créer un retour d'information plus rapide et de permettre une expérimentation et une amélioration rapides.

Shopify a sélectionné Remix comme cadre pour construire Shop.app en raison de plusieurs facteurs clés. Tout d'abord, la compatibilité de Remix avec React a permis à l'équipe de réutiliser la logique, les styles et l'expérience utilisateur de l'application React Native existante. Deuxièmement, Remix offrait la flexibilité d'accommoder les modèles existants de l'équipe, tels que la récupération de données avec Apollo Client. De plus, Remix fournissait des fonctionnalités essentielles comme le rendu côté serveur pour améliorer l'expérience utilisateur et le référencement. L'adaptabilité du cadre a été initialement prouvée dans un projet plus petit, Shop.ai, ce qui a donné à l'équipe confiance dans les capacités de Remix pour le projet plus vaste Shop.app.

Le développement de Shop.app avec Remix a tiré parti de la structure monorepo existante de Shopify, qui contenait le code source pour les versions iOS, Android et web de Shop. Cette configuration a simplifié la migration des pages marketing existantes et a permis une collaboration facile entre les développeurs natifs et web. La flexibilité de Remix a permis une intégration transparente avec l'infrastructure existante, permettant à l'équipe de commencer le développement rapidement. L'équipe a pu lancer la page produit initiale en seulement trois mois, montrant l'efficacité de Remix à faciliter des cycles de développement rapides.

Un défi auquel l'équipe a été confrontée était le temps de remplacement de module à chaud (HMR) lent, prenant initialement environ 9 secondes. Ce problème a été résolu en adoptant le nouveau plugin Vite de Remix, qui a immédiatement amélioré les temps HMR à 2,3 secondes. D'autres optimisations, y compris la parallélisation du processus de construction pour Tailwind CSS, ont réduit les temps HMR à un impressionnant 0,1 seconde. Cette amélioration de 90x de la vitesse de développement a considérablement augmenté la productivité de l'équipe et sa capacité à itérer rapidement.

Le développement réussi de Shop.app avec Remix a démontré plusieurs réalisations clés. L'équipe a pu transformer rapidement un simple site marketing en une application web entièrement fonctionnelle, servant des millions d'utilisateurs dans le monde entier. La flexibilité de Remix a permis l'intégration de modèles et de bibliothèques existants tout en offrant la possibilité d'adopter progressivement des fonctionnalités spécifiques à Remix. Le projet a mis en évidence l'importance de choisir les bons outils qui s'alignent sur les contraintes et les objectifs du projet. En fin de compte, l'expérience de Shopify avec Remix dans la construction de Shop.app met en avant le potentiel du cadre pour développer efficacement des applications web complexes et évolutives dans un court laps de temps.