Talk presented during the DevFest Sul 2019, at ACATE - Florianópolis, SC.

1. Declarative UIs with
Jetpack @Compose
Ramon Ribeiro Rabello

2. about.me/ramonrabello
Ramon Rabello
Android Developer

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

10. Simplify building UI

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

15. Presentation architectures

16. Presentation Architectures
MVC
MVP
MVVM
MVI

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 **

26. Jetpack Compose Principles

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

32. Top-down Data Flow
DataEvent

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

48. Thank you!
about.me/ramonrabello