The Compose Champ : Understanding Koltin

How beneficial is it to learn and understand Kotlin before proceeding to compose? This session tackles some key Kotlin features that compose UI framework uses to achieve a non-bloated API

Transcript

1. The Compose Champ: Understanding Kotlin 01 @mambo_bryan
2. 02 Design Centric Engineer Brian Odhiambo Co-organizer @ KotlinKenya Maintaining KotlinBits Mobile Engineer Yeah am all about that UI/UX & Kotlin
3. 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?
4. The WHAT What is Kotlin and compose?
5. A modern pragmatic programming language which is safe, clear and concise. A fast, reactive & intuitive UI framework for Kotlin Kotlin Compose
6. The WHY Why do we need to understand kotlin?
7. 07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip!
8. 07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip! But Why 🤔 ?
9. If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe
10. 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? 🤔 🤔
11. 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
12. The HOW How can we use Kotlin knowledge in compose?
13. Functions Composable are just Kotlin functions fun helloWorld() { println("Hello World") } @Composable fun HelloWorld() { Text(text ="Hello World") } @Preview @Composable fun HelloWorldPreview() { HelloWorld() }
14. Default Arguments Default Arguments help in fun sayHello( greeting: String, name: String = "World" ) { println("$greeting $name!") } fun main() { sayHello("Jambo") } // Jambo World!
15. Default Arguments Default Arguments help in @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, ... ){ ... } @Composable fun HelloWorld() { Text("Jambo World") }
16. 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!
17. 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 ) }
18. 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! // 🎉🎊🥳
19. 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") } }
20. Function literals with receiver Pass functions that have declared types data class Market(val name: String){ val list = mutableListOf<String>() fun buy()... fun sell()... fun previewMarket(block: List<String>.() -> Unit){ list.block() } } fun main() { val market = Market(name= "Nairobi") ... market.previewMarket { this: List<String> filter { it.length > 4 } println(this) } }
21. @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(...) //...
22. The SPOOKY STUFF The things that Kotlin does so well!
23. 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) }
24. 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
25. 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
26. The FAQs Some of the most commonly asked questions
27. How much kotlin should I learn before jumping to creating with compose? 🤔 Just the basics
28. 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)
29. 19 mambo_bryan MamboBryan Thank you for listening KotlinBits kotlinbits.vercel.app