Tweet
Tweet

Slide 1

Slide 1 text

Exploring Jetpack Compose Sneak peek into the future of Android UI @kaustavjaiswal Kaustav Jaiswal Senior Android Developer Amadeus

Slide 2

Slide 2 text

2008 Android 1.0 is released 2013 Android Studio 2014 ART, Recycler View 2017 Constraint Layout, Kotlin, Arch Components 2019 Jetpack Compose @kaustavjaiswal A brief look at Android history Credits: Declarative UI Patterns (Google I/O'19)

Slide 3

Slide 3 text

Old UI @kaustavjaiswal

Slide 4

Slide 4 text

New UI @kaustavjaiswal

Slide 5

Slide 5 text

@kaustavjaiswal

Slide 6

Slide 6 text

@kaustavjaiswal Developer looks at the Design:

Slide 7

Slide 7 text

@kaustavjaiswal Developer Reaction

Slide 8

Slide 8 text

A sneak peak into the future @kaustavjaiswal

Slide 9

Slide 9 text

What is compose? Declarative UI Runtime @kaustavjaiswal

Slide 10

Slide 10 text

What is compose? Kotlin Compiler Plugin @kaustavjaiswal

Slide 11

Slide 11 text

What is compose? Built from the ground up by the Android Team @kaustavjaiswal Inspired by React, Litho, Vue.js & Flutter

Slide 12

Slide 12 text

What is compose? Unbundled @kaustavjaiswal

Slide 13

Slide 13 text

What is compose? Open Source @kaustavjaiswal

Slide 14

Slide 14 text

What is compose? “pre”-alpha?! @kaustavjaiswal

Slide 15

Slide 15 text

What is compose? Jetpack Compose presents a radical shi in the way developers think about and write UI code on Android @kaustavjaiswal

Slide 16

Slide 16 text

Setting up Compose @kaustavjaiswal

Slide 17

Slide 17 text

Get Compose Up and Running Fork the AndroidX components from the AOSP Run a special version of Android Studio with compose compiler plugins enabled. All steps mentioned here http://bit.ly/setupcompose Linux and Mac Windows http://bit.ly/composewin10 @kaustavjaiswal

Slide 18

Slide 18 text

Composing UI @kaustavjaiswal

Slide 19

Slide 19 text

Compose Elements Compose Runtime Compiler Plugin Compose UI @kaustavjaiswal

Slide 20

Slide 20 text

Magic happens here! Trailing Lambda Syntax @kaustavjaiswal

Slide 21

Slide 21 text

@kaustavjaiswal Abstract Syntax Tree IR (Intermediate Representation) Kotlin Code Parser Compiler Front-end Compiler

Slide 22

Slide 22 text

@kaustavjaiswal Generated Code for a composable function IR (Intermediate Representation) Transform Perform Optimizations Compiler Back-end Experimental Compose Work

Slide 23

Slide 23 text

@kaustavjaiswal No more findViewById Composition over inheritance ✅ No handle on the view No XML

Slide 24

Slide 24 text

A composable can be called from within another composable only @kaustavjaiswal

Slide 25

Slide 25 text

@kaustavjaiswal

Slide 26

Slide 26 text

@kaustavjaiswal

Slide 27

Slide 27 text

@kaustavjaiswal

Slide 28

Slide 28 text

Compose Principles @kaustavjaiswal

Slide 29

Slide 29 text

@kaustavjaiswal UI is represented as a tree tree

Slide 30

Slide 30 text

@kaustavjaiswal

Slide 31

Slide 31 text

@kaustavjaiswal

Slide 32

Slide 32 text

@kaustavjaiswal

Slide 33

Slide 33 text

@kaustavjaiswal

Slide 34

Slide 34 text

@kaustavjaiswal

Slide 35

Slide 35 text

@kaustavjaiswal

Slide 36

Slide 36 text

Positional Memoization @kaustavjaiswal

Slide 37

Slide 37 text

@kaustavjaiswal UI= function(state)

Slide 38

Slide 38 text

@kaustavjaiswal

Slide 39

Slide 39 text

@kaustavjaiswal @kaustavjaiswal Creates State

Slide 40

Slide 40 text

State is passed @kaustavjaiswal

Slide 41

Slide 41 text

@kaustavjaiswal State Compose Tree Root Node

Slide 42

Slide 42 text

@kaustavjaiswal State Compose Tree Root Node

Slide 43

Slide 43 text

@kaustavjaiswal Events Compose Tree Root Node

Slide 44

Slide 44 text

@kaustavjaiswal Events Compose Tree Root Node

Slide 45

Slide 45 text

@kaustavjaiswal

Slide 46

Slide 46 text

Makes composable the root view Defines key colors and typography @kaustavjaiswal

Slide 47

Slide 47 text

Under the hood @kaustavjaiswal

Slide 48

Slide 48 text

Gap Buffers @kaustavjaiswal Compose uses a slightly different implementation of Gap Buffers called Slot Tables Core principles are same Tradeoffs are the same

Slide 49

Slide 49 text

Gap Buffers - How do they work? @kaustavjaiswal

Slide 50

Slide 50 text

Gap Buffers @kaustavjaiswal For a gap buffer all operations -> Insert, update, delete are constant time Except for moving the gap Move the gap when the structure of the tree changes Making a bet that the structure of the UI doesn’t change very often, but values do

Slide 51

Slide 51 text

@kaustavjaiswal

Slide 52

Slide 52 text

@kaustavjaiswal

Slide 53

Slide 53 text

Positional Memoization @kaustavjaiswal EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY

Slide 54

Slide 54 text

Positional Memoization @kaustavjaiswal EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY

Slide 55

Slide 55 text

Positional Memoization @kaustavjaiswal [ a , b , c ] EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY

Slide 56

Slide 56 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b EMPTY EMPTY EMPTY EMPTY EMPTY

Slide 57

Slide 57 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 58

Slide 58 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 59

Slide 59 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 60

Slide 60 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 61

Slide 61 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 62

Slide 62 text

Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY

Slide 63

Slide 63 text

What’s next? UI Landscape is quickly evolving One-way data flow model What about my existing views? Layout editor? Preview Tool? Potential to use the Compose runtime and compiler plugin for other libraries? Multithreaded layout! @kaustavjaiswal

Slide 64

Slide 64 text

References and Credits Big shout out to @intelligibabble http://intelligiblebabble.com/comp ose-from-first-principles/ Compose slack channel Chain React Conf Talk http://bit.ly/reactmeetcompose https://www.geeksforgeeks.org/ga p-buffer-data-structure/ @kaustavjaiswal Declarative UI Patterns talk http://bit.ly/declarativeGoogleio19 Unsplash – For all slide title images https://unsplash.com/ Kotlin/Everywhere Talk by @ragunathjawahar https://speakerdeck.com/ragunathj awahar/jetpack-compose-next-gen- kotlin-ui-toolkit-for-android

Slide 65

Slide 65 text

@kaustavjaiswal [email protected] ✉