Why Kotlin is the best language to use with HTMX
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- I think that Kotlin is great way to build server side rendered websites with Tailwind and HTMX. This is because of it's convenient features like string template-ing, extension functions and trailing lambda functions.
I think Kotlin is a better alternative to Go Lang for building service side rendered websites because Ktor let's you create HTML without writing XML.
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 57 [ซับไทย]](http://i.ytimg.com/vi/pNhft3YZFRE/mqdefault.jpg)
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
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!
Feels like we need a Koltin HTMX lib to bring together the htmx features in an easy to use way.
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.
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.
Any git project to check the whole project setup?
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"
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! ❤
This is awesome. Is there a starting point you would recommend? Like a base repo you can work off of.
Please do a video how to do right DSLs I would like to learn about that
great video!
imma learn kotlin thanks to you..
How do you manage to implement Auto/Hot Reload? do you use gradle or another approach?
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
Yup, this is Primeagen approved ❤
Kotlin mentioned let's go! #primeagen
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?
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
Tom's a genius
I was looking for Levi Dawn but found Tom.
greetings from the primeagenerers!
👍
Are there a way to add tailwind without the postcss warning?
You've sold me on this. Now comes the hard part. Can you tell me how I get tailwind to run properly? :D
Yes this is a very interesting topic.
You can either have small node project that runs Tailwind or run it directly inside of Gradle. I prefer the latter
I read through this blog post which does a great job of explaining how to do this:
spinscale.de/posts/2023-07-13-using-gradle-to-create-custom-tailwindcss-build.html
chad
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.
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
Could you explain how to you setup htmx and tailwind CSS with kotlin
He's just using script tags see 6:21
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