What would people here say about the performance o...

# javascript

[Daniele B]

What would people here say about the performance of Kotlin/React?
In my case, on desktop it feels ok, but on mobile it feels a bit too slow.
I am using the standard compiler, as I have issues compiling with the IR compiler.
The filesize is about 2.8MB, which is not very little. I read that with IR compiler the performance is supposed to improve.
What is your current feeling about Kotlin/React? Are you using it for production projects? Are you waiting for better performance?

[Big Chungus]

Performance should be comparable with React/JS. When it comes with bundle sizes, kotlin's will always be bigger due to DCE still not being perfect and it bringing some of its own language structs

[Jorrit]

My experience with the IR compiler is that everything is slower

[Big Chungus]

Don't use IR in production 😄 It's still in early preview and some things are not working/compiling still. e.g. I couldn't compile my react project with IR due to css imports

[Daniele B]

@Big Chungus are you using Ktor and coroutines on your Kotlin/React project?

[Daniele B]

and what about StateFlow?

[Big Chungus]

Just react with ktor-client. But as I said, it fails on css import

[Daniele B]

does it also fail with the standard compiler?
if you use Ktor, I think you are calling it from a coroutine/suspend function?

[Daniele B]

I am using StateFlow in my Kotlin/React app, to pass the state. It works, but I am not sure my usage of StateFlow is optimized. I just opened a ticket asking JetBrains what is the suggested way:

[Daniele B]

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

[Big Chungus]

No and yes 😄 No, it doesn't fail with legacy compiler, yes I'm calling ktor from coroutines

[Big Chungus]

Not familiar with StateFlow, why don't you use https://github.com/reduxkotlin/redux-kotlin? It has full MPP support for ALL targets (unlike some of the other "MPP" libs :D)

[Daniele B]

I am trying to stick to Kotlin’s standard library. I think they are really promoting StateFlow as the way to pass the state within an app.

[Big Chungus]

To each its own, i guess 🙂

[Harald Pehl]

I can recommend fritz2: https://www.fritz2.dev/
It's a React like framework written in pure Kotlin.

[Daniele B]

@Harald Pehl sounds like a great idea! how big is a compiled js file for typical small project?

[Daniele B]

did you benchmark with a React/Native app, in terms of filesize and performance?

[Daniele B]

I have seen also this Kotlin web framework called Kvision:
https://kvision.gitbook.io/kvision-guide/
How does fritz2 compares to it?

[Harald Pehl]

@Daniele B Sorry I don't have numbers / benchmarks atm, but since fritz2 is tiny, I guess it doesn't add too much overhead.

I took a look at Kvision, but I like the minimal approach of friitz2 compared to the all-in-one approach of Kvision.

Fritz2 is focused about reactive, stores and actrions. It does not much, but does it well.

[Harald Pehl]

Atm I'm porting PatternFly to Kotlin/JS based on fritz2: https://patternfly-kotlin.github.io/patternfly-fritz2-showcase/#home

[Daniele B]

@Harald Pehl
I am definitely interested in Kotlin web frameworks, as I don’t feel Kotlin/React adds much value in a Kotlin MultiPlatform project, where you are processing your ViewModel in the shared code.
I would need a Kotlin web framework that is able to:
1) collect a StateFlow emitted by the KMP shared ViewModel
2) create HTML components using Kotlin’s HTML/CSS DSL language
3) use a variety of already made web components
4) react to ViewModel state changes quickly
5) compile to a small JS filesize

[Daniele B]

does fritz2 have all 5?

[Harald Pehl]

I'm pretty new to Kotlin and KMP, but I know that you can use anything you like in fritz2 stores. So I guess should be possible to combine fritz2 stores with StateFlow / ViewModel. So that's a yes for 1) and 4)
2) fritz2 comes with its own HTML DSL with a CSS DSL in the pipeline.
3) I know there's support for web components, but have never tried it
5) As said I didn't do benchmarking yet.
HTH

[Daniele B]

ok, I just realized that Kotlin’s HTML/CSS DSL is actually part of Kotlin/React. I thought it was standalone, but I am happy that fritz has its own implementation of that, which I guess uses the same API.

[Daniele B]

@Harald Pehl are you using Ktor for network calls or are you wrapping JS Fetch?

[Harald Pehl]

Right now I'm using a small layer on top of fetch provided by fritz2.

[Daniele B]

so Fritz2 has got its own http client?

[Harald Pehl]

I thought about using Ktor, but that would add another dependency.

[Harald Pehl]

Kind of. It's only some convenience functions around JS Fetch API: https://docs.fritz2.dev/RemoteCalls.html

[Daniele B]

I working at a multiplatform project (Android/iOS/Web), so if I don’t want to use Ktor, I need to write my own multiplatform library, I guess.

[Daniele B]

By the way, it would be really useful to know what is the compiled size of the project you are working on. It would help to make me understand what is a typical size using fritz2 without ktor.

[Harald Pehl]

The JS size for https://patternfly-kotlin.github.io/patternfly-fritz2-showcase/#home is about 3.3M

[Harald Pehl]

But it contains lots of static strings (the code snippets)

[Daniele B]

ok, I see, thanks!

[Daniele B]

but I guess they are not more than 100K?

[Daniele B]

the filesize is still quite big then, but I guess it depends on the Kotlin standard library size

[Daniele B]

there is no much you can do, I guess

[Daniele B]

When the new IR compiler arrives, hopefully the filesize could be a lot smaller

[Harald Pehl]

Yes 3.3M is huge for just around 6K loc. But I have a few deps:

dependencies {
    implementation( "org.jetbrains:kotlin-extensions:1.0.1-pre.112-kotlin-1.4.0")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.0.0-RC")
    implementation("dev.fritz2:core:0.8-SNAPSHOT")
    implementation("org.patternfly:patternfly-fritz2:0.1-SNAPSHOT")
    implementation(npm("@patternfly/patternfly", "4.31.6"))
    implementation(npm("clipboard", "2.0.6"))
    implementation(npm("highlight.js", "10.1.1"))
    implementation(devNpm("file-loader", "6.0.0"))
}

[Daniele B]

OK, I see, thanks!

[Big Chungus]

ok, I just realized that Kotlin’s HTML/CSS DSL is actually part of Kotlin/React.

This is incorrect. it's using kotlinx-html under the hood

[Daniele B]

@Big Chungus thanks, I just verified, you are right!