Skip to content

π™΅πšžπš—πšπšŠπš–πšŽπš—πšπšŠπš•πšœ 𝚘𝚏 πš“πšŽπšπš™πšŠπšŒπš” πšŒπš˜πš–πš™πš˜πšœπšŽ πŸ“š

Jump to bottom
Devrath edited this page Jan 2, 2023 · 9 revisions

Introduction

  • Compose is a modern toolkit for building native UI. It helps in bringing your application to life with less-code, kotlin-API
  • It makes building android-UI fun faster and easier.
  • The code we write is written only in kotlin with a declarative approach rather than the earlier method of splitting with java+xml
  • Using the compose we build small stateless components which are not tied to any particular component-like activity so it's easier to re-use and test.

State in compose

  • In compose the state is explicit and passed from outside to the composable
  • When the state changes the composable is updated as per the state.
  • Using this there is single-source-of-truth for the state making it encapsulated and decoupled.

Backward-compatibility

  • Compose is compatible with all existing components
  • We can call view from compose and compose from view making it interoperable.
  • Some components like navigation,view-models,co-routines operate with compose so they can operate with each other.

Traditional Approach

  • In our traditional approach, Which we also call imperative-approach, we represent the view-hierarchy as a tree. If we want to update a view, We would traverse the entire 🌳 one view by another with parent<->child relationship and once we find the view, We would update the view.
  • Manipulating views manually causes the chances of errors. Also say if a piece of data is rendered in multiple places, its easy to forget to update in one of the places. Also chances of causing an illegal state exception were higher.

Reactive Approach

  • In the new approach, which we call declerative-approach, simplifies the way we build the UI by re-generating the entire UI block from scratch and applying only the necessary changes, this prevents the users from manually updating the view hierarchy

Compose Function

  • Compose function is the same as any other function with some additional features. It is annotated with the annotation @Composable. It accepts the parameters and this annotation tells the compiler that the function is a UI component and it draws a UI with the state passed in its parameters.
  • So as the state changes, Since the states are updated dynamically the composable functions react to it and the UI state changes automatically without you needing to update the UI.

Setting the content for the screen

  • In the imperative approach we set an xml to the class using a setContent, This exposes getter and setter methods using which widgets are modified.
  • In the declerative-approach the composing functions are stateless and they are re-drawn to a new state depending on the state of the screen.
  • The state travel from top to bottom which is from parent to the leaf child and the events travel from bottom to top which is from leaf child to the state.

Composition

  • There are basically two parts to this
    • Initial-Composition: It is when you call compose function and display the UI for the first time.
    • Re-Composition: It is when your composable functions re-draw the UI when the state changes.
  • `Intelligent-re-composition: If the compose tree is entirely redrawn, it would certainly drain the battery, To solve this problem compose tree is intelligently redrawn so that part of the blocks is re-composed instead of the entire tree.
  • Example of Intelligent-re-composition is, Say a parent compose(Say-P1) has two children composabled(C1 and C2) and one of the children say C2 has more composables under them. Now when you click to change the state of C2 only the C2 and its children are redrawn and not the entire tree from P1
  • Compose functions can run in any order: Say You have a compose function P1 having three composable functions C1, C2, and C3 placed one after the other. Now it necessarily does not mean that an execution order will be C1->C2->C3. Thus if the C2 is waiting for something from C1 this will cause a problem. This is called SIDE EFFECT. Make sure each composables are self-contained.
  • Composable functions can run in parallel: Composable functions can optimize the re-composition by running the composable functions in parallel meaning the composable functions can execute within a pool of background threads. So if composable calls a function in a view model, The compose function might be invoked from several threads at the same time.
  • Recomposition is optimistic: This means the composition is finished before the re-composition is triggered again.
  • Make sure expensive operations are not attached to compose function because the composition is triggered multiple times and cause memory junk. Then we need to move it to a separate thread and just update the UI using the state via the view model.

State in jetpack compose

  • In compose, A state means any value that can change over time.
  • In compose the UI is immutable meaning once the UI is drawn, we can't change it. However, what we can control is the state of the UI changes, by a process of re-composition the parts of the UI are re-drawn.
  • A compose can accept a state and expose an event
  • There are two types of states
    • Stateful
    • Stateless
  • Always need to keep the composable as stateless by a process called state-hoisting meaning moving the states to the parent using the lambda function.
  • View-Models are the recommended state holders for the composables that are high up in the composable tree. Also view-model services the on-configuration changes.
  • So view models store the states by live-data and state-holders via observable holders.
  • using this way we preserve the uni-directional flow of data.

Widgets used for Compose

Scaffold

  • Scaffold is a function that comes with a material library.
  • Scaffold lets us implement a selection structure of a material design in our application.
  • Basically we can create some material widgets like floating-button, Top-App-Bar, and Bottom-App-Bar and just pass them into the scaffold and the scaffold widget will take care of displaying the widgets properly.
  • It will make sure everything will work together as expected.
Clone this wiki locally