Jetpack Compose for Web을 사용해 보았습니다.

9217 단어 JetpackComposeKotlin
사용법이나 감상을 써 갑니다.
↓는 샘플입니다.

Jetpack Compose for Web이란?




Reactive web UIs for Kotlin, based on Google's modern toolkit and brought to you by JetBrains
Compose for Web simplifies and accelerates UI development for web applications, and aims to enable UI code sharing between web, desktop, and Android applications in the future. Currently in technology preview.

Google의 Jetpack Compose를 기반으로 하는 웹용 선언적 UI 프레임워크입니다. 그 외에도 Jetpack Compose for Desktop도 있습니다.
Jetpack Compose의 코드는 Android와 Desktop, 웹에서 공유할 수 있습니다.
DOM 작업도 지원하며 React와 같은 쓰기 편한 UI를 만들 수 있습니다.

소스 코드



Gradle



web//build.gradle.kts
import org.jetbrains.compose.compose

repositories {
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

// Add compose gradle plugin
plugins {
    kotlin("multiplatform") version "1.5.31"
    id("org.jetbrains.compose") version "1.0.0-alpha4-build362"
}

// Enable JS(IR) target and add dependencies
kotlin {
    js(IR) {
        browser()
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(compose.web.core)
                implementation(compose.web.widget)
                implementation(compose.runtime)
            }
        }
    }
}

compose.web {
}
kotlin("js") 를 지정하면 run 작업이 org.jetbrains.kotlin.js 와 org.jetbrains.compose 에서 충돌하고 적용할 수 없었기 때문에 어쩔 수 없이 multiplatform 를 사용하고 있습니다.

web/src/main/resources/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
<div id="root"></div>
<script src="REPLACE_WITH_YOUR_MODULE_NAME.js"></script>
</body>
</html>
REPLACE_WITH_YOUR_MODULE_NAME 에 모듈 이름을 넣습니다. 샘플에서는 web 모듈내에서 작성하고 있으므로 web.js가 됩니다.

src/main/kotlin/Main.kt
import androidx.compose.runtime.*
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.keywords.auto
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable

class ViewModel {
    private val mutableStateFlow = MutableStateFlow(0)

    val stateFlow: StateFlow<Int>
        get() = mutableStateFlow

    fun onIncrementState() {
        mutableStateFlow.value++
    }
}

val viewModel = ViewModel()

@Composable
fun App() {
    val count by viewModel.stateFlow.collectAsState(viewModel.stateFlow.value, Dispatchers.Main)

    P {
        Text(count.toString())
    }
    Button(
        attrs = {
            onClick { viewModel.onIncrementState() }
        }
    ) {
        Text("Click")
    }
}

fun main() {
    renderComposable(rootElementId = "root") { // ベースとなる要素にレンダリング
        App() // NOTE 他の関数に切り出さないと何故か怒られる
    }
}

전통적인 Jetpack Compose와 거의 다르지 않습니다.
새롭게 HTML의 요소를 사용할 수 있게 된 정도입니다.

현재 Jetpack Compose for Web에서는 compose.foundation 또는 compose.material를 사용할 수 없으므로주의가 필요합니다.

결과





요약



나 자신 아직 얕은 지식밖에 없기 때문에, 우선 기본적인 분위기만 소개했습니다.

Jetpack Compose for Web은 현시점에서 테크니컬 프리뷰이므로 놀이 정도의 일 밖에 할 수 없습니다만, 향후 Flutter의 대항마가 될 수 있는 잠재력이 있습니다. (혹시 장래 for iOS도 나올지도…?)
Android: ActivityResultContract를 사용하여 이미지 선택 앱에서 이미지 선택
Kotlin > Ktor > Docker에서 Hello world!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage