Releasing faster with Kotlin multiplatform (DPE Summit 2023)

In this talk, we discuss some new libraries and tools being used at Cash App to get faster feedback cycles for developers and release to users in hours instead of days. This is all built on Kotlin multiplatform and combines the best features of the web and native applications. It’s not a silver bullet, but an evolution of various techniques to try to solve some of mobile development’s biggest pain points.

We will cover:

* The history of the problem from the perspective of both our developers and the needs of the product.
* What is Kotlin Multiplatform and why did we choose it?
* Two open source libraries we built to make this possible: Redwood and Zipline.
* A demo of the technology in action and its real-world usage within Cash App.

Transcript

1. @jw@jakewharton.com Releasing faster with Kotlin multiplatform
2. Previously On Cash App
3. Previously On Cash App • Android, iOS, and web apps all developed natively
4. Previously On Cash App • Android, iOS, and web apps all developed natively • Two week release trains for mobile apps
5. Previously On Cash App • Android, iOS, and web apps all developed natively • Two week release trains for mobile apps • Rollout over one to two week period
10. American Red Cross Payment to $redcross
11. American Red Cross Payment to $redcross
12. American Red Cross Payment to $redcross Donation
13. American Red Cross Payment to $redcross Donation ~1 day
14. American Red Cross Payment to $redcross Donation ~1 day 3 - 7 days 3 - 7 days
26. Unification Goals
27. Unification Goals • Logic to be updated outside of app store releases
28. Unification Goals • Logic to be updated outside of app store releases • Render screens using existing native UI elements
29. Unification Goals • Logic to be updated outside of app store releases • Render screens using existing native UI elements • Enable creation of new screens without prior knowledge
30. Unification Goals • Logic to be updated outside of app store releases • Render screens using existing native UI elements • Enable creation of new screens without prior knowledge • Not be a regression on native screen development
32. Kotlin Kotlin/Native Kotlin/JVM Kotlin/JS
33. Kotlin Kotlin/Native Kotlin/JVM Kotlin/JS iOS Android JS VM
34. Zipline
37. PaymentRenderer { fun render(payment: Payment): String { } class PaymentRenderer fun render(payment: Payment): String … } }
38. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } interface PaymentRenderer : ZiplineService { fun render(payment: Payment): String }
39. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } }
40. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } zipline.bind<PaymentRenderer>(RealPaymentRenderer())
41. class RealPaymentRenderer : PaymentRenderer { override fun render(payment: Payment): String { … } } zipline.bind<PaymentRenderer>(RealPaymentRenderer()) val renderer = zipline.take<PaymentRenderer>() println(renderer.render(Payment(…))
42. 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(…))
43. class PaymentPresenter : Presenter { override fun render() { /* Display UI on Android + iOS somehow… */ } }
44. class PaymentPresenter : Presenter { override fun render() { /* Display UI on Android + iOS somehow… */ } } ???
45. Redwood
46. Design System Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
47. Design System Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
48. Design System Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
49. Design System Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
50. Design System Schema data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
52. 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, )
53. data class ContactItem( val name: String, val image: HttpUrl, val content: () -> Unit, ) data class Text( val text: String, val font: FontFamily, val style: FontStyle, )
54. 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, )
55. Compose data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
56. 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, ) { … }
57. Compose @Composable fun Column( children: @Composable () -> Unit, ) { … } @Composable fun TextInput( hint: String, text: String, onTextChanged: (String) -> Unit, ) { … }
58. 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) } } }
59. Widget Bindings data class Column( val children: () -> Unit, ) data class TextInput( val hint: String, val text: String, val onTextChanged: (String) -> Unit, )
60. Widget Bindings 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)?) }
61. Widget Bindings 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)?) }
62. Widget Bindings 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)?) }
63. Widget Bindings interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
64. Widget Bindings class ViewColumn( override val value: LinearLayout, ) : Column<View> { override val children = ViewGroupChildren(value) } interface Column<T : Any> : Widget<T> { val children: Widget.Children<T> }
65. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } }
66. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root
67. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
68. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
69. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Image
70. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Spacer Image
71. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
72. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
73. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text
74. Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text Spacer
75. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
76. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row
77. Text Spacer Surface Spacer Image Column @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Text
78. @Composable fun MessageCard(…) { Row(…) { Image(…) Spacer(…) Column { Text(…) Spacer(…) Surface(…) { Text(…) } } } } Root Row Spacer Image Column Text Spacer Surface Text
79. Root FrameLayout
80. Root Row Spacer Image Column Text Spacer Surface Text FrameLayout LinearLayout View ImageView LinearLayout TextView View FrameLayout TextView
81. Root Row Spacer Image Column Text Spacer Surface Text UIStackView UIStackView UIView UIImageView UIStackView UITextView UIView UIView UITextView
82. Root Row Spacer Image Column Text Spacer Surface Text <div> <div> <div> <img> <div> <span> <div> <div> <span>
83. Redwood Counter Sample data class Text( val text: String?, ) data class Button( val text: String?, val enabled: Boolean = true, val onClick: (() -> Unit)? = null, )
84. 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++ }) } }
85. 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++ }) } }
86. 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++ }) } }
87. 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++ }) } }
88. 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++ }) } }
89. Redwood Counter Sample class AndroidText( override val value: TextView, ) : Text<View> { override fun text(text: String?) { value.text = text } }
90. Redwood Counter Sample val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), )
91. Redwood Counter Sample val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
92. Redwood Counter Sample
93. 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 ?: "" } }
94. Redwood Counter Sample val factories = SchemaWidgetFactories( Counter = ComposeUiCounterWidgetFactory, RedwoodLayout = ComposeUiRedwoodLayoutWidgetFactory(), ) setContent { 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. Zipline Redwood
101. Zipline Redwood Treehouse
102. composition.setContent { Counter() } val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) Treehouse Counter Sample
103. Treehouse Counter Sample val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
104. Treehouse Counter Sample val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
105. Treehouse Counter Sample ) val = Redwood ( val redwoodLayout = RedwoodLayout(this) val composition = RedwoodComposition( scope = mainScope, view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) composition.setContent { Counter() }
106. val composition = RedwoodComposition( scope = mainScope, ) composition.setContent { Counter() } val redwoodLayout = RedwoodLayout(this) val rendering = RedwoodRendering( view = redwoodLayout, provider = SchemaWidgetFactories( Counter = AndroidCounterWidgetFactory(this), RedwoodLayout = ViewRedwoodLayoutWidgetFactory(this), ), ) Presenter Compose Widgets Platform UI Zipline
107. Widgets Widget Protocol Zipline Presenter Platform UI Compose Compose Protocol
108. Widgets Widget Protocol Zipline Platform UI
109. Widgets Widget Protocol Zipline Platform UI Presenter Compose Compose Protocol
110. Treehouse Widgets Widget Protocol Zipline Platform UI Presenter Compose Compose Protocol
111. Treehouse Demo
114. Treehouse Demo
115. deviceframes.com
116. Activity Money ··· Android iOS CDN
117. Activity Money ··· Android iOS CDN
118. Activity Money ··· Android iOS CDN
119. Activity Money ··· Android iOS CDN ~8m
120. .com/cashapp/zipline .com/cashapp/redwood
121. @jw@jakewharton.com Releasing faster with Kotlin multiplatform