vok

Writing full-stack statically-typed web apps on JVM at its simplest

This project is maintained by mvysny

Index Getting Started Guides

VoK Logo

Vaadin-on-Kotlin (or VoK for short) is a web-application framework that includes everything necessary to create database-backed web applications in server-side Kotlin.

This is all you need to have a button on a page which, upon clicking, creates new row in your SQL database:

button("Create") {
  onLeftClick { Person(name = "Albert Einstein").save() }
}

Everything is a component

Need a button? Write button {}. Need a text field? Write textField {}.

Build own components and views by composing existing components with layouts.

Navigate to components by marking them with a @Route("path") (for Vaadin 10+ based apps) or @AutoView("path") (for Vaadin 8-based apps) annotation.

Simplicity

No JavaEE nor Spring is needed; all complex features are deliberately left out, which makes Vaadin-on-Kotlin a perfect starting point for beginning programmers: you will write only server-side Kotlin code. JavaScript and CSS are needed only if you decide to style up your application or write your own custom rich component.

Note that VoK is not just another REST library, or HTTP route mapping library. On the contrary: it is built on Vaadin which provides you with a wide palette of built-in powerful components: lazy paged tables, color pickers, menu components, sliders. All components have two parts:

The components use Vaadin to handle the communication between the client-side front and server-side part; for example, the component Grid is basically a scrollable table which shows tabular data The client-side front of the Grid component fetches the tabular data from the server-side part of the Grid component. Grid configures Vaadin to pass the data properly from server-side Grid part to the client-side Grid front. To you as programmer, this process is completely transparent: you develop your webapp using the server-side component API only, in pure server-side Kotlin code; the components then handle client-server communication (see example demo; just press the “Generate test data” button at the top to get some data).

Thanks to this approach, VoK feels more like a desktop widget library (such as Swing or JavaFX) than a web page-based framework.

Tutorial

To get started with Vaadin-on-Kotlin, start here. To find out more, please visit the following pages:

The tutorial comes in two versions, for Vaadin 8 and for Vaadin 10.

Vaadin 8-based Quick Starters

Vaadin 8 is a mature and proven web framework. If you need production-grade stability, start here.

Every VoK project tends to have several files (database migrations, Gradle build script, themes, logger configuration etc) and our project will be no exception. Therefore, it makes sense to have an archetype app with all of those files already provided.

UI Base
A project with one view and no db; perfect for your UI experiments
Component Palette
App which demoes all Vaadin components and the Navigator; no db
VoK Project Base
Skeletal app with support for SQL db; start building your app here
VoK Full Stack
Full-stack with db and a db table editor; a good source of code examples

Vaadin 10-based Quick Starters

Vaadin 10+ components are based on the Web Components standard; Vaadin 10-based apps are also themable more easily than Vaadin 8-based apps.

Every VoK project tends to have several files (database migrations, Gradle build script, themes, logger configuration etc) and our project will be no exception. Therefore, it makes sense to have an archetype app with all of those files already provided.

UI Base
A project with one view and no db; perfect for your UI experiments
VoK Project Base
Skeletal app with support for SQL db; start building your app here
Full Stack App
The "Beverage Buddy" app backed by SQL db; demoes two tables
Full Stack App
The "Bookstore" app backed by SQL db; also demoes security
Full Stack PWA
Full-stack task list app backed by SQL db; for desktop and mobile browsers

Further Reading

For technical description of what Vaadin-on-Kotlin is, please feel free to read the Vaadin-on-Kotlin Github page.

Vaadin-on-Kotlin apps are typically three-tiered:

Vaadin-on-Kotlin apps typically consist of several pieces. To learn more about a particular piece, just click the box below:

Karibu-DSL
Write your UI in structured Kotlin code
VoK-ORM
Unleash your database, with a sprinkle of Kotlin magic
Karibu-Testing
Test your UI with speed and reliability
Vaadin
The Productive UI Framework for Java Web Apps
DynaTest
Create and reuse test batteries in a sane way
Async
Sane async code with coroutines

Complete List Of Examples

The following is a complete list of all example projects demonstrating vok or its parts, in alphabetical order:

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License