I am thinking to maybe introduce my app to target ...

# compose

[Joel Denke]

I am thinking to maybe introduce my app to target desktop and wasm web but hesitate a lot. One of the things I was think about was to let wasm/web having a separate app but re-using some other Gradle modules like design system, core arch and such. Anyone tried to have multiple apps sharing subsets of your module sets?
Like android and iOS for me right now has 100% code sharing with one root composable entrypoint + Koin component. But I cant re-use that in wasm if it should be implemented in another way.
Also its kind of weird with the feature modules, as some of them cannot be used in two different apps.
In my case one app would be like a CMS/admin panel and the other one the consument app. But would like to sharing a lot of code.
If not possible in a good way, I would most probably avoid using compose multiplatform entirely.
Anyone tried this or using these kind of setup?

[Zoltan Demant]

I just revamped my design system to work with compose multiplaform yesterday. Highly recommend, being able to just resize the window to test layouts across different "devices" is really nice, and everything just runs way faster/smoother - no need for release builds, etc. I dont know how well that works with wasm, but desktop was a breeze to get working.

[Joel Denke]

Do you use the same design system or other modules between multiple different apps, or same app? 🙂

[Zoltan Demant]

3 apps, 1 design system! I just host it and a bunch of other "in house" libraries on my private github 😃

[Joel Denke]

And only sharing design system, nothing else? I want to share as much as possible, like navigation system and so forth 🙂

[Zoltan Demant]

Im sharing my navigation system like this as well! Even convention plugins 😅 Anything to be able to tweak logic in one place and reap the benefits in all the places!

[Joel Denke]

Yeah sounds good 🙂 I think I am only able to share the screens isolated per app, as cannot spill over logic from one apps navigation to another one.
Do you share more things as well? Just curious how far can take it.

[Zoltan Demant]

The design system and navigation have been the biggest ones thus far! You can probably take it as far as you like really 😃 Besides ios and desktop support, Id like to make my design system available for the web so that I can start building websites using it - it doesnt seem like wasm is there yet, but hopefully soon?

[Zoltan Demant]

Its tiny, but Im also sharing my logging library like this.

[Joel Denke]

Wasm exists, but not sure it supports what I need to have at the moment 🙂 That meaning interop with JS libs and such, and not only interop with wasmJs or whatever supported today. In same way having problem with interop Swift libraries from Kotlin 😛 Thats my main issues at the moment except from this architecture issue, which impacted by that.

But I do like the idea of having admin panel vs consumer app in same place and share gradle modules as much as can. In many cases they share same data source, but not sure how well it can be shared. As need different auth flow for that, being much harder protected in admin panel 😛

[Joel Denke]

@Zoltan Demant But yeah its pretty much my idea what you saying as well I think, given that I can use one basic NodeJs container or whatever to spin up Compose root level with Koin DI component in web/wasm. Ideally not write a single HTML or CSS at all, or any js interop other than in the Kotlin side. Thats what I did in iOS and Android so far.
As all my components is adaptive as well, it would work well build ui for large vs small screens with same system.

[Joel Denke]

As of example having my own NavigationWrapper adapting to Rail, Drawer and BottomBar depending on window size classes (width/height breakpoints). Or grids adapting columns based on available space.

[Zoltan Demant]

Its a bit different to what youre trying to do, but Im actually also sharing logic between my frontend & backend in one of my apps - all the data models, etc. Both are written with kotlin from the start though, just targeting android and jvm 🙂

Having wasm support work like that is the dream. If you use the compose multiplatform wizard for wasm, you can use a bunch of material components to build out the UI already. Im currently trying to figure out if I can adapt my entire design system to work with it!

[Joel Denke]

Cool, yeah I dont like rely on Firebase Firestore as it limits me from sharing data models and storage mechanisms properly in backend. But that wouldve been cool. Not sure if Apollo supports expose models in their library, maybe they do. Then would be nice check it out later on when having my own BE 🙂
Yeah from what I tried so far, I can only get a basic composable in Wasm to work in template, but not anything scalable. Maybe just me or its pre-alpha state kind a.
If you have any example of Wasm or desktop in more larger scale, please share 🙂

[Joel Denke]

Another issue is that I need to solve shared resources between all platforms, as Jetbrains component resources does not properly doing that yet.
And bridge over platform specifics, to try agnostic sharing things. But in many cases the platforms doesnt have common abdominator making it impossible.

But in general UI with HID regardless if using a computer, TV, wearable or such is behaving very similar imo. Its just some details in SDKs restrictive by frameworks avaiable imo, and less about the programming languages or OS itself. But maybe I am overthinking it, not sure 😄

The dream would be support everything, given that all of them not doing weird things like androidx wearable compose not same as androidx compose. Or Apple Tv vs Android Tv.

[Joel Denke]

@Zoltan Demant

Having wasm support work like that is the dream. If you use the compose multiplatform wizard for wasm, you can use a bunch of material components to build out the UI already. Im currently trying to figure out if I can adapt my entire design system to work with it!

Does this differ from compose multiplatform material 3? Or is it the same?
My main idea is to get rid of Material entirely and do everything custom, but decide from case to case. Would be lovely if having wasm interop so I can cherry pick whatever I prefer and not dependent on wait for Jetbrains or Google to release new CMP versions supporting material. And someday they just delete supporting it 😄

[Zoltan Demant]

I think its the same with M3! And Im in the same spot, I started out with only M2, then M3, then ran into the awkwardness of android-wear-material, so I created my own components that I can re-use between them too 😄 Nowadays my system is roughly 80% custom. Agreed about resources, I have a system for that too.. but Im not especially happy about it, too much boilerplate code for each platform. Seems like resources are getting some love with each release, so that too is just a question of time probably!

[Zoltan Demant]

The wizard generates a project using M2, but Ive been able to compile it with M3 just fine .. so I think it works? Guess Ill find out tomorrow 😃

[Zoltan Demant]

Can confirm .. both M3 and my design system work on WASM as well. Its still early days though, desktop was way smoother to get up and running.

[Joel Denke]

Nice! When say working on wasm, no additional changes needed? And any tweaks using it on wasm? Very curious now how run on wasm 😁

[Zoltan Demant]

Yup, its crazy .. but everything just worked straight out of the box. I struggled a bit with getting wasm to just "work" but once I got it running .. 🤌🏽 Even animations are identical.

[Joel Denke]

Cool, will give it a spin later on then. WOuld be nice if could build a nice admin panel in same infrastructure 😄

[Joel Denke]

Do you get some kind of binary like js file for the wasmJs you include in the html to be run later on, or?

[Zoltan Demant]

Id 100% recommend starting from the project the multiplatform wizard generates, it should work as-is and you can then experiment with adding stuff to it. In my case one of my modules were causing issues with wasm (I posted about this in #compose-web).
It creates a js file which you should refer to:

<script type="application/javascript" src="sample.js"></script>

And <canvas id="ComposeTarget"></canvas> is used with CanvasBasedWindow(canvasElementId = "ComposeTarget", content = {
Catalog.Render()
})
(You can see all of this in the wizard project too)

[Joel Denke]

Ah cool thanks, forgot the wizard including web now 😄 I will test and see 🙂

[Joel Denke]

I also find a library make HTML and Compose interop with each other, which I need to have I think, so will try that 🙂

[Zoltan Demant]

Good luck 😃 Personally I dont want to touch any HTML if possible!

[Joel Denke]

Yeah its much things I do not want to touch if possible, but you have to 😄