Kotlin which Frontend

Dear all,

i want to try to use Kotlin in our next project. Right now we are using JSF with Primefaces as Frontend and Spring Boot as Backend.

I want to make the frontend more lightwight. What framework you can recommend for the frontend when building the backend with Kotlin?

Is there a way to use thymeleave oder plain html5 in any way? I am not really familar with java script, so it would be great if the frontend is like jsf (html tags etc)

JSF is not exactly a frontend. It is more like advanced server-sider rendering. In pure kotlin you have two ways:

  • You can continue using server-side rendering and use straight-forward kotlinx-html templates. It is much more flexible than HTML templates. Of course, you can use any templating engines you like (thymeleaf, freemarker, etc). Ktor even has bindings for them. In this case, you still will need to write your javascript somehow or use components written by somebody.

  • Write your own frontend using Kotlin-JS. There you can either use plain Kotlin-JS + kotlinx-html (I prefer this approach) or you can use frameworks like kotlin-react or fritz2. The project structure will be more complicated this way and you will have to spend some time getting acquainted with the multi-platform environment. Kvision has some integrations with the Spring boot, so maybe it worth looking there.

1 Like

As much as I like Kotlin, I wouldn’t use it for front-end development. Almost all frameworks are meant to be used with JavaScript or TypeScript and if you are using them with Kotlin, you need to use a different build system, you have to translate each and every example, you need bindings.

And for what? For not having to learn another language? TypeScript is relatively similar to Kotlin, so the language itself is not a big deal. To learn frameworks, libraries, build tools etc. is what makes it hard - and even harder with Kotlin.

All that could change if webassembly becomes more common and new frameworks like Microsoft’s Blazor arise. But as long as this happens, do yourself a favor and just use something like React, Angular (my favorite) or Vue.js with TypeScript.

1 Like

If you simply have basic html with no js, you can go with thymeleaf, kotlin-html or apache freemarker. However if you are using components in JSF, you may have to change how you compose things. Do you have more details about your architecture in JSF?

I wouldn’t use it for front-end development.

I am using the kotlin/js react bindings, along with the ant design react widget set, as part of a kotlin multiplatform build. I find it excellent. i enjoy it far better than my previous work in typescript.

caveat - i’m not a front end dev by trade, i more focus on the server side as part of my day job. i feel i get the best of both worlds with kotlin multiplatform. i hate the complexity and messiness of npm and the strange world of tiny javascript modules. I’ve created some very large systems and successful platforms in javascript, and don’t wish to go back to that world.

Almost all frameworks are meant to be used with JavaScript or TypeScript and if you are using
them with Kotlin, you need to use a different build system

yeah that’s 100% true, but in this case i find it an advantage - jetbrains has done the work for me. i don’t have to use npm for create-react-app, and i’ve never once had a problem. futzing around with webassembley config is my idea of the sixth circle of hell.

you have to translate each and every example, you need bindings.

very true also, although you can use dukat, or just drop down to the dynamic type, which is a kotlin/js special type.

further, there are some stellar bindings out there for some very large toolkits. i am continually amazed by the quality of the ant design bindings GitHub - sunlandx/kotlin-js-wrappers: Kotlin JS wrappers for popular JavaScript libraries

so yeah, i’d be definitely open to using it commercially in addition to my side hustle projects.

I took a different approach. I use 100% Kotlin and not even the wrappers for Kotlin/JS.

I’ve “simply” written what I needed in pure Kotlin (open source: https://zakadabar.io), using the browser API. When I need some heavy JS stuff, like syntax highlight, I use JS libraries, but I try to avoid them as much as possible.

You might argue that this is wrong, but experience shows, that by using 100% Kotlin very new and interesting integration possibilities open up.

Just an example: I do not write / generate API, form validation, table formatters. I define my data model with the data schema in commonMain of the multi-platform project.

Now from the common definition I have (not the full list, that’s way too long):

  • automatic form validation and user feedback from schema

  • automatic server-side validation

  • automatic validation on mobile

  • automatic communication implementation for browser

  • automatic communication implementation for mobile

  • type and schema-aware form and table builders

  • synchronized frontend and backend API implementation, it simply cannot be different, it’s the same code

For me Kotlin/JS is not just about writing my web page in Kotlin. It is about writing things only once and writing things well. It’s about avoiding common programming errors. Also, it is so comfortable to concentrate on what I want to do instead of trying to find how to style the Nth javascript library widget properly.