Slide 1

Slide 1 text

The Compose Champ: Understanding Kotlin 01 @mambo_bryan

Slide 2

Slide 2 text

02 Design Centric Engineer Brian Odhiambo Co-organizer @ KotlinKenya Maintaining KotlinBits Mobile Engineer Yeah am all about that UI/UX & Kotlin

Slide 3

Slide 3 text

How? How can we use Koltin knowledge in compose? Why? Why do we need to understand kotlin? Today's Agenda 03 What? What is Kotlin and compose?

Slide 4

Slide 4 text

The WHAT What is Kotlin and compose?

Slide 5

Slide 5 text

A modern pragmatic programming language which is safe, clear and concise. A fast, reactive & intuitive UI framework for Kotlin Kotlin Compose

Slide 6

Slide 6 text

The WHY Why do we need to understand kotlin?

Slide 7

Slide 7 text

07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip!

Slide 8

Slide 8 text

07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip! But Why 🤔 ?

Slide 9

Slide 9 text

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe

Slide 10

Slide 10 text

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe How does this relate to Kotlin? 🤔 🤔

Slide 11

Slide 11 text

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe If you want to use compose fully, understand Kotlin Then use compose You shall know Bliss! Understand Kotlin

Slide 12

Slide 12 text

The HOW How can we use Kotlin knowledge in compose?

Slide 13

Slide 13 text

Functions Composable are just Kotlin functions fun helloWorld() { println("Hello World") } @Composable fun HelloWorld() { Text(text ="Hello World") } @Preview @Composable fun HelloWorldPreview() { HelloWorld() }

Slide 14

Slide 14 text

Default Arguments Default Arguments help in fun sayHello( greeting: String, name: String = "World" ) { println("$greeting $name!") } fun main() { sayHello("Jambo") } // Jambo World!

Slide 15

Slide 15 text

Default Arguments Default Arguments help in @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, ... ){ ... } @Composable fun HelloWorld() { Text("Jambo World") }

Slide 16

Slide 16 text

Named Arguments Specify the parameter name for an argument fun sayHello( greeting: String, name: String = "World", country: String = "Kenya" ) { println("$greeting $name,") println("Welcome to $country!") } fun main() { sayHello("Jambo",country="South Africa") } // Jambo World, // Welcome to South Africa!

Slide 17

Slide 17 text

Named Arguments Specify the parameter name for an argument @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, ... ){ ... } @Composable fun HelloWorld() { Text( "Jambo World", color = Color.White ) }

Slide 18

Slide 18 text

High Order Functions Pass functions as arguments to other functions fun sayHello( greeting: String, name: String = "World", country: String = "Kenya", celebrate: () -> Unit ) { println("$greeting $name,") println("Welcome to $country!") celebrate() } fun main() { sayHello("Jambo",country="South Africa"){ println("🎉🎊🥳") } } // Jambo World, // Welcome to South Africa! // 🎉🎊🥳

Slide 19

Slide 19 text

High Order Functions Pass functions as arguments to other functions @Composable @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, ... ){ ... } @Composable fun HelloWorld() { Button(onClick = { println("Wohoo Soweto!") }) { Text("celebrate") } }

Slide 20

Slide 20 text

Function literals with receiver Pass functions that have declared types data class Market(val name: String){ val list = mutableListOf() fun buy()... fun sell()... fun previewMarket(block: List.() -> Unit){ list.block() } } fun main() { val market = Market(name= "Nairobi") ... market.previewMarket { this: List filter { it.length > 4 } println(this) } }

Slide 21

Slide 21 text

@Composable inline fun Column( modifier: Modifier = Modifier, ..., content: @Composable ColumnScope.() -> Unit ) { ... } @Composable fun HelloWorld() { Column { this: ColumnScope AnimatedVisibility(visible = true ) //... } } Function literals with receiver Pass functions that have declared types @Composable fun ColumnScope.AnimatedVisibility(...) //...

Slide 22

Slide 22 text

The SPOOKY STUFF The things that Kotlin does so well!

Slide 23

Slide 23 text

07 @Composable fun HelloWorld(isTrue: Boolean) { if(isTrue) Text("this") else Text("that") } if-else if-else is an expression and returns a value @Composable fun HelloWorld(isTrue: Boolean) { val value = if(isTrue) "this" else "that" Text(value) }

Slide 24

Slide 24 text

07 @Composable fun HelloWorld(isTrue: Boolean) { val icon = if(isTrue) Icons.Rounded.KeyboardArrowUp else Icons.Rounded.ArrowDropDown val description = if(isTrue) "this" else "that" Icon(imageVector = icon, contentDescription = title) } desctructuring dismantle a value into various variables

Slide 25

Slide 25 text

07 @Composable fun HelloWorld(isTrue: Boolean) { val (icon, title) = if(isTrue) Pair(Icons.Rounded.KeyboardArrowUp, "this") else Pair(Icons.Rounded.ArrowDropDown, "that") Icon(imageVector = icon, contentDescription = title) } desctructuring dismantle a value into various variables

Slide 26

Slide 26 text

The FAQs Some of the most commonly asked questions

Slide 27

Slide 27 text

How much kotlin should I learn before jumping to creating with compose? 🤔 Just the basics

Slide 28

Slide 28 text

What are the basics? 🤔 Literals(int, long, float, double, string, char), Functions(normal, local) Collections(list, set, array, dictionaries) Flow(conditional, loops, ranges) Classes(normal, object, data, enum) Safety(try-catch, not-null)

Slide 29

Slide 29 text

19 mambo_bryan MamboBryan Thank you for listening KotlinBits kotlinbits.vercel.app