Build modern web apps in 100% Java is the tagline often used for Vaadin Flow. By changing the language, this could actually apply to Kotlin as well, known for its Kotlin-to-JavaScript transpilation.
Kotlin code can be transpiled to JavaScript for execution in the browser, so one could argue that no extra libraries are needed to build web apps in 100% Kotlin. But Vaadin Flow offers a totally different kind of solution to utilize your Kotlin skills for web development.
The main point of Vaadin Flow is not necessarily the single language itself (which can be Java or Kotlin), but the single stable and secure execution environment, the JVM server, and the abstraction layer that effectively allows you to forget all the browser quirks, HTML and DOM. Thus, Vaadin Flow can be an excellent piece of equipment for a Kotlin developer to have in their toolbox. In addition to 100% Kotlin, you’ll also get a large selection of smart UI components and direct access to anything you already have running on JVM.
Here is a trivial form example, pushing new Person objects to the database with Spring Data JPA:
@Route
internal class PersonForm(repo: PersonRepository) : VerticalLayout() {
init {
val header = H1("Save a new person to the database")
val nameField = TextField("Name")
nameField.minLength = 4
val ageField = IntegerField("Age")
val saveBtn = Button("Save person") {
val person = Person(nameField.value, ageField.value)
repo.save(person)
Notification.show("${person.name} saved!")
}
add(header, nameField, ageField, saveBtn)
}
}
There have been avid Kotlin users in the Vaadin community for pretty much the whole history of Kotlin, as well as libraries to better utilize Kotlin language features with Vaadin.
Nicolas Fränkel started his Vaadin-7-based Kaadin library almost a decade ago. For the latest Vaadin 24, Karibu-DSL (with Martin Vysny as the lead developer) has become the de facto Kotlin helper for Vaadin developers. With its API enhancements, you don’t need to save references to components in order to configure them further, making the component structure more compact and readable, especially in larger and more complex UIs.
Here is an example code snippet expressing the same Vaadin view as the previous one with the help of the Karibu-DSL:
@Route
internal class PersonFormWithKaribu(repo: PersonRepository) : KComposite() {
val root = ui {
verticalLayout {
h1("Save a new person to the database")
val nameField = textField("Name") { minLength = 4 }
val ageField = integerField("Age")
button("Save person") {
onLeftClick {
val person = Person(nameField.value, ageField.value)
repo.save(person)
Notification.show("${person.name} saved!")
}
}
}
}
}
So, if you happen to be a backend developer on Kotlin and Spring Boot, or an Android developer, and need to jump on the web UI side, remember to check out Vaadin Flow. It could change the way you think about web development! Last week, we had a quick introduction to Vaadin on the Kotlin YouTube channel – watch it below!
New to Vaadin Flow? Get started by trying our Quick Start tutorial, where you'll build a small yet fully functional ToDo application.