Compose Deep Dive

A talk about the inner workings of Compose. It delves a bit into the compiler and then covers vitals parts of the Compose runtime.
The slides are only partially useful, since one crucial bit has been the live demo of the code, the compiler generates.

Transcript

1. Wolfram Rittmeyer Compose Deep Dive
5. https://developer.android.com/develop/ui/compose/compiler
6. K2 Compiler plugins by Mikhail Glukhikh https://www.youtube.com/watch?v=Pl-89n9wDqo
7. Compiler  Two Phases – frontend (lexer / parser, analysis…) • creates some form of AST / IR – backend (transformation…) – Plugins can run in both phases
8. Kotlin Compiler  Documentation in Kotlin project: – compiler-plugins/basics.md – fir/fir-basics.md – fir/fir-plugins.md – native/compilation-model.md
9. K2 Compiler plugins by Mikhail Glukhikh https://www.youtube.com/watch?v=Pl-89n9wDqo
10. K2 Compiler plugins by Mikhail Glukhikh https://www.youtube.com/watch?v=Pl-89n9wDqo
11. Compose Compiler Frontend  Used in the check phase
12. Compose Compiler Frontend  Used in the check phase – Is it a valid Composable function call? – Is expect / actual of a Composable correct? – Has the key call an argument?  E.g. ComposableCallChecker – which implements the abstract class FirDeclarationChecker –
13. K2 Compiler plugins by Mikhail Glukhikh https://www.youtube.com/watch?v=Pl-89n9wDqo
14. K2 Compiler plugins by Mikhail Glukhikh https://www.youtube.com/watch?v=Pl-89n9wDqo
15. Compose Compiler Backend  That’s where the interesting stuff happens  Let’s simply have a look at it
16. Decomposer https://github.com/composexy/decomposer
17. Compiler CompilerPluginRegistrar ComposePluginRegistrar → registers all the extensions CommandLineProcessor ComposeCommandLineProcessor → XyzChecker CallChecker ComposableCallChecker → IrGenerationExtension ComposeIrGenerationExtension → ModuleLoweringPass AbstractComposeLowering → AddHiddenFromObjCLowering, ClassStabilityTransformer, ComposeLambdaMemoization, ComposeDefaultParamLowering...
18. https://kotlinlang.org/docs/multiplatform.html
19. Runtime  Composition  Composer  Recomposer  Treemanagement and Nodes
20. Composition  Initially create object  Gets passed the Applier to use  Holds onto – Applier – Composer – CompositionContext, which might be a Recomposer
21. Composer  Main interface used by compiler  Mananges the node trees  composer.changed() important for Recomposition- Decision – (see Recomposer sample)
22. Recomposer  Drives the recomposition loop  Holds a MonotonicFrameClock  Might control the loop for more than one composition  Composition tells it if it’s invalidated  Is lifecycle aware – No clock ticks if view is detached
23. Recomposer Compositions Composer → →  Recomposer calls recompose – On every composition that needs to be recomposed – Composition calls recompose • On Composer
24. https://kotlinlang.org/docs/multiplatform.html
25. Structures  SlotTable – Groups / Slots  Applier – Completely agnostic – AbstractApplier • Stack of Nodes
26. SlotTable  Remember startRestartGroup()…?  Groups and Slots form the SlotTable  Slots might be – remembered values – Meta data – CompositionLocal values
27. SlotTable  Internally used by the Composer  Decides if something needs to be recomposed – Depending on the comparison of SlotTable data  Caches all kind of data
28. Applier  Part of runtime lib – Same goes for AbstractApplier  Concrete implementations in UI libs
29. Applier  Two relevant for Jetpack Compose – UiApplier / DefaultUiApplier • LayoutNode • That’s where the UI tree lives – VectorApplier • VNode
30. Applier  Closely tied to the Composition  Applier is passed to CompositionImpl
31. Applier  Closely tied to the Composition  Applier is passed to CompositionImpl
32. Applier => Different compositions for – UiApplier – VectorApplier
33. LayoutNode  Represents Composables  Created by the Layout composable  Get’s inserted into SlotTable and Applier  Applier handles relationship between Nodes
34. Box as Sample
35. LayoutNode
36. https://kotlinlang.org/docs/multiplatform.html
37. Creating the Composable Context  It starts with setContent() – Creates a ComposeView • Calls setContent() on that one – Sets this.content.value to your Content-Lambda – Calls createComposition() if attached (!) • Calls AbstractComposeView.setContent() • Creates AndroidComposeView • Calls doSetContent() • Creates Composition
38. Creating the Composable Context  But actually it’s deferred until attach to Window  Attach calls ensureCompositionCreated() – Creates the parentCompositionContext – WindowRecomposerPolicy.createAndInstallWindowRecomposer() – Then creates Composition
39. LayoutNode
40. Owner  Holds onto the Composition  Boundary between old View and Compose – AndroidComposeView (Android) – RootNodeOwner (other platforms)
41. Owner  Deals with – Accessibility – Clipboard – Measuring / Layouting – Creates and hold SharedDrawScope
42. Root  The very first LayoutNode  Directly create in Owner – AndroidComposeView (Android) – OwnerImpl (CMP)
43. Root  The very first LayoutNode  Directly create in Owner – AndroidComposeView (Android) – OwnerImpl (CMP)
44. Painting  Desktop  Android  iOS (beta)  Web (alpha)
45. Painting  Owner (AndroidComposeView / RootNodeOwner) – Holds shared DrawScope – Calls root.draw() – Root delegates this to it’s innerCoordinator • Which is the tail end of the Modifier chain • Iterates over all children and calls draw() on them
46. Painting  All drawing is only done in Modifiers  Canvas composable delegates to drawBehind() Modifier  LayoutNodes ensure that modfiers are drawn
47. Painting  Drawing done to DrawScope  DrawScope holds onto Canvas  Canvas has a member NativeCanvas
48. Painting  Drawing done to DrawScope  DrawScope holds onto Canvas  Canvas has a member NativeCanvas
49. Painting  Drawing done to DrawScope  DrawScope holds onto Canvas  Canvas has a member NativeCanvas
50. Painting  Drawing done to DrawScope  DrawScope holds onto Canvas  Canvas has a member NativeCanvas
51. Painting
52. Tools / Repositories used  https://github.com/composexy/decomposer  https://github.com/theapache64/rebugger/tree/master  https://github.com/JetBrains/kotlin  https://github.com/JetBrains/compose-multiplatform-core  Occassionally Gemini (rarely other AIs) – But this is a special topic => lots of hallucinations
53. Websites used  cs.android.com  medium.com/@takahirom/inside-jetpack- compose-2e971675e55e  hinchman-amanda.medium.com/reverse-engineering- the-compose-compiler-plugin-intercepting-the- frontend-657162893b11
54. Videos / Books used  www.youtube.com/@LelandRichardsonDev/videos  www.youtube.com/@codingwithmohit  Jetpack Compose Internals – jorgecastillo.dev/book/
55. Painting
56. Painting This is the end. My only friend, the end. The Doors
57. Painting This is the end. My only friend, the end. The Doors https://www.linkedin.com/in/wolfram-rittmeyer/ https://www.linkedin.com/in/wolfram-rittmeyer/ https://mastodon.social/@RittmeyerW https://mastodon.social/@RittmeyerW https://www.grokkingandroid.com https://www.grokkingandroid.com
58. Pictures / Licenses 1: Background of title slide shows a small section of a photo by Romain Guy: https://www.flickr.com/photos/romainguy/48539281152 2: Jetpack Compose logo: https://developer.android.com/jetpack/compose 3: Pictures: Waves: https://unsplash.com/de/fotos/nahaufnahme-eines-grauen-felsens-auf-einem-gewasser-wahrend-des-tages-6i6-hNlF1MI Cocoons: https://unsplash.com/de/fotos/drei-puppen-VMKBFR6r_jg Sign in forest: https://unsplash.com/de/fotos/ein-schild-ist-an-einem-baum-im-wald-angebracht-Cu1YQr0DJ9w Brooch down a hill: https://unsplash.com/de/fotos/fluss-umgeben-von-bergen-NkdCAiPRQhM Public footpath: https://unsplash.com/de/fotos/weisse-und-grune-strassenbeschilderung-b5v6QgeMMiE Gnarled tree: https://unsplash.com/de/fotos/ein-grosser-baum-mitten-im-wald-vK0t4xzK9ig Sapling: https://unsplash.com/de/fotos/eine-kleine-pflanze-spriesst-aus-dem-boden-vi-_Up8Mgd4 Grafted tree: https://upload.wikimedia.org/wikipedia/commons/6/6a/Grafted_blossoming_tree_unidentified_white_pink.JPG?download Coloured forest: https://unsplash.com/de/fotos/ein-wald-voller-bunter-baume-gse8kWzQXTc Axe: https://unsplash.com/de/fotos/braunes-und-graues-metall-rundwerkzeug-P292P90d6o4 Fog: https://unsplash.com/de/fotos/gruner-baum-bei-nebligem-wetter-kNxg6olh9d8 4: Final Coffee by Fahmi Fakhrudin: https://unsplash.com/photos/person-making-latte-art-nzyzAUsbV0M 5: Slide design "Fedora Photography" by Liam Doherty: https://github.com/dohliam/libreoffice-impress-templates/tree/master/fedora-slideshow/fedora-photography Licenses: 1: Public Domain 2: CC Attribution 2.5 3: Pictures: Unsplash License (Grafted tree: CC BY-SA 3.0) 4: Unsplash License 5: MIT License
59. UI is Just a Layer of Compose „Compose is, at its core, a general-purpose tool for managing a tree of nodes of any type.“ https://jakewharton.com/a-jetpack-compose-by-any-other-name/