Jetbrains releases Jetpack Compose for Web preview

JetBrains, which recently ported Jetpack Compose to the desktop, has now released a technical preview of Jetpack Compose for the Web. Kotlin developers may soon be able to use Jetpack Compose for cross-platform development (Android, macOS, Windows, Linux, web — but not iOS).

JetBrains’ summary of the new technology preview follows.

Jetpack Compose for Web works on top of Kotlin Multiplatform, which means you can use Jetpack Compose as a UI framework to develop Android, desktop, and Web applications — all in the same project. Kotlin Multi-platform allows you to share platform-independent code and functionality, such as your business logic, through common code, while still being able to implement and use platform-specific functionality from Android, desktop JVM, and JavaScript ecosystems.

The technical preview released includes a DOM API that strives to mirror the browser’s DOM API.

fun main() { renderComposable("root") { var platform by remember { mutableStateOf("a platform") } P { Text("Welcome to Compose for $platform! " ) Button(attrs = { onClick { platform = "Web" } }) { Text(" ... for what?" )}} A (" https://www.jetbrains.com/lp/compose-web ") {Text (" more!" )}}}Copy the code

The previous code shows the type-safe domain-specific language for Compose for The Web, including constructs that reflect HTML tags (P, Button, A) (< P >, Button, < A >). This code implements a trivial user interface with a single button. When the user clicks the button, the variable platform is updated, and the text content that depends on the value of the variable is automatically updated on the screen.

(Credit: JetBrains blog post)

The DOM APIs in the preview come with a type-safe DSL for style sheets, allowing CSS rules to be expressed and styles to be modified based on the state of the application.

The technical preview also includes networking implementations for Jetpack Compose components such as Column, Row, and Slider. Given the pre-alpha nature of the preview, JetBrains warns.

[Network parts] implement only a fraction of the interfaces on other goals. They are trying to approximate the behavior of the canvas-based implementations used in other Jetpack Compose goals. […] We are experimenting with these types of unified parts to try to better understand the feasibility.

The familiar web implementation of the Jetpack Compose component may appeal to developers who specialize in local or mobile platforms and don’t want to learn a new set of skills and associated complexity (build, tools). A case in point is the obvious complexity of CSS layouts from an Android perspective.

Although Compose for Desktop is an Alpha version and Compose for Web is a pre-alpha version, they show JetBrains joining the trend of cross-platform development support. Google recently announced that 2 has to be prepared for the network manufacturing] [Flutter (www.infoq.com/news/2021/0… Native Windows] (github.com/microsoft/r… 10] application framework (www.infoq.com/news/2021/0…

Instructions for getting started with Jetpack Compose for the Web can be found on GitHub.