$30 off During Our Annual Pro Sale. View Details »

Fragments in Compose

Fragments in Compose

Dinorah Tovar

January 25, 2022
Tweet

More Decks by Dinorah Tovar

Other Decks in Technology

Transcript

  1. ¿Fragments in Compose? Dinorah Tovar Google Developer Expert Android @ddinorahtovar

    @ddinorahtovar
  2. Left Aligned Title Compose is a new cool way to

    write UI First let’s talk about compose @Composable fun view(data: Int) data: Int Composition emit
  3. Simple quote or statement goes here. Ideally limit to four

    or five lines max. Composable functions Kotlin 100% @Composable fun SomeTextView( text: String ) { Text( text = text, style = DesignTheme.typography.body4, color = DesignTheme.colors.onSurface, textAlign = TextAlign.Start ) }
  4. So - for a View We use Activity class HomeActivity

    : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposableHolder() } } }
  5. Left Aligned Title Today - some of us has this

    structure Second, let’s talk about fragments Activity Fragment ViewModel Simples flow
  6. Left Aligned Title Activity Fragment ViewModel Activity Fragment ViewModel Fragment

    ViewModel Full App Today - some of us has this structure Second, let’s talk about fragments
  7. Fragments with compose does not have setContent{} class OtherFragment :

    Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy( DisposeOnViewTreeLifecycleDestroyed ) setContent { // View } } } }
  8. The lifecycle is one of the most complex aspects of

    developing applications and has always been a source of bugs, and difficult to understand for developers.
  9. Many different ideas Many task to handle Many blog post

  10. None
  11. None
  12. None
  13. None
  14. Fragments are not bad - but they probably can be

    better
  15. Left Aligned Title Compose solve probably one of the hardest

    task in Android Compose to the rescue First Interaction Composition Insert “A” Insert “B” Second Interaction Re-composition
  16. Left Aligned Title Compose is designed for State Hoisting -

    decoupling everything Compose to the rescue @Composable fun View() @Composable fun View() @Composable fun ViewContent()
  17. This is also know As Uni- directional Data flow Left

    Aligned Title @Composable fun View() @Composable fun View() @Composable fun ViewContent() State Event
  18. Left Aligned Title Compose is designed for State Hoisting Compose

    to the rescue @Composable State Holder ViewModel/ Presenters Access to 
 Logic UI component state UI component Composition
  19. Left Aligned Title Example - State Hoisting @Composable fun View(){

    var variable by remember { mutableStateOf("") } val onValueChange = { text -> variable = text } Component( name= variable, onValueChange= onValueChange ) } @Composable fun ViewContent( name : String, onValueChange : (String) -> Unit ){ // Your view }
  20. Composable function Can access ViewModel @Composable private fun ComposableHolder( viewModel:

    MyViewModel = viewModel() ) { val uiState by viewModel.uiState.collectAsState() when { uiState.isLoading -> { /* ... */ } uiState.isSuccess -> { /* ... */ } uiState.isError -> { /* ... */ } } }
  21. Does not requiere Fragments At the end of the day

    - using Compose AT ALL
  22. Compose offers something different to everything we have seen -

    Give it a try (and decide if your fragments worth the effort)
  23. ¿Fragments in Compose? Dinorah Tovar Google Developer Expert Android @ddinorahtovar

    @ddinorahtovar