Jetpack Compose Kashif Mehmood 

What is Compose? 

What is Compose? • A general purpose framework to manage state and emit a tree of objects derived from state • Can be used to build any sort of tree produced by composables • Compose UI is an implementation on UI Kit built using Compose. • Compose UI != Compose • Compose can be used to build anything you can think of that has a state and emits a tree and/or is reactive in nature 

What is Jetpack Compose? 

Jetpack Compose is a modern declarative UI Toolkit to simplify and accelerate native Android UI development. 

Inspired By • React • Swift UI • Vue.js • Flutter • Litho . . . Built completely with kotlin, available for multiplatform projects and android. 

Imperative UI Declarative UI vs Focuses on What Focuses on How Inheritance is prefered Composition is prefered View and logic are seperate Uses one language to build entire application. Tons of Boilerplate Code, slow development Less Code, faster development 

No content

Challenges with Views System Different Languages Multiple Files 30+ thousands lines of code Cognitive Overhead Deprecation s everywhere Multiple layers of inheritance Developer ergonomics Boilerplate code 

UI logic and definition separate Layout Definition XML Static Kotlin/java Dynamic Logic & Behaviour Completely separate, can't use syntactic sugar and language features. (unless you are databinding fanatic) Generate tons of boilerplate codes, especially when using bindings. 

Is Jetpack Compose ready for production? 

Can I use it in my existing app? 

What about performance? 

Layouts Column Constraint Box Row 

Slot layouts 

Modifiers An ordered, immutable collection of modifier elements Decorates or Add behaviour to Compose UI elements Modifiers can be chained Chaining order is important 

Life cycle of a composable Recompose 0 or more times Composable Enter the Composition Leave the Composition 

What’s the State? An interface that has a value property during the execution of a Composable function. A mutable value holder where reads to the value property during the execution of a Composable function. Any changes to value will schedule recomposition of any composable functions that read value. State MutableState 

Recomposition Composable Event UI-Redr aw 

State & Recomposition Update State User Event Update UI Composition @Composable 

What’s the State? Value Holder Observable Recomposition Trigger 

What’s the State? Remember Remember Saveable 

What’s the State? StateFull State less 

Why state less? Single source of truth Encapsulated Decoupled 

Side effects A side-effect is a change to the state of the app that happens outside the scope of a composable function. Used to trigger one of events Should be called with the scope of composable lifecycle 

Side effects LaunchedEffect DisposableEffect DerivedStateOf 

Lets Talk KMM 

Thank you LinkedIn: @kashif-mehmood-km Github: @Kashif-E Twitter: @Kashif_mehmood_