案例研究：使用 Remix 构建 Shop
构建好的软件很大程度上取决于理解你的约束，然后选择合适的工具。当 Shopify 决定构建 Shop 的网页版时，重要的是
- 利用现有的工具和基础设施
- 利用原生客户端的代码
- 实现定期和快速的功能发布
- 扩展以支持数百万用户
- 尽快交付
Remix 团队的我们与 Shop 团队的同事 Sebastian Ekström 和 Dominic Lind 坐下来，讨论了他们为什么选择 Remix 来完成这个项目以及进展如何。这是一个关于如何使用 Remix 构建 Shop.app 的故事。
什么是 Shop？
Shop 是一个应用程序，允许买家发现商家和产品、进行购买并跟踪订单。Shop 会自动汇总各种送货服务的运输信息。无论是通过 UPS、FedEx 还是任何其他送货方式或公司，Shop 都会在一个地方自动跟踪您的所有送货。
Shop 的原生应用程序在 Google Play 和 Apple App Store 上有数百万次的下载量。虽然 Shop 多年来满足了许多客户的需求，但该网站仅被用作将用户重定向到原生应用程序的营销页面。
在 2023 年初，Shopify 开始探索将 Shop 带到网络的想法。
为网络构建 Shop
长期以来，Shop.app 由一些简单的着陆页组成，鼓励用户下载 iOS 或 Android 应用程序。没有任何功能 - 无法浏览类别或产品，无法将商品添加到您的购物车，当然也无法购买任何东西。
最初的目标是实现与原生应用程序的功能对等。然而，很明显，仅仅为现有用户在网络上重新创建 Shop 体验是不够的。网络具有独特的优势，可以补充原生应用程序。
获取更多用户
即使功能有限，Shop 营销页面也吸引了大量流量。虽然其中一些访问者会继续下载该应用程序，但许多人不会。使用 Shop.app，用户可以选择在网络上注册，从而扩大获取新用户的范围。
更快的反馈循环
网站的新版本每天可以多次发布，而由于移动开发的性质，原生应用程序的等待时间要长得多。
添加 Shop.app 将开辟新的可能性。它将使 Shopify 能够运行短期广告活动并进行日常实验。从这些活动中收集到的有价值的用户反馈可以用来改进 Shop 原生和网络客户端的未来版本。
使用 Remix 构建 Shop.app
通常，当一个项目增长时，它最初是一个网站，然后扩展到原生副本。对于 Shop 来说，情况恰恰相反；原生应用程序的构建方式严重影响了网站的开发方式。
Shop 团队希望在 Shop.app 中重用 Shop 原生应用程序的逻辑、样式和用户体验。他们还希望原生和网络开发人员能够轻松协作并在两个平台上构建功能。
Shop 的原生版本使用 React Native 构建，已经为样式和数据加载建立了相当大的基础设施。因此，为网络选择的任何框架都需要使用 React。此外，它必须足够灵活，以适应团队现有的模式，例如使用 Apollo Client 进行数据获取。
最后，页面需要进行服务器端渲染 (SSR)，以获得最佳的用户体验和 SEO。虽然 Shopify 已经有使用 SSR 构建 React 应用程序的方法，但 Shop 团队渴望尝试 Remix。他们需要一些可以让他们快速启动并随着时间的推移快速添加新功能和页面的东西。
概念验证：Shop.ai
在 2023 年 2 月，在 Shop.app 工作开始前不久，团队的首席开发人员面临着一个类似但范围较小的挑战：在网络上构建一个 AI 驱动的购物助手。
使用 https://127.0.0.1/7YAW0Tk8Rh 更智能地购物！我们已将我们的 ChatGPT 驱动的购物助手带到网络上 — 试用一下，别忘了使用 Shop 登录以保存您的收藏夹 💜 pic.twitter.com/DpSdLEr4QD
— Shop (@shop) 2023 年 3 月 15 日
Shop.ai 现在重定向到 Shop.app。但是，最初的版本是一个单独的网页，展示了一个基于 OpenAI 新发布的 ChatGPT 构建的 Shop 聊天机器人。
该团队有大约 1 个月的时间来构建此站点。他们正在寻找一个快速且适应性强的框架来加快此项目。这是一个尝试 Remix 的绝佳机会。即使他们没有使用许多使其变得出色的功能（数据获取、路由、嵌套布局等），Remix 也被证明足够简单和灵活，可以快速开发 Shop.ai。
这种积极的体验让他们有信心在构建 Shop.app 时选择 Remix。
Monorepo + Remix = 成功
“对于 Shop.app，我们想重用许多来自 [原生] 应用程序的代码。Remix 允许我们这样做，而不会成为障碍。它允许我们逐步迁移。”
如前所述，Shop 原生应用程序使用 React Native 构建。为了简化 Shop 的 iOS、Android 和 Web 版本之间的开发，团队使用一个 monorepo，其中包含所有三个版本的源代码。
monorepo 设置简化了将 Shop.app 页面的现有营销版本迁移到新体验的过程。这也意味着已经设置好了用于 linting、测试、CI/CD 等的基本基础设施。
由于 Remix 提供的灵活性和控制级别，Shop 团队能够轻松地将 Remix 与现有基础设施集成。因为团队可以如此轻松地将 Remix 集成到他们现有的系统中，这让他们能够开始快速开发 Shop.app。
完成工作
“我从未在如此短的时间内产生如此多的东西，并取得如此好的结果。”
在 Shopify，我们有一句话：“完成工作”。作为一家公司，Shopify 以构建新的和创新的事物并快速构建它们而自豪。
对于 Shop.app，团队渴望尽快启动产品页面的初始版本。整个团队都一致认为要尽可能快地构建，他们发现使用 Remix 可以非常快地完成。
该团队于 2023 年 4 月开始构建 Shop.app。除了足够灵活以轻松集成到他们现有的 monorepo 中之外，Remix 还提供了许多团队需要快速行动的开箱即用功能：SSR、路由、链接预取等等。使用 Remix，该团队得以在 2023 年 7 月之前启动初始产品页面。
那是 3 个月完成工作
使用 Remix，该团队能够使用他们现有的后端、模式和库，而不是被迫以“Remix 方式”重写他们的基础设施。Shop.app 并没有完全利用 Remix 特定的 API，例如 Remix 加载模式和 defer。Remix 让开发人员完全控制他们的项目，并在需要时提供有用的杠杆。这种理念允许 Shop 团队轻松地插入他们自己的模式和库，同时逐步利用和试验 Remix 功能。
如果没有 Remix，在如此短的时间内向全球数百万用户发布 Shop.app 的初始版本是不可能实现的。
使用 Vite 更快
团队在使用 Remix 时遇到的一个难题是热模块替换 (HMR) 速度较慢。从开发人员点击保存到他们能够在本地看到他们的更改反映出来，需要大约 9 秒。
幸运的是，我们已经在研究解决方案。当 Shop 团队得知 Remix 团队正在将编译器更改为 Vite 插件时，他们欣喜若狂。他们对新的 Vite 插件及其将为他们的团队带来的 DX 好处充满信心，他们毫不犹豫地开始使用它，甚至在 它被标记为稳定之前。
迁移到 Vite 后，他们的 HMR 时间立即缩短至 2.3 秒。
这些只是初始数字。该团队通过并行化其样式系统 Tailwind CSS 的构建过程，进一步缩短了 HMR 时间。一旦并行化，HMR 时间将一直减少到 0.1 秒。
那是从 9 秒到 0.1 秒，提高了 90 倍
总结
使用 Remix 构建 Shop.app 的旅程证明了 Remix 的灵活性、DX 和可扩展性，以及 Shopify 对以快速和迭代的方式构建良好、有用的软件的关注。
通过利用 monorepo 设置的优势、基于现有基础设施进行构建以及利用 Remix 的快速开发能力，Shopify 成功地将 Shop.app 从一个简单的营销网站转变为一个功能齐全的网络应用程序。
迁移到 Vite 进一步加速了开发过程，大大提高了 HMR 时间并提高了生产力。由于 Remix 通过 不稳定和未来标志进行持续交付，该团队能够在 Vite 稳定之前完成此操作。
Shopify 能够使用 Remix 快速有效地向数百万用户交付一个复杂且有用的网络应用程序。您将使用 Remix 构建什么？
