Jetpack Compose started out as a declarative toolkit for building UI apps on Android but has quickly become a common method of building user interfaces not just for Android but for the Desktop and Web too thanks to its a common codebase and UI components. After a few milestones and an Alpha release we now have Beta. What does it have in store?

Compose Multiplatform brings together three different components; Compose Desktop, Web and Android. The Alpha release promoted Compose for Desktop and Compose for Web to Alpha from their Milestone and Preview states and aligned their versioning with the rest of the Compose Multiplatform in order to:

make use of the same declarative approach and APIs used for modern Android applications to create native-feeling user interfaces for desktop and web apps

because at the time Compose for Desktop and Compose for Web were using separate sets of artifacts.

Now the Beta version provides a stable API and a separate build compatible with the Jetpack Compose on Android. The Beta also includes an initial preview of Accessibility support on macOS, while other operating systems will be added in the future. Additionally, the Beta has improved rendering stability, brought a new mouse pointer API including a Hoverable API, and supports transparent windows.

Specifically:

Compose for Web now introduces the ability to use SVGs in addition to HTML elements in the DOM tree, while still being able to use Compose APIs.

Compose for Desktop receives multiple improvements: 

• Improved stability on problematic hardware/drivers via smart fallback to software rendering.
• A new mouse pointer API, including a new hoverable API.
• Support for transparent windows.
• The first preview of accessibility support on macOS. 

Finally, while rendering on macOS is happening under Metal, DirectX on Windows, and OpenGL on Linux, Beta is introducing automatic rendering fallbacks for Compose for Desktop so that in case there are issues with a rendering technology on the target system, the application will still remain usable.

Of course, this multiplatform compatibility would not be possible without Kotlin Multiplatform, the SDK for cross-platform development provided by JetBrains, which is the technology undepinning the code-sharing capabilities. And of course the properties of Kotlin the language itself which lends Compose its philosophy of readability and ease of use as well as the state of the art features of Coroutines, Nullable Types, Lazy Evaluation, Extension Functions, etc.

There's a set of tutorials to get you started with Compose and in order to get an even better understanding, Jetbrains has released the source code of the Compose for Web landing page as well as that of the The Falling Balls game, both of which are written with Compose for Web. The former is an example of Composable DOM API and Stylesheet DSL, while the latter is an example that demonstrates the use of multiplatform widgets – sharing user interface code between Compose for Desktop and for Web.

More Information

Compose Multiplatform Goes Beta (Kotlin Blog)

GitHub

Jetpack Compose for Web landing page  

Jetpack Compose for Web landing page source code

Falling balls with web

Falling balls with web source code

Getting Started With Compose for Web

Related Articles

Jetpack Compose Multiplatform Alpha Released

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info