Jetpack compose

Jetpack Compose is a modern toolkit for building native Android UI, introduced by Google in 2020. It provides a declarative and reactive approach to designing and building user interfaces, and allows developers to create intuitive and visually stunning apps with minimal code. In this talk, we will explore the basics of Jetpack Compose and learn how to use it to build simple and complex UI layouts, customize the appearance and behavior of UI elements, and integrate with other Android APIs. We will also discuss the benefits of using Jetpack Compose in terms of performance, maintainability, and developer productivity. Whether you are a beginner or an experienced Android developer, this talk will provide you with a comprehensive overview of Jetpack Compose and its potential to revolutionize the way we build Android apps.

Transcript

1. Jetpack Compose Kashif Mehmood
2. What is Compose?
3. 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
4. What is Jetpack Compose?
5. Jetpack Compose is a modern declarative UI Toolkit to simplify and accelerate native Android UI development.
6. Inspired By • React • Swift UI • Vue.js • Flutter • Litho . . . Built completely with kotlin, available for multiplatform projects and android.
7. 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
9. 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
10. 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.
11. Is Jetpack Compose ready for production?
12. Can I use it in my existing app?
13. What about performance?
14. Layouts Column Constraint Box Row
15. Slot layouts
16. Modifiers An ordered, immutable collection of modifier elements Decorates or Add behaviour to Compose UI elements Modifiers can be chained Chaining order is important
17. Life cycle of a composable Recompose 0 or more times Composable Enter the Composition Leave the Composition
18. 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
19. Recomposition Composable Event UI-Redr aw
20. State & Recomposition Update State User Event Update UI Composition @Composable
21. What’s the State? Value Holder Observable Recomposition Trigger
22. What’s the State? Remember Remember Saveable
23. What’s the State? StateFull State less
24. Why state less? Single source of truth Encapsulated Decoupled
25. 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
26. Side effects LaunchedEffect DisposableEffect DerivedStateOf
27. Lets Talk KMM
28. Thank you LinkedIn: @kashif-mehmood-km Github: @Kashif-E Twitter: @Kashif_mehmood_