https://kotlinlang.org logo
#compose-web
Title
# compose-web
l

Luca

03/08/2024, 1:48 AM
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?
d

David Herman

03/08/2024, 2:09 AM
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.
l

Luca

03/08/2024, 2:11 AM
@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
d

David Herman

03/08/2024, 2:12 AM
Actually Kobweb is one of the newer ones. There are definitely a few others, let me look them up.
l

Luca

03/08/2024, 2:12 AM
I’ve built a webfront end using https://github.com/hfhbd/bootstrap-compose but it’s not the most actively supported
d

David Herman

03/08/2024, 2:18 AM
• 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.
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)
l

Luca

03/08/2024, 2:20 AM
doodle is a canvas based approach, right?
d

David Herman

03/08/2024, 2:21 AM
Just skimming the docs now. It seems to be.
👍 1
l

Luca

03/08/2024, 2:29 AM
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)
d

David Herman

03/08/2024, 3:17 AM
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).
👍 1
r

Robert Jaros

03/08/2024, 6:04 AM
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.
d

David Herman

03/08/2024, 6:16 AM
Very interesting. It looks like it uses SVG elements for a lot of its rendering?
I'm a stranger in there but it looks like a really cool codebase
h

hfhbd

03/08/2024, 6:25 AM
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.
a

Arjan van Wieringen

03/08/2024, 7:37 AM
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
🙌 1
n

Nick

03/09/2024, 2:22 AM
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.
👍 1
l

Luca

03/10/2024, 3:30 AM
@Arjan van Wieringen Nice, how did you setup tailwind in your project? I’m struggling to get it integrated with examples I’m seeing
d

David Herman

03/10/2024, 3:36 AM
@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.
a

Arjan van Wieringen

03/10/2024, 6:47 AM
@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.
l

Luca

03/10/2024, 7:13 AM
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
a

Arjan van Wieringen

03/10/2024, 7:30 AM
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
l

Luca

03/11/2024, 5:46 AM
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
❤️ 1
👍 1
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
10 Views