Reactive UI in Android (Jetpack compose)

In Google IO 2019, Google revealed Jetpack compose, the future of UI toolkit in Kotlin.
In this talk, we're going to see what were the reasons Google decided we need a new UI toolkit, how to use it, and what problems it resolves.

Transcript

1. Reactive UI in Android Composing a new UI toolkit (pun intended)
2. Gil Goldzweig Goldbaum @GilLongName GilGoldzweig GilGoldzweig
3. We have cookies!
5. Reactive UI in Android Composing a new UI toolkit (pun intended)
7. Jetpack Compose
8. Our current UI toolkit
10. AOSP View TextView Button ViewGroup FrameLayout LinearLayout EditText Button EditText
11. Layout XML
12. Using code
13. It wasn’t designed for it
14. android.view.View
15. android.view.View Android 1.6
16. TextView Button extends
17. Spinner? ==
18. Spinner Highest quality I found Android 0.8 Nov 5, 2007
19. android.view.View Android 4.2 Min SDK < 17 = No luck
20. “API design is building future regret” Chat haase
21. A fresh start As part of JetPack family
22. Jetpack compose @Composable fun Greeting(name: String) { Text("Hello: $name") } Declarative UI • Take data as input • Emits UI hierarchy when invoked
23. @Composable fun Greeting(name: String) { Text("Hello: $name") } Hello: Gil
24. @Composable fun Greeting(name: String) { Text("Hello: $name") } Hello: Rachel
25. @Composable fun Greeting(name: String) { Text("Hello: $name") } Hello: David
26. What is Compose?
27. Compiler plugin Runtime
28. Compiler plugin
29. Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") }
30. Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") }
31. Composable functions are not UI elements
32. Compiler plugin @Composable fun Greeting(name: String): Unit { Text("Hello: $name") }
33. What are composable functions?
34. Composable function Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") }
35. Composable function Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") } Greeting
36. Composable function Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") } Greeting Text
37. Composable function Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") Text("Hello: $name") } Greeting Text Text
38. Composable function Compiler plugin @Composable fun Greeting(name: String) { Text("Hello: $name") Text("Hello: $name") } Instructions tree Greeting Text Text
39. Compose Runtime
40. Runtime Takeaway (10bis) mobile app
41. Runtime Takeaway (10bis) mobile app
42. Runtime Compose Jetnews app
43. Runtime Compose Jetnews app
44. Compose uses canvas under the hood
45. AOSP View TextView Button ViewGroup FrameLayout EditText LinearLayout Button EditText
46. Gradle dependency Compose Canvas Surface Text Vector Image
47. @Composable fun Button(text, onClick) { } Button
48. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { } } Surface Button
49. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { } } } Surface Ripple Button
50. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { } } } } Surface Ripple Clickable Button
51. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { Container(padding = paddings) { } } } } } Surface Ripple Clickable Container Button
52. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { Container(padding = paddings) { Text(text) } } } } } Surface Ripple Clickable Container Text Button
53. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { Container(padding = paddings) { Text(text) } } } } } Surface Ripple Clickable Container Text ImageButton
54. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { Container(padding = paddings) { Image(image) } } } } } Surface Ripple Clickable Container Image ImageButton
55. @Composable fun Button(text, onClick) { Surface(shape, color, border, elevation) { Ripple(color = rippleColor) { Clickable(onClick = onClick) { Container(padding = paddings) { Image(image) } } } } } Surface Ripple Clickable Container ImageButton Image
56. fun Button
57. Reactive data flow
58. Reactive data flow Data Events
59. Spinner Item Clicked Selection changed We get notified Item Clicked We get notified UI changes Selection updated UI changes Change selection? Current Compose
60. Reactive data flow UI Update Data Change UI
61. Reactive data flow UI Update Data ✅ ✅ Change data Data changed, Notifying UI
62. Reactive data flow UI Update Data Single source of truth
63. @Composable fun Counter() { } Reactive data flow
64. @Composable fun Counter() { val count } Reactive data flow
65. @Composable fun Counter() { val count = 0 } Reactive data flow
66. @Composable fun Counter() { val count = state { 0 } } Reactive data flow
67. @Composable fun Counter() { val count = state { 0 } } Reactive data flow Should be treated as an “observer”
68. @Composable fun Counter() { val count = state { 0 } Column { } } Reactive data flow
69. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") } } Reactive data flow
70. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) } } Reactive data flow
71. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow
72. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow
73. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow
74. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow
75. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow Single source of truth
76. @Composable fun Counter() { val count = state { 0 } Column { Text("Counter demo") Button(text = "Add", onClick = { count.value++ }) Button(text = "Subtract", onClick = { count.value-- }) Text("Clicks: ${count.value}") } } Reactive data flow
77. Jetpack compose
78. @Model data class NewsModel( var title: String, var auther: String, var imageUrl: String )
79. @Model @Model data class NewsModel( var title: String, var auther: String, var imageUrl: String )
80. @Model @Model data class NewsModel( var title: String, var auther: String, var imageUrl: String ) data class NewsHolder(var news: List<NewsModel>)
81. @Model @Model data class NewsModel( var title: String, var auther: String, var imageUrl: String ) @Model data class NewsHolder(var news: List<NewsModel>)
82. @Model @Composable fun NewsItem(model: NewsModel) { }
83. @Model @Composable fun NewsItem(model: NewsModel) { Row { } }
84. @Model @Composable fun NewsItem(model: NewsModel) { Row { Image(url = model.imageUrl) } }
85. @Model @Composable fun NewsItem(model: NewsModel) { Row { Image(url = model.imageUrl) Column { } } }
86. @Model @Composable fun NewsItem(model: NewsModel) { Row { Image(url = model.imageUrl) Column { Text(model.title) } } }
87. @Model @Composable fun NewsItem(model: NewsModel) { Row { Image(url = model.imageUrl) Column { Text(model.title) Text(model.auther, style = TextStyle(Color.Gray)) } } }
88. @Model @Composable fun NewsFeed(holder: NewsHolder) { }
89. @Model @Composable fun NewsFeed(holder: NewsHolder) { VerticalScroller { } }
90. @Model @Composable fun NewsFeed(holder: NewsHolder) { VerticalScroller { Column { } } }
91. @Model @Composable fun NewsFeed(holder: NewsHolder) { VerticalScroller { Column { holder.news.forEach { newsModel -> } } } }
92. @Model @Composable fun NewsFeed(holder: NewsHolder) { VerticalScroller { Column { holder.news.forEach { newsModel -> NewsItem(newsModel) } } } }
93. @Model @Composable fun NewsFeed(holder: NewsHolder) { VerticalScroller { Column { holder.news.forEach { newsModel -> NewsItem(newsModel) Divider(height = 1.dp) } } } }
94. Jetpack compose var newsHolder: NewsHolder override fun onCreate(savedState: Bundle?) { super.onCreate(savedState) }
95. Jetpack compose var newsHolder: NewsHolder override fun onCreate(savedState: Bundle?) { super.onCreate(savedState) setContent { } }
96. Jetpack compose var newsHolder: NewsHolder override fun onCreate(savedState: Bundle?) { super.onCreate(savedState) setContent { NewsFeed(newsHolder) } }
97. UI Repository Presenter / ViewModel Jetpack compose pullNews newsPulled fetchNews onNewsFetched
98. override fun onNewsFetched(newsHolder: NewsHolder) { } Jetpack compose
99. override fun onNewsFetched(newsHolder: NewsHolder) { this.newsHolder = newsHolder } Jetpack compose
100. override fun onUpdate() { } Jetpack compose
101. override fun onUpdate() { newsHolder.news[0].title = "New title" } Jetpack compose
102. Compose can still work with the current toolkit
103. @GenerateView @Composable fun NewsItem(model: NewsModel) { ... }
104. @GenerateView @Composable @GenerateView fun NewsItem(model: NewsModel) { ... }
105. @GenerateView
106. Final notes
107. Compose is not production ready!!!!!!!!!!
108. Available in Android studio 4+
109. Compose’s slack channel
110. Questions?
111. Thank you