Как Shopify создал Shop.app: История успеха Remix

Shop — это популярное мобильное приложение от Shopify, которое позволяет пользователям находить продавцов, совершать покупки и отслеживать заказы через различные службы доставки. В начале 2023 года Shopify решил перенести Shop в веб, стремясь достичь паритета функций с нативными приложениями и воспользоваться уникальными преимуществами веб-платформы. Это решение было принято в связи с возможностью привлечь больше пользователей, создать более быстрый цикл обратной связи и обеспечить быстрое экспериментирование и улучшение.

Shopify выбрал Remix в качестве фреймворка для создания Shop.app по нескольким ключевым причинам. Во-первых, совместимость Remix с React позволила команде повторно использовать логику, стили и UX из существующего приложения на React Native. Во-вторых, Remix предложил гибкость для учета существующих паттернов команды, таких как получение данных с помощью Apollo Client. Кроме того, Remix предоставил важные функции, такие как рендеринг на стороне сервера для улучшения UX и SEO. Адаптивность фреймворка была первоначально доказана в меньшем проекте, Shop.ai, что дало команде уверенность в возможностях Remix для более крупного проекта Shop.app.

Разработка Shop.app с использованием Remix использовала существующую монорепозиторную структуру Shopify, которая содержала исходный код для версий Shop на iOS, Android и веб. Эта настройка упростила миграцию существующих маркетинговых страниц и позволила легко сотрудничать между разработчиками нативных и веб-приложений. Гибкость Remix обеспечила бесшовную интеграцию с существующей инфраструктурой, что позволило команде быстро начать разработку. Команда смогла запустить начальную страницу продукта всего за три месяца, что продемонстрировало эффективность Remix в содействии быстрым циклам разработки.

Одной из проблем, с которой столкнулась команда, были медленные времена замены горячих модулей (HMR), которые изначально составляли около 9 секунд. Эта проблема была решена путем внедрения нового плагина Vite от Remix, который сразу же улучшил времена HMR до 2.3 секунд. Дальнейшая оптимизация, включая параллелизацию процесса сборки для Tailwind CSS, сократила времена HMR до впечатляющих 0.1 секунды. Это улучшение скорости разработки в 90 раз значительно повысило продуктивность команды и возможность быстрой итерации.

Успешная разработка Shop.app с использованием Remix продемонстрировала несколько ключевых достижений. Команда смогла быстро преобразовать простой маркетинговый сайт в полнофункциональное веб-приложение, обслуживающее миллионы пользователей по всему миру. Гибкость Remix позволила интегрировать существующие паттерны и библиотеки, предоставляя возможность поэтапного внедрения специфических для Remix функций. Проект подчеркнул важность выбора правильных инструментов, которые соответствуют ограничениям и целям проекта. В конечном итоге опыт Shopify с Remix в создании Shop.app демонстрирует потенциал фреймворка для эффективной разработки сложных, масштабируемых веб-приложений в короткие сроки.