Jetpack Compose - DevFest 2019

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

JetPack Compose

Slide 3

Slide 3 text

About Raka Adi Nugroho - Software Engineer Android @Tokopedia - External Academy Reviewer @Dicoding - Android Developer @PrivyID /rakaadinugroho

Slide 4

Slide 4 text

JetPack Compose

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Overview Jetpack Compose Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

History of UI Toolkit

Slide 9

Slide 9 text

Android Journey

Slide 10

Slide 10 text

Common Thing Spread across several ﬁles - MainActivity.kt / JournalFragment.kt - fragment_journal.xml - style.xml

Slide 11

Slide 11 text

Core Concept - Concise and Idiomatic Kotlin - Declarative - Compatible - Beautiful Apps - Accelerate Development

Slide 12

Slide 12 text

Concise and Idiomatic Kotlin

Slide 13

Slide 13 text

Declarative

Slide 14

Slide 14 text

Declarative Imperative

Slide 15

Slide 15 text

Compatible

Slide 16

Slide 16 text

Beautiful Apps

Slide 17

Slide 17 text

Accelerate Development

Slide 18

Slide 18 text

Tokopedia UI - Unify

Slide 19

Slide 19 text

What do we need? - Re-Usable UI Component - Single source of truth

Slide 20

Slide 20 text

Hi! Jetpack Compose Future?

Slide 21

Slide 21 text

Jetpack Compose - Major Components - Compose UI Library - Compose Compiler

Slide 22

Slide 22 text

Jetpack Compose - Major Components

Slide 23

Slide 23 text

Android Studio Support

Slide 24

Slide 24 text

Layout Preview?

Slide 25

Slide 25 text

# 1 Data Flow?

Slide 26

Slide 26 text

Data Flow The declarative nature of Compose and it's UI components influence how data flows through a Compose application. DATA EVENT

Slide 27

Slide 27 text

Data Flow - Data Flows Down DATA

Slide 28

Slide 28 text

Data Flow - Events flow up EVENT

Slide 29

Slide 29 text

UI as a Tree VS COLUMN JOURNAL ITEM 1 JOURNAL ITEM N CARD TITLE ABSTRACTION BUTTON

Slide 30

Slide 30 text

UI as a Tree VS COLUMN JOURNAL ITEM 1 JOURNAL ITEM N CARD TITLE ABSTRACTION BUTTON

Slide 31

Slide 31 text

# 2 State Handler

Slide 32

Slide 32 text

UI as a Function UI=f(s)

Slide 33

Slide 33 text

State Handler

Slide 34

Slide 34 text

Existing UI UI Rendering Compose

Slide 35

Slide 35 text

Demo

Slide 36

Slide 36 text

- Flexibility - Re-Usability - Reactive Model - Less code POV : Pros & Cons - Min. API 21 - Layout Params (Padding)

Slide 37

Slide 37 text

Jetpack Compose build for U & I ?

Slide 38

Slide 38 text

Quick Recap 1. New Way to Build UI on Android 2. As an Android Developer, you must try

Slide 39

Slide 39 text

end; https://github.com/rakaadinugroho/ComposePlayground