Hey folks, I'm evaluating Compose Web for a POC project that we're building. So far so good but it's...

# compose-web

[Iliyan Germanov]

Hey folks, I'm evaluating Compose Web for a POC project that we're building. So far so good but it's broken (canvas size is incorrect, buttons can't be clicked) on mobile Chrome. On desktop Chrome it works as expected. I tried all the workarounds that I could find on Google/Github.
Latest state:
• Migrated from WASM to Kotlin JS
https://github.com/Ivy-Apps/learn/blob/main/composeApp/src/jsMain/resources/index.html

You can test the app - here https://ivylearn.app

Also Compose Multiplatform on Web seems broken (especially mobile web) - scrolling is weird but it might be an issue with my setup. So if anyone have any ideas what the problem might be - please drop them in the thread 🙌

P.S. It seems like it's too early to use Compose Web so we'll evaluate Kotlin Compose HTML. This is undesirable because we won't be able to re-use our commonMain Compose UI

[Artem Kobzar]

@[JB] Shagen ^^

[Iliyan Germanov]

For more context, here's what we're trying to achieve:
• Build Android & Web MVP of our product by re-using as much as possible - Compose Multiplatform seems like a very good option.
• Later we'll expand our support to iOS and Desktop which should be trivial given that most of our code is in commonMain.
The dev-exp so far is good except the issues with Compose Web, which is totally understandable given that it's still experimental

[Pablichjenkov]

Same here ☝️. I wish compose-js mobile got better support. There is a problem with touch events when the page width is small, using the page in landscape works better, although not perfect. Big screens seems ok, has improved a lot recently 👍

[Iliyan Germanov]

@Pablichjenkov did you had the chance to try the Compose HTML dsl? My hope ia that it'll solve our issues as a backup solution

[Pablichjenkov]

Try it yes, using it no. That one works good but is not compose compatible. Different modifiers, same code doesn't work. I am in your same boat, my plan is to reuse as much as possible between Android, iOS and Web.

[[JB] Shagen]

Hi Iliyan, just wonder which version of compose have you used? We indeed have problems with sized and now I wonder whether those one are actually new one or something (which it looks like) that already fixed

[Iliyan Germanov]

Hi Shagen, I'm using these versions:
https://github.com/Ivy-Apps/learn/blob/main/gradle/libs.versions.toml

I think dependabot recently updated to latest stable. I'm happy to test with alpha & snapshot versions, too - just lmk what to try^

[Alejandro Rios]

Might be related to this issue:

https://kotlinlang.slack.com/archives/C01F2HV7868/p1712954845000049

[Iliyan Germanov]

@[JB] Shagen are there any known workarounds?

[[JB] Shagen]

@Iliyan Germanov you can try to build with 1.6.10-beta02
if this does not work for you let me know

[Iliyan Germanov]

@[JB] Shagen just upgraded to 1.6.10-beta02 of the Compose plugin. State:
🔴 Mobile web on Foldable closed is still broken
✅ Mobile web on Foldable open is now fixed:
• Canvas is centered properly (it wasn't in the prev. version)
• Scrolling seems to be smooth now
Any other ideas? We're making progress 🚀

You can test on https://ivylearn.app
• It's deployed on GitHub pages via this workflow (:composeApp:jsBrowserDistribution)

[Iliyan Germanov]

@[JB] Shagen here are two screen recordings to see the behavior - in a nutshell, it doesn't work on portrait on mobile. Everything else seems fine 👍

Screen_Recording_20240426_183300_Chrome.mp4Screen_Recording_20240426_183344_Chrome.mp4

[[JB] Shagen]

Yep, unfortunately as of now the portrait/landscape switch seems to be not working :(
Recently a bug was created about this - https://github.com/JetBrains/compose-multiplatform/issues/4702

So we’ll start working and try to deliver solution ASAP.

[Iliyan Germanov]

Ehh, that's not our main problem. The issue is that it's not working at all in portrait 😬 I tried refreshing, clearing cache, incognito. Compose Web is just broken on mobile (portrait) which is our primary use-case.

Tbh, I don't care if the website breaks after rotation cuz it's nice-to-have. However, we need it to work when people load it

[Iliyan Germanov]

Raised https://github.com/JetBrains/compose-multiplatform/issues/4710

[[JB] Shagen]

this is the same problem - that we are not detecting orientation for some reason - whether initially or afterwards, but an issue won’t harm, thank you for reporting it

[Iliyan Germanov]

feel free to dm me if I can help in any way - testing, providing more info, etc

[Iliyan Germanov]

Is there any ETA for a fix? We're looking to release our MVP next month and are happy to use any dev/snapshot version of Compose Multiplatform if it fixes this issue

[[JB] Shagen]

it’s extremely hard to give any estimates right now but I’ll keep you posted

[Iliyan Germanov]

Yeah, totally understandable 💯

[Tomislav Mladenov]

@Iliyan Germanov I believe most the problems could be solved if you use JS target you can add some script in the index.html and simply use onWasmReady with canvas and have common compose code

[Iliyan Germanov]

Hi @Tomislav Mladenov nice - how can I do that? We already have a JS target in our configuration. Do you see something wrong?
https://github.com/Ivy-Apps/learn/blob/ef45c76c8d6b3b2e1c205fa112cf3fa8fd8d028d/composeApp/build.gradle.kts#L10

P.S. I tried everything I could think of to workaround this issue:
• Initially we used wasmJS
• Migrated to Kotlin JS
• Tried Canvas

[Tomislav Mladenov]

@Iliyan Germanov Would this work? Or maybe I didn't understand the problem

IMG_8591.MOV

[Iliyan Germanov]

Yup - amazing! How did you fix it? And is the "Colors demo" button working?

[Tomislav Mladenov]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Learn by Ivy</title>
    <script src="skiko.js"></script>

</head>
<body>
<div>
    <canvas id="ComposeTarget"></canvas>
</div>
<script src="composeApp.js"></script>
</body>
</html>