An introduction to KVision

#kotlin #framework #webdev #kvision

KVision is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

It's a relatively new project (first version was published a year ago), but it's probably the most comprehensive and full-featured Kotlin framework targeting the frontend.

Certainly many of you wonder why anyone would like to work with frontend in Kotlin, since there are so many great tools and frameworks for JavaScript or TypeScript. You can read:

Kotlin for JS Devs (Part 1)

Cássio Souza ・ Feb 25 '19 ・ 9 min read

#javascript #kotlin #android

article by Cássio Souza to find a lot of different reasons. I fully agree with them all.

Why did I create a new framework?

I missed times when the user interface was built from objects. Not from files, templates or sheets, but with a hierarchy of reusable and extendable components. We don't do this in web development since the first HTML page was created, even though the whole world outside is doing just that for ages. Turbo Vision, OWL, VCL, MFC, WinForms, QT, AWT, Swing, JavaFX or even the fresh born Flutter - these are just a few examples from the history of OOP UI development. KVision follows that path - it's an object-oriented framework created for the fully object-oriented programming language.

Noteworthy features

What KVision has to offer?

100% type safe and fully compiled working environment.
Type safe DSL builders.
Based on Bootstrap styles, typography and components.
Utilizes Snabbdom fast virtual DOM implementation.
Integrates with libraries and components from Font awesome, Bootstrap Select (with AJAX extension), Awesome Bootstrap Checkbox, Trix editor, Bootstrap Datetime picker, Bootstrap touchspin, Bootstrap File Input, Handlebars, Chart.js and Navigo.
Includes sophisticated layout containers, including CSS flexbox, CSS grid and Bootstrap responsive 12 columns grid.
Includes convenient forms implementation, with support for many different input components and easy to use validation.
Data binding support for observable data model.
Internationalization support based on Jed library and gettext translations.
Easy to use Drag & Drop.
Type-safe REST connectivity.
Innovative integration interface for Ktor, Jooby and Spring Boot frameworks on the server side.
Support for building cross-platform, desktop applications with Electron.

One language to rule them all

You write applications in KVision with the Kotlin language only. There is no need for CSS, HTML or JavaScript. This paradigm is gaining popularity. You can find similar efforts in the Scala, Dart or Go language communities. But in my opinion you will not find anything so developer friendly and consistent as KVision. And working with Kotlin is really fast, efficient and fun!

Hello World!

What would be the introduction without the "Hello World!" example. So here you have ;-)

div {
    +"Hello World!"
}

Of course it's just a snippet. You will find more examples at the KVision GitHub page and in the kvision-examples repository. You can also look at the comprehensive KVision guide.

If you like the idea - just play with the code, fork the project, fill an issue or create a pull request. And I plan to write more articles about KVision for Dev.to anytime soon!