Playing in the Treehouse with Redwood and Zipline (KotlinConf 2023)

Redwood is Cash App's multiplatform Compose library which targets the native UI toolkit of each platform while still sharing presentation logic. This means our app's existing Android views and iOS UIViews can be powered by common Compose and still offer a path to Compose UI and Swift UI.

Zipline is a multiplatform Javascript engine for Android, iOS, and the JVM which uses Kotlin interfaces for calls in and out of JS. This allows us to update the logic of our apps faster than going through the app store release process.

Treehouse is what we call the combination of Redwood and Zipline. By moving the Compose presentation logic into Zipline we can update the screens of our apps across Android, iOS, and web without waiting for the app store.

This talk will cover how Redwood and Zipline can work in isolation but how the combination as Treehouse is their most powerful form.

Video: https://jakewharton.com/playing-in-the-treehouse-with-redwood-and-zipline/

Transcript

1. @jw@jakewharton.com Playing in the Treehouse with Redwood and Zipline
2. Redwood Zipline
3. Redwood Zipline Treehouse
4. Figma Android Eng iOS Eng Web Eng Redwood
5. Figma Android Eng iOS Eng Web Eng View Impl UIKit Impl DOM Impl Redwood
6. Figma Android Eng iOS Eng Web Eng View Impl UIKit Impl DOM Impl Redwood Redwood
7. Figma Android Eng iOS Eng Web Eng View Impl UIKit Impl DOM Impl Redwood Redwood
8. Schema Widgets Redwood
9. Schema Widgets Compose Redwood
10. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
11. Redwood Schema data class Column( val children: () -> Unit, val birthday: LocalDate, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
12. Redwood Schema import kotlinx.datetime.LocalDate data class Column( val children: () -> Unit, val birthday: LocalDate, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
13. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
14. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
15. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
16. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
17. Redwood Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
18. Redwood Schema
19. Redwood Schema data class Row(…) data class Column(…) data class Image( val url: HttpUrl, val size: ImageSize, val borderStyle: BorderStyle, ) data class Text( val text: String, val font: FontFamily, val style: FontStyle, )
20. Redwood Schema data class ContactItem( val name: String, val image: HttpUrl, val content: () -> Unit, ) data class Text( val text: String, val font: FontFamily, val style: FontStyle, )
21. Redwood Schema data class Row(…) data class Column(…) data class Image( val url: HttpUrl, val size: ImageSize, val borderStyle: BorderStyle, ) data class Text( val text: String, val font: FontFamily, val style: FontStyle, ) data class ContactItem( val name: String, val image: HttpUrl, val content: () -> Unit, ) data class Text( val text: String, val font: FontFamily, val style: FontStyle, )
22. Redwood Compose data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
23. Redwood Compose data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, ) @Composable fun Column( children: @Composable () -> Unit, ) { … } @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { … }
24. Redwood Compose @Composable fun Column( children: @Composable () -> Unit, ) { … } @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { … }
25. Redwood Compose Column { var query by remember { mutableStateOf("") } TextInput( hint = "Search", text = query, onTextChanged = { query = it }, ) val images = LoadImages(query) ScrollableColumn { for (image in images) { Image(url = image.url) } } }
26. Redwood Widgets data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
27. Redwood Widgets data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, ) interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> } interface TextInput<T : Any> : Widget<T> { fun hint(hint: String) fun text(text: String) fun onTextChanged(onTextChanged: ((String) -> Unit)?) }
28. Redwood Widgets interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> } interface TextInput<T : Any> : Widget<T> { fun hint(hint: String) fun text(text: String) fun onTextChanged(onTextChanged: ((String) -> Unit)?) }
29. Redwood Widgets interface Widget<T : Any> { val value: T } interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> } interface TextInput<T : Any> : Widget<T> { fun hint(hint: String) fun text(text: String) fun onTextChanged(onTextChanged: ((String) -> Unit)?) }
30. Redwood Widgets interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
31. Redwood Widgets class ViewColumn : Column<View> interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
32. Redwood Widgets class ViewColumn( override val value: LinearLayout, ) : Column<View> interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
33. Redwood Widgets class ViewColumn( override val value: LinearLayout, ) : Column<View> { override val children = ViewGroupChildren(value) } interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
34. Redwood Widgets interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> fun ScrollableColumn(): ScrollableColumn<T> fun TextInput(): TextInput<T> fun Image(): Image<T> }
35. Redwood Widgets interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
36. Redwood Widgets class EmojiViewWidgetFactory : EmojiWidgetFactory<View> interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
37. Redwood Widgets class EmojiViewWidgetFactory( private val context: Context, ) : EmojiWidgetFactory<View> interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
38. Redwood Widgets class EmojiViewWidgetFactory( private val context: Context, ) : EmojiWidgetFactory<View> { override fun Column(): Column<View> { } } interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
39. Redwood Widgets class EmojiViewWidgetFactory( private val context: Context, ) : EmojiWidgetFactory<View> { override fun Column(): Column<View> { return ViewColumn(LinearLayout(context)) } } interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
40. Redwood Widgets class EmojiViewWidgetFactory( private val context: Context, ) : EmojiWidgetFactory<View> { override fun Column(): Column<View> { return ViewColumn(LinearLayout(context)) } … } interface EmojiWidgetFactory<T : Any> : Widget.Factory<T> { fun Column(): Column<T> … }
41. @Composable fun MessageCard(msg: Message) { Row(modifier = Modifier.padding(all = 8.dp)) { Image( painter = painterResource(R.drawable.profile_picture), contentDescription = null, modifier = Modifier .size(40.dp) .clip(CircleShape) .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape), ) Spacer(modifier = Modifier.width(8.dp)) Column { Text( text = msg.author, color = MaterialTheme.colors.secondaryVariant, style = MaterialTheme.typography.subtitle2, ) Spacer(modifier = Modifier.height(4.dp)) Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) { Text( text = msg.body, modifier = Modifier.padding(all = 4.dp), style = MaterialTheme.typography.body2, ) } } } }
42. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } }
43. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root
44. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root
45. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
46. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
47. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Image
48. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Spacer Image
49. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
50. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
51. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text
52. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text Spacer
53. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
54. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
55. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text
56. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Spacer Image Column Text Spacer Surface Text
57. Root
58. Root FrameLayout
59. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout TextView View FrameLayout TextView
60. Root Row Spacer Image Column Text Spacer Surface Text UIStackView UIStackView UIView UIImageView UIStackView UITextView UIView UIView UITextView
61. Root Row Spacer Image Column Text Spacer Surface Text <div> <div> <div> <img> <div> <span> <div> <div> <span>
62. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { … }
63. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) {
 ComposeNode<…>( factory = …, update = { … }, ) }
64. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) {
 RedwoodComposeNode<…>( factory = …, update = { … }, ) }
65. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) {
 RedwoodComposeNode<EmojiWidgetFactory<*>, …>( factory = …, update = { … }, ) }
66. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) {
 RedwoodComposeNode<EmojiWidgetFactory<*>, TextInput<*>>( factory = …, update = { … }, ) }
67. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) {
 RedwoodComposeNode<EmojiWidgetFactory<*>, TextInput<*>>( factory = EmojiWidgetFactory<*>::TextInput, update = { … }, ) }
68. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { RedwoodComposeNode<EmojiWidgetFactory<*>, TextInput<*>>( factory = EmojiWidgetFactory<*>::TextInput, update = { set(hint) { hint(hint) } set(text) { text(text) } set(onTextChanged) { onTextChanged(onTextChanged) } }, ) }
69. Redwood Compose & Widgets @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { RedwoodComposeNode<EmojiWidgetFactory<*>, TextInput<*>>( factory = EmojiWidgetFactory<*>::TextInput, update = { set(hint) { hint(hint) } set(text) { text(text) } set(onTextChanged) { onTextChanged(onTextChanged) } }, ) }
70. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout TextView View FrameLayout TextView
71. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout TextView View FrameLayout TextView
72. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout TextView View FrameLayout TextView Text(msg.body, …)
73. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout View FrameLayout TextView TextView Text(msg.body, …)
74. Redwood Layout data class Row( val width: Constraint, val height: Constraint, val margin: Margin, val overflow: Overflow, val horizontalAlignment: MainAxisAlignment, val verticalAlignment: CrossAxisAlignment, val children: RowScope.() -> Unit, ) data class Column(…) data class Spacer(…)
75. Redwood Counter Sample data class Text( val text: String?, ) data class Button( val text: String?, val enabled: Boolean = true, val onClick: (() -> Unit)? = null, )
76. Redwood Counter Sample @Composable fun Counter(value: Int = 0) { var count by remember { mutableStateOf(value) } Column { Button("-1", onClick = { count-- }) Text("Count: $count") Button("+1", onClick = { count++ }) } }
77. Redwood Counter Sample @Composable fun Counter(value: Int = 0) { var count by remember { mutableStateOf(value) } Column { Button("-1", onClick = { count-- }) Text("Count: $count") Button("+1", onClick = { count++ }) } }
78. Redwood Counter Sample @Composable fun Counter(value: Int = 0) { var count by remember { mutableStateOf(value) } Column { Button("-1", onClick = { count-- }) Text("Count: $count") Button("+1", onClick = { count++ }) } }
79. Redwood Counter Sample @Composable fun Counter(value: Int = 0) { var count by remember { mutableStateOf(value) } Column { Button("-1", onClick = { count-- }) Text("Count: $count") Button("+1", onClick = { count++ }) } }
80. Redwood Counter Sample @Composable fun Counter(value: Int = 0) { var count by remember { mutableStateOf(value) } Column { Button("-1", onClick = { count-- }) Text("Count: $count") Button("+1", onClick = { count++ }) } }
81. Redwood Counter Sample class AndroidText( override val value: TextView, ) : Text<View> { override fun text(text: String?) { value.text = text } }
82. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
83. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
84. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
85. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
86. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
87. Redwood Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
88. Redwood Counter Sample
89. Redwood Counter Sample class ComposeUiText : Text<@Composable () -> Unit> { private var text by mutableStateOf("") override val value = @Composable { Text(text = text) } override fun text(text: String?) { this.text = text ?: "" } }
90. Redwood Counter Sample val factories = SchemaWidgetFactories( Counter = ComposeUiCounterWidgetFactory, RedwoodLayout = ComposeUiRedwoodLayoutWidgetFactory(), ) setContent { CounterTheme { RedwoodContent(factories) { Counter() } } }
91. Redwood Counter Sample val factories = SchemaWidgetFactories( Counter = ComposeUiCounterWidgetFactory, RedwoodLayout = ComposeUiRedwoodLayoutWidgetFactory(), ) setContent { CounterTheme { RedwoodContent(factories) { Counter() } } }
92. Redwood Counter Sample val factories = SchemaWidgetFactories( Counter = ComposeUiCounterWidgetFactory, RedwoodLayout = ComposeUiRedwoodLayoutWidgetFactory(), ) setContent { CounterTheme { RedwoodContent(factories) { Counter() } } }
93. Redwood Counter Sample
94. Redwood Counter Sample application { Window( onCloseRequest = ::exitApplication, title = "Counter", state = rememberWindowState(300.dp, 300.dp), ) { CounterTheme { RedwoodContent(factories) { Counter() } } } }
95. Redwood Counter Sample
96. Redwood Counter Sample class HtmlText( override val value: HTMLSpanElement, ) : Text<HTMLElement> { override fun text(text: String?) { value.textContent = text } }
97. Redwood Counter Sample
98. Redwood Counter Sample class IosText : Text<UIView> { override val value = UILabel().apply { textAlignment = NSTextAlignmentCenter } override fun text(text: String?) { value.text = text } }
99. Redwood Counter Sample
100. Redwood Treehouse Zipline
101. Zipline 2016 2019 2022
106. American Red Cross Payment to $redcross
107. American Red Cross Payment to $redcross
108. American Red Cross Payment to $redcross Donation
109. American Red Cross Payment to $redcross Donation ~1 day
110. American Red Cross Payment to $redcross Donation ~1 day 3 - 7 days
111. American Red Cross Payment to $redcross Donation ~1 day 3 - 7 days 4 - 10 days
114. {"id":"Lgh13IUG7f6","amount":137,"currency":"USD","sender": {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake Wharton","is_non_profit":false},"recipient": {"id":"h98FUH87gwe","username":"redcross","display_name":"America n Red Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"}
115. {"id":"Lgh13IUG7f6","amount":137,"currency":"USD","sender": {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake Wharton","is_non_profit":false},"recipient": {"id":"h98FUH87gwe","username":"redcross","display_name":"America n Red Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"} {"payment_line_1":"American Red Cross","payment_line_2":"Donation to $redcross","payment_line_3":"$1.37","payment_line_4":"Oct 29, 2018 at 3:22PM"}
116. {"id":"Lgh13IUG7f6","amount":137,"currency":"USD","sender": {"id":"2q3u9bUG8f6","username":"jake","display_name":"Jake Wharton","is_non_profit":false},"recipient": {"id":"h98FUH87gwe","username":"redcross","display_name":"America n Red Cross","is_non_profit":true},"date":"2018-10-29T15:22:21"} {"payment_line_1":"American Red Cross","payment_line_2":"Donation to $redcross","payment_line_3":"$1.37","payment_line_4":"Oct 29, 2018 at 3:22PM"} if (payment.recipient.is_non_profit && payment.sender.is_florida_man) { return "Donation to %s" } return "Payment to %s
121. class PaymentRenderer { fun render(payment: Payment): String { … } } PaymentRenderer { fun render(payment: Payment): String { }
122. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } interface PaymentRenderer { fun render(payment: Payment): String }
123. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } interface PaymentRenderer : ZiplineService { fun render(payment: Payment): String }
124. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } interface PaymentRenderer : ZiplineService { fun render(payment: Payment): String }
125. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } }
126. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } zipline.bind<PaymentRenderer>(RealPaymentRenderer())
127. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } zipline.bind<PaymentRenderer>(RealPaymentRenderer()) val renderer = zipline.take<PaymentRenderer>() println(renderer.render(Payment(…))
128. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { /* Fancy new impl */ } } zipline.bind<PaymentRenderer>(RealPaymentRenderer()) val renderer = zipline.take<PaymentRenderer>() println(renderer.render(Payment(…))
129. zipline.bind<LocationManager>(SystemLocationManager(…)) // Load Kotlin/JS val renderer = zipline.take<PaymentRenderer>() println(renderer.render(Payment(…)) class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { /* Fancy new impl */ } } zipline.bind<PaymentRenderer>(RealPaymentRenderer())
130. zipline.bind<LocationManager>(SystemLocationManager(…)) // Load Kotlin/JS val renderer = zipline.take<PaymentRenderer>() println(renderer.render(Payment(…)) class RealPaymentRenderer( private val location: LocationManager, ) : PaymentRenderer { override fun render(payment: Payment): String { /* Fancy new impl */ } } val location = zipline.take<LocationManager>() zipline.bind<PaymentRenderer>(RealPaymentRenderer(location))
131. interface SomeService : ZiplineService { fun sync(in: String): String }
132. interface SomeService : ZiplineService { fun sync(in: String): String suspend fun async(in: String): String }
133. interface SomeService : ZiplineService { fun sync(in: String): String suspend fun async(in: String): String fun stream(in: String): Flow<String> }
134. interface SomeService : ZiplineService { fun sync(in: String): String suspend fun async(in: String): String fun stream(in: String): Flow<String> fun stateStream(in: String): StateFlow<String> }
135. interface SomeService : ZiplineService { fun sync(in: String): String suspend fun async(in: String): String fun stream(in: Flow<String>): String fun stateStream(in: StateFlow<String>): String }
136. interface SomeService : ZiplineService { fun sync(in: String): String suspend fun async(in: String): String fun stream(in: Flow<String>): String fun stateStream(in: StateFlow<String>): String fun userTypes(in: Payment): RenderedPayment }
137. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment } f u n s y n c ( i n : S t r i n g ) : S t r i n g s u s p e n d f u n a s y n c ( i n : S t r i n g ) : S t r i n g f u n s t r e a m ( i n : F l o w < S t r i n g > ) : S t r i n g f u n s t a t e S t r e a m ( i n : S t a t e F l o w < S t r i n g > ) :S t r i n g
138. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment internal object Adapter : ZiplineAdapter<SomeSerice> { } }
139. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment internal object Adapter : ZiplineAdapter<SomeSerice> { override fun outboundService(handler: Handler) } }
140. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment internal object Adapter : ZiplineAdapter<SomeSerice> { override fun outboundService(handler: Handler) = object : SomeService { override fun userTypes(in: Payment) = handler.call(this, in) as RenderedPayment } } }
141. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment internal object Adapter : ZiplineAdapter<SomeSerice> { override fun outboundService(handler: Handler) = object : SomeService { override fun userTypes(in: Payment) = handler.call(this, in) as RenderedPayment } } }
142. interface SomeService : ZiplineService { … fun userTypes(in: Payment): RenderedPayment internal object Adapter : ZiplineAdapter<SomeSerice> { … } } @Serializable class RenderedPayment(…) @Serializable class Payment(…)
143. QuickJS function sayHello() { return ['Hello', 'JavaScript'] .join(' '); }
144. QuickJS function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1
145. QuickJS hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 "Hello, JavaScript"
146. QuickJS hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } "Hello, JavaScript" hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1
147. hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } "Hello, JavaScript" hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 Server: Client:
148. hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") }
149. hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") }
150. hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") } {"version":3,"sources": ["../../src/commonMain/ kotlin/com/example/ Hello.kt"],"sourcesCont ent":[null],,"names": [],"mappings":";IAsBE,g C;IAMA,wB;IAMA,4B;"}
151. hello.js:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") } {"version":3,"sources": ["../../src/commonMain/ kotlin/com/example/ Hello.kt"],"sourcesCont ent":[null],,"names": [],"mappings":";IAsBE,g C;IAMA,wB;IAMA,4B;"}
152. Hello.kt:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") } {"version":3,"sources": ["../../src/commonMain/ kotlin/com/example/ Hello.kt"],"sourcesCont ent":[null],,"names": [],"mappings":";IAsBE,g C;IAMA,wB;IAMA,4B;"}
153. Hello.kt:1: function: sayHello mode: strict stack_size: 3 opcodes: push_atom_value "Hello" push_atom_value "JavaScript" array_from 2 get_field2 join push_atom_value " " tail_call_method 1 function sayHello() { return ['Hello', 'JavaScript'] .join(' '); } fun sayHello() { return arrayOf("Hello", "JavaScript") .asDynamic() .join(" ") } {"version":3,"sources": ["../../src/commonMain/ kotlin/com/example/ Hello.kt"],"sourcesCont ent":[null],,"names": [],"mappings":";IAsBE,g C;IAMA,wB;IAMA,4B;"}
154. java.lang.Exception: unexpected timezone: America/Gotham at captureStack (runtime/coreRuntime.kt:86) at IllegalStateException_init (kotlin-kotlin-stdlib-js-ir.js) at <anonymous> (app.cash.worldclock/TimeFormatter.kt:98) at <anonymous> (app.cash.worldclock/WorldClockJs.kt:615) at <anonymous> (InboundService.kt:837) at <anonymous> (zipline-root-zipline.js) at app.cash.zipline.OutboundService.runJob(platform.kt:37) at app.cash.zipline.EventLoop.run(CoroutineEventLoop.kt:57) at j.u.concurrent.Executor.runWorker(ThreadPoolExecutor.java:1167) at j.u.concurrent.Executor$Worker.run(ThreadPoolExecutor.java:641) at java.lang.Thread.run(Thread.java:920)
155. java.lang.Exception: unexpected timezone: America/Gotham at captureStack (runtime/coreRuntime.kt:86) at IllegalStateException_init (kotlin-kotlin-stdlib-js-ir.js) at <anonymous> (app.cash.worldclock/TimeFormatter.kt:98) at <anonymous> (app.cash.worldclock/WorldClockJs.kt:615) at <anonymous> (InboundService.kt:837) at <anonymous> (zipline-root-zipline.js) at app.cash.zipline.OutboundService.runJob(platform.kt:37) at app.cash.zipline.EventLoop.run(CoroutineEventLoop.kt:57) at j.u.concurrent.Executor.runWorker(ThreadPoolExecutor.java:1167) at j.u.concurrent.Executor$Worker.run(ThreadPoolExecutor.java:641) at java.lang.Thread.run(Thread.java:920)
156. Zipline JavaScript VM
157. Zipline JavaScript VM 2015 - 2023 WASM VM Coming 2024
158. Redwood Zipline Treehouse
159. Treehouse val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() } Treehouse Counter Sample
160. Treehouse Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
161. Treehouse Counter Sample val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
162. Treehouse Counter Sample ) val root = findViewById<ViewGroup>(android.R.id.content)!! val composition = RedwoodComposition( scope = mainScope, container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() } val = Redwood (
163. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } val root = findViewById<ViewGroup>(android.R.id.content)!! val rendering = RedwoodRendering( container = ViewGroupChildren(root), provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) Presenter Compose Widgets Platform UI Zipline
164. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } Widgets Zipline Presenter Platform UI Compose val root = findViewById<ViewGroup>(android.R.id.content)!! val container = ViewGroupChildren(root) val provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ) val rendering = RedwoodRendering( container = container, provider = provider, )
165. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } Widgets Zipline Presenter Platform UI Compose val root = findViewById<ViewGroup>(android.R.id.content)!! val container = ViewGroupChildren(root) val provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ) val rendering = RedwoodRendering( container = container, provider = provider, )
166. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } Widgets Zipline Presenter Platform UI Compose val root = findViewById<ViewGroup>(android.R.id.content)!! val container = ViewGroupChildren(root) val provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ) val rendering = RedwoodRendering( container = container, provider = provider, )
167. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } Widgets kotlinx serialization Zipline Presenter Platform UI Compose kotlinx serialization val root = findViewById<ViewGroup>(android.R.id.content)!! val container = ViewGroupChildren(root) val provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ) val rendering = RedwoodRendering( container = container, provider = provider, )
168. Schema Widgets Compose
169. Schema Widgets Compose Compose Protocol Widget Protocol
170. Widgets Widget Protocol Zipline Presenter Platform UI Compose Compose Protocol
171. Widgets Widget Protocol Zipline Platform UI
172. Widgets Widget Protocol Zipline Platform UI Presenter Compose Compose Protocol
173. Redwood Protocol data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
174. Redwood Protocol @Widget(1) data class Column( val children: () -> Unit, ) @Widget(2) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
175. Redwood Protocol @Widget(1) data class Column( val children: () -> Unit, ) @Widget(2) data class TextInput( @Property(1) val hint: String, @Property(2) val text: String, @Property(3) val onTextChanged: (String) -> Unit, )
176. Redwood Protocol @Widget(1) data class Column( @Children(1) val children: () -> Unit, ) @Widget(2) data class TextInput( @Property(1) val hint: String, @Property(2) val text: String, @Property(3) val onTextChanged: (String) -> Unit, )
177. Widgets Widget Protocol Zipline Platform UI Presenter Compose Compose Protocol
178. Treehouse Widgets Widget Protocol Zipline Platform UI Presenter Compose Compose Protocol
179. Treehouse Demo
181. Treehouse Demo
182. Redwood Zipline Treehouse
183. deviceframes.com
184. .com/cashapp/zipline .com/cashapp/redwood
185. @jw@jakewharton.com Playing in the Treehouse with Redwood and Zipline