Wow, this is a really nice approach. I have been using htmx, but mostly with FastAPI / Python and I also wanted to build a backend using Go and some templating to produce HTMX. I never used Kotlin even though we have some services written in it at my company. I just never saw the appeal of the language, but what you showed makes me rethink this, thanks!
Would be great a short tutorial video showcasing all this together. Things like the technique about the use of path /components/{it.lowercase()} is interesting to show more.
Kotlin is so lovely!!! I've been using it for mobile apps (with KMM on Android + iOS) and for backend APIs (with ktor, and even made my own ktor extensions I called ktorx). I was using FreeMarker for templating but directly using DSL seems so much more flexible. Thank you! ❤
Wow man. I am excited to try this. I'm just starting to learn Kotlin now and then I gotta build some web apps. This is great. It gives me a direction to aim for. I was super keen on htmx anyways and I didn't know if it was viable to use with Ktor (cos I'm a noob for this language). I'm off to go learn about extensions now. I found this because of the primagen.
Nice video, a github repo with the showcased code would be very appreciated. One thing I missed is how you deal with js scripts.. do you just serve them as static assets or do you build them with htmlx dsl? I think the $ symbols get a lot in the way if you chose just load them as multiline strings.
Amazing. is this DSL part of the ktor or do i have to write functions for each tag myself. I dont really mind doing that and maybe it would be a fun exercise. But i have a bunch of websites im building now and would like to get my grubby paws on this as it is. If i can do everything in kotlin that would make me quite happy. So far my experience with Kotlin is very positive. Its really a wonderful language to program in.
Lambda's with receivers are such a brilliant language feature. It makes it so easy to make these lightweight DSLs that are still type safe! Agree regarding XML syntax, especially when weirdly embedded in other languages. It's better when DSLs are just simply relatively standard usage of the language in question. Personally I'll probably still stick with something like Vue or React because of the ecosystem that's there, but I'd *love* if there was a strong web-oriented ecosystem in Kotlin and metaframeworks like Nuxt. In principle it should be feasible to make (and HTMX would be a very good part of that for sure).
I'm glad you agree. I respect the decision to use React and Vue, they are the standard for a reason and they solve some problems really well. I betting on this ecosystem for the future but it does have it's pain points right now.
@@tom-delalande I'd love to see a Kotlin web oriented ecosystem spring up. Maybe be a little more server side focused to (I think client side web code has it's placed, but it's currently very overused imo). My dream web stack is one that has component structure for GUI (one of React's good ideas), is primarily server side rendered but allows seamless client side code where needed. I think something based on Kotlin could be a good starting point for that.
@@torb-no Nowadays there's Kobweb, which is a bit sophisticated (it's built on top of Compose, a reactive tree library for Kotlin, used in Android UI development), but compiles to JavaScript (through Kotlin/JS target), and is more of a complete framework for both server and client needs. It's still a work-in-progress, but it looks really promising. However, I'm also sticking with Svelte/SvelteKit due to the stability and community behind them, as well as the great DX and iteration speed they have.
There's also Compose Multiplatform which supports Android, iOS, Desktop, and Web, but it builds to Wasm on web, and ships a Wasm versions of Skia (a 2D graphics library) to draw UI on a canvas through Wasm, like Flutter does on Web as well. Now with browsers supporting WasmGC, it runs pretty fast, but bundle size can be quite high. Compose Multiplatform is stable on Android and Desktop, beta on iOS, and experimental for Web.
Would be nice to have the same tailwind code completion and purging, I truly believe that's possible by using some dependency injection strategy, that would bring it to the next level of DX.
Great video! Havr you figured out a way to make tailwinds "tree-shaking" work with this, i.e. to make sure only the classes that are used will be exported?
Add this to your gradle (unfortunately requires Node, but installs it itself) plugins { id("com.github.node-gradle.node") version "7.0.1" } val css = layout.buildDirectory.dir("css") val style = css.map { it.file("assets/style.css").asFile.path } node { download = true version = "20.10.0" } val generateTailwindCSS: NpxTask by tasks.creating(NpxTask::class) { dependsOn(tasks.npmInstall) inputs.dir(layout.projectDirectory.dir("src/commonMain")) outputs.file(style) command = "tailwindcss" args.addAll("-o", style.get()) } val metadataProcessResources: Task by tasks.getting { dependsOn(generateTailwindCSS) } val jvmProcessResources: Task by tasks.getting { dependsOn(generateTailwindCSS) }
It's very difficult to get your head round the code by looking at sections of it in a video. Any initial repo, no matter how dirty, would help people have a play. After watching a couple of videos without repos, I'm just frustrated and unlikely to return ... :(
It's me or the kotlinx html dsl library is not longer mantained? Issues are not responded. It's pretty dificult to find resources about this dsl, atleast for me.
I’m actually not sure about this one, I can see regular commits even this week and I haven’t encountered any bugs while using it. But there were some features that weren’t implemented that I would have expected
I've actually never tried this. The way I understand it web components are great because they allow you to encapsulate CSS and Javascript in a single re-usable component. But since I don't use Javascript, and Tailwind shares classes across components anyway I usually just create my own functions like I showcased here. Is there another reason to use web components? I would love to know more!
@@tom-delalandeWeb components are kinda controversial in the web development world. Counter arguments are there terrible dev experience (tho, it's getting better), but the arguments for them are that they are a part of the true web standard. For now though they haven't really been widely adopted.
I came here already familiar with HTMX and wanting to learn more about how you use it.
In 7 minutes, you've sold me on Kotlin.
raided by #primeagen
Feels like we need a Koltin HTMX lib to bring together the htmx features in an easy to use way.
Wow, this is a really nice approach. I have been using htmx, but mostly with FastAPI / Python and I also wanted to build a backend using Go and some templating to produce HTMX. I never used Kotlin even though we have some services written in it at my company. I just never saw the appeal of the language, but what you showed makes me rethink this, thanks!
Would be great a short tutorial video showcasing all this together. Things like the technique about the use of path /components/{it.lowercase()} is interesting to show more.
This was such a good demo for this, and great explanation of the trailing lambdas. I've never used kotlin and you've made me want to try it.
As someone who's learning Kotlin from a js background, this is super interesting! Thanks!
This is great, thanks for the overview. Interesting way to make html "components"
Kotlin is so lovely!!! I've been using it for mobile apps (with KMM on Android + iOS) and for backend APIs (with ktor, and even made my own ktor extensions I called ktorx). I was using FreeMarker for templating but directly using DSL seems so much more flexible. Thank you! ❤
Wow man. I am excited to try this. I'm just starting to learn Kotlin now and then I gotta build some web apps. This is great. It gives me a direction to aim for. I was super keen on htmx anyways and I didn't know if it was viable to use with Ktor (cos I'm a noob for this language). I'm off to go learn about extensions now. I found this because of the primagen.
Nice video, a github repo with the showcased code would be very appreciated. One thing I missed is how you deal with js scripts.. do you just serve them as static assets or do you build them with htmlx dsl? I think the $ symbols get a lot in the way if you chose just load them as multiline strings.
Any git project to check the whole project setup?
Tom's a genius
I was looking for Levi Dawn but found Tom.
Please do a video how to do right DSLs I would like to learn about that
Nice work!
Amazing. is this DSL part of the ktor or do i have to write functions for each tag myself. I dont really mind doing that and maybe it would be a fun exercise. But i have a bunch of websites im building now and would like to get my grubby paws on this as it is. If i can do everything in kotlin that would make me quite happy. So far my experience with Kotlin is very positive. Its really a wonderful language to program in.
Lambda's with receivers are such a brilliant language feature. It makes it so easy to make these lightweight DSLs that are still type safe!
Agree regarding XML syntax, especially when weirdly embedded in other languages. It's better when DSLs are just simply relatively standard usage of the language in question.
Personally I'll probably still stick with something like Vue or React because of the ecosystem that's there, but I'd *love* if there was a strong web-oriented ecosystem in Kotlin and metaframeworks like Nuxt. In principle it should be feasible to make (and HTMX would be a very good part of that for sure).
I'm glad you agree. I respect the decision to use React and Vue, they are the standard for a reason and they solve some problems really well. I betting on this ecosystem for the future but it does have it's pain points right now.
@@tom-delalande I'd love to see a Kotlin web oriented ecosystem spring up. Maybe be a little more server side focused to (I think client side web code has it's placed, but it's currently very overused imo). My dream web stack is one that has component structure for GUI (one of React's good ideas), is primarily server side rendered but allows seamless client side code where needed. I think something based on Kotlin could be a good starting point for that.
@@torb-no Nowadays there's Kobweb, which is a bit sophisticated (it's built on top of Compose, a reactive tree library for Kotlin, used in Android UI development), but compiles to JavaScript (through Kotlin/JS target), and is more of a complete framework for both server and client needs.
It's still a work-in-progress, but it looks really promising. However, I'm also sticking with Svelte/SvelteKit due to the stability and community behind them, as well as the great DX and iteration speed they have.
There's also Compose Multiplatform which supports Android, iOS, Desktop, and Web, but it builds to Wasm on web, and ships a Wasm versions of Skia (a 2D graphics library) to draw UI on a canvas through Wasm, like Flutter does on Web as well.
Now with browsers supporting WasmGC, it runs pretty fast, but bundle size can be quite high. Compose Multiplatform is stable on Android and Desktop, beta on iOS, and experimental for Web.
Kotlin mentioned let's go! #primeagen
I love Kotlin.
Yup, this is Primeagen approved ❤
imma learn kotlin thanks to you..
Would be nice to have the same tailwind code completion and purging, I truly believe that's possible by using some dependency injection strategy, that would bring it to the next level of DX.
Hi thanks for the cool demo! did you push this to github?
greetings from the primeagenerers!
Great video! Havr you figured out a way to make tailwinds "tree-shaking" work with this, i.e. to make sure only the classes that are used will be exported?
Add this to your gradle (unfortunately requires Node, but installs it itself)
plugins {
id("com.github.node-gradle.node") version "7.0.1"
}
val css = layout.buildDirectory.dir("css")
val style = css.map { it.file("assets/style.css").asFile.path }
node {
download = true
version = "20.10.0"
}
val generateTailwindCSS: NpxTask by tasks.creating(NpxTask::class) {
dependsOn(tasks.npmInstall)
inputs.dir(layout.projectDirectory.dir("src/commonMain"))
outputs.file(style)
command = "tailwindcss"
args.addAll("-o", style.get())
}
val metadataProcessResources: Task by tasks.getting {
dependsOn(generateTailwindCSS)
}
val jvmProcessResources: Task by tasks.getting {
dependsOn(generateTailwindCSS)
}
Forgot to say, you also need your tailwind.config.js and package.json etc. in your project
This is awesome. Is there a starting point you would recommend? Like a base repo you can work off of.
How do you manage to implement Auto/Hot Reload? do you use gradle or another approach?
I just wish Kotlin had a better LSP / neovim integration :(
great video!
Are there a way to add tailwind without the postcss warning?
It's very difficult to get your head round the code by looking at sections of it in a video. Any initial repo, no matter how dirty, would help people have a play. After watching a couple of videos without repos, I'm just frustrated and unlikely to return ... :(
It's me or the kotlinx html dsl library is not longer mantained? Issues are not responded. It's pretty dificult to find resources about this dsl, atleast for me.
I’m actually not sure about this one, I can see regular commits even this week and I haven’t encountered any bugs while using it. But there were some features that weren’t implemented that I would have expected
I wonder how this work with web-components ?
Is there a generic DSL for them?
I've actually never tried this. The way I understand it web components are great because they allow you to encapsulate CSS and Javascript in a single re-usable component. But since I don't use Javascript, and Tailwind shares classes across components anyway I usually just create my own functions like I showcased here. Is there another reason to use web components? I would love to know more!
@@tom-delalandeWeb components are kinda controversial in the web development world. Counter arguments are there terrible dev experience (tho, it's getting better), but the arguments for them are that they are a part of the true web standard. For now though they haven't really been widely adopted.
Hi, thanks for the video. Could you please share the repo?@@tom-delalande
1000 subs in one day )
you should explain properly how DSL is happenig, show them its not some magic but literally one extension function per keyword
Could you explain how to you setup htmx and tailwind CSS with kotlin
He's just using script tags see 6:21
👍
chad