simwagner/kvision

Object oriented web framework for Kotlin/JS

KVision

Object oriented web framework for Kotlin/JS.

https://kvision.io

KVision allows you to build modern web applications with the Kotlin language, without any use of HTML, CSS or JavaScript. It gives you a rich hierarchy of ready to use GUI components, which can be used as builder blocks for the application UI.

KVision fully supports both reactive and imperative programming models. It gives you everything you may need for the state management of your apps.

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 code for data model and business logic.

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

Sample code

class App : Application() {

    val state = ObservableValue("Hello world")

    override fun start() {
        root("root") {
            vPanel {
                h1(state) {
                    +it
                }
                button("Add an exclamation mark").onClick {
                    state.value += "!"
                }
            }
        }
    }
}

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
  • Tom Select
  • Trix editor
  • Tempus Dominus datetime picker
  • Bootstrap File Input
  • Handlebars
  • Chart.js
  • Tabulator
  • Redux
  • ReduxKotlin
  • Ballast
  • Navigo
  • Pace
  • Leaflet
  • Toastify JS
  • Print.js
  • Imask.js

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

• Support for observer pattern, data binding, event Flows and StateFlow for observables.

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

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

• Dark mode support.

• 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). The KVision Project Wizard is being developed as a separate project (thanks to @JakubNeukirch).

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.

The API documentation, generated with new Dokka, is available at https://rjaros.github.io/kvision/index.html.

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

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.

Leave us a star

If you like this project, please give it a star on GitHub. Thank you!