Read on Twitter
1/n The 2nd issue of #JetpackComposeQuickBites is here!
You& #39;ve probably seen the @(Composable) annotation in every #JetpackCompose example. If you are someone who wondered what it& #39;s significance was then this thread is for you...
#AndroidDev
You& #39;ve probably seen the @(Composable) annotation in every #JetpackCompose example. If you are someone who wondered what it& #39;s significance was then this thread is for you...
#AndroidDev
2/n Annotating a function with @Composable allows that function to describe UI in Jetpack Compose. This is not the only time/reason to annotate a function with @Composable but we& #39;ll talk about those cases in a future issue.
3/n The reason this annotation is significant is because it indicates to the Compose compiler plugin(which Compose depends on) that this is a "special" function and that it should give it the attention that it deserves 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="😉" title="Zwinkerndes Gesicht" aria-label="Emoji: Zwinkerndes Gesicht">
4/n During the type check and codegen phase, the compiler plugin auto generates a bunch of code that& #39;s needed to make Compose work. It changes the definition of some of these functions. We don& #39;t see this directly but it& #39;s roughly along the lines of...
5/n This is transparent to the end user and we don& #39;t need to worry about it for the most part, hence I& #39;m not diving too deep into this subject. But if you are interested to learn more, I would highly recommenced watching this talk by @intelligibabble - https://www.youtube.com/watch?v=6BRlI5zfCCk">https://www.youtube.com/watch...
6/n This is relevant because it& #39;s the https://abs.twimg.com/emoji/v2/... draggable="false" alt="🪄" title="Magic wand" aria-label="Emoji: Magic wand">secret saucehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🪄" title="Magic wand" aria-label="Emoji: Magic wand"> that allows Compose to do smart optimizations to avoid redrawing composables that haven& #39;t changed.
7/n Now, one question you might have is what makes something show up on the screen? Surely the Text composable must be using TextView& #39;s from classic Android underneath?
WRONG!https://abs.twimg.com/emoji/v2/... draggable="false" alt="🙅♂️" title="Mann gestikuliert „Nicht OK“" aria-label="Emoji: Mann gestikuliert „Nicht OK“">
WRONG!
8/n Compose is a complete rewrite in the truest sense and it has no direct dependencies on any of the existing Android widgets (even though they are interoperable with each other and I& #39;ll cover this aspect in a separate post)
9/n One over-simplified way to think about it is that the primitive composables(like Text) that Compose offers are all drawing content directly on the canvas.
Best part - you can actually look at the source code to see how this works.
Best part - you can actually look at the source code to see how this works.
10/n In most cases, our apps will reuse these primitive composables and so we won& #39;t have to worry about the canvas. However, if you really wanted to draw things directly on the Canvas, there& #39;s nothing stopping you from doing that...
11/n In fact, there is even a Canvas composable that makes it super easy to draw things on the canvas. Example -
12/n One thing to remember is that you can only call a Composable function from within another Composable function. This is again similar to how coroutines only allow suspend functions to be called from other suspend functions.
13/n In order to create the root Composable function, Compose offers an extension function called setContent that allows you to enter "Compose realm". There are a few other ways to enter the Compose realm and you can find that in the screenshot.
14/n You may ask why the abstraction for creating UI components in Compose is a function and not a class?
I don& #39;t think I can do a better job explaining this than @intelligibabble did in this thread -
I don& #39;t think I can do a better job explaining this than @intelligibabble did in this thread -
15/n One last thing about Composable functions is that this is all the code you need to create a "Custom view" of sorts. Remember writing all that boiler plate for creating custom views? Well, each Composable function is effectively a Custom view https://abs.twimg.com/emoji/v2/... draggable="false" alt="🥳" title="Partying face" aria-label="Emoji: Partying face">
" title="15/n One last thing about Composable functions is that this is all the code you need to create a "Custom view" of sorts. Remember writing all that boiler plate for creating custom views? Well, each Composable function is effectively a Custom view https://abs.twimg.com/emoji/v2/... draggable="false" alt="🥳" title="Partying face" aria-label="Emoji: Partying face">" class="img-responsive" style="max-width:100%;"/>
