Hybrid frontend project with Kotlin JS and manually written JS

We’re planning a new Kotlin backend (server) / frontend (UI) project. The data models in the backend are written in pure Kotlin (as data classes), and we’d like to also use these data classes in the frontent. So to avoid code duplication, the idea was to leverage Kotlin JS to transpile the Kotlin data classes to JS / TypeScript.

Then, the plan is to make JS developers use the code generated by Kotlin JS to actually develop the frontend UI. However, we’d also like to enable “pure Kotlin” developers that have no clue about JS to contribute to the frontend UI. Ideally, these developers could just continue writing Kotlin code which gets transpiled to JS just like the data model classes.

My main question is, is such a “hybrid” setup where both native JS developers and pure Koltin developers work on the same frontend UI code a feasible thing to do? Does anyone have an example project setup that deals with the required mix of generated and hand-written code?

1 Like

Yes, it is quite possible. You can create your JS files in a separate gradle module or even work with them into resources source set of your backend project. In order to generate TS typings for interop between your kotlin-js code and JS part, you need to use not properly documented binaries.library() in JS-IR gradle build.

So, the idea would be to make the Gradle module with the data model code also target js(IR) and create an NPM library via binaries.library() like you’ve also described here, and then have another (pure JS?) module in Gradle that depends on that NPM library to implement the frontend. Correct?

But what would be the workflow for a Kotlin developer to contribute to the frontend module then?

I am not completely sure what you want. But if your aim is to maintain data structure (both front and back) in kotlin and to do UI in JS, this is the simplest way. Your frontenders work only on JS module basing it on data structure exported from kotlin module (Kotlin-JS in library mode generates non-bundled JS file and TS bindings). Kotlin developers do not touch JS.

If you want kotlin developers to work on the frontend, I would recommend using Kotlin-JS instead. Without pure JS.

Yes, that’s the main goal, but also…

… this is another goal. We want both :slight_smile: Do you see a way to setup a project to support both use-cases?

Yes, you can do more than just data deserialization in your kotlin-js/multiplatform module. You can export functions as well. And you can gradually move code from JS to Kotlin JS module.