Android new UI ToolKit: Jetpack Compose

Transcript

1. @soulesidibe - Feb 2022 Android new UI ToolKit: Jetpack Compose
2. Agenda • The View System • Jetpack Compose: overview • State management • Modi fi er • Building a Composable(demo) • Beyond android’s use case • Wrap-up
3. The View System • Provides the visual elements on the screen • Buttons, text, animations • Also the tools for the developers • Android Studio UI Editor for xml layouts, Visual layout editor for ConstrainLayout • We almost used Javascript instead of Java 😅
4. The View System
5. The View System
6. The View System • Pros • XML layouts are logic free (databinding lovers… ☠☢⛔⚠) • Layout quali fi ers. (Orientation, screen density, locale, etc) • Cons • Two languages: XML and Java • NPE • Hard to create custom views • Views are stateful
7. And then… • React Native • Flutter • SwiftUI • And developers love them! • 🚀Declarative UI 🚀
8. Declarative UI
9. Declarative UI
10. Why Compose • Build a UI Toolkit with the developers • Unbundle the UI Toolkit from the platform releases • Fewer technology stack(Activity, Fragment, Custom view, etc) • Better state management • Write less code • Be aligned with industry standard
11. The timing • Kotlin (2017) • The new Kotlin compiler • Years of experience building and maintaining a UI Toolkit(since 2007) • Real world implementation of Declarative UI (inspired by React Native, Flutter, etc.)
12. Jetpack Compose
13. Jetpack Compose • Open source • Declarative UI Framework • Takes full advantage of Kotlin • Function based piece of UI • Compose 🤝 View System • Powerful tooling with @Preview • Great documentation
14. Declarative UI Framework
15. Takes full advantage of Kotlin Functions Extension functions Passing functions around Property delegate High order functions Control Flow Strong type system
16. Function based UI Compose special keyword Compose decorator Params: data, events, con f ig Child Composables No class, no inheritance
17. Compose 🤝 View System
18. Compose 🤝 View System
19. Compose 🤝 View System
20. Jetpack Compose View System Jetpack Compose A screen @Composable Multiple screens @Composables Fragments @Composables Custom Views @Composable A Button @Composable
21. State Management
22. State Management
23. State Management
24. State Management
25. State Management
26. State Management
27. State Management
28. State Management Stateless composable Stateful Composable
29. State Hoisting • Do not manipulate state locally • Let the caller provides the state • Inform the caller about events • And let the caller calls back with new data(recomposition)
30. State Management
31. State Management Lifecycle
32. Modi f ier
33. Modi f ier • Decorate a composable • Size, padding • Accessibility • Make the Composable clickable, scrollable, zoomable, etc
34. Modi f ier
35. Modi f ier
36. Modi f ier
37. Type safe modi f ier • Modi fi er only available for a given Composable • weight() is only available for Column and Row • The pattern for your Custom Composable
38. Type safe modi f ier
39. Type safe modi f ier
40. Type safe modi f ier
41. Building a Composable (Demo)
42. Beyond android’s use case
43. Beyond android • Compose for desktop by JetBrains (Desktop App) • Compose Multiplatform (Multiplatform App) • Mosaic by Jake Warthon (console UI) • IOS?
44. Wrap-up
45. Wrap-up • Android dev 💙 Compose • Compose is here to stay • Compose is not perfect(performance issues, material design components) • Compose is production ready • Give it a try 😊
46. Thanks!
47. Links • Doc: https://developer.android.com/jetpack/compose • Android dev channel => https://www.youtube.com/c/AndroidDevelopers/search? query=compose • Maps => https://cloud.google.com/blog/products/maps-platform/compose-maps- sdk-android-now-available • Accompanist => https://google.github.io/accompanist/ • Soulesidibe => https://soulesidibe.medium.com/jetpack-compose-1-0-where-to- start-8275717b1e0