Jetpack Compose for Web enters preview as a new UI framework for web development

Jetpack Compose for Web enters preview as a new UI framework for web development

In the past few years, there’s been a pretty big push for cross-platform program development. Frameworks like React and Flutter were created to allow developers to share a single codebase across Android, iOS, desktop, and even the web. Even JetBrains, the company behind some of the most popular IDEs and the Kotlin programming language, has been working on cross-platform development. First with Kotlin Multiplatform but more recently with Jetpack Compose.

A while back, JetBrains ported Jetpack Compose, Google’s declarative design framework for Android, to desktop. This allowed for cross-platform desktop development based around Java’s JVM. Using Jetpack Compose, you can make an app for Android, macOS, Windows, and even Linux, all from one codebase. But besides iOS, there’s a pretty big platform missing from Compose: the web.

That’s about to change, though. JetBrains has released what they call a Technology Preview of Jetpack Compose for Web.

Now, Technology Preview is basically a fancy name for pre-alpha. Compose for Web is nowhere near ready to be used in production. There are no tutorials, very little documentation, and the APIs are nowhere near complete. With that said, let’s see what Compose for Web offers so far.

In the current version, there are two ways you can develop in Compose for Web: using the DOM API, or using the existing Compose widgets, such as Column or Text.

If you use the DOM API, you’ll have API names that represent the different HTML elements, such as pa, and so on. The big difference between Compose and classic Kotlin JS, though, is that you can use state-based declarative design. This option seems like a bit of a bridge between classic web development and full-on declarative UI development. On top of creating a layout, Compose for Web also lets you create dynamic, state-based stylesheets.

The second option is what will look more familiar to Android and Compose developers. There are pre-made components, like Column, Row, and Slider, which you can use to build a web UI. Right now, these aren’t very complete and styles and options aren’t fully implemented. But it at least gives us an idea of what JetBrains has in store for Compose for Web.

Overall, at the moment, there isn’t really much to Compose for Web. It’s still in its very early days. But it could mean a lot for the future. Personally, as an Android developer, I’ve had trouble getting into browser-based layout frameworks. Basic HTML and CSS can be clunky, and React and Flutter syntaxes are still based around HTML design.

A fully-featured, cross-platform design language that isn’t based on web design principles is pretty exciting. While Jetpack Compose still has a long way to go, what JetBrains has planned could mean a lot for the future of UI design.

If you want to learn more about Compose for Web, check out JetBrains’ announcement. If you’re interested in playing around with the current implementation, head over to the GitHub repository.

About author

Zachary Wander
Zachary Wander

Started out rooting and installing custom ROMs before moving onto modifying Android apps in Smali and subsequently developing various customization and utility apps for Android, such as SystemUI Tuner. Check me out on Twitter: https://twitter.com/wander1236.