了解 Kotlin/Wasm | 开发者说·DTalk

本文原作者: 黄林晴，原文发布于: Android技术圈

了解 Kotlin/Wasm

是什么

Kotlin/Wasm 是将 Kotlin 编译为 WebAssembly (Wasm) 的工具链。那 WebAssembly 又是什么呢？

WebAssembly 是一种低级字节码格式，可以在 Web 浏览器中运行，并且具有比 JavaScript 更快的执行速度和更好的跨平台兼容性。

可以做什么

使用 Kotlin/Wasm，我们可以使用 Kotlin 编写 Web 应用程序，然后将其编译为 Wasm 字节码，以在 Web 浏览器中运行。这样我们就可以在单个代码库中使用相同的语言和工具来开发应用程序，而不必学习 JavaScript 等其他语言。此外，由于 Wasm 字节码是一种跨平台格式，因此应用程序可以在各种操作系统和设备上运行，而不必重新编写代码。

简单的说

总之，Kotlin/Wasm 是一种新兴的技术，可以让开发人员使用 Kotlin 编写 Web 应用程序，并在 Web 浏览器中运行。这可以使开发更加简单和高效，并提供更好的跨平台兼容性和更快的执行速度。

Kotlin/Wasm 是从 Kotlin 1.8.20 版本开始支持的，当前处于实验阶段。

体验 Kotlin/Wasm

启用 WASM

我们使用最新版本的 IntelliJ IDEA，先随便打开一个项目，双击 Shift，在弹出的搜索中输入 Registry

选中并回车，在弹出的窗口中找到 Kotlin.wasm.wizard，勾选此选项。

然后 IDEA 会提示我们重启，重启后，就启用了 wasm。之后，我们就可以通过 IDEA 创建 Kotlin/Wasm 项目。

创建 Kotlin/Wasm 项目

打开 IDEA，创建 Kotlin Multiplatform 项目，选择 Browser Application with Kotlin/Wasm，如下图所示。

默认情况下，项目将使用带有 Kotlin DSL 的 Gradle 作为构建系统。创建好项目后，在 wasmMain 目录下为我们创建了 Simple.kt 文件，如下图所示。

此外，由于 Kotlin/Wasm 是从 1.8.20 版本新增的，所以我们要确保配置文件中的版本号是正确的。

plugins {
    kotlin("multiplatform") version "1.8.20"
}

运行程序

点击运行程序，运行后在浏览器输入框中输入 http://localhost:8080/，如下图所示。

这里我使用的是 Chrome 浏览器，需要在 Chrome 中输入 chrome://flags/#enable-webassembly-garbage-collection，然后启用 WebAssembly Garbage Collection，这一点需要注意下。

Hello World 程序运行之后，我们可以修改自己想要展示的文字，比如修改代码如下所示: 

fun main() {
    document.body?.appendText("Hello, first Kotlin/Wasm Project!")
}

运行程序，如下图所示。

Kotlin/Wasm 可以使用来自 Kotlin 的 JavaScript 代码和来自 JavaScript 的 Kotlin 代码。也就是 Kotlin 和 JavaScript 是可以互相操作的。这并不是我们的重点，这里就不演示了。

体验 Wasm 版本的

Compose for Web

Kotlin/Wasm 在 Web 浏览器中可以实现更高性能和低延迟的计算机程序。

当前依赖于 Kotlin/Wasm 的 "compose-wasm-canvas" 已经在实验阶段，而 "compose-wasm-canvas" 基本可以解决我们之前所体验到的割裂问题。我们来一起体验一下。

项目配置

由于 "compose-wasm-canvas" 还处于实验阶段，所以我们在确保版本号、配置可用，修改配置文件代码如下所示: 

kotlin.version=1.8.20
org.jetbrains.compose.experimental.jscanvas.enabled=true
compose.version=1.4.0-dev-wasm06

代码编写

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    CanvasBasedWindow {
        LoginUi()
    }
}

外层使用 CanvasBasedWindow 包裹，test 就是我们自己写的 Compose 代码，这里我们两个输入框和一个登陆按钮，代码如下所示: 

@Composable
fun LoginUI() {


    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }


    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("userName") },
            placeholder = { Text("input userName") },
            modifier = Modifier.fillMaxWidth()
        )


        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("password") },
            placeholder = { Text("input password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp)
        )


        Button(onClick = {
           //login
        }) {
            Text("Login")
        }
    }
}

这就是和 Android 中 Compose 完全一样的代码，运行程序，结果如下图所示。

总结

"compose-wasm-canvas" 与 "compose-html" 完全不同，并且解决了 Compose for Web 中严重的割裂问题，不过，不管是 "compose-wasm-canvas" 还是 Kotlin/Wasm 都还处于早期的实验性阶段，什么时候发布 Alpha 甚至是 Beta 版本，是个未知数，让我们一起期待吧~

---

长按右侧二维码

查看更多开发者精彩分享

"开发者说·DTalk" 面向中国开发者们征集 Google 移动应用 (apps & games) 相关的产品/技术内容。欢迎大家前来分享您对移动应用的行业洞察或见解、移动开发过程中的心得或新发现、以及应用出海的实战经验总结和相关产品的使用反馈等。我们由衷地希望可以给这些出众的中国开发者们提供更好展现自己、充分发挥自己特长的平台。我们将通过大家的技术内容着重选出优秀案例进行谷歌开发技术专家 (GDE) 的推荐。

 点击屏末 | 阅读原文 | 即刻报名参与 "开发者说·DTalk" 

---