案例研究：使用 Remix 构建 Shop
构建优秀的软件很大程度上取决于对约束条件的理解，然后选择合适的工具。当 Shopify 决定构建 Shop 的网页版时，重要的是要
- 利用现有的工具和基础设施
- 利用来自原生客户端的代码
- 启用定期和快速的功能发布
- 扩展以支持数百万用户
- 尽快发布
我们 Remix 团队与来自 Shop 团队的同事 Sebastian Ekström 和 Dominic Lind 坐下来讨论他们为什么选择 Remix 来完成这个项目以及项目的进展情况。这是关于 Shop.app 如何使用 Remix 构建的故事。
什么是 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 原生应用程序的逻辑、样式和 UX。他们还希望原生开发人员和网页开发人员能够轻松地在两个平台上进行协作和构建功能。
Shop 的原生版本，使用 React Native 构建，已经拥有大量用于样式和数据加载的基础设施。因此，为网页选择的任何框架都需要使用 React。此外，它必须足够灵活以适应团队现有的模式，例如使用 Apollo Client 获取数据。
最后，页面需要进行服务器端渲染 (SSR) 以获得最佳的 UX 和 SEO。虽然 Shopify 已经拥有使用 SSR 构建 React 应用程序的方法，但 Shop 团队渴望尝试 Remix。他们需要能够快速启动并在一段时间内快速添加新功能和页面的东西。
概念验证：Shop.ai
2023 年 2 月，就在 Shop.app 工作开始之前不久，团队中的主要开发人员遇到了一个类似但范围更小的挑战：在网页上构建一个 AI 驱动的购物助手。
使用 https://t.co/7YAW0Tk8Rh 更智能地购物！我们将 ChatGPT 驱动的购物助手带到了网页上——试试看，别忘了使用 Shop 登录以保存你的收藏 💜 pic.twitter.com/DpSdLEr4QD
— Shop (@shop) 2023 年 3 月 15 日
Shop.ai 现在重定向到 Shop.app。但是，最初的版本是一个网页，展示了基于 OpenAI 新发布的 ChatGPT 构建的 Shop 聊天机器人。
团队有大约一个月的时间来构建这个网站。他们正在寻找一个快速且可适应的框架来加快这个项目。这是尝试 Remix 的绝佳机会。即使他们没有使用许多使其成为伟大框架的功能（数据获取、路由、嵌套布局等），Remix 证明了它足够简单且灵活，可以快速开发 Shop.ai。
这种积极的体验让他们在构建 Shop.app 时有信心选择 Remix。
单仓库 + Remix = 成功
“使用 Shop.app，我们希望重复使用从 [原生] 应用程序获得的大量代码。Remix 让我们能够做到这一点，而且不会成为障碍。它让我们能够逐个迁移。”
如前所述，Shop 原生应用程序使用 React Native 构建。为了简化 Shop 的 iOS、Android 和网页版本的开发，团队使用了一个单仓库，其中包含所有三个版本的源代码。
单仓库设置简化了将 Shop.app 页面的现有营销版本迁移到新体验的过程。这也意味着 linting、测试、CI/CD 等的基本基础设施已经设置好了。
由于 Remix 提供的灵活性和控制级别，Shop 团队能够轻松地将 Remix 集成到现有基础设施中。由于团队可以如此轻松地将 Remix 集成到现有系统中，因此它允许他们开始快速开发 Shop.app。
完成工作
“我从未在如此短的时间内生产出如此多的东西，而且获得了如此好的结果。”
在 Shopify，我们有一个短语：“完成工作”。Shopify 作为一家公司，以构建新的和创新的事物并快速构建而自豪。
对于 Shop.app，团队渴望尽快发布产品页面的初始版本。整个团队都一致同意尽快构建，他们发现使用 Remix 可以很快完成。
团队于 2023 年 4 月开始构建 Shop.app。除了足够灵活，可以轻松地与现有单仓库集成外，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 对快速迭代地构建良好、有用软件的关注。
通过利用单一仓库设置的优势，在现有基础设施上进行构建，并利用 Remix 的快速开发能力，Shopify 成功地将 Shop.app 从一个简单的营销网站转变为一个功能齐全的 Web 应用程序。
迁移到 Vite 进一步加速了开发过程，大幅改善了热模块替换 (HMR) 时间并提高了生产力。由于 Remix 与 不稳定功能和未来功能 的持续交付，团队能够在 Vite 稳定之前实现这一点。
Shopify 能够使用 Remix 快速有效地为数百万用户提供复杂且有用的 Web 应用程序。您将使用 Remix 构建什么？
