Hey folks, are there any best practices for making...

# compose-web

[Fabio Grumiro]

Hey folks, are there any best practices for making Compose Multiplatform for Web feel like a native website rather than a ported mobile app?
For instance, how do you handle the Material TopAppBar? Do you conditionally hide the back arrow on Web since the browser has one, or do you hide the mobile TopAppBar entirely? Are there any resources available that show how to accomplish this?

[Chrimaeon]

Well, don't you have on Android a „native“ back button as well, or on iOS the „swipe-back“ gesture, but still show the back/up button in your app? Also if you provide your compose web app as PWA you then don't have the browser navigation any more on some platforms, I think 🤔

[Chrimaeon]

IMHO a compose web app should feel like an app and not as a website. These are applications and not „websites“.

[Alex Styl]

@Fabio Grumiro websites and web apps normally have their own app bar. dont worry about the browser, cause each one is different anyway.

PS: there are no resources about this topic. i do have some experience on the topic (plus people in this slack) so ask away what you need

[Fabio Grumiro]

Thank you guys for the input. Honestly, I was a bit surprised this isn't talked about more in the community, so I was curious to see how others think about this problem and if it's really a problem.
A possible solution could be to use an expect/actual boolean flag, using Navigation 3 decorators to render a global web header, while suppressing the mobile TopAppBar on individual screens when running on Web.

[Alex Styl]

I don't use expect actual for anything other than platform specific apis. For design it gets really messy, really fast.

My 2c on building for multiple platforms is focus on one first. Only when you are ready 100% on one platform start focusing on the next.

Otherwise you end up spending time on stuff like this instead of the product which doesn't really move the project forward.

[Sargun Vohra]

Compose (the Skia based UI toolkit, not the reactive UI framework) will always feel a bit off in the browser, because you're sidestepping the browser's own rendering and layout engine and substituting it with Skia and Compose UI. You can get pretty close, but things like text, selection, navigation will feel a bit off.

If what you're building is an app, especially a cross platform app, that's probably okay. Lots of apps on the browser don't feel like websites, and feel just fine anyway. Compose is great for that.

If you're building a website, I'd recommend not using this framework.

But stuff like the back button is pretty normal on web apps because of the SPA use case, I wouldn't worry about it.

[Konstantin Tskhovrebov]

yes. like google docs, figma, canva, etc
CMP for Web is for such cases. (at least for now 🙂 )
And personally, I'd like to have a many of my installed android apps like PWAs instead of native android apps. Because I need them only to show a loyalty card or check a trains schedule. I don't like to see how they every night install updates and notify me about unrelated things