<aside> ⚠️ This project is a WIP

</aside>

Introduction

Ditto is an attempt at Server Driven UI inspired by Airbnb’s SDUI system.

• The mobile app can be dynamically rendered via the API response in JSON (without an app release).
• There are 3 major components: Views, Actions, Pages
  • Page
    • It represents the layout of the page the user sees
    • It can contain any number of views.
  • View
    • It represents a single view in a page
    • It can support a single action (unless nested).
  • Action
    • If a view has an action, the user can tap on the view to perform an operation such as opening a new page or opening the call dialer to make a phone call.

Cheatsheet

PAGE

List Page JSON

{
	"views": [
		// View Json Nodes
	],
	"actions": {
		// Action Json Map
	}
}

VIEW

Type: view:ViewName

{
		"type": "view:ImageAvatar",
		"data": {
			"id": "imageId-12",
			"imageUrl": "https:\\/\\/i.pravatar.cc\\/400",
			"imageShape": "CIRCLE"
		}
}

Nested

Type: view:NestedViewName

Data: must contain list array node

{
		"type": "view:NestedList",
		"data": {
			"spacingInDp": 8,
			"showLineSeparators": false,
			"layoutType": "GRID",
			"list": [{
				"type": "view:NestedCard",
				"data": {
					"isHorizontal": false,
					"list": [{
						"type": "view:CellKeyValueOneAfter",
						"data": {
							"key": "Ice Cream Flavour",
							"value": "Chocolate"
						}
			}]
		}
}

ACTION

Ditto Actions action:ActionName