$30 off During Our Annual Pro Sale. View Details »

Jetpack Compose — Next Gen Kotlin UI Toolkit for Android

Jetpack Compose — Next Gen Kotlin UI Toolkit for Android

https://info.jetbrains.com/kotlin-everywhere-bangalore-2019.html

The Android UI toolkit's API surface has remained the same for the past decade. With applications and UI becoming more and more demanding, we need a new programming model to handle this complexity. With Kotlin bringing in DSLs, functional programming, and compiler plugin capabilities - the Android UI Toolkit team is taking a new direction with Jetpack Compose.

This shift in API design also demands a shift in thinking about UI and app architecture. In this talk, we’ll see how Jetpack Compose is radically different from the existing Android UI framework and look at various examples to build reactive Android apps.

Ragunath Jawahar

June 22, 2019
Tweet

More Decks by Ragunath Jawahar

Other Decks in Programming

Transcript

  1. Jetpack @Compose
    Ragunath Jawahar / @ragunathjawahar

    View Slide

  2. Many years ago…

    View Slide

  3. View Slide

  4. Architecture

    View Slide

  5. MVP
    VIPER
    RIBs
    MVVM
    Redux MVC
    Grox
    MVI
    MVU
    BLoC

    View Slide

  6. View Box Box

    View Slide

  7. ✅ Separation of concerns

    ✅ Maintainability

    ✅ Extensibility

    ✅ Testability

    Boilerplate

    View Slide

  8. Boilerplate ⚠

    View Slide

  9. Jetpack Compose

    View Slide

  10. • Unbundled UI Toolkit

    • React, Litho, Vue.js & Flutter

    • Declarative

    • Composition over inheritance

    • Kotlin only

    • “Pre-Alpha” ⛔

    View Slide

  11. FRAMEWORKS
    ARE NOT TOOLS FOR
    ORGANISING YOUR CODE, THEY
    ARE TOOLS FOR ORGANISING
    YOUR MIND
    – Rick Hickey

    View Slide

  12. (1/2) UIs are trees

    View Slide

  13. (2/2) ui = f(s)

    View Slide

  14. (2/2) ui = f(s)

    View Slide

  15. (2/2) ui = f(s)

    View Slide

  16. (2/2) ui = f(s)

    View Slide

  17. (2/2) ui = f(s)

    View Slide

  18. A Tale of (at least) Two
    States

    View Slide

  19. View Slide

  20. ui = f(s)

    View Slide

  21. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  22. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  23. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  24. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  25. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  26. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  27. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  28. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  29. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  30. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  31. // Android framework
    val textView = TextView(context)
    println(textView=>class.java) // AB android.widget.TextView
    // Jetpack Compose
    val text = Text(text = "Hello World!")
    println(text=>class.java) // AB kotlin.Unit
    No more reference to views

    View Slide

  32. @Composable
    fun Text(
    text: String,
    style: TextStyle? = null,
    textAlign: TextAlign = DefaultTextAlign,
    // More parameters…
    ) {
    // More code…
    }
    Composable functions

    View Slide

  33. @Composable
    fun Text(
    text: String,
    style: TextStyle? = null,
    textAlign: TextAlign = DefaultTextAlign,
    // More parameters…
    ) {
    // More code…
    }
    Composable functions

    View Slide

  34. @Composable
    fun Text(
    text: String,
    style: TextStyle? = null,
    textAlign: TextAlign = DefaultTextAlign,
    // More parameters…
    ) {
    // More code…
    }
    Composable functions

    View Slide

  35. @Composable
    fun Text(
    text: String,
    style: TextStyle? = null,
    textAlign: TextAlign = DefaultTextAlign,
    // More parameters…
    ) {
    // More code…
    }
    Composable functions

    View Slide

  36. A Composed Example
    (pun intended)

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. ui = f(s)

    View Slide

  42. ui = f(s)

    View Slide

  43. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  44. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  45. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  46. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  47. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  48. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  49. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  50. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  51. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  52. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  53. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  54. @Model
    data class Fruit(
    val name: String,
    val price: Double = 2.0,
    var quantity: Int = 0
    ) {
    val totalPrice: Double
    get() = quantity * price
    }

    View Slide

  55. ui = f(s)

    View Slide

  56. ui = f(s) ✅

    View Slide

  57. ui = f(s)

    View Slide

  58. ui = f(s)

    View Slide

  59. View Slide

  60. Stepper

    View Slide

  61. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  62. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  63. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  64. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  65. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  66. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  67. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  68. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  69. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  70. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  71. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  72. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  73. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  74. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  75. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  76. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  77. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  78. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  79. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  80. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  81. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  82. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  83. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  84. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  85. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  86. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  87. @Composable
    fun Stepper(count: Int, onCountChange: (Int) ^> Unit) {
    val onRemoveOne = { onCountChange(count - 1) }
    val onAddOne = { onCountChange(count + 1) }
    Row {
    Button(text = "-", onClick = if (count > 0) onRemoveOne else null)
    WidthSpacer(8.dp)
    Container(width = 24.dp) {
    Text(text = "$count", style = +themeTextStyle { body1 })
    }
    WidthSpacer(8.dp)
    Button(text = "+", onClick = onAddOne)
    }
    }

    View Slide

  88. Stepper

    View Slide

  89. Stepper ✅

    View Slide

  90. View Slide

  91. Fruit Row

    View Slide

  92. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  93. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  94. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  95. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  96. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  97. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  98. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  99. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  100. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  101. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  102. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  103. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  104. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  105. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  106. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  107. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  108. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  109. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  110. @Composable
    fun FruitRow(fruit: Fruit) {
    Padding(padding = EdgeInsets(left = 16.dp, right = 16.dp)) {
    FlexRow {
    expanded(1.0f) {
    Text(text = "${fruit.name} ($${fruit.totalPrice})", style = +themeTextStyle { h6 })
    }
    inflexible {
    Stepper(fruit.quantity, onCountChange = { fruit.quantity = it })
    }
    }
    }
    }

    View Slide

  111. Fruit Row

    View Slide

  112. Fruit Row

    View Slide

  113. State?

    View Slide

  114. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  115. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  116. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  117. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  118. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  119. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  120. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  121. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  122. override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    FruitApp {
    val apple = +memo { Fruit("Apple") }
    FruitRow(apple)
    }
    }
    }

    View Slide

  123. { Demo }

    View Slide

  124. Future
    • Increased productivity

    • Higher-level of abstraction

    • Wider use of existing of skillset

    • Collaboration

    • Design

    • Product

    • Other platforms?

    View Slide

  125. View Slide

  126. Resources
    • https://developer.android.com/jetpack/compose

    • http://intelligiblebabble.com/content-on-declarative-ui/

    • http://intelligiblebabble.com/compose-from-first-principles/

    • #compose channel at https://kotlinlang.slack.com/

    View Slide

  127. @ragunathjawahar
    Twitter / Medium / GitHub
    end;

    View Slide