Read on Twitter
1/n The 2nd issue of #JetpackComposeQuickBites is here!
You've probably seen the @(Composable) annotation in every #JetpackCompose example. If you are someone who wondered what it's significance was then this thread is for you...
#AndroidDev
You've probably seen the @(Composable) annotation in every #JetpackCompose example. If you are someone who wondered what it'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'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 
4/n During the type check and codegen phase, the compiler plugin auto generates a bunch of code that's needed to make Compose work. It changes the definition of some of these functions. We don't see this directly but it's roughly along the lines of...
5/n This is transparent to the end user and we don't need to worry about it for the most part, hence I'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 -
6/n This is relevant because it's the 
secret sauce that allows Compose to do smart optimizations to avoid redrawing composables that haven't changed.
secret sauce that allows Compose to do smart optimizations to avoid redrawing composables that haven'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's from classic Android underneath?
WRONG!
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'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't have to worry about the canvas. However, if you really wanted to draw things directly on the Canvas, there'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't think I can do a better job explaining this than @intelligibabble did in this thread -
I don'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 
16/n Pretty cool isn't it? With this, I'd like to wrap up this issue. See you next week! 
