Hi everyone. I’m trying to broaden my criminally-backend-only horizons by going into fullstack a bit and I’m having trouble “getting it”.  I made a rudimentary MPP fullstack app with the template IDEA generates (ktor+react), but there’s a lot I want, but don’t know where to even begin searching for answers: 1. How to improve development experience - the template is gradle based, which is great when you want everything packaged into a neat archive or demo everything with a button, but is clumsy as hell for development (any change requires a gradle re-run, which takes forever). I found “something” here: https://github.com/JetBrains/create-react-kotlin-app , but it’s just another black box full of mysteries, so maybe I’d need a tutorial on how and why, then something to help me figure out how to get this into an existing MPP 2. Improving how my app looks - the answer is “styling”, but I’m so inept at this, I feel like I need someone to show me the whole design-to-implementation process of getting a “pretty” UI. I have a bunch of labels and input fields, but don’t know how to even begin putting together a design to make it not-crappy 3. Internal workings are voodoo - having a solid JVM background, despite knowing just maven, getting to understand how gradle builds everything and how the application gets executed on the backend wasn’t a problem. The JS side is a complete mystery, however. There’s a ton of libraries for JS - react I somewhat get, now that I’ve fiddled with it - but there’s a lot of other things as well, webpack being the most noticable to me. I’d elaborate, maybe, but really don’t even know how, yet. does anyone know of a “how the pros do FE dev and why” guide somewhere? Clearly whole books could be (and probably have been) written on these topics, so I don’t expect anyone to give me an in-depth tutorial right here. I would greatly appreciate a few pointers, maybe links to up-to-date tutorials (seriously, I have a feeling there’s a new JS framework+build system+dependency management every 3-4 months). tl;dr: this is lame, I know, but “how do I frontend developer?”

You can look at KVision (https://github.com/rjaros/kvision). It gives you a lot of features out of the box, including fullstack interfaces for different jvm backends. There are a lot of examples and also a comprehensive guide available.

Have you tried React? I’ve experience developing UI’s in Angular and React. There seems like good support for React and Angular in Kotlin. Here is a lab where a web application is build with React and Kotlin which implements some UI components and would be a good place to start. https://play.kotlinlang.org/hands-on/overview

@Robert Jaros it does, which is a part of the problem for me 😞. Thanks for the kvision suggestion, I’ll check it out, at the very least the quickstart template with “instant” code reload. @Saul Wiggin yes, as I said i have a running fullstack ktor+react app. improving it and working on it is the problem. I’ll click around the hands-ons, they were helpful getting me to this point, but I admit, I mostly just checked out one of them.

OK. If I understand your problem is developing with the create react kotlin app template. Your first issue is the development environment and coming from a backend view you would not be aware of the simple and many delights of npm start which runs the front end like an engine. When it comes to styling there is a css file App.css which can be used to style your html. Whatever you do, don’t touch webpack unless you want a serious error.

yes, exactly 🙂 haha serious injury. i’ll take that advice … into consideration.

generally take into consideration that as far as I know

create-react-kotlin-app

is deprecated

okay. deprecation aside, it’s main use to me is as an example of getting a dev environment where i get FE code reload without an expensive gradle re-run.

@Not Me Serious error might have been a better choice of words. npm start does provide a way to get the fast reload.

you can have hot reload with gradle plugin as well, you just run the project with

-t

option

There are a list of examples here: https://github.com/JetBrains/kotlin-wrappers

The IDEA template uses the wrappers, yes. I guess understanding npm is going to be a necessity. Oh, didn’t know about the

-t

. Useful, thanks.

@Not Me I started with this: https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction it will tell you how to get started with react for kotlin. But to address your points: 1. look how to configure continous builds (usually

jsBrowserDevelopmentRun --continuous

) because then when you have code changes, on changing screens/hitting control+s it will rebuild and redeploy the app by magic. You can also configure this for Ktor servers somehow 2. I started with the kotlin material ui wrapper, https://github.com/subroh0508/kotlin-material-ui which is awesome. I am a total noob but got it to run, it will give you a lot of things out of the box from this: https://material-ui.com/ which is a leading react material UI toolkit 3. perhaps ask the question in the #javascript channel. Kotlin (with the old compiler) basically transpiles kotlin code into Javascript code. With the new IR compiler it will do more magic and can make more optimizations before turning it into javascript code, but it is in alpha. I think webpack is just a way of bundling your app, including your dependencies so you don't have to worry about it. On the javascript page its written how you can (relatively easily) interact with javascript libraries. I think there are relatively few pros who do kotlin javascript, but there is a big potential here

Thanks for the great answer @Joost Klitsie. This is exactly what I was looking for.