Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KotlinConf 2024

KotlinConf 2024

Talk slides shared at KotlinConf 2024: Diving into Advanced Compose Multiplatform Modifiers and Their Impact on Multiplatform Development.

The advent of Compose Multiplatform has fundamentally shifted the landscape of cross-platform UI development, offering developers a declarative framework to simultaneously build intuitive and powerful user interfaces with Kotlin for multiple platforms. A pivotal element within this framework is the Compose Multiplatform Modifier, empowering developers to adjust and extend Multiplatform Composables in a clean and reusable manner. This talk seeks to explore the advanced and innovative uses of Compose Multiplatform Modifiers, providing insights into how they can be leveraged to optimize, streamline, and enhance cross-platform UI development in Kotlin.

Meike Felicia Hammer

June 03, 2024

More Decks by Meike Felicia Hammer

Other Decks in Programming


  1. Diving into advanced Compose Multiplatform Modifiers and their impact on

    Multiplatform development Meike Felicia Hammer @feliciaf_aye
  2. Skin Color chromatophores skin cells Skin Texture Body Shape in-/de

    fl ate internal chambers Behaviour Pattern imitating crabs papillae muscles
  3. size, layout, behaviour, appearance additional information user input clickable, scrollable,

    draggable, zoomable, focusable Decorate and augment Composables. Modi f iers
  4. Chaining multiple size modifiers does not work. Size Modifier A

    node has to adhere to its bounds set by the first size modifier.
  5. Layout phase - Constraints From parent to child in the

    UI Tree during the layout phase. When node has measured its own size, it communicates size back up to the tree. Parent measures its children.
  6. Compose Multiplatform independently renders components from scratch on each platform

    using Skia. No platform-native widgets. Material and Material 3 widgets out of the box. Behind Modifiers
  7. Rendering Compose Skia iOS Desktop Canvas API Web Android Skiko

    Skia for rendering on Android Skiko for other platforms ( Skia for Kotlin)
  8. Drawing Modifiers drawWithContent Base drawing modifier, controls drawing order and

    commands. drawBehind Wrapper for drawWithContent, draws behind content. drawWithCache Uses onDrawBehind/onDrawWithContent. Objects used during drawing are cached, until size changes or state variables change. Graphics Modifiers Additionally to the Canvas Composable
  9. No need to maintain your own state DrawScope Declarative, stateless

    drawing API Draw Shapes, Paths, … Access to size and center of the drawing area.
  10. Canvas Composable For simple drawings. Convenience Wrapper (drawBehind). Under the

    hood. Use .dp and convert it to pixels before drawing. Pixels.
  11. Cuttlefish Camouflage Fish - First Photo by David Clode on

    Unsplash Bee - Second Photo by Boris Smokrovic on Unsplash Frog - Third Photo by Ray Hennessy on Unsplash
  12. Size and Placement Only affects the draw phase. Can become

    invisible, when drawing outside of bounds. Graphics Layer Modifiers Does not change measured size + placement of a Composable.
  13. Theory Chain existing modifiers together if you can. Composable function

    modifiers are never skipped (performance). Composable function modifiers must be called within a composable function.
  14. Continue the modifier chain. Reference this or previously added modifiers

    are dropped. Use this then Modifier or implicitly return graphicsLayer … Modifier Factory
  15. Modifier Node Element Implement equals and hashCode If not unnecessarily

    updated (poor performance) Use data class Node API 80 % faster Super secret text Lorem ipsum dolor.
  16. Composable Modifier vs composed Factory vs Node API Simple behaviour/decoration?

    Custom modifier with state/effects/multipleSteps? Fine grained control while performance is critical? Node API ( Best practice) composed Factory Composable Modifier Yes No No No Composable Modifier Yes Yes Node API
  17. Write custom Modifier, but then .. MADNESS 2/3 Features GraphicsLayer#toImageBi

    tmap ( Compose 1.7.+) ByteReadChannel .toBitmap() Import exists, but not at runtime. androidx.compose.ui. graphics.asImageBit map .lazyBackgroundImage .removeBackground
  18. Performance Skiko and Skia ensure consistent performance on all platforms.

    Composable function modifiers are never skipped. ModifierNodeElement must implement equals and hashCode. MADNESS 3/3
  19. Embrace different input options. Impact on Multiplatform development Most enjoyable

    with less platform specific code. Smooth transition from Android Jetpack Compose. Modify all of them at once. UI behaviour can be slightly different then expected.