Composables under the hood

Building declarative user interfaces with Jetpack Compose is easy and fun. But if you come from imperative frameworks, you are used to certain ways of doing things. For example, custom components can be implemented using drawing primitives. How is this achieved with composables? Also, what about the main thread. Do we still need to take care of this? In this talk I will map imperative best practices to the declarative world. You'll see plenty of examples and running code.

Transcript

1. Composables
   under the hood
   Thomas Künneth
   GDG DevFest DACH
   2021-01-24
   

   View Slide

2. https://speakerdeck.com/tkuenneth
   https://www.thomaskuenneth.eu/
   https://github.com/tkuenneth/android-demos
   @tkuenneth
   

   View Slide

3. Agenda
   • Anatomy of traditional ui frameworks
   • Modifier
   • Canvas
   • Threads
   

   View Slide

4. Kira auf der Heide, Unsplash
   (https://unsplash.com/photos/_Zd6COnH5E8)
   Anatomy of
   traditional ui
   frameworks
   

   View Slide

5. • UI frameworks were long
   based on components
   • Components are classes or
   data structures
   • UI is defined through
   component trees
   • in code
   • with some markup
   language
   

   View Slide

6. • During runtime either
   object tree or nested data
   structure
   • To change the ui, we
   change the component
   tree
   

   View Slide

7. Two main groups of
   components
   • Elements users can interact with:
   buttons, checkboxes, textfields
   • Elements laying out and structuring
   other elements
   (usually invisble to the user)
   Sergey Zolkin, Unsplash (https://unsplash.com/photos/m9qMoh-scfE)
   

   View Slide

8. Based on inheritance
   • UI elements take the mechanics of their ancestor
   and modify or enrich it
   • Example: Buttons
   Sean Stratton, Unsplash (https://unsplash.com/photos/ObpCE_X3j6U)
   

   View Slide

9. Takafumi Yamashita, Unsplash (https://unsplash.com/photos/MeiWDyodbSQ)
   What if no available ui
   component suits your
   requirements?
   

   View Slide

10. Create custom components
    • Pick a suitable ancestor and
    modify or enhance it
    • Works well if one parent
    provides all needed base
    functionality
    The Digital Marketing Collaboration, Unsplash
    (https://unsplash.com/photos/i0WO_RzeB2Y)
    

    View Slide

11. Need features of
    different components?
    

    View Slide

12. View Slide

13. View Slide

14. • In Jetpack Compose we also combine building blocks
    • No traditional class-based inheritance
    • Composables can be polymorph
    Example:
    • Just like traditional views, composables are nested
    (in example Row includes Checkbox and TextField)
    

    View Slide

15. • Often composables delegate functionality to generalized
    versions
    • For example, Checkbox() invokes TriStateCheckbox()
    • In a way inheritance without OO
    

    View Slide

16. View Slide

17. Modifier
    Patrick, Unsplash (https://unsplash.com/photos/bWSiIlfFr-8)
    

    View Slide

18. • Look and behavior of
    composables can be
    configured through
    parameters
    • Or modifier
    Ordered, immutable collection of
    modifier elements
    

    View Slide

19. • androidx.compose.ui.Modifier
    helps define such collections
    • Both interface and companion object
    • Most important function: then()
    (implementations can be both simple and
    complex)
    

    View Slide

20. View Slide

21. DrawScope creates a scoped drawing
    environment with the provided
    Canvas. This provides a declarative,
    stateless API to draw shapes and paths
    without requiring consumers to
    maintain underlying Canvas state
    information.
    

    View Slide

22. interface LayoutModifier : Modifier.Element
    

    View Slide

23. Modifier companion object can be used as the
    start of a modifier extension factory expression
    

    View Slide

24. Returns the result of composed() modifier which
    receives a factory and an inspectorInfo
    

    View Slide

25. • factory is
    • a composable
    • extension function of Modifier
    • Wrapped in a ComposedModifier and passed to then()
    • ComposedModifier is a private class
    • extends abstract InspectorValueInfo
    • implements Modifier.Element (a single element contained within
    a Modifier chain)
    

    View Slide

26. View Slide

27. When to use then()
    When to use a factory
    ...?
    If you need no inspectorInfo,
    direct use of then() might be simpler
    

    View Slide

28. drawWithContent() allows you
    to draw before or after the layout's
    contents
    Location
    of drawContent() defines when
    the content is drawn
    

    View Slide

29. • Modifiers amend look or behavior of
    components
    • What if a component shall not be altered but
    designed from scratch?
    • In imperative ui frameworks ui elements share one common root
    component
    • It defines all mechanics a ui element must provide
    • Usually includes
    • size and location
    • contract how to represent itself on screen
    

    View Slide

30. Let‘s see how
    to do this in
    Compose
    

    View Slide

31. Justyn Warner, Unsplash
    (https://unsplash.com/photos/VH8w75u3LE0)
    Canvas
    

    View Slide

32. View Slide

33. View Slide

34. Kelly Sikkema, Unsplash (https://unsplash.com/photos/zEhPw7ZDvNA)
    Threads
    

    View Slide

35. • Practically all ui frameworks are single-
    threaded
    • All manipulation of the component tree
    must be done on a specific thread
    • This particular thread must never be
    blocked
    Adam Griffith, Unsplash (https://unsplash.com/photos/XXuVUrnpi8M)
    

    View Slide

36. John Schnobrich, Unsplash (https://unsplash.com/photos/FlPc9_VocJ4)
    

    View Slide

37. vikram sundaramoorthy, Unsplash (https://unsplash.com/photos/0NaeAT9oldM)
    Wrap up
    

    View Slide

38. • Using Jetpack Compose is great fun
    • As still in alpha, expect changes
    • Look under hood to understand how Compose works
    

    View Slide

39. thomas@thomaskuenneth.eu
    @tkuenneth
    Thanks a lot for listening!
    

    View Slide