So, I hacked up a quick front end application usin...

# javascript

[Cru]

So, I hacked up a quick front end application using kotlin/js. Writing kotlin was a lot more enjoyable than the atrocity that is javascript. My main focus as a developer is backend development using kotlin/jvm + spring. But, Now I am considering to actually write some front end apps using Kotlin/JS. The problem is that I am not familiar with the front-end tooling and ecosystem.
If I were to learn front-end development (properly) using kotlin/js, what tools, frameworks and technologies that should I learn (The ones that work while causing the least amount of hassle with kotlin/js) in order to be able to create production ready front-end applications?
I already know about the following
1. Webpack for packaging.
2. Yarn or NPM as depedency managers, but, I have no idea which one to learn and why. Maybe I should learn both?
3. Which tools should I use for testing? I have heard about mocha, karma and seleniom, What are the differences?
4. Any thing else that I need to consider?
5. ReactJS. I hear about it alot but, have no idea what it is supposed to do.
6. Any other tools, libraries or frameworks that I should consider.
I obviously aim to research all of that myself. But, I would appreciate the point of view of other Kotlin/JS developers as to which ones are best supported with Kotlin/JS and are most suited for an occasional front-end developer (as opposed to a dedicated one)

[Hackintoshfive]

I would also be interested in this

[Nick]

Have you taken a look at Doodle ( tutorials)?

[Hannes Korte]

I haven't tried it myself, yet. But I recently found fritz2, which looks very promising: https://www.fritz2.dev/

[Hackintoshfive]

#fritz2

[Mike Dawson]

Personally I would suggest using the "official"-ish (Jetbrains team) wrappers provided by Jetbrains. I have been using the React and MUI wrappers to create a frontend using multiplatform view models that I also use on Android.

This allows your Kotlin code to hook into the React ecosystem. I have also been able to make my own basic wrappers for a few components that didn't have them yet.

https://github.com/JetBrains/kotlin-wrappers

https://github.com/karakum-team/kotlin-mui-showcase

The concepts in Jetpack compose and React are very similar, as Jetpack compose is largely built on the ideas in React (e.g. functional react components / hooks etc).

[Tuna]

Well, it might be late but I would like to share my project using 100% Kotlin JS https://github.com/tuanchauict/MonoSketch
Except for the standard and serialization libraries, everything is built from scratch.
Except for Kotlin, everything looks similar to vanilla js.

You can try the app at https://app.monosketch.io/

[Jilles van Gurp]

Use Fritz2 or Compose web with for example tailwind css and koin. I have a hellocompose project that sets that up for compose https://github.com/jillesvangurp/hellocompose

And another one implementing a little search UI that uses friz2: https://github.com/formation-res/kt-fullstack-demo

kotlin-js uses webpack under the hood so it is easy to plug stuff into that. Both projects use that to set up tailwind css.

Using dependency injection is nice and the latest koin announced at kotlinconf a few weeks ago adds a lot of convenience. I've yet to update both projects for that but that shouldn't be too hard.

For reference, FORMATION, of which I am the CTO has been using Fritz2 for 2+ years now. During that time the development experience has improved massively. This stuff is now a lot more robust and easy to setup with gradle. And compiler speeds have also improved dramatically.

The main thing that's lacking in this space is mature people educating others on how to structure your web app properly. There is a lot of wheel reinvention going on in the javascript world. And some of that sadly ports over to kotlin-js as well. That's why I use koin for example because it just makes a hell of a lot of sense for the same reasons that it does on e.g. Android.

Fritz2 is at this point a bit more mature than compose web. We're looking at that currently as I really like the ability to target IOS and wasm with it in the future. But we're still pretty happy with fritz2.