Shopify 如何构建 Shop.app：Remix 成功案例

Shop 是 Shopify 开发的一款流行移动应用，允许用户发现商家、进行购买并跟踪各种配送服务的订单。在 2023 年初，Shopify 决定将 Shop 推向网络，旨在实现与原生应用的功能平衡，并利用网络平台的独特优势。这个决定是基于捕获更多用户、创建更快反馈循环以及实现快速实验和改进的潜力。

Shopify 选择 Remix 作为构建 Shop.app 的框架，主要基于几个关键因素。首先，Remix 与 React 的兼容性使团队能够重用现有 React Native 应用的逻辑、样式和用户体验。其次，Remix 提供了灵活性，以适应团队现有的模式，例如使用 Apollo Client 进行数据获取。此外，Remix 提供了重要的功能，如服务器端渲染，以改善用户体验和搜索引擎优化。该框架的适应性最初在一个较小的项目 Shop.ai 中得到了验证，这使团队对 Remix 在更大 Shop.app 项目中的能力充满信心。

使用 Remix 开发 Shop.app 利用了 Shopify 现有的单一代码库结构，其中包含了 iOS、Android 和网络版本 Shop 的源代码。这种设置简化了现有营销页面的迁移，并允许原生和网络开发人员之间的轻松协作。Remix 的灵活性使得与现有基础设施的无缝集成成为可能，使团队能够快速开始开发。团队在短短三个月内就能够推出初始产品页面，展示了 Remix 在促进快速开发周期方面的高效性。

团队面临的一个挑战是热模块替换（HMR）时间较慢，最初需要约 9 秒。通过采用 Remix 的新 Vite 插件，立即将 HMR 时间改善至 2.3 秒。进一步的优化，包括为 Tailwind CSS 并行化构建过程，将 HMR 时间减少到令人印象深刻的 0.1 秒。这一开发速度的 90 倍提升显著提高了团队的生产力和快速迭代的能力。

使用 Remix 成功开发 Shop.app 展示了几个关键成就。团队能够迅速将一个简单的营销网站转变为一个功能齐全的网络应用，服务于全球数百万用户。Remix 的灵活性允许集成现有模式和库，同时提供逐步采用 Remix 特定功能的选项。该项目强调了选择与项目约束和目标相一致的正确工具的重要性。最终，Shopify 在构建 Shop.app 时与 Remix 的经验展示了该框架在短时间内高效开发复杂、可扩展的网络应用的潜力。