https://kotlinlang.org logo
Join Slack
Powered by
hello! I'm new to KMP and I'm trying to clarify a...
# compose-web
v
hello! I'm new to KMP and I'm trying to clarify a few things, hope this isn't too annoying for Kotlin/JS -- we can only use Compose HTML also this doesn't support any of the Jetpack libs such as ViewModel, Navigation etc for Kotlin/WASM - we can use Compose UI ? Thank you for you time
a
@Oleksandr Karpovich [JB] ^^
You can use both Wasm and K/JS for Compose Multiplatform (and only K/JS for Conpose HTML, as far as I know)
o
You can use both Wasm and K/JS for Compose Multiplatform (and only K/JS for Conpose HTML, as far as I know)
that's true
a
And what about the ViewModel and Navigation?
o
ViewModel and Navigation support both k/js and k/wasm targets
v
thanks @Oleksandr Karpovich [JB], i'll keep investigating then, do you know any example repo where a K/JS app uses ViewModel ? 😄
b
Didn't realize Compose HTML can't be used with Wasm. Is it 'just' because the target has never been added and published, or is there some limitation that would make it impossible?
👀 1
v
one ore thing, i suppose that when I use K/JS with CMP it should render on a canvas, and won't translate directly to DOM?
let me give you an example of what i'm running
Copy code
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    CanvasBasedWindow(title = "Counter App", canvasElementId = "ComposeTarget") {
        var count by remember { mutableStateOf(0) }

        MaterialTheme {
            Column(
                modifier = Modifier.padding(32.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text("Counter: $count")

                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    Button(onClick = { count-- }) {
                        Text("-")
                    }
                    Button(onClick = { count++ }) {
                        Text("+")
                    }
                }
            }
        }
    }
}
index.html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compose UI Counter</title>
</head>
<body>
<canvas id="ComposeTarget" width="1024" height="768"></canvas>
</body>
</html>
build.gradle.kts
Copy code
js(IR) {
        browser() // Don't use cssSupport here — not needed for Canvas-based Compose UI
        binaries.executable()
    }
when i run it
Copy code
./gradlew jsBroserDevelopmentRun
nothing is displayed and no error is reported
a
With the Compose Multiplatform it renders everything on a canvas. The only way to translate it to HTML is to use Compose HTML or Compose-HTML-based frameworks (like Kobweb)
v
thanks for clarifying 😄
b
bro slam a CoroutineScope somewhere and nevermind viewModels you dont need them
kotlinjs is just kotlin. you can apply the kotlin multiplatform pluggin and use the dom that is native to the web as ui framework. or you can apply also the compose multiplatform pluggin giving you access to compose as ui. its not locked in to wasm or canvas compose html creates text nodes underneath in the dom!
if you decide not to use compose do yourself a big favor and go to the kotlin-wrappers project and download the artefacts for kotlinx.html and kotlin-browser!!
also swap out webpack for vite
just put all this in your favourite llm 😄
if you decide to use canvas accessibility and seo are out the window!
👍 1
g
I would argue that androidx ViewModels is not needed on Android either if app is fully compose (just disable configuration change and keep your VM/Presenter/whatever you use on activity level). This requires a bit more setup (to access save state helper for example), but really no reason to use androidx view model approach
✅ 1
v
i'd prefer to keep configuration change, i had an experience where it was disabled and then we had to support foldables, refactoring the code later in the process to allow configuration change was painful
g
But why do you need confiruation change with compose? We support foldables, without config changes it's way better, just do not use resource qualifiers
v
i'm working on a project where i'm experimenting different approaches, it's mainly a learning thing now
g
Yeah, sure, but it's my genuine recommendation, it makes code simpler, resource qualifiers really are not necessary for compose (outside of localisation) and UX is better for user (they will get normal animation on layout change, not this junky config change)
🙌 1
v
i see your point now, interesting, thanks for pointing this out 😄
4 Views
Open in Slack
PreviousNext
Powered by