I’m trying to convince my friend who’s used to bui...

# compose-web

[Luca]

I’m trying to convince my friend who’s used to building web-apps in typescript with NextJS and Tailwind, anyone have any suggestions solutions which would have have the lowest learning curve for someone with that background? And in general what are the most popular/stable web frameworks people are using for an html ui atm?

[David Herman]

As the author of #kobweb I'm biased, but I'd at least recommend taking a look at https://github.com/varabyte/kobweb NextJS was an inspiration for me. I don't use the Tailwind approach myself but at least one user got pretty far using it in their own projects.

[Luca]

@David Herman nice! yeah I was looking at your project. are there any notible competing frameworks to koweb? I’m just trying to learn the state of the ecosystem

[David Herman]

Actually Kobweb is one of the newer ones. There are definitely a few others, let me look them up.

[Luca]

I’ve built a webfront end using https://github.com/hfhbd/bootstrap-compose but it’s not the most actively supported

[David Herman]

• Someone mentioned https://github.com/nacular/doodle a little while ago.
• https://github.com/kwebio/kweb-core is written by a talented dev and occupies the SSR space as far as I'm aware, but I'm not aware of usage.
• https://vaadin.com/kotlin has been around for a while I'm pretty sure!
• And @Robert Jaros is active in this community. https://github.com/rjaros/kvision is his project and he's building https://github.com/rjaros/kilua based on his experience from it, which if he pulls it off may give users the benefit both of traditional html and wasm targets.
Of course there are probably quite a few others, and apologies for any omissions here.

[David Herman]

Kobweb's benefits are fully leaning into Compose HTML (previous frameworks were started before Compose HTML existed) and support from Gradle plugins to handle a lot of boilerplate for you (that being the part heavily inspired by NextJS)

[Luca]

doodle is a canvas based approach, right?

[David Herman]

Just skimming the docs now. It seems to be.

[Luca]

Kobweb is meant to be for server side rendering, correct? Not sure if server side rendering would pair well when trying to make a multiplatform app with different front-ends. My goal is to have a compose-ui front end along with a separate native html front end (non-canvas based)

[David Herman]

Kobweb is not SSR. There's an export process that you run before publishing which takes a snapshot of each page on your site. (You can read more in the export section if you're curious for more details).

[Robert Jaros]

To clarify, Doodle doesn't use html5 canvas. As far as I understand it uses it's own, platform independent rendering engine and the web application is rendered with native html elements.

[David Herman]

Very interesting. It looks like it uses SVG elements for a lot of its rendering?

[David Herman]

I'm a stranger in there but it looks like a really cool codebase

[hfhbd]

Yes, I know I did not actively develop bootstrap-compose the last months but still feel free to create issues if there are any. This helps prioritizing.

[Arjan van Wieringen]

We used the Compose HTML framework with a colleague that was used to react and tailwind and he was onboarded in a day. We’re shipping the production version coming month.

Here an early version which we built in a week: https://kotlinlang.slack.com/archives/C0BJ0GTE2/p1699615778741809

[Nick]

author of #doodle here. as mentioned, it has a render engine with a vector API. this currently translates to DOM elements (including SVG as you mentioned) when targeting the browser. i’m also considering adding true html Canvas support at some point.

doodle also works on the JVM like compose and allows full sharing of widgets and logic between the two. the render engine makes this kind of abstraction possible and leaves the door open to mobile support as well.

you can see the docs here and some more in depth examples with source code here.

[Luca]

@Arjan van Wieringen Nice, how did you setup tailwind in your project? I’m struggling to get it integrated with examples I’m seeing

[David Herman]

@Luca One of Kobweb's users got tailwind working with these instructions: https://github.com/dead8309/shadcn-kotlin/blob/master/tailwind-integration.md#integration-with-tailwind-css

I'm not sure if these instructions still work or if they're easily adapted outside of Kobweb projects, but maybe it can be worth a look. You can DM me if you need help translating Kobweb instructions to non-Kobweb instructions.

[Arjan van Wieringen]

@Luca I’ll come back to you on that today. We use the tailwindkt project. But for my other projects I just use raw tailwind.

[Luca]

I figured out my issue: postcss.config.js and tailwind.config.js needed to be copied to the js package i couldn’t get tailwindkt to work out of the box for some reason

[Arjan van Wieringen]

The tailwindkt plugin should do that for you. But you can just manually use tailwind and generate css for you like this:https://kotlinlang.slack.com/archives/C0A974TJ9/p1709143391853079

That’s how I use it. I then add a Gradle task do actually do the tailwind command before processResources

[Luca]

I expanded this kmp template to make a solid project starting point. I separated the app’s non-compose business logic into a shared module. Which is shared between two front-end implementations. A compose ui app (all targets including wasmJs), and a compose html app w/ tailwind

https://github.com/luca992/KMP-App-Template/tree/tailwind-app

[Luca]

had to publish my own snapshot of voyager to support compose 1.6…. but besides that it’s a solid starting point for new projects imo