Jetpack Compose: What does it mean for U and I?

Jetpack compose is the first meaningful departure from the original Android UI toolkit. Declarative UI rendering is not something we've ever had from the Android framework. Come take a stroll through the history of UI development on Android and the journey towards Jetpack compose.

Transcript

1. Jetpack Compose What does it mean for U and I? Zach Smith Yousuf Haque
2. Programmers <3 Reusable Code
3. As Android UIs scale, reusable components become more important
4. What does UI reuse look like on android?
5. Fragments - Fragments give flexibility - They provide Lifecycle hooks to hang your app from
6. Fragments - They are better for coarser grained situations - Reusable "sections" of UI.
7. Fragments - The code for a given component is spread across several files: - MyFragment.kt - my_fragment.xml - styles.xml
8. Custom Views/View Groups - They are better for finer grained situations - A lot more freedom - There are many things you need to get right
9. Custom Views/View Groups - Override onMeasure() and onDraw() - XML attributes (attrs.xml) - Define style-ables and themes - Code for dealing with layout and touch events.
10. Custom Views/View Groups - Inheritance Base API - Button extends TextView - Every button you create brings along all the behavior of TextView
11. Deciding Between Implementations Can Be Hard - Fragments vs Custom Views - Both have pros and cons, no definitive rules for choosing either - Cross over between abstractions is difficult
12. Programmers <3 Separation of Concerns
13. Programmers (should) <3 Testing
14. Enter Architecture Patterns: MVP, MVVM, MVI... MV*
15. Managing State - What is the source of truth? - Who owns it? - Who can change it?
16. Managing State - Use separation of concerns to enforce rules for owning updating state
17. Problem: Android.Views have their own state
18. Much of the code we write aims to synchronize View state and business logic state
19. Synchronizing Multiple States - Views have optional listeners - Spinner -> OnItemSelectedListener - Checkbox -> OnCheckedChangeListener - These listeners notify that user changed a value after the it was changed in the View - Can end up in a loop of updates
20. Synchronizing Multiple States - Multiple sources of truth... - Who owns it? - Who can change it?
21. What We’re Looking For - Reusable UI components - Single source of truth
22. Enter Jetpack Compose
23. Jetpack Compose - Declarative UI framework - Highly composable - Stateless - Departure from existing android UI toolkit - Implemented entirely in kotlin
24. Jetpack Compose @Composable fun Greeting(name: String) { Text("Hello $name") }
25. Jetpack Compose @Composable fun UserNameLabel(user: User?) { if (user != null) { Greeting(user.name) } else { Text("User is not available") } }
26. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
27. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
28. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
29. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
30. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
31. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
32. Jetpack Compose setContent { Padding(padding = 10.dp) { VerticalScroller { Column { classmates.forEach { student -> Greeting(name = student.name) } } } } }
33. Jetpack Compose Mental Models - UI is a pure transformation of application state to UI hierarchy - Execute (composable) functions that “emit” UI widgets into the hierarchy (not views) - UI hierarchy is a tree of widgets
34. Jetpack Compose Mental Models - If state changes, you just generate a new tree - Compose handles updating what the user sees to reflect the new tree - No more reconciliation of data and logic via things like textView.setText()
35. But wait, my performance! - Jetpack has many optimizations (memoization) - Regenerating a new tree actually only updates changed nodes, not the whole tree - Tree DSL doesn’t actually instantiate objects, it “emits” UI nodes into the UI tree
36. How it’s made - Compose UI + Runtime - Compiler plugin generates IR code which is transformed to java byte code - Unbundled from the android framework
37. How it’s made - Compiler plugin allows you to leverage the kotlin type system - @Composeable functions can only be called from other @Composeable functions - Compiler plugins allows more flexibility than annotation processors
38. Java/View Interop - Geared towards kotlin (probably no way to write @Composeable function in java) - There will be a way to kick off composition from java
39. Java/View Interop - Can generate a classic view to be used with existing android toolkit - Can use compose tree within existing views - Can put existing views inside compose tree
40. Java/View Interop - Framework team rewriting fundamental views (textview, imageview) in compose, but not surfaces (webview, camera)
41. Migration Story - Very experimental, don’t migrate yet!!!!!!!!!!!!! >:|
42. Migration Story - Bottom up, small, encapsulated, stateful, dynamic subsections are best candidates to migrate first - Can host compose widgets from any view - Activities and fragments aren’t going anywhere
43. Work To be Done - Resources - Scrolling performance improvements - Testing - Accessibility - Animations - No Recyclerview - No motion layout - No complex transitions
44. Benefits of compose - Simpler programming model - Single source of truth - Declarative syntax with heavy lifting done by runtime - Composition is a first class principle - Simple to extract reusable components from existing compose functions
45. How to use it today - Forked version of the kotlin compiler - Special version android studio
46. • Declarative UI Patterns (Google I/O'19) ◦ https://www.youtube.com/watch?v=VsStyq4Lzxo • Android Developers Backstage Episode 115: Jetpack Compose ◦ http://androidbackstage.blogspot.com/2019/06/episode-115-jetpack-compose.html • Compose From First Principles ◦ http://intelligiblebabble.com/compose-from-first-principles/ • How to get the source code ◦ https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx- master-dev/ui/README.md Resources
47. Thank you! Zach Smith Twitter: zw33 GitHub: zws33 Yousuf Haque Twitter: yousufhaque GitHub: yousuf-haque