KVision

Object oriented web framework for Kotlin/JS.

KVision allows you to build modern web applications with the Kotlin language, without any use of HTML, CSS or JavaScript.

KVision prefers the imperative style of programming. It's object oriented and supports many well known OOP design patterns. It gives you a hierarchy of many different components, which are used as a builder blocks for the application GUI.

KVision's design is quite similar to many non-web UI programming libraries including Swing, JavaFX, QT, WinForms and Flutter.

KVision contains innovative connectivity interface for Ktor, Jooby, Spring Boot, Javalin, Vert.x and Micronaut frameworks on the server side, which allows to build fullstack applications with shared common code.

KVision is being actively developed. Please create an issue for any bugs or feature requests.

Features

• 100% type safe and fully compiled dev environment.

• Type safe DSL builders.

• Based on Bootstrap styles, typography and components.

• Utilizes Snabbdom fast virtual DOM implementation.

• Integrates with a lot of libraries and components:

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

• Supports React components with KVision DSL and built-in state management.

• Full support for Onsen UI mobile web components with type-safe Kotlin API and DSL builders.

• Supports an observer pattern for data bindings.

• Internationalization support based on gettext translations and gettext.js library.

• Easy to use Drag & Drop support.

• Support for jQuery animations and effects.

• Type-safe REST connectivity.

• Support for event Flows and StateFlow for observables.

• Innovative integration interface for Ktor, Jooby, Spring Boot, Javalin, Vert.x and Micronaut frameworks on the server side, including support for type-safe websockets connections.

• Support for building hybrid mobile applications with Apache Cordova.

• Support for building cross-platform, desktop applications with Electron.

• KVision applications are built with Gradle with support for Webpack's Hot Module Replacement (HMR) and Kotlin JavaScript DCE (dead code elimination). Kotlin compiler plugin for Gradle is available to automatically generate boilerplate code for server-side interfaces.

• Karma testing framework support.

• IDE support (IntelliJ IDEA Community Edition).

Examples and documentation

Ready to explore, rich set of KVision examples is available in the separate project.

See also the complete frontend implementation of RealWorld example application and a fullstack version built with Spring Webflux and R2DBC.

The comprehensive KVision guide is published on GitBook.

Full API documentation (KDoc) is available at https://rjaros.github.io/kvision/api/.

You can also look at KVision blog posts at dev.to and you can talk with KVision developers on Kotlin Slack #kvision channel.

If you are interested in the documentation for KVision 1.x (based on Bootstrap 3), you can find the guide here and the API docs here.

Quickstart

Development

1. Download KVision examples from GitHub:

    git clone https://github.com/rjaros/kvision-examples.git
   

2. Enter one of the examples directory:

    cd kvision-examples/showcase                        (on Linux)
    cd kvision-examples\showcase                        (on Windows)
   

3. Run Gradle incremental build with:

    ./gradlew -t run                                    (on Linux)
    gradlew.bat -t run                                  (on Windows)
   

4. Open http://localhost:3000/ in your browser.

5. Play with the code and see your changes immediately in the browser.

Production

To build complete application optimized for production run:

    ./gradlew zip                       (on Linux)
    gradlew.bat zip                     (on Windows)

Application package will be saved as build/libs/showcase-1.0.0-SNAPSHOT.zip.

Code samples

Hello world

        root("root") {
            span("Hello world!")
        }

Basic components interactions using type safe DSL builders

        root("root") {
            hPanel(spacing = 20, alignItems = FlexAlignItems.CENTER) {
                val label = span("Not yet clicked.")
                var count = 0
                button("Click me").onClick {
                    label.content = "You clicked the button ${++count} times."
                }
            }
        }

Tab panel with JavaScript routing

        val firstPanel = Div("First")
        val secondPanel = Div("Second")
        val thirdPanel = Div("Third")

        root("root") {
            tabPanel {
                addTab("First", firstPanel, route = "/first")
                addTab("Second", secondPanel, route = "/second")
                addTab("Third", thirdPanel, route = "/third")
            }
        }

Type safe forms

        @Serializable
        data class Model(val username: String? = null, val password: String? = null)

        root("root") {
            formPanel {
                add(Model::username, Text(label = "Username"), required = true)
                add(Model::password, Password(label = "Password"), required = true)
                add(Button("OK").onClick {
                    val data: Model = [email protected]()
                    println("Username: ${data.username}")
                    println("Password: ${data.password}")
                })
            }
        }

Observer design pattern

        data class Data(val text: String)
        
        val model = observableListOf(
            Data("One"),
            Data("Two"),
            Data("Three")
        )
        root("root") {
            dataContainer(model, { data, _, _ ->
                Span(data.text)
            }, HPanel(spacing = 10))
        }
        model.reverse()