案例研究：使用 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 進行資料擷取。
最後，為了獲得最佳的 UX 和 SEO，頁面需要進行伺服器端渲染 (SSR)。雖然 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 和網頁版本之間的開發，該團隊使用包含所有三個版本原始程式碼的 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 式」的方式重寫他們的基礎設施。還有額外的 Remix 特定 API，Shop.app 沒有完全利用，例如 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 從一個簡單的行銷網站轉變為一個功能齊全的 Web 應用程式。
遷移到 Vite 進一步加速了開發流程，大幅改善了 HMR 時間並提高了生產力。由於 Remix 使用 不穩定和未來標誌進行持續交付，因此該團隊能夠在 Vite 穩定之前完成此操作。
Shopify 能夠使用 Remix 快速有效地向數百萬使用者交付複雜且有用的 Web 應用程式。您將使用 Remix 建立什麼？
