Wie Shopify Shop.app entwickelte: Eine Erfolgsgeschichte mit Remix

Shop ist eine beliebte mobile Anwendung von Shopify, die es Nutzern ermöglicht, Händler zu entdecken, Einkäufe zu tätigen und Bestellungen über verschiedene Lieferdienste zu verfolgen. Anfang 2023 entschied sich Shopify, Shop ins Web zu bringen, mit dem Ziel, die Funktionalität der nativen Apps zu erreichen und die einzigartigen Vorteile der Webplattform zu nutzen. Diese Entscheidung wurde durch das Potenzial motiviert, mehr Nutzer zu gewinnen, einen schnelleren Feedback-Zyklus zu schaffen und schnelle Experimente und Verbesserungen zu ermöglichen.

Shopify wählte Remix als Framework für den Bau von Shop.app aus mehreren wichtigen Gründen. Erstens ermöglichte die Kompatibilität von Remix mit React dem Team, Logik, Stile und UX aus der bestehenden React Native-App wiederzuverwenden. Zweitens bot Remix die Flexibilität, die bestehenden Muster des Teams, wie das Datenabrufen mit Apollo Client, zu berücksichtigen. Darüber hinaus stellte Remix wesentliche Funktionen wie serverseitiges Rendering für verbesserte UX und SEO bereit. Die Anpassungsfähigkeit des Frameworks wurde zunächst in einem kleineren Projekt, Shop.ai, unter Beweis gestellt, was dem Team Vertrauen in die Fähigkeiten von Remix für das größere Projekt Shop.app gab.

Die Entwicklung von Shop.app mit Remix nutzte die bestehende Monorepo-Struktur von Shopify, die den Quellcode für iOS-, Android- und Webversionen von Shop enthielt. Dieses Setup vereinfachte die Migration bestehender Marketingseiten und ermöglichte eine einfache Zusammenarbeit zwischen nativen und Webentwicklern. Die Flexibilität von Remix ermöglichte eine nahtlose Integration in die bestehende Infrastruktur, sodass das Team die Entwicklung schnell starten konnte. Das Team konnte die erste Produktseite innerhalb von nur drei Monaten launchen, was die Effizienz von Remix bei der Ermöglichung schneller Entwicklungszyklen demonstrierte.

Eine Herausforderung, mit der das Team konfrontiert war, waren langsame Hot Module Replacement (HMR)-Zeiten, die zunächst etwa 9 Sekunden in Anspruch nahmen. Dieses Problem wurde durch die Einführung des neuen Vite-Plugins von Remix angegangen, das die HMR-Zeiten sofort auf 2,3 Sekunden verbesserte. Weitere Optimierungen, einschließlich der Parallelisierung des Build-Prozesses für Tailwind CSS, reduzierten die HMR-Zeiten auf beeindruckende 0,1 Sekunden. Diese 90-fache Verbesserung der Entwicklungsgeschwindigkeit steigerte die Produktivität des Teams erheblich und ermöglichte schnelles Iterieren.

Die erfolgreiche Entwicklung von Shop.app mit Remix zeigte mehrere wichtige Erfolge. Das Team konnte eine einfache Marketingseite schnell in eine voll funktionsfähige Webanwendung umwandeln, die Millionen von Nutzern weltweit bedient. Die Flexibilität von Remix ermöglichte die Integration bestehender Muster und Bibliotheken, während die Option bestand, Remix-spezifische Funktionen schrittweise zu übernehmen. Das Projekt hob die Bedeutung der Auswahl der richtigen Werkzeuge hervor, die mit den Projektbeschränkungen und -zielen übereinstimmen. Letztendlich zeigt die Erfahrung von Shopify mit Remix beim Bau von Shop.app das Potenzial des Frameworks für die effiziente Entwicklung komplexer, skalierbarer Webanwendungen in kurzer Zeit.