KVision: Kotlin Web App Development

image

There are many ways to build a web app, some are conventional, and some are less conventional. If you want build your full stack application in Kotlin, then KVision is an interesting way to do this.

Some people don’t like Polyglot software development, and many of those standardize their software architecture on Javascript:

  • Front-End, JavaScript and friends
  • Back-End, Node.js and friends

However, some would argue that JavaScript is not the best programming language in the world, and that Node.js is not the best web-server, but at least the programming model is the same in both the front-end and the back-end.

There are many platforms for using the same language for both front-end and back-end, with Google Web Toolkit (GWT) being one of the first examples.

WebAssembly

Given the desire to do full-stack development in a common language, WebAssembly has become increasingly popular, where the web browsers execute WebAssemly byte code instead of JavaScript. Indeed, this is so popular, back-end run-times based on WebAssembly are also becoming more popular too.

Fermyon publishes a great matrix of WASM Languages.

KVision

Recently, in my personal recreational computing time, I began playing with KVision, so I thought I would share some perspective on what I have discovered.

Build Environment

Consistent with Kotlin, the Gradle build tool is used, and of course build.gradle.kts and settings.gradle.kts files are used instead of Groovy. Of course, KVision comes with useful Gradle plugins.

Developer Experience

Having struggled many times to get Scala.js to work, I found the quality and completeness of KVision a breath of fresh air. While Scala is my favorite programming language, overall the culture of the Scala community products lack in quality and completeness.

It has been too long since I used GWT to make a comparison, but I remember it was easier to get my first GWT application working than Scala.js.

While KVision seems a lot more complex than Scala.js, it is packaged so well that getting started was fairly easy. Maybe it’s more fair to say that KVision is more sophisticated than Scala.js.

Dynamic Update

Like many other web development platforms, KVision supports dynamic development, where you can make changes in code, and they are dynamically reflected in the web app. However, this seems a little more laggy than other systems I have used or studied, but not really a nuisance.

IntelliJ

KVision integrates well with IntelliJ, and the KVision plugin makes creating your first KVision application pretty easy, constructing a basic “Hello World” program.

Source Code

The plugin generated

class App : Application() { 
    override fun start() { 
        root("kvapp") { 
            div("Hello world!") 
            // TODO
        } 
    } 
}

fun main() { 
    startApplication( 
        ::App, 
        module.hot,
        BootstrapModule,
        BootstrapCssModule,
        CoreModule
     )
 }

I change this to

class SimpleApplication : Application() { 
    override fun start() { 
        root("kvapp") { 
            p("A simple text") 
            p("A text with custom CSS styling") { 
                fontFamily = "Times New Roman" 
                fontSize = 32.px 
                textDecoration = TextDecoration(TextDecorationLine.UNDERLINE, TextDecorationStyle.DOTTED, Color.name( Col.RED)) 
            } 
            tag(TAG.CODE, "Some text written in <code></code> HTML tag.") 
        } 
    } 
}

fun main() { 
    startApplication( 
        ::SimpleApplication, 
        module.hot,
        BootstrapModule,
        BootstrapCssModule,
        CoreModule
     )
 }

producing


Screenshot 2023-06-07 at 7.09.39 PM


The page HTML looks like

<!DOCTYPE html> 
<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KVision Template</title> 
    <script type="text/javascript" src="main.bundle.js"></script>
  </head>
  <body>
    <div id="kvapp">
    </div> 
  </body>
</html> 

where the Kotlin source code is compiled to JavaScript and put in the main.bundle.js file. In the near future, this will contain embedded WASM, or full WASM.

For an example of all the web elements you can use, see the KVision Showcase.

Conclusions

If you are making architectural decisions to evaluate new full-stack development platforms, it is worth looking at KVision.

  • Compared to Scala, Kotlin has 80% of the functionality, with only 20% of the features
  • Kotlin integrates very well with Gradle, reducing the polyglot load
  • As a static language, Kotlin is easier to write correct code as compared to JavaScript
  • KVision supports a number of different back-end products, but should be easy to work with any back-end product.
  • The product/project quality is high, setting some good examples to follow in
    • Software Development
    • Product Documentation
2 Likes