Looking forward to trying Compose Web/Canvas on th...

# webassembly

[Oliver.O]

Looking forward to trying Compose Web/Canvas on the Wasm target (Kotlin 1.8.20-Beta). Is there a publicly accessible repo with ready-to-use libraries? Currently I'm getting:

No matching variant of org.jetbrains.compose.webweb core1.4.0-alpha01-dev958 was found. The consumer was configured to find a usage of 'kotlin-runtime' of a library, preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'

More details here: https://kotlinlang.slack.com/archives/C01F2HV7868/p1677883524077679?thread_ts=1660083398.571449&cid=C01F2HV7868

[darkmoon_uk]

The only public working example of a Wasm + Compose configuration that I'm aware of, can be found here:
https://github.com/JetBrains/compose-jb/tree/wasm-jb/experimental/examples/falling-balls-mpp

[darkmoon_uk]

The wasm-jb branch of experimental Falling Balls.

[darkmoon_uk]

...keen to know if you find any other good references; they're understandably not being promoted the moment.

[Oliver.O]

Thank you for the hint! Seems like it depends on project-internal artifacts, but i’ll have a closer look.

[darkmoon_uk]

Yeah; It has changed since a few weeks ago. I had a stripped down version that just had the Wasm target in it, and that's stopped working because the 1.8.20 based artifacts have been removed.

[darkmoon_uk]

Ok, just checked out the new source and it still builds and runs 🙂

[darkmoon_uk]

Note you need to run it in Chrome with experimental GC flag enabled.

[darkmoon_uk]

Otherwise I would be using it for my canvas test, which remains JS for now.

[darkmoon_uk]

Should be possible to get your counting grid working on full WASM I think; let us know if there are any sticking points 🙂

[darkmoon_uk]

image.png

[Oliver.O]

I‘ll try to get back to that later. Could be tomorrow for you, though. 🙃 I’ll keep you posted. 👍

[darkmoon_uk]

image.png

[Oliver.O]

Finally got that counting grid to run on full Wasm (with a custom compiled compose-jb on the wasm-main branch). In an example scenario (25x25 grid, highlighting recompositions), the frame rate improved from 40 FPS (K/Js) to about 60 FPS (K/Wasm). 50% faster. 🎉 For reference: JVM desktop speed on that (slow) machine is 112 FPS.

The picture changed when turning on animations (vertically sliding digits): K/Js at 14 FPS, K/Wasm at just 4 FPS – 70% slower. 🤔

Other takeaways: Configuration is hard, as we suspected. Libraries lack Wasm targets (I had to stop using kotlinx.datetime). But BrowserViewportWindow still works with K/Js and K/Wasm!

So stuff is moving fast and in the right direction. Once I'll see text fields starting to work properly on canvas, things are going to get serious. 🚀😃

[Daniele B]

@Oliver.O I cannot find the Kotlin/Wasm target on your GitHub project. I guess you haven’t published it there?

[Oliver.O]

No, this is not published currently, as it is hacked into the compose-jb project, which is not that quick&easy to set up. I could of course publish a fork, but that would be out of date pretty quickly, and people would have to specifically look up the wasm-main branch, so I guess usability is too bad right now to do that. Maybe a better option would be to just be patient and wait for a compose library including the wasm target to appear, and then update the counting grid project to use it. I'll reconsider if there is demand.

[Daniele B]

yes, no worries
I am sure Compose for Wasm will appear pretty soon

[Dima Avdeev]

Amazing!

[Oliver.O]

Correction: The results above were in part comparing apples and oranges (different Compose versions). Also, the initial Js FPS rate reported above was a bit too low (my machine always has its own agenda). These are more accurate numbers (25x25 grid, highlighting recompositions, animations turned off):
• Compose 1.4.0-alpha01-dev958 Js: 43 FPS
• Compose 2023-02-24/wasm-main Js: 47 FPS (+9% vs. 1.4.0-alpha01-dev958 Js)
• Compose 2023-02-24/wasm-main Wasm: 60 FPS (+28% vs. 2023-02-24/wasm-main Js, +40% vs. 1.4.0-alpha01-dev958 Js)
With animations (vertically sliding digits) turned on:
• Compose 1.4.0-alpha01-dev958 Js: 14 FPS
• Compose 2023-02-24/wasm-main Js: 14 FPS
• Compose 2023-02-24/wasm-main Wasm: 4 FPS (-70% vs. Js)

[Oliver.O]

@bashor Just wondering whether you or @Igor Yakovlev might be interested in exploring the above frame rate drop between Js and Wasm. Should I push my example to GitHub for you to look at?

[bashor]

@Oliver.O yes, please

[Oliver.O]

Cool, will do.

[Oliver.O]

Here it is: https://github.com/OliverO2/compose-multiplatform-core/tree/wasm-main-demo-counting-grid

Notes in my commit message.