How to go full Compose and never look back
•
0 likes•87 views
With the Jetpack Compose APIs reaching their recent beta release milestone, there’s really no better time to dive into this framework and see what it’s all about. This talk is a high-level discussion of the highlights, lowlights, and everything in between regarding how to build an app with a 100% Compose-based architecture.
Recommended
Recommended
More Related Content
Similar to How to go full Compose and never look back
Similar to How to go full Compose and never look back (20)
Recently uploaded
Recently uploaded (20)
How to go full Compose and never look back
- 1. Jetpack Joyride How to go full Compose and never look back! By Tony Kazanjian
- 2. So what’s the big deal? ● Declarative UI isn’t new ● iOS equivalent ● Open source, disconnected from Android ● Community enthusiasm
- 3. We’re gonna talk about... ● Overview of a fully Compose-based app ○ State in Compose-world ○ Making Composables Reusable ○ Navigation ○ Everything else ■ Project structure ■ Interoperability ■ Compose “goodie bag”
- 4. It’s all about that STATE ● Core of Compose ● State<T> and MutableState<T>. Such Simple! ○ Allow reading and setting of value
- 5. State in Compose ● Recomposition when a state changes ● Give Composables memory with remember { mutableStateOf() } Code without saveable
- 6. State in Compose ● Across configuration or process death, use rememberSavable{mutableStateOf()}
- 7. How would we reuse a Composable like this? ● Use state hoisting to make composables stateless
- 8. Putting it together ● Composables read/write to State/MutableState values ● Must remember() mutable state for recomposition ● Data can be saved across orientation/process death with rememberSaveable() or ViewModels ● Conceptualize stateful composables as top-level with stateless composables within
- 9. Imagine your packages... ● Where are the stateless composables? Where are the stateful ones?
- 12. Architecture in Compose Nav Graph Splash Screen Main Screen (Bottom Navigation) MainActivity Home Settings
- 15. getViewModel()?! But how??? ● Using Architecture Components ViewModel library androidx.lifecycle:lifecycle-viewmodel-compose:$latestVersion ● viewModel() can take ViewModelProvider.Factory for dependencies
- 16. But we wanna inject! ● Using Koin "io.insert-koin:koin-androidx-compose:$latestVersion ● Using Hilt ○ @HiltViewModel annotated ViewModels work seamlessly with Compose
- 17. Injection ● Using Hilt ○ For NavGraph scoping: ■ "androidx.hilt:hilt-navigation-compose:$latestVersion
- 18. So, to recap... ● Navigate directly between Composables ● Create ViewModels within Composables ● DI frameworks like Hilt and Koin lets us get dependencies into Compose-scoped ViewModels Android Developers Fragments
- 19. Interoperability ● Bottom up approach ○ Migrate smaller UI elements, like Button or Textview, to a Composable, followed by their containers ○ Put ComposeView in XML ● Find the ComposeView in Activity or Fragment, call setContent(), do your Compose thang
- 20. Interoperability ● Top down approach ○ Migrating fragments or view containers to Composables, followed by smaller UI elements ○ Include an Android View hierarchy in Compose using AndroidView composable
- 21. Resources Jetpack Compose Playground - https://foso.github.io/Jetpack-Compose-Playground/ Accompanist - https://google.github.io/accompanist/ Official Compose Samples - https://github.com/android/compose-samples Compose Cookbook https://github.com/Gurupreet/ComposeCookBook
- 22. Handling backpresses in Jetpack Compose, Pawel Gadja https://dev.to/pawegio/handling-back-presses-in-jetpack-compose-50d5 Scoped Recomposition - What happens when state changes? Zach Klippenstein https://dev.to/zachklipp/scoped-recomposition-jetpack-compose-what-happens- when-state-changes-l78 Remember {mutableStateOf()} - a cheat sheet, Zach Klippenstein https://dev.to/zachklipp/remember-mutablestateof-a-cheat-sheet-10ma Better Handling of States between ViewModel and Composable, Igor Escodro https://proandroiddev.com/better-handling-states-between-viewmodel-and-comp osable-7ca14af379cb
- 23. Ready for production? YES (with caveats) ● Still in Beta ● Might not have every component you want ● Canary wonkiness
- 24. ● How could you fit Compose into your current projects? ● What would make it easier or harder to adopt? ● What excites you about using it? What concerns you?