How do we Render? @Composable fun render(component: Component) { when (component) { is LabelData - > Label(component) is ButtonData -> Button(component) // .. . } }
How do we Render? @Composable fun render(component: Component) { when (component) { is LabelData -> Label(component) is ButtonData -> Button(component) // ... } }
// Public API interface ActionHandler { suspend fun onClick(action: OnClick) {} } val LocalServerDrivenUiActionHandler = staticCompositionLocalOf { error("nothing provided") }
// Public API val actionHandler = object : ActionHandler { override suspend fun onClick(action: OnClick) { when (action) { is OnClick.Deeplink -> { // .... } } } }
// Public API val actionHandler = object : ActionHandler { override suspend fun onClick(action: OnClick) { when (action) { is OnClick.Deeplink -> { // .... } } } }
Recap • Design system simplifies our scope and empowers SDUI • Actions are powerful and optional on all components • Components are serialized from payload and self render
Open Deserialization • Cons: • Easy to bypass design system • Duplication of widgets over time • Lose the ability to change without releasing a new version of the App
To help shipping speeds really fly, We started using server driven ui, building it against our system of design, colors, fonts, and the width of each line. We agreed on data representations, approved by Android and iOS nations. We followed it with a component interface, allowing us to deserialize a polymorphic base. We realized we'd have to glean, info on the type to draw on the screen. We need to be sure iOS and Android are in sync, as time goes on, we continue to think, do we generate code from a common source, or misuse expect actual with a bit of remorse, or do we just share models in KMP, this is yet another point in our decision tree. In order to support actions like click, without code that makes us sick, we have each action containing its data, handled by a composition local sometime later. How do we allow people to add new components? Multiple solutions, each with their proponents. Allow folks to define a component type, or implement row, column, and the low level hype. Since our design system is written in Compose, run it on multiple platforms we do propose, web and desktop make a lot of sense, open up nice doors while costing a mere pence. We hope you'll check out our GitHub repo, and make server driven ui your Home Depot.