An updated introduction to Jetpack Compose as of August 2021 after the official release of Jetpack Compose v1.0 on July 28th, 2021.
This talk will cover the paradigm-shifting from imperative to a declarative style of programming with JC as well as details of JC to anyone from beginner level.
JETPACK COMPOSE v1.0 (2021)
Jetpack Compose -
A declarative UI
“Tell me what you want (And
I’ll give you what you
A Song from The Doobie
brothers - 1974
● Toan Tran
● [Ex]Vice President, Mobile @Lazada
● HoE @GalaxyOne-SovicoGroup
● Occasional speaker at local events
● Google Developer Expert in Kotlin
● Find me on social media: [email protected]
1. Declarative vs Imperative
2. What is Jetpack compose?
3. How Jetpack Compose can help?
4. What's fun about it?
5. What's for me? (key takeaways)
6. Build something quick with Jetpack
Compose - LIVE *showing* CODE
Let’s make some instant noodles
A imperative program to cook noodle
How about this?
Declarative style to focus on the description of the
result rather than steps to get there
Jetpack Compose 1.0 Release
- Release date: July 28th 2021
- Key offers:
- Interoperable: ability to integrate with existing view-based
- Jetpack integration: Navigation, LiveData, Hilt, etc
- Material: Material Design components
- List: Lazy loading list
Inside Jetpack Compose
What's New in Jetpack Compose (Android Dev Summit '19)
1. Composable function
1. Just a function
2. Take inputs and decides how UIs are
3. Convert data state into view state
4. Can call other composable functions
or being called in other composable
1. Composable function
Jetpack Compose Architectural Layering (1)
Material: Provides Material Design UI for
Compose: Theming system, styled components,
Foundation: Building blocks like Row, Column,
Jetpack Compose Architectural Layering (2)
UI: UI toolkits (ui-text, ui-graphics), Modiﬁer,
input handlers, customized UI
Runtime: Fundamental runtime components:
mutableStateOf, remember, @Composable
Base on 3 main
concepts of layout
Compose Layout - Example - Column
Compose Layout - Example - Row
Compose Layout - Example - Box
Come to help
With XML layout? What’s problem?
1. No more ﬁndViewById
2. Layout code is code (clean? reusable?
3. Kotlin ﬁrst || Kotlin idiomatic
4. Enable data oriented architecture
Jetpack Compose Roadmap
Remember (Kotlin) Anko?
Facebook Litho library
Where to start?
Kotlinlang Slack group > Compose
LET’S BUILD SOMETHING!