在商店应用程序上实施服务器驱动的UI架构
Located within the Shop organization at Shopify, the Shop Store team is responsible for managing the buyer experience on the Shop App’s Store Screen—the screen where buyers can view a merchant’s products and collections. We recently implemented an architecture called server-driven UI that allows us to control which store sections we want to display for a merchant’s store.
商店商店团队位于Shopify的商店组织内，负责管理商店应用程序的商店屏幕上的买家体验--买家可以查看商家的产品和系列。我们最近实施了一个被称为服务器驱动的用户界面的架构，使我们能够控制我们想要为商家的商店显示哪些部分。
Prior to implementing server-driven UI, the display logic for the Store Screen was purely client-driven. In the context of a client-server architecture, this meant that the Shop client side was responsible for handling all aspects of the UI, including the layout of the Store Screen, visual design elements, and which UI components to render.
在实施服务器驱动的用户界面之前，商店屏幕的显示逻辑是纯粹的客户端驱动。在客户端-服务器架构的背景下，这意味着商店客户端负责处理用户界面的所有方面，包括商店屏幕的布局、视觉设计元素，以及渲染哪些用户界面组件。
As part of my third placement in the Dev Degree program, I joined the Shop Store team as a Mobile Developer Intern. Within this role, I got the opportunity to co-champion the building of a new Store Screen using a server-driven UI architecture. This experience taught me how to design and implement a scalable mobile design pattern, and ship high-quality production code. I also overcame technical challenges such as deciding between an existing team’s server-driven UI components or creating Shop Store-specific components, and figuring out how to support layouts or sections that older client versions were unfamiliar with. This post discusses how my team implemented the server-driven UI architecture on the Store Screen, the lessons I learned, and challenges I overcame while building this architecture.
作为开发学位项目第三次实习的一部分，我加入了Shop Store团队，成为一名移动开发实习生。在这个职位上，我有机会使用服务器驱动的UI架构，共同完成了一个新的商店屏幕的建设。这段经历让我学会了如何设计和实现一个可扩展的移动设计模式，并运送高质量的生产代码。我还克服了一些技术上的挑战，比如在现有团队的服务器驱动的UI组件或创建Shop Store特定的组件之间做出决定，以及弄清楚如何支持旧版客户端不熟悉的布局或部分。这篇文章讨论了我的团队如何在商店屏幕上实现服务器驱动的UI架构，我学到的经验教训，以及我在构建这个架构时克服的挑战。