Building an extensible platform with UI extensions

What's the difference between building an SDK (allowing others to use your code) and building an extensible platform (allowing others to run their code in your platform)? . As any product scales, users will demand niche features, tweaks, and integrations. How can you make everyone happy without derailing your roadmap?

This talk is a case study of how Shopify is solving this problem by "letting them code their own solution" . Our goal: create "injected UI that is indistinguishable from Shopify's native content on all platforms" .

Transcript

1. Bruno Aybar Building an extensible platform with UI extensions
2. Bruno Aybar • Organizer @ Android Dev Peru • Senior Engineer @ Shopify
3. 󰠁 SDK 1 use SDK 2 SDK 3 Building SDKs: Allowing other apps to integrate our code
4. 󰠁 < some custom code > execute Building an extensible platform: Allowing other apps to run their code in our platform
5. A platform that provide you all the tools and APIs that allow you to seamlessly extend its capabilities Extensible platform
6. This is a multiplatform story…
7. Between mobile and web… This is a multiplatform story…
8. Between mobile and web… This is a multiplatform story… powered by React / Native
9. - Farhan Thawar, 2020 React Native is the Future of Mobile at Shopify Public blog post: https://shopify.engineering/react-native-future-mobile-shopify
10. Shopify POS
11. Shopping cart
12. 💻 Let's implement all these cool features that our users will love!
13. 💻 Let's implement all these cool features that our users will love! 󰞥󰞏󰟦󰲿 This app is perfect, it's exactly what I need
14. 💻 Let's implement all these cool features that our users will love! 󰞥󰞏󰟦󰲿 This app is perfect, it's exactly what I need 󰟱 I need you to build this other feature before using your app
15. 💻 Let's implement all these cool features that our users will love! 󰞥󰞏󰟦󰲿 This app is perfect, it's exactly what I need 󰞥 So this new feature is in your roadmap, but I need it now
16. 💻 Let's implement all these cool features that our users will love! 󰞥󰞏󰟦󰲿 This app is perfect, it's exactly what I need 󰟦 You have the feature I need - but I need you to tweak it a bit…
17. 💻 󰞥󰞏󰟦󰲿 This app is perfect, it's exactly what I need 󰟱 So this new feature is in your roadmap, but I need it now How do I make everyone happy? 󰟦 You have the feature I need - but I need you to tweak it a bit…
18. More configurations? (product implications) 💻 How do I make everyone happy? Custom build? (ops implications) Losing those clients? (financial implications)
19. 💻 Let's allow them to code their own solution
20. 💻 Let's allow them to code their own solution < codebase > 󰠁 < some custom code > render & execute
21. 💻 Let's allow them to code their own solution < codebase > 󰠁 < some custom code > render & execute Goal: "injected UI that is indistinguishable from Shopify's native content on all platforms"
22. 💻 How to run external code? What about Security? Tooling? Versioning? Publishing? < codebase > 󰠁 < some custom code >
23. • Customize their frontend (Shopify Liquid) • Customize their backend code (Shopify Functions) • Write a custom app (Shopify Apps) • ✨ UI extensions✨ Step #1 Choosing the layer of extensibility ❌ ✅ ✅
25. previous approach (super slow)
26. new approach (super fast)
27. • Design System components: • To achieve "UI that is indistinguishable from Shopify's native content" • Host app API's: • To access local storage • To make network requests • To listen to app events Step #2 Provide developer-friendly APIs
28. Step #3 Establishing surface areas • Being extensible does not mean giving up control of the experience • Establish: • extension points (surface areas) • navigation rules
30. • Building on top of remote-ui (github repo) • written in Typescript • allows remote rendering of UI elements in the main thread • iframes / webview did not accomplish that goal Step #4 Building the rendering engine
31. Native UI components
33. knows how to render components natively within the host
34. communicate UI updates
38. Serialized render tree (JSON)
39. Serialized render tree (JSON) postM essage (via RPC)
40. Serialized render tree (JSON) postM essage (via RPC) Knows how to render this native component
41. • Shopify CLI tool to upload scripts to the platform Step #5 Provide developer-friendly tools
42. All these tools were initially built for web
43. … support for mobile came later, but work was minimal
44. • Decoupled system, on multiple layers • Developer-friendly APIs • Comprehensive documentation Building an extensible platform requires…
45. Pro tip: Dogfooding
46. • React Native offers some interesting multiplatform opportunities. • Extensible platforms can be an amazing competitive advantage, but require a lot of development and architectural effort. Conclusions
47. Thanks!