Declarative UIs with Jetpack Compose
2 likes2,779 views
Jetpack Compose is Google's new declarative UI toolkit for Android that aims to simplify building user interfaces. It uses composable functions to build up UI elements in a declarative way. Composables can update reactively in response to changes in state data models. This allows building UIs as simple as printing lines of code. Compose principles include treating UI as functions, using composable building blocks, and implementing a top-down data flow from state models to views through composables. The speaker demonstrates a simple counter app built with Compose.
![Building UI is boilerplate
MyCustomView.[kt | java]
my_custom_view.xml
attrs.xml
style.xml](https://image.slidesharecdn.com/declarativeuiswithjetpackcompose-191029014121/85/Declarative-UIs-with-Jetpack-Compose-11-320.jpg)
![Building UI is boilerplate
MyCustomView.[kt | java]
my_custom_view.xml
attrs.xml
style.xml](https://image.slidesharecdn.com/declarativeuiswithjetpackcompose-191029014121/85/Declarative-UIs-with-Jetpack-Compose-12-320.jpg)
![Building UI is boilerplate
MyCustomView.[kt | java]
my_custom_view.xml
attrs.xml
style.xml](https://image.slidesharecdn.com/declarativeuiswithjetpackcompose-191029014121/85/Declarative-UIs-with-Jetpack-Compose-13-320.jpg)
![Building UI is boilerplate
MyCustomView.[kt | java]
my_custom_view.xml
attrs.xml
style.xml](https://image.slidesharecdn.com/declarativeuiswithjetpackcompose-191029014121/85/Declarative-UIs-with-Jetpack-Compose-14-320.jpg)
Declarative UIs with Jetpack Compose
- 1. Declarative UIs with Jetpack @Compose Ramon Ribeiro Rabello
- 3. Motivation The reasons behind Compose
- 4. Past mistakes - “API design is building future regret” ~Chet Haase
- 5. View.java - The “God View” legacy
- 6. Weird inheritance public class Button extends TextView {
- 7. Old View namings public class Spinner extends AbsSpinner {
- 8. Old View namings public class Spinner extends AbsSpinner { DropDown
- 9. Old View namings public class Spinner extends AbsSpinner { ComboBox
- 11. Building UI is boilerplate MyCustomView.[kt | java] my_custom_view.xml attrs.xml style.xml
- 12. Building UI is boilerplate MyCustomView.[kt | java] my_custom_view.xml attrs.xml style.xml
- 13. Building UI is boilerplate MyCustomView.[kt | java] my_custom_view.xml attrs.xml style.xml
- 14. Building UI is boilerplate MyCustomView.[kt | java] my_custom_view.xml attrs.xml style.xml
- 17. Presentation Architectures Data Flow questions - What is the source of truth?
- 18. Presentation Architectures Data Flow questions - What is the source of truth? - Who is the owner?
- 19. Presentation Architectures Data Flow questions - What is the source of truth? - Who is the owner? - Who can change it?
- 20. Spinner: the weirdest case public class MainActivity extends AppCompatActivity implements Spinner.OnItemChangedListener { What is the source of truth? Who is the owner? Who can change it? onItemStateChanged() will be called after the event has happened
- 21. It turns out that android.widget mixes state ownership and event handling concepts
- 22. New UI toolkit goals - Unbundled from platform releases (AndroidX) - Fewer technology stack flowcharts (Custom View? Fragment?) - Distinguish state ownership and event handling - Write less code
- 23. What about building UI as simple as printing lines? fun main(){ println("Hello Jetpack Compose") }
- 24. Jetpack Compose goes on stage Introducing Jetpack Compose
- 25. What is Compose? - Unbundled new set of UI widgets - Inspired by React, Litho, Vue.js, Flutter - A Kotlin compiler plugin - Fully compatible with existing app code - Experimental (0.1.0-dev02) - ** not ready for production yet **
- 27. UI as a function @Composable fun Hello(name: String){ Text(“Hello $name”) } Qualifier for Composables Intercept and recompose the UI tree
- 28. UI as a function (List of Composables) @Composable fun Trendings(newsList: List<News>){ for (news in newsList) { NewsCard(news) } }
- 29. UI as a function (Dynamic composables) @Composable fun Trendings(news: List<News>){ if (news.isEmpty()) { Text("You have no news today.") } else { NewsCard(news) } }
- 30. Composable building blocks @Composable fun Counter(model: CounterModel){ CounterTitle(model) CounterContent(model) CounterButtons(model) } @Composable fun CounterHeader(model: CounterModel) @Composable fun CounterContent(model: CounterModel) @Composable fun CounterButtons(model: CounterModel)
- 31. Reactive UI upon model changes @Composable fun Counter(){ val model = CounterModel() Column { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) } @Model data class CounterModel(var value: Int = 0) { fun increment() = value++ } Indicates that composable updates upon model changes
- 33. Top-down Data Flow @Composable fun Counter(model: CounterModel){ Column { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) } @Model data class CounterModel(var value: Int = 0) { fun increment() = value++ } Data
- 34. Top-down Data Flow @Composable fun Counter(model: CounterModel){ Column { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) } @Model data class CounterModel(var value: Int = 0) { fun increment() = value++ } Data
- 35. Top-down Data Flow @Composable fun Counter(model: CounterModel){ Column { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) } @Model data class CounterModel(var value: Int = 0) { fun increment() = value++ } Data
- 36. Top-down Data Flow @Composable fun Counter(model: CounterModel){ Column { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) } @Model data class CounterModel(var value: Int = 0) { fun increment() = value++ } Event
- 37. Getting Started
- 38. Download Android Studio 3.5+ (Gradle dependencies) AS 4.0 Canary 1 (Built-in Compose Support) UPDATE:
- 39. Add compose dev preview dependencies def compose_version = '0.1.0-dev02' implementation "org.jetbrains.kotlin:kotlin-reflect:1.3.50" implementation "androidx.compose:compose-runtime:$compose_version" kapt "androidx.compose:compose-compiler:$compose_version" implementation "androidx.ui:ui-layout:$compose_version" implementation "androidx.ui:ui-android-text:$compose_version"
- 40. Add compose dev preview dependencies def compose_version = '0.1.0-dev02' implementation "org.jetbrains.kotlin:kotlin-reflect:1.3.50" implementation "androidx.compose:compose-runtime:$compose_version" kapt "androidx.compose:compose-compiler:$compose_version" implementation "androidx.ui:ui-layout:$compose_version" implementation "androidx.ui:ui-android-text:$compose_version"
- 41. AS 4.0 Canary 1 - Create Composable Activity
- 42. Create a @Composable @Composable fun Counter() = MaterialTheme { val model = CounterModel() Row { Button(“Count”, onClick = { model.increment() }) } Text(“Counter: ${model.value}”) }
- 43. Add a @Model to represent the composable state @Model data class CounterModel(var value: Int = 0) { fun hitCount() = value++ }
- 44. Enclose root composable inside setContent{ } class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Counter() } } }
- 45. Demo
- 46. What’s Next? Learn more about Jetpack Compose
- 47. Learn more about Jetpack Compose Jetpack Compose | Android Developers Playing with Jetpack Compose dev preview Diving into Jetpack Compose - Q42 Engineering - Medium Declarative UI Patterns - Google I/O 2019 Android Jetpack Compose Review - Karumi Blog https://www.github.com/ramonrabello/Compose-Counter