TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Server-Driven UI for Mobile Store Screens

1 post · Sep 2022 – Nov 2022

What this trail covers

Shopify has implemented a server-driven UI architecture for the Shop App's Store Screen, enabling dynamic and personalized merchant store layouts. This allows for flexible control over displayed sections and components, moving away from a purely client-driven approach. The system includes server-side template processing, data loading, and GraphQL layers, and a client-side component architecture. This post details the development of iOS widgets, focusing on native development with SwiftUI for analytics display, data fetching strategies using Reportify and ShopifyQL, implementing a short-lived cache to prevent excessive network calls and session kick-outs, and building a flexible UI to support multiple widget sizes and metric configurations.

All Shopify trails
  1. Implementing Server-Driven UI Architecture on the Shop App - ShopifyThis post details the implementation of a server-driven UI architecture for the Shop App's Store Screen. The contribution includes the design and implementation of client-side components (`ProductGrid`, `ProductsSection`, `StoreSectionContainer`) and the creation of a `StoreSections` GraphQL query and `useStoreSections` hook. It also covers the decision-making process for choosing between reusing existing server-driven UI components or creating Shop Store-specific ones, ultimately opting for the latter to gain more control over data types and section rendering.
  2. Lessons From Building iOS Widgets - ShopifyThis post details the development of iOS widgets for Shopify, focusing on native development with SwiftUI. It covers data fetching strategies using Reportify and ShopifyQL, the implementation of a short-lived cache to optimize network calls and prevent session kick-outs, and the UI architecture for supporting multiple widget sizes and metric configurations. The authors explain why React Native was not used for widget development due to limitations in memory and WidgetKit's architecture, and discuss the challenges of fetching fresh data and making widgets antifragile.