Replacing Handlebars - kotlinx.html for HTMX
Extreme Programming introduced the idea of a Spike Solution - a small experiment to that goes deep into a topic to explore and solve potential issues before we commit to changes that would be hard to reverse.
In our Gilded Rose codebase we are using HTMX (https://htmx.org) to implement partial page updates. We have found that using Handlebars templates (https://handlebarsjs.com) to render these HTML fragments is, well a bit tacky.
Kotlin has its own DSL for rendering these things though - kotlinx.html (https://github.com/kotlin/kotlinx.html). That might be good for the job, so to find out this week we try a spike refactoring - converting our existing rendering from Handlebars to pure Kotlin. If it doesn’t work out, we can just revert the changes.
In this episode
00:00:43 Revert some of last week's changes to harvest later
00:01:32 We have a new story!
00:02:44 Review our current rendering code
00:04:45 Introducing kotlinx.html
00:06:17 Convert the Handlebars with AI Assistant
00:07:48 Quick Fix plugin FTW
00:08:31 Bring the viewmodel into scope with a with
00:09:52 IntelliJ crash taking work with it!
00:10:12 Try a different AI approach learning from the fixing up we had to do last time
00:12:12 Fix Kotlin to read from the same viewModel as Handlebars
00:13:30 Now switch to the new rendering...
00:14:13 ... and our approval tests will tell us how well we are doing with a nice diff
00:15:57 When we are close enough we can approve the new output
00:16:39 Now how about rendering just the table?
00:19:24 Humans are better than the AI when it comes to rendering a partial with kotlinx.html
00:21:46 Unit tests pass - but the browser tests fail!
00:22:41 We can fix reshape output before approval tests
00:23:50 An entirely unexpected failure caught by the browser tests
00:25:06 We can move rendering logic from the StockListViewModel into the DSL
00:27:15 One last Mark I eyeball check
00:27:45 Review
There is a playlist of TDD Gilded Rose episodes - • Test Driven Gilded Rose in Kotlin
The codebase is available on GitHub https://github.com/dmcg/gilded-rose-tdd
I get lots of questions about the test progress bar. It was written by the inimitable @dmitrykandalov. To use it install his Liveplugin (https://plugins.jetbrains.com/plugin/...) and then this gist https://gist.github.com/dmcg/1f56ac39...
Dmitry also wrote the Quick Fix plugin (https://plugins.jetbrains.com/plugin/...) and if you install it and tell him in a bar he will buy you a drink (this is not a contract).
Thanks to Orion Williams for the music https://toolofgod.com/my-music/royalt...
If you like this video, you’ll probably like my book Java to Kotlin, A Refactoring Guidebook (http://java-to-kotlin.dev). It's about far more than just the syntax differences between the languages - it shows how to upgrade your thinking to a more functional style.
Watch video Replacing Handlebars - kotlinx.html for HTMX online without registration, duration hours minute second in high quality. This video was added by user Pairing with Duncan 18 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 881 once and liked it 54 people.