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