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

What about a desktop app?

What about a desktop app?

As Android devs, we don't generally do desktop development. They might do some scripting, but as soon as you need a user interface and want to use Kotlin in your desktop app, things get quite desperate. Swing is an old tech that’s impervious to newcomers and full of gotchas; JavaFx and TornadoFX aren’t much better; and using frameworks like Qt from Kotlin is going to take a toll on your mental wellbeing.

Or at least, this used to be the case!

We’ll see how, with Compose for Desktop, you can take much of your existing UI skill set from Jetpack Compose and apply it to create tools that run on desktop computers. There are some gotchas and some differences to be aware of, and this talk will cover them pointing out what is and isn’t there yet in Compose for Desktop.

----

More info on the talk, and a list of all the links, can be found at: https://go.sebastiano.dev/desktop-app-2021

Sebastiano Poggi

October 28, 2021
Tweet

More Decks by Sebastiano Poggi

Other Decks in Programming

Transcript

  1. A guide to Compose on desktop
    for the curious Android dev
    Sebastiano Poggi
    What about...
    a desktop app?
    @seebrock3r

    View Slide

  2. Setting expectations

    View Slide

  3. Different mindset
    Desktop-only APIs may differ
    Same idea

    View Slide

  4. Different mindset
    Desktop-only APIs may differ
    Same idea

    View Slide

  5. Notable differences
    • Lifecycle is much easier
    • Window chrome, menu bars, tray icons
    • Less restrictions
    • E.g., full filesystem access, no permissions system
    • Some things require "going down"
    • Swing and/or P/Invoke via JNI

    View Slide

  6. https://www.jetbrains.com/toolbox-app/
    https://github.com/theapache64/stackzy

    View Slide

  7. it's beta
    Some stuff may be missing or broken
    Builds upon Jetpack Compose stable

    View Slide

  8. Getting started

    View Slide

  9. GOTO:
    https:!"github.com/JetBrains/compose-jb/
    Compose for Desktop sources repo

    View Slide

  10. Hold on!
    Only one link to write down:
    https:!"go.sebastiano.dev/desktop-app-2021
    Look out for the symbol

    View Slide

  11. IDE support
    • Compose Multiplatform plugin
    • Also supports web
    • Android Studio and IntelliJ IDEA
    • Tooling is lagging behind Jetpack Compose's
    • No interactive preview and animation inspector
    • Missing many quality-of-life tweaks

    View Slide

  12. Familiar faces
    • Core Compose libraries:
    runtime foundation ui material
    • Same packages and API names as Jetpack Compose
    • Compose compiler plugin
    • Requires Kotlin (duh)

    View Slide

  13. What's different

    View Slide

  14. Android-only APIs • No access to anything outside:
    • androidx.compose.*
    • java.*
    • kotlin.*
    • No permissions
    • No Android-only dependencies
    • Architecture Components
    • Other Jetpack libraries
    • Firebase
    • etc
    What's different
    Old-school UI
    Resources
    a11y
    UI testing

    View Slide

  15. What's different
    • No Android Views
    • MapView, etc
    • No WebView equivalent
    • Interop with "classic" Java UI
    • Swing hosts Compose
    • Compose can wrap Swing
    • No activities and fragments
    • Different (easier) lifecycle
    • Swing windows
    Android-only APIs
    Old-school UI
    Resources
    a11y
    UI testing

    View Slide

  16. What's different
    • Java resources system
    • No buckets
    • No concept of configuration
    • No orientation, display size, etc
    • I18n support is not built in
    • No RTL support yet
    • No animated GIFs
    • No animated vector drawables
    • Non-animated are supported
    • Resource refs not resolved
    • Lottie not supported yet
    • Maybe Skottie in the future?
    Android-only APIs
    Old-school UI
    Resources
    a11y
    UI testing

    View Slide

  17. What's different
    • APIs are there, but not hooked up
    • semantics()
    • Work in progress
    • Should be there for 1.0.0
    • Current state:
    • Mostly works on macOS
    • Other OSes done next
    • No clue about ETAs, sorry
    Android-only APIs
    Old-school UI
    Resources
    a11y
    UI testing

    View Slide

  18. What's different
    • Not entirely true, it's mostly the same
    • UI testing is the same as on Android
    • Except, of course, (much) faster
    • Use createComposeRule()
    • Additional API (e.g., mouse scroll)
    • Fun idea: run your UI tests on CfD
    • Screenshot testing is different
    • TestComposeWindow
    • WIP: APIs for animations
    Android-only APIs
    Old-school UI
    Resources
    a11y
    UI testing

    View Slide

  19. Unique features

    View Slide

  20. Unique features
    • Desktop is different from mobile
    • Unique needs == unique features
    • Windowing
    • Multiple windows at the same time
    • Compose handles JFrames for you

    View Slide

  21. Unique features
    • Enhanced keyboard support
    • Keyboard shortcuts
    • Tooltips
    • Menus, tray icons, desktop notifications
    • Native installers (msi/exe, dmg/pkg, deb/rpm)
    • Output size saving tips
    • Notarization for macOS

    View Slide

  22. Unique features
    • Scrollbars
    • Yes, Jetpack Compose still doesn't have those
    • Works with scroll modifiers and LazyColumn/LazyRow
    • Mouse events
    • Pointer movement (hover)
    • Modifier keys and mouse buttons

    View Slide

  23. Unique features
    • Desktop-only components & integrations
    • Split panel
    • Video player
    • CEF-based WebView (outdated)
    • LWJGL integration

    View Slide

  24. Unique features
    • Desktop-only components & integrations
    • Split panel
    • Video player
    • CEF-based WebView (outdated)
    • LWJGL integration
    EXPERIMENTAL

    View Slide

  25. Libraries

    View Slide

  26. Libraries
    • A lot of JVM-only libraries out there
    • Some direct replacements
    • Some Android libs make no sense on desktop
    • Well, most don't
    • Some Accompanist libs work on desktop
    • Pager, Placeholder, FlowLayout, Swipe-to-Refresh (?)

    View Slide

  27. Libraries
    • No Play Services
    • No Firebase
    • Java or REST APIs for some
    • No Architecture Components
    • No ViewModel, Navigation, Room, Hilt, etc

    View Slide

  28. Library alternatives
    Navigation Decompose
    Room SqlDelight
    Hilt Dagger
    Timber Arbor
    Coil/Glide/Picasso/... Hand-rolled !
    ViewModel Essenty's InstanceKeeper
    (but it's not really the same)

    View Slide

  29. Theming

    View Slide

  30. Theming
    • Material theme is fully supported
    • Material You will, as well
    • Material is not great on desktop
    • Huge touch targets for use with mouse
    • There is no "official" desktop-oriented UI framework

    View Slide

  31. Kirill
    Aurora
    Grouchnikov's

    View Slide

  32. Distribute your app

    View Slide

  33. Distribute your app
    • Gradle tasks to build installers
    • OS-specific outputs
    • macOS is different
    • Requires notarisation
    • Signing to make Gatekeeper happy
    • Only required to distribute, not to run locally

    View Slide

  34. Life outside app stores
    • No Play Store, Amazon Appstore, Samsung App Gallery
    • No auto-updates, built-in licensing and IAB
    • Some Java libs may help to compensate (e.g., update4j)
    • You may be able to publish on OS stores...
    • But mileage may vary
    • May be harder on macOS App Store

    View Slide

  35. Closing remarks

    View Slide

  36. Closing remarks
    • Kotlin Multiplatform support
    • Share business logic
    • Share some degree of UI code (Android and Desktop)
    • Web is totally different, hard to share
    • Check out Jake Wharton's Mosaic

    View Slide

  37. Go and try it out!
    Report bugs
    File feature requests
    Have fun!

    View Slide

  38. Go and try it out!
    Report bugs
    File feature requests
    Have fun!

    View Slide

  39. ...questions?
    https:!"go.sebastiano.dev/desktop-app-2021

    View Slide