when building a naked “hello world” in kotlin/js i...

# javascript

[Peter Ertl]

when building a naked “hello world” in kotlin/js is getting a 500k webpack bundle in build/distributions/{myproject}.js the lowest I can get or is there an option like “treeshaking”, “optimize”, etc. I am missing?

[John O'Reilly]

worth looking at discussion in https://twitter.com/HandstandSam/status/1369852373674426373?s=20

(from @handstandsam)

[John O'Reilly]

I think main change that brought it down was use of Kotlin 1.4.30 and selecting use of IR backend

[Peter Ertl]

wow using IR instead of LEGACY made a huge difference — thanks John

[Peter Ertl]

I also discovered gradle task “browserProductionWebpack” which makes it even smaller

[turansky]

One more option - -Xir-property-lazy-initialization

Example

[Marc Knaup]

@turansky that should make it larger again, but faster to execute in specific cases 🤔

[Marc Knaup]

But yeah, it quickly becomes ridiculous.
My index page has a 1.4 MiB JS file (287 KiB compressed).

[Marc Knaup]

But still, Lighthouse is quite happy with my optimizations :)

[turansky]

-0.5 MB in Ktor cases

[Marc Knaup]

Yeah, Ktor and Coroutines are gigantic, in Browser JS terms

[Marc Knaup]

I load them lazily.

[Marc Knaup]

You can test performance for yourself.
But page (and startup) are still in development 😜
It’s Kotlin/JS with my own React+CSS libs on top.

https://hobogenki.com (test domain)

[Svyatoslav Kuzmich [JB]]

Lazy property initialisation, while adding a small flat overhead, can drastically reduce code size in some cases. It allows compiler to eliminate initialisers for unused properties. In eager property initialisation mode they are always kept alive including all the code referenced by them.

[Marc Knaup]

Hmm. I’ll make a quick test to compare 🙂

[Svyatoslav Kuzmich [JB]]

This would be noticeable when using only a small part of some third-party library with a lot of top-level properties.

[Marc Knaup]

Every single React component is a top-level property.
And I guess `object`s are lazy too now, so an additional +1 per component.

[Marc Knaup]

Without `-Xir-property-lazy-initialization`:
12M pre-webpack, 4.5M post-webpack

With `-Xir-property-lazy-initialization`:
12M pre-webpack, 4.6M post-webpack

[Svyatoslav Kuzmich [JB]]

object declarations are initialized lazily regardless of compiler flags, including legacy compiler

[Peter Ertl]

12M?! omg!

[Peter Ertl]

is it 12MB for a full-blown app ?

[Peter Ertl]

or is it still growing?

[Marc Knaup]

It’s what you see on that domain:
Some static pages, the sign-up process and a simple membership center.

12 MB mostly because the input JS for webpack aren’t optimized for size at all.

The code looks like that:

var tmp42__get_fixed__0_175 = null;
    var tmp41_unsafe_0_176 = 'fixed';
    var tmp40_unsafe_0_177 = null;
    var tmp43_position_0_174 = tmp41_unsafe_0_176;
    var tmp0_unsafe_0_2_179 = null;
    var tmp1_unsafe_0_3_180 = 'position';
    var tmp2_property_0_1_178 = tmp1_unsafe_0_3_180;
    var tmp_24 = tmp2_property_0_1_178;
    $this$style.p(tmp_24, tmp43_position_0_174);
    var tmp11_with_0_2_182 = null;
    var tmp10_build_0_3_183 = null;
    var tmp0_unsafeCast_0_6_186 = [];
    var tmp1_apply_0_5_185 = tmp0_unsafeCast_0_6_186;
    var tmp0__get_percent__0_20_189 = 50;
    var tmp2_of_0_1_21_190 = null;
    var tmp0_unsafe_0_2_22_191 = null;
    var tmp1_unsafe_0_3_23_192 = '' + tmp0__get_percent__0_20_189 + '%';
    var tmp1_unaryMinus_0_19_188 = tmp1_unsafe_0_3_23_192;
    var tmp2_translateX_0_18_187 = times_2(tmp1_unaryMinus_0_19_188, -1);
    var tmp0_add_0_1_24_193 = '' + 'translateX(' + tmp2_translateX_0_18_187 + ')';

[Marc Knaup]

It depends on Terser optimization or alike.
Unfortunately some code that the Kotlin compiler spits out doesn’t get optimized well by Terser. For example around String concatenation.

[Marc Knaup]

It just looks so funny.

[Marc Knaup]

And the compiler creates an insane amount of anonymous objects for passing functions around.
I guess all that is yet to be optimized once the IR compiler is stable.

[Svyatoslav Kuzmich [JB]]

Doesn’t look very nice indeed. yet to be optimized.

[Peter Ertl]

so would you again choose kotlin/js or instead go with typescript + bundler if starting again?

[Marc Knaup]

Definitely Kotlin.
It’s immature yes, but I still love it so much more than struggling with TypeScript. Or having to jump between different languages in a single project (back-end & front-end).

And for example the data model and serialization code is shared between back-end and front-end in my project.

[Marc Knaup]

But I also have the benefit of not depending on a lot of 3rd party libraries. These can be a hassle to integrate.

[Peter Ertl]

I really enjoyed watching this:

https://www.youtube.com/watch?v=Pf6PG26gM2Y&t=13919s▾

[Peter Ertl]

at around 40000 they tell about jetbrains spaces … using websocket, kotlin/react and stuff… I must admin I am impressed

[Marc Knaup]

Yeah me too. That’s why I’ve asked them to make Space open source as a reference 😄
But they said it’s too messy to share 😛

[Peter Ertl]

could be an excuse or the truth 🙂

[Marc Knaup]

Building entire websites or apps in KJS is relatively new. We’re all trying to figure out what good ways are to build things with it.

[Peter Ertl]

however, using websocket and one single language would be an perfect fit for my current problem… having an administration frontend for an automated service serving various trading platforms

[Peter Ertl]

^ not requiring any seo visibility

[Marc Knaup]

Something that unfortunately won’t scale well is sharing data model in server and client. Over time you’ll get issues with migration and when some clients/server sees more/different things than the others.
It’s also not really helpful if you want to build something (partially) open. GraphQL makes more sense then.

[Marc Knaup]

For closed systems where you have control over everything it makes most sense.

[Marc Knaup]

You don’t have to care about public API nor about data model evolution.

[Peter Ertl]

yeah, exactly my use case … having kx-serializable data classes and an react client would be just great

[Marc Knaup]

I just haven’t figured out yet how to make breaking website updates without breaking those clients that are currently on the website. 😛

[Peter Ertl]

deploy a second app and switch requests via frontend proxy

[Marc Knaup]

Just expect a lot of rough edges at the moment, esp. if you want good size and performance.
I’m using so many hacks and workarounds in my project it’s amazing that it works.

[Peter Ertl]

are the hacks something I should be scared of?

[Marc Knaup]

@Peter Ertl the problem is the back-end. Data model changes for example. Or API endpoints.

[Peter Ertl]

currently I generated typescript classes for my requests which works pretty well over an generic /rpc endpoint

[Peter Ertl]

but I hate to have two languages

[Marc Knaup]

Depends on what you need. If you accept current limitations when it comes to size, performance or how flexible DSLs you can build then you should be fine mostly.
Once you start focusing on size & performance (lazy loading, making things more minifyable, etc.) then you enter the dark side.

[Marc Knaup]

but I hate to have two languages

Yeah me too

[Marc Knaup]

Even PDF creation uses Kotlin (kotlinx-html for now)

[Peter Ertl]

server or client side? itext / pdfbox / etc . ?

[Marc Knaup]

Server-side using Chrome.
https://github.com/fluidsonic/fluid-pdf

[Peter Ertl]

oh wow never heard of this one … nice

[Marc Knaup]

I’d probably would have much more work wouldn’t I build my own libraries for almost everything 😅

[Peter Ertl]

just the attitude I share.. most things are just not worth to introduce another dependency

[Robert Jaros]

You could just install and run wkhtmltopdf on the server 🙂 It probably works very simillar.

[Marc Knaup]

Nooo don’t do that. I’ve been there

[Marc Knaup]

The technology it uses is so incredibly outdated it can barely handle CSS2 properly.

[Robert Jaros]

I've been using it years ago so I don't know they are doing now 😉

[Marc Knaup]

Barely any difference since then 😕
They depend on some Qt stuff that’s not really developed anymore.

[Peter Ertl]

jetbrains compose will be nice, too, but I miss some kind of upgrade mechanism like java web start had

[Marc Knaup]

Some of the funny hacks you may come across.

[Marc Knaup]

I think Compose Web is still too early stage.

[Peter Ertl]

probably yes …

[Peter Ertl]

they really need a solid compiler 1st

[Peter Ertl]

multiplatform

[Robert Jaros]

@Peter Ertl If you are interested in fullstack Kotlin (Kotlin/JS, shared data model, different supported backends, websockets support) you can check KVision (https://kvision.io) (disclaimer: I'm the author 😉)

[Marc Knaup]

Yeah and tooling. There are boatloads of IDE issues.
Many fixed, many more to go.

[Marc Knaup]

Oh there’s one thing you need to keep in mind when developing with K/JS and the project grows. I see it just now again.
The build -> run cycle tends to be quite long.

[Marc Knaup]

For me approx. 1 minute from change in IDE to seeing it on the page.

[Robert Jaros]

a minute?!

[Marc Knaup]

yup

[Robert Jaros]

no way 😆

[Peter Ertl]

a darn … that’s insane

[Marc Knaup]

I had to turn off incremental compilation due to compiler bugs.

[Marc Knaup]

Should be fixed in 1.5.

https://youtrack.jetbrains.com/issue/KT-44718

[Peter Ertl]

you just made me reconsider my decision 😛 I really don’t want to wait for 1min

[Peter Ertl]

I can’t compile my current jvm code with the new IR

[Peter Ertl]

compiler bails out with an error dumping a huge AST diagnostic context

[Marc Knaup]

Report it in #jvm-ir-backend-feedback 🙂

[Marc Knaup]

And YouTrack

[Peter Ertl]

I still need to figure out how since I can’t share the company code publicly

[Marc Knaup]

maybe it’s already reported? find a similar ticket

[Peter Ertl]

I am in no hurry … just mentioning it since legacy works fine so far … but I try to find a way to contribute

[Marc Knaup]

I’ve moved all my libraries and projects to JVM/IR. There were a few issues but most easy to work around.

[Peter Ertl]

is there a noticeable speedup for k/jvm?

[Marc Knaup]

I’ve never measured. And I didn’t notice anything in day-to-day life.
My MacBook’s performance is inconsistent anyway ¯\_(ツ)_/¯

[Robert Jaros]

@Marc Knaup how big is your Kotlin/JS app (files/lines of code)?

[Marc Knaup]

ugh. Is there a plugin to measure that for me?

[Robert Jaros]

cloc command line perhaps?

[Robert Jaros]

I've got this on linux

[Marc Knaup]

I’ll try the MetricsReloaded plugin

[Marc Knaup]

image.png

[Robert Jaros]

Is this for Kotlin/JS only?

[Marc Knaup]

K/JS and the multiplatform modules it uses

[Marc Knaup]

Back-end is in the same ballpark.

[Robert Jaros]

It's larger than my. But still for my 6K lines project I wait about 3 seconds with legacy and about 10 seconds with IR till browser refresh.

[Marc Knaup]

With incremental builds disabled?

[Robert Jaros]

no

[Robert Jaros]

I'll test

[Marc Knaup]

kotlin.incremental.js.klib  = false

[Marc Knaup]

Not sure if that works for you though

[Marc Knaup]

I have a multi-module K/JS setup with -Xir-per-module

[Marc Knaup]

It compiles and links very differently

[Robert Jaros]

I've tested with kotlin.incremental.js=false but it didn't make any significant difference (at least with IR).

[Marc Knaup]

Maybe you do need the .klib at the end?

[Marc Knaup]

Haha, me trying to compile without `-Xir-per-module`:

e: java.lang.OutOfMemoryError: Java heap space: failed reallocation of scalar replaced objects

[Marc Knaup]

I have to live with the compile time for now ¯\_(ツ)_/¯

[Marc Knaup]

I hope 1.5 comes soooon

[Peter Ertl]

time will be working in your favor

[Marc Knaup]

exactly

[Peter Ertl]

o yes, pls god, give us 1.5 stable - soon

[Marc Knaup]

I’m investing in [and betting on] the future of Kotlin 😛

[Peter Ertl]

it’s the way to go

[Peter Ertl]

it’s sad that scala did not make it … i really like the more functional approach but that’s about everything that scala has to offer for me

[Peter Ertl]

when doing real work scala is no more an option for me

[Peter Ertl]

I always hated how they broke everything when switching onto another major version e.g. 2.11 -> 2.12

[Peter Ertl]

all binaries need to be rebuilt … it’s just a damn jike

[Peter Ertl]

joke

[Marc Knaup]

yeah that breaking was super annoying

[Marc Knaup]

I’ve used so many different languages by now.
Kotlin was the first that just feels right. Like, the right balance between things.

[Peter Ertl]

scala had a lot of potential .. kotlin just did it right

[Peter Ertl]

I first found it awkward they did not encapsulate null with an option monad .. but now I really like the nullable approach

[Peter Ertl]

jetbrains just cares about people and their work

[Marc Knaup]

Yeah and the team is super approachable

[Peter Ertl]

they are the only company that I love to transfer money to

[Marc Knaup]

It’s so scary to hear people using Kotlin with… Eclipse…

[Peter Ertl]

oh yuk

[Peter Ertl]

same with kotlin and spring boot

[Peter Ertl]

when there’s ktor

[Robert Jaros]

kotlin.incremental.js.klib is apparently for IR. Disabling incremental compilation makes the cycle almost twice as long for me.

[Marc Knaup]

@Robert Jaros still sounds faster than it is for me

[Marc Knaup]

@Peter Ertl yeah I also don’t like Spring.
But also not really Ktor for application setup.
It’s great for HTTP but not for high-level organization of applications.

[Marc Knaup]

That’s why I’m building my own, based on ideas from Gradle and Ktor

[Robert Jaros]

I do work with quite nice machine 😉

[Marc Knaup]

Which once? 🙂

[Marc Knaup]

one*

[Peter Ertl]

indeed, web workflows are a little tough with ktor

[Marc Knaup]

No idea what that means 😅

[Peter Ertl]

I mean managing complex application logic over various web pages and components

[Marc Knaup]

Ah, that’s client-side though. I haven’t solved that either.
Only server-side.

[Peter Ertl]

me too … but I want to do it client side now and tried so many options … react, svelte, vue and others with loads of bundles and options and typescript … just sic

[Peter Ertl]

k

[Peter Ertl]

they all suffer one way or another

[Peter Ertl]

none of them is a perfect fit for me

[Peter Ertl]

so I tried kotlin/js

[Marc Knaup]

I love the approach of React.
Just DI & organizing data loading is hell.

[Peter Ertl]

svelte is just great but the typescript plugin in IDEA is not fully functional and I just can’t get my head around using vscode 😞

[Marc Knaup]

I’m really looking forward for React Suspense and hope that Compose will have a similar feature based on coroutines.

[Peter Ertl]

that is my favorite client side stack : https://www.snowpack.dev/tutorials/svelte

[Marc Knaup]

I’ve coded a lot with TS in IDEA 🤔
Rarely had issues

[Peter Ertl]

but they are not fully ready for prime time

[Peter Ertl]

though very close

[Peter Ertl]

Bildschirmfoto 2021-03-17 um 18.59.04.png

[Peter Ertl]

it’s good but for typescript there are still some issues

[Peter Ertl]

they do NOT use a shadow dom which is an advantage

[Robert Jaros]

@Marc Knaup I work with Lenovo ThinkPad Gen2 (i7-9750H/32GB) and it feels really comfortable (I still work with legacy compiler during development because I like 3 seconds even more then 10 😉)

[Marc Knaup]

Yeah when it comes to not using virtual DOM I just wait for Compose.

[Marc Knaup]

I have i9 32GB MacBook Pro from 2018 🤔

[Marc Knaup]

Yeah I cannot use legacy.
Nor incremental builds.
Such a pity.

[Peter Ertl]

here’s a good talk about svelte - doing async data loading is a no-brainer with it:

https://www.youtube.com/watch?v=BzX4aTRPzno▾

[Peter Ertl]

using svelte with ktor server side would be a good match

[Peter Ertl]

I auto-generated typescript interfaces of my data classes so writing rpc requests is completely typesafe

[Robert Jaros]

I would like someone to create svelte for Kotlin 🙂

[Robert Jaros]

They say it's just a compiler. It should be possible to make something like that for Kotlin.

[Marc Knaup]

Why spend time on that with Compose on the horizon though?

[Marc Knaup]

I’d prefer a Kotlin-first solution.

[Robert Jaros]

I'm talking about Kotlin-first

[Robert Jaros]

Not a binding for running svelte

[Marc Knaup]

So what’s the main benefit of Svelte over Compose?

[Robert Jaros]

but a svelte-like compiler for Kotlin

[Robert Jaros]

Isn't compose a Kotlin/JS library?

[Peter Ertl]

I also prefer a kotlin-only solution but svelte would be like my second best choice

[Marc Knaup]

Compose is the basis of the new Android UI framework.
And because it’s so reusable and Kotlin-only it’s basically multiplatform, leading to Compose Web.

[Marc Knaup]

And Compose Desktop

[Robert Jaros]

But it still produces Kotlin/JS output, with all Kotlin stdlib overhead and so on.

[Marc Knaup]

Not once Kotlin/WebAssembly is ready :)

[Robert Jaros]

I'm not sure how svelte really works, but I've read it's a compiler that takes some svelte JS code and generates other JS code.

[Marc Knaup]

So basically like React, Angular and Vue? 🤔

[Robert Jaros]

I thing it could just take svelte kotlin code and do the same ;-)

[Robert Jaros]

Not like React. It works at compile time and not at runtime.

[Marc Knaup]

I’m not sure what you mean. Neither framework compiles anything at runtime

[Robert Jaros]

React doesn't compile. Svelte does.

[Robert Jaros]

With React (or others) the JS code you write is just executed. With svelte your code is compiled.

[Marc Knaup]

Well the Babel do the compilation for React.
<div> etc. to ["div", …]

[Robert Jaros]

I'm not svelte advocate nor user so I'm out of arguments 😉

[Marc Knaup]

I just don’t get the difference yet 😅

[Robert Jaros]

https://svelte.dev/repl/hello-world?version=3.35.0

[Robert Jaros]

look at the JS Output tab

[Marc Knaup]

I don’t know what the output if the other frameworks so I cannot compare. But looks nice.

[Hampus Londögård]

I can’t see it mentioned, but I’d recommend taking a look at #fritz2 - it’s pretty darn awesome!

[ESchouten]

Basically, with svelte you don't program in JS but in a custom language which looks like JS with extra features, which in it's turn transpiles to JS

[ESchouten]

Someone has been trying to make it work: https://discuss.kotlinlang.org/t/using-kotlin-js-compiler-in-svelte-compiler/19808/3