Hi everyone. I’m trying to broaden my criminally-b...

# getting-started

[Not Me]

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?”

[Robert Jaros]

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.

[Robert Jaros]

Gradle Kotlin/JS plugin uses internally a lot of JS tools (including webpack), but it hides the complexity of JS build ecosystem. If you have a good starting template, you can just use it and forget about the technical details.

[Saul Wiggin]

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

[Not Me]

@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.

[Saul Wiggin]

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.

[Not Me]

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

[Robert Jaros]

generally take into consideration that as far as I know create-react-kotlin-app is deprecated

[Robert Jaros]

currently Gradle is the main tool for building Kotlin/JS projects

[Not Me]

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.

[Saul Wiggin]

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

[Saul Wiggin]

There is a React wrapper for Kotlin projects if create-react-kotlin-app is deprecated

[Robert Jaros]

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

[Saul Wiggin]

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

[Not Me]

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.

[Joost Klitsie]

@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

[Not Me]

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