Jetpack Compose for Web is a new user interface framework for web development
In recent years, there has been a fairly large push for the development of cross-platform programs. 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 worked on cross-platform development. First with Kotlin Multiplatform but more recently with Jetpack Compose.
A while back, JetBrains brought Jetpack Compose, Google’s declarative design framework for Android, to the desktop. This enabled cross-platform desktop development based on the Java JVM. Using Jetpack Compose, you can build an app for Android, macOS, Windows, and even Linux, all from a single code base. But apart from iOS, Compose lacks a pretty big platform: the web.
That’s about to change, however. JetBrains has released what they call a technology preview of Jetpack Compose for the web.
Now, Technology Preview is basically a fancy name for pre-alpha. Compose for Web is far from ready for production use. There are no tutorials, very little documentation, and the APIs are far from complete. With that said, let’s see what Compose for Web has to offer so far.
In the current version, there are two ways to develop in Compose for Web: by using the DOM API or by using existing Compose widgets, such as Column or Text.
If you are using the DOM API, you will have API names that represent the different HTML elements, such as p, a, etc. The big difference between Compose and classic Kotlin JS, however, is that you can use a state-based declarative design. This option seems to be a bridge between classic web development and full declarative UI development. In addition to creating a layout, Compose for Web also allows you to create dynamic style sheets based on the report.
The second option is what will look more familiar to Android and Compose developers. There are predefined components, such as Column, Row, and Slider, which you can use to create a web user interface. At present these are not very comprehensive and styles and options are not fully implemented. But that at least gives us an idea of what JetBrains has in store for Compose for Web.
Overall, at the moment, there isn’t much to compose for the web. it’s still in his very First days. But it could mean a lot for the future. Personally, as an Android developer, I have struggled to get into browser-based layout frameworks. Basic HTML and CSS can be clunky, and React and Flutter syntax is still HTML design based.
A full 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’d like to learn more about Compose for Web, check out the JetBrains announcement. If you want to play around with the current implementation, head over to the GitHub repository.