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.

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