Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack compose

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.

Kashif Mehmood

December 21, 2022

More Decks by Kashif Mehmood

Other Decks in Programming


  1. 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
  2. Jetpack Compose is a modern declarative UI Toolkit to simplify

    and accelerate native Android UI development.
  3. Inspired By • React • Swift UI • Vue.js •

    Flutter • Litho . . . Built completely with kotlin, available for multiplatform projects and android.
  4. 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
  5. 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
  6. 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.
  7. Modifiers An ordered, immutable collection of modifier elements Decorates or

    Add behaviour to Compose UI elements Modifiers can be chained Chaining order is important
  8. Life cycle of a composable Recompose 0 or more times

    Composable Enter the Composition Leave the Composition
  9. 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
  10. 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