Slide 1
Slide 1 text
@jakewharton
@jessewilson
Native UI with
Multiplatform Compose
Slide 2
Slide 2 text
Demo
Slide 3
Slide 3 text
Redwood
• Kotlin multiplatform (Android, JVM, JS, iOS, MacOS)
Slide 4
Slide 4 text
Redwood
• Kotlin multiplatform (Android, JVM, JS, iOS, MacOS)
• Powered by Compose
Slide 5
Slide 5 text
Redwood
• Kotlin multiplatform (Android, JVM, JS, iOS, MacOS)
• Powered by Compose
• Shared presenter logic across all platforms
Slide 6
Slide 6 text
Redwood
• Kotlin multiplatform (Android, JVM, JS, iOS, MacOS)
• Powered by Compose
• Shared presenter logic across all platforms
• Uses native UI toolkit specific to each platform
Slide 7
Slide 7 text
Redwood
• Kotlin multiplatform (Android, JVM, JS, iOS, MacOS)
• Powered by Compose
• Shared presenter logic across all platforms
• Uses native UI toolkit specific to each platform
• Not an all-or-nothing framework
Slide 8
Slide 8 text
2020 2021 2022
ay June July August September
Slide 9
Slide 9 text
2012 2013 2014
September October November Dece
• Native UI feels best
Slide 10
Slide 10 text
2012 2013 2014
September October November Dece
• Native UI feels best
• Design system is cross platform
Slide 11
Slide 11 text
2012 2013 2014
September October November Dece
• Native UI feels best
• Design system is cross platform
• Hire the best engineers on each platform
Slide 12
Slide 12 text
2014 2015 2016 2017 2018
ay June July August September October November Dece
• Code sharing is awesome
Slide 13
Slide 13 text
2014 2015 2016 2017 2018
ay June July August September October November Dece
• Code sharing is awesome
• Use JS engine to share logic which changes frequently
Slide 14
Slide 14 text
2014 2015 2016 2017 2018
ay June July August September October November Dece
• Code sharing is awesome
• Use JS engine to share logic which changes frequently
• Duktape-Android library from Square (Droidcon talk)
Slide 15
Slide 15 text
ay June July August September October November Dece
2016 2017 2018 2019 2020
• Investing in Kotlin/MPP as the future
Slide 16
Slide 16 text
ay June July August September October November Dece
2016 2017 2018 2019 2020
• Investing in Kotlin/MPP as the future
• Server starts driving more logic on the client
Slide 17
Slide 17 text
ay June July August September October November Dece
2016 2017 2018 2019 2020
• Investing in Kotlin/MPP as the future
• Server starts driving more logic on the client
• SQLDelight goes multiplatform (Droidcon talk)
Slide 18
Slide 18 text
2016 2017 2018 2019 2020
ay June July August September October November Dece
• Internal FormBlocker library
Slide 19
Slide 19 text
2016 2017 2018 2019 2020
ay June July August September October November Dece
• Internal FormBlocker library
• Form-like UI spec implemented on each platform
Slide 20
Slide 20 text
2016 2017 2018 2019 2020
ay June July August September October November Dece
• Internal FormBlocker library
• Form-like UI spec implemented on each platform
• Web 1.0-like via protos (HTML) and native UI (browser)
Slide 21
Slide 21 text
2016 2017 2018 2019 2020
ay June July August September October November Dece
• Internal FormBlocker library
• Form-like UI spec implemented on each platform
• Web 1.0-like via protos (HTML) and native UI (browser)
• Logic & controls baked in app
Slide 22
Slide 22 text
2018 2019 2020 2021 2022
ay June July August September October November Dece
• FormBlocker 2.0?
Slide 23
Slide 23 text
2018 2019 2020 2021 2022
ay June July August September October November Dece
• FormBlocker 2.0?
• Share more than just protos with Kotlin mulitiplatform
Slide 24
Slide 24 text
2018 2019 2020 2021 2022
ay June July August September October November Dece
• FormBlocker 2.0?
• Share more than just protos with Kotlin mulitiplatform
• Web 2.0-like with rich, updatable logic
Slide 25
Slide 25 text
2018 2019 2020 2021 2022
ay June July August September October November Dece
• FormBlocker 2.0?
• Share more than just protos with Kotlin mulitiplatform
• Web 2.0-like with rich, updatable logic
• Not abandon our native engineers
Slide 26
Slide 26 text
2018 2019 2020 2021 2022
ay June July August September October November Dece
• FormBlocker 2.0?
• Share more than just protos with Kotlin mulitiplatform
• Web 2.0-like with rich, updatable logic
• Not abandon our native engineers
• Evaluated the existing cross-platform solutions
Slide 27
Slide 27 text
Figma Android Eng
iOS Eng
Web Eng
Slide 28
Slide 28 text
Figma Android Eng
iOS Eng
Web Eng
View Impl
UIKit Impl
DOM Impl
Slide 29
Slide 29 text
Figma Android Eng
iOS Eng
Web Eng
View Impl
UIKit Impl
DOM Impl
Redwood
Slide 30
Slide 30 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 31
Slide 31 text
Redwood Schema
data class Column(
val children: () -> Unit,
val birthday: LocalDate,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 32
Slide 32 text
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,
)
Slide 33
Slide 33 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 34
Slide 34 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 35
Slide 35 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 36
Slide 36 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 37
Slide 37 text
Redwood Schema
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 38
Slide 38 text
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,
)
Slide 39
Slide 39 text
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,
)
Slide 40
Slide 40 text
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,
)
Slide 41
Slide 41 text
Schema
Widgets
Compose
Slide 42
Slide 42 text
Redwood Compose
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 43
Slide 43 text
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,
) { … }
Slide 44
Slide 44 text
Redwood Compose
@Composable fun Column(
children: @Composable () -> Unit,
) { … }
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) { … }
Slide 45
Slide 45 text
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)
}
}
}
Slide 46
Slide 46 text
Redwood Widgets
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 47
Slide 47 text
Redwood Widgets
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 48
Slide 48 text
Redwood Widgets
interface Column : Widget {
val children: Widget.Children
}
interface TextInput : Widget {
fun hint(hint: String)
fun text(text: String)
fun onTextChanged(onTextChanged: ((String) -> Unit)?)
}
Slide 49
Slide 49 text
Redwood Widgets
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 50
Slide 50 text
Redwood Widgets
interface Column : Widget {
val children: Widget.Children
}
Slide 51
Slide 51 text
Redwood Widgets
class ViewColumn : Column
interface Column : Widget {
val children: Widget.Children
}
Slide 52
Slide 52 text
Redwood Widgets
class ViewColumn(
override val value: LinearLayout,
) : Column
interface Column : Widget {
val children: Widget.Children
}
Slide 53
Slide 53 text
Redwood Widgets
class ViewColumn(
override val value: LinearLayout,
) : Column {
override val children = ViewGroupChildren(value)
}
interface Column : Widget {
val children: Widget.Children
}
Slide 54
Slide 54 text
Redwood Widgets
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
fun ScrollableColumn(): ScrollableColumn
fun TextInput(): TextInput
fun Image(): Image
}
Slide 55
Slide 55 text
Redwood Widgets
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 56
Slide 56 text
Redwood Widgets
class EmojiViewWidgetFactory : EmojiWidgetFactory
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 57
Slide 57 text
Redwood Widgets
class EmojiViewWidgetFactory(
private val context: Context,
) : EmojiWidgetFactory
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 58
Slide 58 text
Redwood Widgets
class EmojiViewWidgetFactory(
private val context: Context,
) : EmojiWidgetFactory {
override fun Column(): Column {
}
}
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 59
Slide 59 text
Redwood Widgets
class EmojiViewWidgetFactory(
private val context: Context,
) : EmojiWidgetFactory {
override fun Column(): Column {
return ViewColumn(LinearLayout(context))
}
}
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 60
Slide 60 text
Redwood Widgets
class EmojiViewWidgetFactory(
private val context: Context,
) : EmojiWidgetFactory {
override fun Column(): Column {
return ViewColumn(LinearLayout(context))
}
…
}
interface EmojiWidgetFactory : Widget.Factory {
fun Column(): Column
…
}
Slide 61
Slide 61 text
@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,
)
}
}
}
}
Slide 62
Slide 62 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Slide 63
Slide 63 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Slide 64
Slide 64 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 65
Slide 65 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 66
Slide 66 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Image
Slide 67
Slide 67 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Spacer
Image
Slide 68
Slide 68 text
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 69
Slide 69 text
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 70
Slide 70 text
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Text
Slide 71
Slide 71 text
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Text Spacer
Slide 72
Slide 72 text
Text Spacer Surface
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 73
Slide 73 text
Text Spacer Surface
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Slide 74
Slide 74 text
Text Spacer Surface
Spacer
Image Column
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Text
Slide 75
Slide 75 text
@Composable
fun MessageCard(…) {
Row(…) {
Image(…)
Spacer(…)
Column {
Text(…)
Spacer(…)
Surface(…) {
Text(…)
}
}
}
}
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
Slide 76
Slide 76 text
Root FrameLayout
Slide 77
Slide 77 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
FrameLayout
LinearLayout
View
ImageView LinearLayout
TextView View FrameLayout
TextView
Slide 78
Slide 78 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
UIStackView
UIStackView
UIView
UIImageView UIStackView
UITextView UIView UIView
UITextView
Slide 79
Slide 79 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
![]()
Slide 80
Slide 80 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) { … }
Slide 81
Slide 81 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
ComposeNode<…>(
factory = …,
update = { … },
)
}
Slide 82
Slide 82 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode<…>(
factory = …,
update = { … },
)
}
Slide 83
Slide 83 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode, …>(
factory = …,
update = { … },
)
}
Slide 84
Slide 84 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode, TextInput<*>>(
factory = …,
update = { … },
)
}
Slide 85
Slide 85 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode, TextInput<*>>(
factory = EmojiWidgetFactory<*>::TextInput,
update = { … },
)
}
Slide 86
Slide 86 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode, TextInput<*>>(
factory = EmojiWidgetFactory<*>::TextInput,
update = {
set(hint) { hint(hint) }
set(text) { text(text) }
set(onTextChanged) { onTextChanged(onTextChanged) }
},
)
}
Slide 87
Slide 87 text
Redwood Compose & Widgets
@Composable fun TextInput(
hint: String,
text: String,
onTextChanged: (String) -> Unit,
) {
RedwoodComposeNode, TextInput<*>>(
factory = EmojiWidgetFactory<*>::TextInput,
update = {
set(hint) { hint(hint) }
set(text) { text(text) }
set(onTextChanged) { onTextChanged(onTextChanged) }
},
)
}
Slide 88
Slide 88 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
FrameLayout
LinearLayout
View
ImageView LinearLayout
TextView View FrameLayout
TextView
Slide 89
Slide 89 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
FrameLayout
LinearLayout
View
ImageView LinearLayout
TextView View FrameLayout
TextView
Text(msg.body, …)
Slide 90
Slide 90 text
Root
Row
Spacer
Image Column
Text Spacer Surface
Text
FrameLayout
LinearLayout
View
ImageView LinearLayout
View FrameLayout
TextView
TextView
Text(msg.body, …)
Slide 91
Slide 91 text
Demo
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
class WorldClockService {
fun formatTime(location: Location): String {
…
}
}
Slide 94
Slide 94 text
class RealWorldClockService : WorldClockService {
override fun formatTime(location: Location): String {
…
}
}
interface WorldClockService : ZiplineService {
fun formatTime(location: Location): String
}
WorldClockService
Slide 95
Slide 95 text
class RealWorldClockService : WorldClockService {
override fun formatTime(location: Location): String {
…
}
}
zipline.bind(RealWorldClockService())
interface : ZiplineService {
fun formatTime(location: Location): String
}
val worldClock = zipline.take()
println(worldClock.formatTime(Location("Droidcon NYC!"))
Slide 96
Slide 96 text
interface : ZiplineService {
fun formatTime(location: Location): String
}
val worldClock = zipline.take()
println(worldClock.formatTime(Location("Droidcon NYC!"))
Slide 97
Slide 97 text
interface : ZiplineService {
fun formatTime(location: Location): String
}
val worldClock = zipline.take()
println(worldClock.formatTime(Location("Droidcon NYC!"))
class RealWorldClockService : WorldClockService {
override fun formatTime(location: Location): String {
Fancy new implementation…
}
}
zipline.bind(RealWorldClockService())
Slide 98
Slide 98 text
Schema
Widgets
Compose
Slide 99
Slide 99 text
Schema
Widgets
Compose
Compose
Protocol
Widget
Protocol
Slide 100
Slide 100 text
Widgets
Widget
Protocol
Zipline
Presenter
Platform UI
Compose
Compose
Protocol
Slide 101
Slide 101 text
Widgets
Widget
Protocol
Zipline
Platform UI
Slide 102
Slide 102 text
Widgets
Widget
Protocol
Zipline
Platform UI
Presenter Compose
Compose
Protocol
Slide 103
Slide 103 text
Redwood Protocol
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 104
Slide 104 text
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,
)
Slide 105
Slide 105 text
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,
)
Slide 106
Slide 106 text
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,
)
Slide 107
Slide 107 text
Redwood + Zipline ➡ Treehouse
Slide 108
Slide 108 text
Widgets
Widget
Protocol
Zipline
Platform UI
Presenter Compose
Compose
Protocol
Slide 109
Slide 109 text
Treehouse
Widgets
Widget
Protocol
Zipline
Platform UI
Presenter Compose
Compose
Protocol
Slide 110
Slide 110 text
Demo
Slide 111
Slide 111 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 112
Slide 112 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 113
Slide 113 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 114
Slide 114 text
Modifiers
@Widget(1)
data class Column(
@Children(1) val children: () -> Unit,
)
Slide 115
Slide 115 text
Modifiers
@Widget(1)
data class Column(
@Property(1) val padding: Int = 24,
@Children(1) val children: () -> Unit,
)
Slide 116
Slide 116 text
Modifiers
Int 24
@Widget(1)
data class Column(
@Property(1) val padding: Padding = Normal,
@Children(1) val children: () -> Unit,
) {
enum class Padding {
Small,
Normal,
Large,
}
}
Slide 117
Slide 117 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 118
Slide 118 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 119
Slide 119 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(padding = Large) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 120
Slide 120 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 121
Slide 121 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 122
Slide 122 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(
text = "Hello,",
modifier = Modifier.align(CenterHorizontally),
)
Text(text = name)
}
}
Slide 123
Slide 123 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(modifier = Modifier.padding(24.dp)) {
Text(
text = "Hello,",
modifier = Modifier.align(CenterHorizontally),
)
Text(text = name)
}
}
Slide 124
Slide 124 text
C
o
l
u
m
n
Modifiers
@Composable
private fun Greeting(name: String) {
Row(modifier = Modifier.padding(24.dp)) {
Text(
text = "Hello,",
modifier = Modifier.align(CenterHorizontally),
)
Text(text = name)
}
}
Slide 125
Slide 125 text
Modifiers
@Composable
fun Column(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) { … }
Slide 126
Slide 126 text
Modifiers
@Composable
fun Column(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) { … }
Slide 127
Slide 127 text
Modifiers
@Composable
fun Column(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) { … }
interface ColumnScope {
fun Modifier.align(alignment: Alignment.Horizontal) { … }
}
Slide 128
Slide 128 text
Modifiers
@Composable
fun Column(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) { … }
interface ColumnScope {
fun Modifier.align(alignment: Alignment.Horizontal) { … }
}
Slide 129
Slide 129 text
Modifiers
@Composable
fun Column(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) { … }
interface ColumnScope {
fun Modifier.align(alignment: Alignment.Horizontal) { … }
}
val CenterHorizontally: Horizontal = …
Slide 130
Slide 130 text
Modifiers
@Widget(1)
data class Column(
@Property(1) val padding: Padding = Normal,
@Children(1) val children: () -> Unit,
) {
enum class Padding { Small, Normal, Large }
}
Slide 131
Slide 131 text
Modifiers
@Widget(1)
data class Column(
@Property(1) val padding: Padding = Normal,
@Children(1) val children: () -> Unit,
) {
enum class Padding { Small, Normal, Large }
}
object ColumnScope
Slide 132
Slide 132 text
Modifiers
@Widget(1)
data class Column(
@Property(1) val padding: Padding = Normal,
@Children(1) val children: ColumnScope.() -> Unit,
) {
enum class Padding { Small, Normal, Large }
}
object ColumnScope
Slide 133
Slide 133 text
Modifiers
@Composable
public fun Column(
children: @Composable () -> Unit,
) { … }
Slide 134
Slide 134 text
Modifiers
@Composable
public fun Column(
children: @Composable () -> Unit,
) { … }
object ColumnScope
Slide 135
Slide 135 text
Modifiers
@Composable
public fun Column(
children: @Composable ColumnScope.() -> Unit,
) { … }
object ColumnScope
Slide 136
Slide 136 text
Modifiers
@Widget(1)
data class Column(…) { … }
object ColumnScope
Slide 137
Slide 137 text
Modifiers
@Widget(1)
data class Column(…) { … }
object ColumnScope
public data class HorizontalAlignment(
val align: Horizontal,
)
Slide 138
Slide 138 text
Modifiers
@Widget(1)
data class Column(…) { … }
object ColumnScope
@LayoutModifier(1)
public data class HorizontalAlignment(
val align: Horizontal,
)
Slide 139
Slide 139 text
Modifiers
@Widget(1)
data class Column(…) { … }
object ColumnScope
@LayoutModifier(1, ColumnScope::class)
public data class HorizontalAlignment(
val align: Horizontal,
)
Slide 140
Slide 140 text
Modifiers
@Composable
public fun Column(
children: @Composable ColumnScope.() -> Unit,
) { … }
object ColumnScope
Slide 141
Slide 141 text
Modifiers
@Composable
public fun Column(
children: @Composable ColumnScope.() -> Unit,
) { … }
object ColumnScope {
fun LayoutModifier.horizontalAlignment(
align: Horizontal,
): LayoutModifier {
…
}
}
Slide 142
Slide 142 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(padding = Large) {
Text(text = "Hello,")
Text(text = name)
}
}
Slide 143
Slide 143 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(padding = Large) {
Text(
text = "Hello,",
layoutModifier =
LayoutModifier.horizontalAlignment(Center),
)
Text(text = name)
}
}
Slide 144
Slide 144 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(padding = Large) {
Text(
text = "Hello,",
layoutModifier =
LayoutModifier.horizontalAlignment(Center),
)
Text(text = name)
}
}
Slide 145
Slide 145 text
Modifiers
@Composable
private fun Greeting(name: String) {
Column(padding = Large) {
Text(
text = "Hello,",
layoutModifier =
LayoutModifier.horizontalAlignment(Center),
)
Text(text = name)
}
}
Slide 146
Slide 146 text
C
o
l
u
m
n
Modifiers
@Composable
private fun Greeting(name: String) {
Row(padding = Large) {
Text(
text = "Hello,",
layoutModifier =
LayoutModifier.horizontalAlignment(Center),
)
Text(text = name)
}
}
Slide 147
Slide 147 text
Modifiers
class AndroidText(
override val value: TextView,
) : Text {
override fun text(text: String?) {
value.text = text
}
}
Slide 148
Slide 148 text
Modifiers
class AndroidText(
override val value: TextView,
) : Text {
override var layoutModifiers = LayoutModifier
override fun text(text: String?) {
value.text = text
}
}
Slide 149
Slide 149 text
Modifiers
class AndroidText(
override val value: TextView,
) : Text {
override var layoutModifiers = LayoutModifier
set(layoutModifiers) {
// Write data to value.layoutParams…
field = layoutModifiers
}
override fun text(text: String?) {
value.text = text
}
}
Slide 150
Slide 150 text
Schema
Widgets
Compose
Compose
Protocol
Widget
Protocol
Slide 151
Slide 151 text
Schema
Widgets
Compose
Compose
Protocol
Widget
Protocol
Layout
Modifiers
Slide 152
Slide 152 text
Multiple children
@Widget(1)
data class Column(
@Children(1) val children: () -> Unit,
)
Slide 153
Slide 153 text
Multiple children
Slide 154
Slide 154 text
Multiple children
Slide 155
Slide 155 text
Multiple children
@Widget(6)
data class Toolbar(
@Property(1) val title: String,
)
Slide 156
Slide 156 text
Multiple children
@Widget(6)
data class Toolbar(
@Property(1) val title: String,
@Children(1) val start: () -> Unit,
@Children(2) val end: () -> Unit,
)
Slide 157
Slide 157 text
Multiple children
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) { … }
Slide 158
Slide 158 text
Multiple children
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) {
Row {
start()
Text(title)
end()
}
}
Slide 159
Slide 159 text
Multiple children
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) {
Row {
start()
Text(title)
end()
}
}
Slide 160
Slide 160 text
Multiple children
RedwoodComposeNode<…> {
factory = EmojiWidgetFactory<*>::Toolbar
updater = { set(title) { title(title) } }
children = {}
}
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) {
}
Slide 161
Slide 161 text
Multiple children
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) {
RedwoodComposeNode<…> {
factory = EmojiWidgetFactory<*>::Toolbar
updater = { set(title) { title(title) } }
children = {
start()
end()
}
}
}
Slide 162
Slide 162 text
Multiple children
@Composable
fun Toolbar(
title: String,
start: @Composable () -> Unit,
end: @Composable () -> Unit,
) {
RedwoodComposeNode<…> {
factory = EmojiWidgetFactory<*>::Toolbar
updater = { set(title) { title(title) } }
children = {
SyntheticChildren(1) { start() }
SyntheticChildren(2) { end() }
}
}
}
Slide 163
Slide 163 text
Multiple children
class AndroidToolbar(
private val toolbarBinding: ToolbarBinding
) : Toolbar {
override val start = ViewGroupChildren(toolbarBinding.start)
override val end = ViewGroupChildren(toolbarBinding.start)
fun title(title: String) {
toolbarBinding.title.text = title
}
}
Slide 164
Slide 164 text
Root FrameLayout
Slide 165
Slide 165 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Slide 166
Slide 166 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image
Slide 167
Slide 167 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image
Slide 168
Slide 168 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image
ImageView
Slide 169
Slide 169 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image Image
ImageView
Slide 170
Slide 170 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image Image
ImageView
Slide 171
Slide 171 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Image Image
ImageView ImageView
Slide 172
Slide 172 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Text
Image Image
ImageView ImageView
Slide 173
Slide 173 text
Root
Toolbar
FrameLayout
LinearLayout
LinearLayout TextView LinearLayout
Text
Image Image
ImageView TextView ImageView
Slide 174
Slide 174 text
What's next?
• Lint API check
Slide 175
Slide 175 text
Lint API check
@Widget(3) // Shipped in app v1.0
data class Text(
@Property(1) val text: String?,
)
Slide 176
Slide 176 text
Lint API check
@Widget(3) // Shipped in app v1.0
data class Text(
@Property(1) val text: String?,
)
@Widget(4) // Shipped in app v1.2
data class FancyText(
@Property(1) val text: String?,
)
Slide 177
Slide 177 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
FancyText("Send money?")
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
Slide 178
Slide 178 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
FancyText("Send money?")
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
!
!
Slide 179
Slide 179 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
FancyText("Send money?")
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
Slide 180
Slide 180 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
if (WidgetVersion >= VERSION_1_2) {
FancyText("Send money?")
} else {
Text("Send money?")
}
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
Slide 181
Slide 181 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
if (WidgetVersion >= VERSION_1_2) {
FancyText("Send money?")
} else {
Text("Send money?")
}
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
Slide 182
Slide 182 text
Lint API check
@Composable fun Prompt(title: String) {
Column {
if (WidgetVersion >= VERSION_1_2) {
FancyText("Send money?")
} else {
Text("Send money?")
}
Row {
Button("Send", onClick = { … })
Button("Cancel", onClick = { … })
}
}
}
Slide 183
Slide 183 text
What's next?
• Lint API check
• Optional basic row/column/box layout
Slide 184
Slide 184 text
Optional basic row/column/box layout
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 185
Slide 185 text
Optional basic row/column/box layout
data class Column(
val children: () -> Unit,
)
data class TextInput(
val hint: String,
val text: String,
val onTextChanged: (String) -> Unit,
)
Slide 186
Slide 186 text
Optional basic row/column/box layout
data class Column(
val children: () -> Unit,
)
data class Row(
val children: () -> Unit,
)
data class Box(
val children: () -> Unit,
)
Slide 187
Slide 187 text
What's next?
• Lint API check
• Optional basic row/column/box layout
• Optional paginated column
Slide 188
Slide 188 text
Optional paginated column
ScrollableColumn {
for (emoji in emojis) {
Row {
Image(url = emoji.url)
Text(text = emoji.name)
}
}
}
Slide 189
Slide 189 text
Optional paginated column
LazyColumn {
items(emojis) {
Row {
Image(url = emoji.url)
Text(text = emoji.name)
}
}
}
S
c
r
o
l
l
a
b
l
e
f
o
r (
e
m
o
j
i i
n
Slide 190
Slide 190 text
What's next?
• Lint API check
• Optional basic row/column/box layout
• Optional paginated column
• Testing API
Slide 191
Slide 191 text
What's next?
• Lint API check
• Optional basic row/column/box layout
• Optional paginated column
• Testing API
• Developer tooling
Slide 192
Slide 192 text
What's next?
• Lint API check
• Optional basic row/column/box layout
• Optional paginated column
• Testing API
• Developer tooling
• Documentation "
Slide 193
Slide 193 text
Should you use it?
Not yet
(probably)
Slide 194
Slide 194 text
.com/cashapp/redwood
Slide 195
Slide 195 text
@jakewharton
@jessewilson
Native UI with
Multiplatform Compose