Make use of Compose Foundation

[felipef0xx]

It would be nice if we could use Compose Foundation dependencies instead of using our own classes like Modifier and Color. This will make it possible to use the library in multiplatform projects among other targets, such as Android and iOS.

---

To ensure this feature gets triaged / prioritized quickly, please...

• describe what you'd like to be able to do that you currently can't

Consider this property on commonMain source set in a multiplatform project:

import androidx.compose.ui.graphics.Color

val primaryColor = Color.Red

On jsMain with kobweb, we can't use this property beacuse there's its own implementation of Color on com.varabyte.kobweb.compose.ui.graphics.

• feel free to include one (or more) solutions as a suggestion

Remove library implementation of these classes. For Modifiers for exemple, we have to rewrite toAttrs method.

We are able to add foundation dependency this way:

implementation(compose.foundation)

Add to gradle.properties:

org.jetbrains.compose.experimental.jscanvas.enabled=true

Despite enabling jscanvas, we would never render to canvas at all.

[bitspittle]

Did you see the section https://github.com/varabyte/kobweb#what-about-compose-multiplatform-for-web yet?

When I started Kobweb, I wanted to try what you are saying here - use the Android APIs but have it magically work on the web. However, the JS / CSS ecosystem runs into conflict with the Android APIs in a handful of ways (for example, Android's Modifier.background is analogous to CSS's "background-color" property, but CSS "background" is something different and far more complex).

It wasn't long before I gave up and aimed instead to make Kobweb look familiar to Android users but not be quite the same. That was what finally unlocked progress for me.

I know it sounds tempting to share code, and I would have if I could, but I think if you really get into the weeds, there are just too many cases where the APIs diverge, which causes friction. Having one API which completely owns the rendering solution (Android) and another which only provides a suggestion to the browser in the form of a DOM tree just ends up with a bunch of incompatibilities in the end.

[felipef0xx]

I've been trying Compose Multiplatform - Web for the last few weeks.
I just read the section you mentioned and I totally agree with those points about the limits of ditching HTML / CSS. I would like to add some other drawbacks:

• Bundle size gets extremely large (+ 2MB)
• Awful performance on mobile devices

I understand that it is experimental yet, but let's think about Flutter Web with CanvasKit renderer, which has the same approach as Compose (Skia + WebAssembly):

• It adds about 1.5MB to bundle size (check Flutter docs)
• Flutter Gallery is an official Flutter Web sample. It has a laggy scroll on my mobile device

The thing is, Flutter Web is years of development ahead of Compose Web and still faces the same issues. Ditching HTML / CSS is like throwing away decades of browser optimization. That's why I think Compose Multiplatform - Web will never be a feasible option.

It's sad to hear the thing about the divergence between APIs, it sounds like a huge block for achieving my proposal.

[bitspittle]

Those are great additional points, thanks. I'm hesitating adding either of them to the README right now just because technically Compose Web is still experimental, and maybe they'll have a few tricks before the final release to really improve mobile performance or get the bundle size down. But if Compose Web releases and those are still issues, I will definitely update the list. I'm kind of sad to hear about them, especially bad performance on mobile.

Thanks for letting me know my HTML / CSS arguments resonated with you. I think Compose Web will be a reasonable choice for startups who are usually more focused on getting an MVP out in the world to as many users as possible than getting everything to feel 100% performant and efficient on the first release. But to ditch HTML / CSS as a solution entirely? Personally, I find myself loving webdev more, even the CSS bits, when I can write my code in Kotlin :)

BTW, there's a project you might be interested in checking out, depending on what you mean by your proposal. It's still early days yet (the authors are waiting for context receivers to stabilize) but you may want to check out some work being done on a project called Decouple: https://gitlab.com/opensavvy/decouple. If they can pull it off, you can have a UI layer that you declare which you can delegate implementations to a wide range of targets, and for example Kobweb and Android Compose could work side by side in such a project.

[felipef0xx]

I've never been a web developer. I started to dive into this by studying Kotlin / JS, which is making things so enjoyable for me (even CSS too).

Decouple looks promising, I'll give it a try. Thank you for sharing!

I think we can close this issue now 🙂