远程渲染:Shopify的可扩展UI方案
Shopify is one of the world's largest e-commerce platforms. With over 1.7 million merchants worldwide, we support an increasingly diverse set of use cases, and we wouldn't be successful at it without our developer community. Developers build apps that add immense value to Shopify and its merchants, and solve problems such as marketing automation, sales channel integrations, and product sourcing.
Shopify是世界上最大的电子商务平台之一。我们在全球拥有超过170万的商家,我们支持越来越多样化的使用案例,如果没有我们的开发者社区,我们是不会成功的。开发者建立的应用程序为Shopify及其商户增加了巨大的价值,并解决了诸如营销自动化、销售渠道整合和产品采购等问题。
In this post, we will take a deep dive into the latest generation of our technology that allows developers to extend Shopify’s UI. With this technology, developers can better integrate with the Shopify platform and offer native experiences and rich interactions that fit into users' natural workflow on the platform.
在这篇文章中,我们将深入探讨我们最新一代的技术,它允许开发者扩展Shopify的用户界面。有了这项技术,开发者可以更好地与Shopify平台整合,并提供原生体验和丰富的互动,以适应用户在平台上的自然工作流程。

3rd party extension adding a post-purchase page directly into the Shopify checkout
第三方扩展,直接在Shopify的结账中添加购买后的页面
To put the technical challenges into context, it's important to understand our main objectives and requirements:
为了把技术挑战放在背景中,了解我们的主要目标和要求是很重要的。
- The user experience of 3rd party extensions must be consistent with Shopify's native content in terms of look & feel, performance, and accessibility features.
- 第三方扩展的用户体验必须与Shopify的本地内容在外观和感觉、性能和可访问性功能方面保持一致。
- Developers should be able to extend Shopify using standard technologies they are already familiar with.
- 开发人员应该能够使用他们已经熟悉的标准技术来扩展Shopify。
- Shopify needs to run extensions in a secure and reliable manner, and prevent them from negatively impacting the platform (naively or maliciously).
- Shopify需要以安全可靠的方式运行扩展,并防止它们对平台产生负面影响(天真或恶意)。
- Extensions should offer the same delightful experience across all supported platforms (web, iOS, Android).
- 扩展应该在所有支持的平台(网页、iOS、Android)上提供同样令人愉悦的体验。
With these requirements in mind, it's time to peel the onion.
考虑到这些要求,现在是剥洋葱的时候了。
Remote Rendering
远程渲染
At the heart of our solution is a technique we ...