Missing features for Kotlin/JS adoption in the browser

#1

I’m a big fan of Kotlin, I know how well it performs inside the browser but I also feel the current limitations for a real adoption in the browser. This is why I want to recap the missing features and would like to know if their are going to be resolved and when (approximatively).

Aligning Kotlin/JS development with current frontend workflow

Nowadays, frontend development is quite effective. The main point of it is the very efficient loop between modifying code and seeing the result. With webpack-dev-server, live/hot reload, the developper modify its code, js / typescript or Sass / Less files and have a near immediate view of its modifications in the browser. The build chain detects modifications of the code, do the compilation/transpilation work and reload it in the browser.

We should have that with Kotlin/JS. Now that Kotlin/JS incremental compilation is here, we should have this quick modification/compilation phase integrated in webpack development workflow and tools. And this workflow should be documented.

Efficient Dead Code Elimination and code splitting

The current DCE is a good first step. We can have relatively small minified/zipped Kotlin/JS files.

However, the DCE could go really further. It currently keeps a lot of unused code. Also, it’s now common to do frontend code splitting. It should be possible with Kotlin/JS development and compatilbe with DCE.

For example:

  • page1/page1.js
  • page2/page2.js
  • lib/kotlin-std.js // DCE applied but containing all code used by modules page1 and page2.

Can Kotlin/JS jetbrains team give a feedback on the current and future status on these points?
Thanks,

3 Likes
#2

Have you tried kotlin-frontend plugin? It allows hot reload via webpack.

As for dce, you can actually use any js dce on top of kotlin dce like people using proguard for Android.

#3

I know these tools. They can produce quite decent results (see https://data2viz.github.io/data2viz/ex-force-js/index.html which is 50ko) but, as I said, not on par with the JS ecosystem.

#4

Unfortunately, at the moment our compiler infrastructure is not optimized for such use. We have experimented with the watch daemon to reduce the round-trip between modifying the code and seeing the result. We thought about different approaches: running inside Gradle continuous mode and a separate watch daemon. We found that Gradle continuous mode has significant performance overhead, and file watching is inefficient. A prototype with standalone watch daemon showed good results: it was possible to achieve the update time for one of the internal JB projects with the output size of JS 1.2 Mb from 10 seconds to 30 ms for typical changes in UI code. Unfortunately, implementation requires significant changes in the compiler infrastructure and design for integration with other JS tools and Gradle build.

At the moment we are focused on the new compiler backend, which should, among other things, solve problems with compilation speed, code size, file to file compilation and code splitting. Also, we are working on moving features from kotlin-frontend-plugin to the main Kotlin Gradle plugin. We are hoping to continue working on the watch daemon after that.

Nevertheless, we have improved the performance of incremental compilation in the current compiler backend too: the compilation time has decreased by 6 times for large projects. A number of other optimizations in the current backend are on the way. We expect to release them at 1.3.30.

#5

:heart_eyes:

This point is very important and it was a problem with the frontend-plugin. A frontend project has it’s own tools (less, sass, …) and Kotlin/JS compilation should be integrated into the frontend toolchain (and not be the one holding the whole).

#6

Hello, thanks for opening this thread!
After using Kotlin/JS with React I can think of a few ways to have greater adoption of Kotlin/JS:

There are two ways to run React in Kotlin/JS

  1. Use create-react-kotlin-app which produces web code where Kotlin runs without Gradle (so no Multi-Platform?)
  2. Use a Gradle project with kotlin2js + kotlin-frontend-plugin + kotlin-js-wrappers (kotlin-react)

It feels really confusing to have two different ways to create a Kotlin/JS for react, as if JetBrains is not sure itself of which direction to go with. I’d love to see better guidance and more commitment on one of those two ways (with use of dependencies both from NPM and Multi-platform projects).

Transitive dependencies

As I am building a Koltin Multi-platform Project, it should be obvious that it is important to have the tooling use transitive dependencies to be built into our main.bundle.js. I had to do this manually at first but when switched to use kotlin-frontend-plugin 0.0.44 it was done for me, yay! When upgraded to 0.0.45 transitive dependencies are not imported anymore. I am staying on 0.0.44 for now because of this…

Lack of Kotlin JS Externals

It should be trivial to be able to find js-externals for npm packages and crystal clear how we should proceed to share js-externals we are building for npm packages that do not have any yet.

As there is https://www.npmjs.com/ for npm packages, the dream would be to have a similar website for kotlin-js packages (from JetBrains). After building my first js-external for react-youtube I found myself wanting to share it with the community and was kindly directed to https://github.com/Kotlin/js-externals which looks like a dead project for the last 6 months.

Regards,
Alex

1 Like
#7

A third posibility is to use Gradle with kotlin2js + kotlin-js-wrappers + npm + webpack and forget about kotlin-frontend-plugin.
Much more versatile and works beautifully.