I'm just starting to look at compose... I want to ...

# compose

[Travis Griggs]

I'm just starting to look at compose... I want to understand (at 10000) how it works. I see a bunch of functions that look like object/struct things because they start with UpperCaseUIElementNames rather than the way functionsNormallyExist(), they don't return anything (apparently), but they're annotated with @Composable. So... how does it work? Do these "functions" actually return anything, or are they used more like "draw this" commands on an implicit canvas/tree behind the scenes? What does the @Composable annotation actually provide? Composable.kt doesn't give much hints. Any links/videos that answer these kinds of questions? I get the basic approach from experience with Flutter/SwiftUI, but I want to understand the actual Kotlin architecture here

[Ian Lake]

The Thinking in Compose docs (https://developer.android.com/jetpack/compose/mental-model) and video (

https://www.youtube.com/watch?v=SMOhl9RK0BA▾

) are really good intros to how Compose works

[dimsuz]

you really should take one of codelabs prepared by Compose team. They answer you questions and generally guide you on all the different topics. Here's the "basics" one, there are others, they're all listed in Compose related documentation page.

https://developer.android.com/codelabs/jetpack-compose-basics#0

[Ian Lake]

Yeah, there's a lot of resources even on the landing page for Compose (the 'View Tutorial' button is a good primer, the 'Pathway' below that takes you through a bunch of the concepts and codelabs): https://developer.android.com/jetpack/compose

[Travis Griggs]

I've watched the first video and read the doc. They're good. I've seen similar for the other declarative UIs. What I was after was more of a peek under the hood. For example, the doc you referenced says:

"The function is annotated with the @Composable annotation. All Composable functions must have this annotation; this annotation informs the Compose compiler that this function is intended to convert data into UI."

What does this Compose compiler actually do to the original function? At the end of the day, it gets converted into some sort of real kotlin code expressions. Is the Compose compiler a second pass compiler that happens after the kotlin compilation? Does it generate more kotlin code under the hood? or replace the existing? That's the kind of thing I'm trying to understand a little better?

[romainguy]

It generates more Kotlin code

[romainguy]

https://youtu.be/6BRlI5zfCCk▾

is a good place to start

[Travis Griggs]

Finally got in after long weekend and was able to watch this. THIS was the kind of answer I was looking for. This helped a lot.

[Travis Griggs]

still don't get all of it, but multiple light bulb moments there