Hi guys, I want to try multiplatform for web. Up u...

# multiplatform

[Ana Sekuloski]

Hi guys, I want to try multiplatform for web. Up until now, I’ve just used it for mobile.
I’m not sure if I should target JS or WasmJS? What’s your experience, and what would you recommend? As I can see, the KMP wizard offers just example with Wasm. I would not like to build the UI with Kotlin or Compose. I just want to write a shareable code that can be later compiled into javascript and to include it in the html pages. Is that recommended?
Thank you in advance for any recommendations and advices.

[Hans van Dodewaard]

The terminology around kotlin and compose mulitplatform is rather confusing and also changed over time. It also took me quite some time to get a good overview.

Compose multi-platform only supports WasmJs for the web.

Compose HTML is a library targeting Kotlin/Js that provides Composable building blocks for creating web user interfaces with HTML and CSS (but is not part of the Compose multiplatform!). See the readme of https://github.com/JetBrains/compose-multiplatform

If you only need shareable code compiled to javascript, you can use the kotlin.multiplatform Gradle plugin. See https://kotlinlang.org/docs/js-project-setup.html

[PHondogo]

@Hans van Dodewaard Compose also support Js (canvas based). To make it work you need to add section in gradle script for js (copy-paste wasmJs section with change target from wasmJs to js) and add in gradle.properties this line:

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

[Hans van Dodewaard]

@PHondogo Isn't jscanvas very experimental? And is it still being worked on anyway? In the official documentation, it can't be found.

[PHondogo]

All compose Web is in Alpha and can be changed.
Here you can see example from JetBrains of using js (canvas) for Compose: https://github.com/JetBrains/compose-multiplatform/tree/master/components

[Fernando]

Hi Ana, what you want is to write a "shared" library between (let's say android and js (and even ios)
First create a module with Android, (iOS if you want) and JS, you need to know where you want to run this JS either in the browser or node, done that I'd recommend you to activate the typescript generation so that you have better intellisense, you can also specify a package name once you build your JS, you will have the JS package on the build folder, you can import it using npm locally or publish it.

Be aware that lists and suspend functions have their gotchas

[Ana Sekuloski]

HI @Fernando thank you for your answer. Do you maybe have some examples where these suspend function and generic lists are resolved? I suppose suspends should be wrapped in some promises? How about list of generic types?

[Fernando]

I personally (and some other people) solved them by adding a wrapper on the JS-land that returns a Promise and for lists turn them into Array not sure what you mean by "generic lists", if you mean a List<T> you'll need to turn them into Array<T> - But you'll need to define the type, if you want to have many types of data in it you can use the dynamic (only available on the JS target).
Example:

fun getProjects(): Promise<Array<Project>?> {
        return GlobalScope.promise {
            projectRepository.getProjects() // This project repository is on common main that the signature is `suspend List<Project>?`
        }
    }