Jetpack Compose — Next Gen Kotlin UI Toolkit for Android

Droidcon Berlin '19
https://www.de.droidcon.com/schedule

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.

Transcript

1. Jetpack Compose
   Next Gen UI Toolkit for Android
   Ragunath Jawahar / @ragunathjawahar
   

   View Slide

2. Many years ago…
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Architecture
   

   View Slide

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

   View Slide

9. View ? ?
   

   View Slide

10. A Tale of (at least) Two
    States
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. • Too much explicit state management
    
    • Too many tech stacks
    
    • Inheritance as a primary means to
    reuse code
    

    View Slide

15. View Slide

16. Mental Model
    Asynchronous Programming
    

    View Slide

17. • Get passenger using registered email
    
    • Get the list of bookings for the
    passenger ID
    

    View Slide

18. Callbacks.kt
    airlineApi.getPassenger("j.doe@email.com", object : Callback {
    override fun onSuccess(response: PassengerResponse) {
    airlineApi.getBookings(response.passenger.id, object : Callback {
    override fun onSuccess(response: BookingsResponse) {
    /* do something with the bookings */
    }
    override fun onError(exception: Exception) {
    /* handle error retrieving bookings */
    }
    })
    }
    override fun onError(exception: Exception) {
    /* handle error retrieving passenger */
    }
    })
    

    View Slide

19. airlineApi
    .getPassenger("j.doe@email.com")
    .flatMap { airlineApi.getBookings(it.passenger.id) }
    .subscribe(
    { /* do something with the bookings */ },
    { /* handle error retrieving passenger (or) bookings */ }
    )
    RxJava.kt
    

    View Slide

20. CoroutineScope(Dispatchers.IO).launch {
    val response = airlineApi.getPassenger("j.doe@email.com")
    val bookings = airlineApi.getBookings(response.passenger.id)
    withContext(Dispatchers.Main) {
    /* do something with the bookings */
    }
    }
    Coroutines.kt
    

    View Slide

21. CoroutineScope(Dispatchers.IO).launch {
    val response = airlineApi.getPassenger("j.doe@email.com")
    val bookings = airlineApi.getBookings(response.passenger.id)
    withContext(Dispatchers.Main) {
    /* do something with the bookings */
    }
    }
    Coroutines.kt
    

    View Slide

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

    View Slide

23. Mental Model
    Compose
    

    View Slide

24. ui = f(s)
    

    View Slide

25. ui = f(s)
    

    View Slide

26. ui = f(s)
    

    View Slide

27. ui = f(s)
    

    View Slide

28. ui = f(s)
    

    View Slide

29. No more reference to
    views
    

    View Slide

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

    View Slide

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

    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. A Composed Example
    (pun intended)
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. ui = f(s)
    

    View Slide

40. ui = f(s)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. ui = f(s)
    

    View Slide

54. ui = f(s) ✅
    

    View Slide

55. ui = f(s)
    

    View Slide

56. ui = f(s)
    

    View Slide

57. View Slide

58. Stepper
    

    View Slide

59. @Composable
    fun Stepper(count: Int, onCountChange: (Int) Z> 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

60. @Composable
    fun Stepper(count: Int, onCountChange: (Int) Z> 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

61. @Composable
    fun Stepper(count: Int, onCountChange: (Int) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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) Z> 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. Stepper
    

    View Slide

87. Stepper ✅
    

    View Slide

88. View Slide

89. Fruit Row
    

    View Slide

90. @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

91. @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

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. Fruit Row
     

     View Slide

110. Fruit Row
     ✅
     

     View Slide

111. State?
     

     View Slide

112. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

113. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

114. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

115. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

116. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

117. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

118. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

119. FruitApp {
     val apple = +memo { Fruit("Apple", price = 2.0) }
     FruitRow(apple)
     }
     

     View Slide

120. Observations
     • Smallest reusable unit is a function
     
     • Stateless widgets (“controlled components”)
     
     • Single source of truth
     
     • Structure of the code matches the structure of the view hierarchy
     
     • UI was built from leaf to node
     
     • State was pushed as close to the root as possible
     
     • Declarative
     
     • Reduction in boilerplate
     

     View Slide

121. View Slide

122. 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

123. @ragunathjawahar
     Twitter / Medium / GitHub
     end;
     

     View Slide