Jetbrains 发布 Jetpack Compose for Web预览

最近将Jetpack Compose移植到桌面的JetBrains，现在已经发布了Jetpack Compose的技术预览，用于 Web。Kotlin开发者可能很快就能使用Jetpack Compose进行跨平台开发（Android、macOS、Windows、Linux、网络–但不是iOS）。

JetBrains对新技术预览的总结如下。

Jetpack Compose for Web工作在Kotlin Multiplatform之上，这意味着你可以使用Jetpack Compose作为UI框架开发Android、桌面和Web应用程序–所有这些都在同一个项目中。Kotlin多平台允许你通过通用代码共享平台无关的代码和功能，如你的业务逻辑，同时仍然能够实现和使用来自Android、桌面JVM和JavaScript生态系统的特定平台功能。

发布的技术预览包括一个DOM APIs，它努力反映浏览器的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("了解更多！" )
        }
    }
}
复制代码

前面的代码展示了Compose for Web的类型安全的特定领域语言，包括反映HTML标签（P, Button, A）的构造（<p>, button, <a>）。该代码用一个按钮实现了一个微不足道的用户界面。当用户点击按钮时，可变变量 platform 被更新，取决于该变量值的文本内容会在屏幕上自动更新。

(来源：JetBrains博客文章)

预览中的DOM APIs带有一个用于样式表的类型安全DSL，允许表达CSS规则并根据应用程序的状态修改样式。

技术预览还包括Jetpack Compose部件（如Column, Row, Slider）的网络实现。考虑到预览的前alpha性质，JetBrains警告说。

[网络部件]只实现了其他目标上的接口的一小部分。他们试图接近其他Jetpack Compose目标中使用的基于画布的实现的行为。[……]我们正在试验这些类型的统一部件，试图更好地了解其可行性。

熟悉的Jetpack Compose部件的网络实现可能会吸引那些专门从事本地或移动平台的开发者，他们不希望学习一套新的技能和相关的复杂性（构建、工具）。一个典型的例子是，从Android的角度来看，CSS布局显然很复杂。

虽然Compose for Desktop是Alpha版本，Compose for Web是pre-alpha版本，但它们表明JetBrains加入了跨平台开发支持的趋势。谷歌最近宣布，[Flutter 2已经为网络生产做好准备]（www.infoq.com/news/2021/0… Native Windows](github.com/microsoft/r… 10应用程序]的框架(www.infoq.com/news/2021/0…

关于开始使用Jetpack Compose for Web的说明可以在GitHub上找到。