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 and Spring Boot frameworks on the server side, which allows to build full-stack, multiplatform 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:

  • Font awesome
  • Bootstrap Select (with AJAX extension)
  • Awesome Bootstrap Checkbox
  • Trix editor
  • Bootstrap Datetime picker
  • Bootstrap touchspin
  • Bootstrap File Input
  • Handlebars
  • Chart.js
  • Tabulator
  • Redux
  • ReduxKotlin
  • Navigo
  • Moment.js
  • Pace

• 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 an observer pattern for data bindings.
• Internationalization support based on Jed library and gettext translations.
• Easy to use Drag & Drop support.
• Type-safe REST connectivity.
• Innovative integration interface for Ktor, Jooby and Spring Boot 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).
• 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.

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 looking for the guide for KVision 1.x (based on Bootstrap 3), you can find it 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 -Pprod=true zip                       (on Linux)
    gradlew.bat -Pprod=true 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 = this@FormPanel.getData()
                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()