Slide 1
Slide 1 text
A full stack side
project webapp
all in Kotlin
Dan Kim
@dankim.com
Slide 2
Slide 2 text
💡
An idea strikes…
Slide 3
Slide 3 text
🗣
“I’m gonna build this and share it
with my friends!”
Slide 4
Slide 4 text
🤔
How (and where) do I build this
thing?
Slide 5
Slide 5 text
🕸
The web is still the best place for
this
Slide 6
Slide 6 text
😳
Uh…how do I build a webapp in
2025?
Slide 7
Slide 7 text
HTML
CSS
JavaScript
React / Vue / Angular
Backend Logic
Database / ORM
Slide 8
Slide 8 text
😵💫
Do I really want to do all this for a
side project?
Slide 9
Slide 9 text
😭
Takes all the fun out of it
Slide 10
Slide 10 text
🏃
Momentum matters
Slide 11
Slide 11 text
🤠
But what if I told you it could all
be done with Kotlin?
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
🥞
A full stack webapp entirely in Kotlin
Slide 15
Slide 15 text
🤩
This is for a fun side project!
Slide 16
Slide 16 text
⚡
We’re going for fast and easy, not
architectural perfection
Slide 17
Slide 17 text
📀
Database:
Postgres
Slide 18
Slide 18 text
📸
ORM:
JetBrains Exposed
Slide 19
Slide 19 text
✨
UI:
Vaadin + Karibu
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
🔮
Future UI (?):
Compose Wasm
Slide 22
Slide 22 text
🔀
Async:
Kotlin Coroutines
Slide 23
Slide 23 text
🥾
Zero Con
fi
g App Server:
Vaadin Boot
Slide 24
Slide 24 text
✅
Todo app
Slide 25
Slide 25 text
List of todos
Create new
Edit / complete existing
Delete existing
Slide 26
Slide 26 text
Dependencies
Slide 27
Slide 27 text
dependencies {
// vaadin
implementation("com.vaadin:vaadin-core:24.7.2")
implementation("com.github.mvysny.vaadin-boot:vaadin-boot:13.3")
implementation("com.github.mvysny.karibudsl:karibu-dsl:2.3.2")
// exposed
implementation("org.jetbrains.exposed:exposed-core:0.61.0")
implementation("org.jetbrains.exposed:exposed-java-time:0.61.0")
implementation("org.jetbrains.exposed:exposed-jdbc:0.61.0")
// database
implementation("com.zaxxer:HikariCP:6.3.0")
implementation("org.postgresql:postgresql:42.7.5")
}
Slide 28
Slide 28 text
Database Setup
Slide 29
Slide 29 text
Exposed Models
Slide 30
Slide 30 text
object Todos : IntIdTable("todos") {
val title = varchar("title", 255).nullable()
val description = varchar("description", 255).nullable()
val dueAt = date("due_at").nullable()
val completedAt = date("completed_at").nullable()
val userId = reference("user_id", Users).nullable()
}
object Users : IntIdTable("users") {
val name = varchar("name", 255).nullable()
}
Slide 31
Slide 31 text
Data Objects
Slide 32
Slide 32 text
data class Todo(
val id: Int? = null,
val title: String? = null,
val notes: String? = null,
val dueAt: LocalDate? = null,
val completedAt: LocalDate? = null,
val user: User? = null
)
data class User(
val id: Int? = null,
val name: String? = null
)
Slide 33
Slide 33 text
val dataSource = HikariDataSource(HikariConfig().apply {
jdbcUrl = "jdbc:postgresql://localhost:5432/"
username = "password"
password = "password"
driverClassName = "org.postgresql.Driver"
})
val database = Database.connect(dataSource)
Slide 34
Slide 34 text
App Setup
Slide 35
Slide 35 text
@Theme("my-theme")
@Push(PushMode.AUTOMATIC) // websocket ui updates
class AppShell : AppShellConfigurator
Slide 36
Slide 36 text
fun main(args: Array) {
VaadinBoot().run()
}
Slide 37
Slide 37 text
UI
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Layout
Slide 41
Slide 41 text
class MainLayout : KComposite(), RouterLayout {
private val root = ui {
verticalLayout {
div { h1(“Todos") }
}
}
override fun showRouterLayoutContent(content: HasElement) {
root.add(content as Component)
}
}
Slide 42
Slide 42 text
private val root = ui {
verticalLayout {
div { h1(“Todos") }
}
}
Slide 43
Slide 43 text
Todo List
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
@Route(value = "", layout = MainLayout::class)
class TodoList : KComposite() {
private val currentUi = UI.getCurrent()
private val viewModel = TodoViewModel()
private lateinit var grid: Grid
private val root = ui {
verticalLayout {
grid = grid {
setDefaults()
column({ it.title }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
}
init {
configObservers()
viewModel.fetchAll()
}
private fun configObservers() {
viewModel.todos.observe {
currentUi.accessSynchronously {
grid.setItems(it)
}
}
}
}
}
Slide 46
Slide 46 text
@Route(value = "", layout = MainLayout::class)
class TodoList : KComposite()
}
Slide 47
Slide 47 text
@Route(value = "", layout = MainLayout::class)
class TodoList : KComposite() {
private val currentUi = UI.getCurrent()
private val viewModel = TodoViewModel()
private lateinit var grid: Grid
private val root = ui {
verticalLayout {
grid = grid {
setDefaults()
column({ it.title }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
}
init {
configObservers()
viewModel.fetchAll()
}
private fun configObservers() {
viewModel.todos.observe {
currentUi.accessSynchronously {
grid.setItems(it)
}
}
}
}
}
Slide 48
Slide 48 text
private lateinit var grid: Grid
private val root = ui {
verticalLayout {
grid = grid {
setDefaults()
column({ it.title }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
}
}
Slide 49
Slide 49 text
@Route(value = "", layout = MainLayout::class)
class TodoList : KComposite() {
private val currentUi = UI.getCurrent()
private val viewModel = TodoViewModel()
private lateinit var grid: Grid
private val root = ui {
verticalLayout {
grid = grid {
setDefaults()
column({ it.title }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
}
init {
configObservers()
viewModel.fetchAll()
}
private fun configObservers() {
viewModel.todos.observe {
currentUi.accessSynchronously {
grid.setItems(it)
}
}
}
}
}
Slide 50
Slide 50 text
init {
configObservers()
viewModel.fetchAll()
}
private fun configObservers() {
viewModel.todos.observe {
currentUi.accessSynchronously {
grid.setItems(it)
}
}
}
}
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
List data
Slide 53
Slide 53 text
init {
configObservers()
viewModel.fetchAll()
}
private fun configObservers() {
viewModel.todos.observe {
currentUi.accessSynchronously {
grid.setItems(it)
}
}
}
}
Slide 54
Slide 54 text
class TodoViewModel : CoroutineScope {
var todos: Observable> = Observable()
private val job = SupervisorJob()
private val dispatcher = Dispatchers.Default
override val coroutineContext: CoroutineContext
get() = job + dispatcher
fun fetchAll() {
launch {
withContext(Dispatchers.IO) {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
}
}
...
}
}
Slide 55
Slide 55 text
class TodoViewModel : CoroutineScope {
var todos: Observable> = Observable()
private val job = SupervisorJob()
private val dispatcher = Dispatchers.Default
override val coroutineContext: CoroutineContext
get() = job + dispatcher
...
}
}
Slide 56
Slide 56 text
class TodoViewModel : CoroutineScope {
var todos: Observable> = Observable()
private val job = SupervisorJob()
private val dispatcher = Dispatchers.Default
override val coroutineContext: CoroutineContext
get() = job + dispatcher
fun fetchAll() {
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
...
}
}
Slide 57
Slide 57 text
fun fetchAll() {
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
}
}
Slide 58
Slide 58 text
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
...
}
}
Slide 59
Slide 59 text
fun fetchAll() {
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
}
}
Slide 60
Slide 60 text
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
Slide 61
Slide 61 text
A brief sidebar on
JetBrains Exposed
Slide 62
Slide 62 text
SQL DSL vs. DAO
Slide 63
Slide 63 text
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todo.all()
.sortedBy { it.completedAt }
.sortedBy { it.dueAt }
.sortedBy { it.title }
...
}
}
Slide 64
Slide 64 text
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
...
}
}
Slide 65
Slide 65 text
DSL is closest to real SQL
Slide 66
Slide 66 text
Improving the List UI
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
A New Component
Slide 69
Slide 69 text
class TodoWithCheckbox(todo: Todo) : KComposite() {
private val root = ui {
verticalLayout {
span(todo.title)
}
}
}
}
Slide 70
Slide 70 text
class TodoWithCheckbox(todo: Todo) : KComposite() {
private val root = ui {
verticalLayout {
horizontalLayout {
checkBox { value = todo.completedAt != null}
span(todo.title)
}
todo.notes?.let {
span(it)
}
}
}
}
}
Slide 71
Slide 71 text
grid = grid {
setDefaults()
column({ it.title }).setHeader(“Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
Slide 72
Slide 72 text
grid = grid {
setDefaults()
componentColumn({ todo -> TodoWithCheckbox(todo) }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
Slide 73
Slide 73 text
Making the component look
nicer
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
private val root = ui {
verticalLayout {
horizontalLayout {
checkBox {
value = todo.completedAt != null
}
span(todo.title)
}
todo.notes?.let {
span(it)
}
}
}
}
Slide 76
Slide 76 text
span(todo.title)
}
Slide 77
Slide 77 text
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
}
Slide 78
Slide 78 text
private val root = ui {
verticalLayout {
horizontalLayout {
checkBox {
value = todo.completedAt != null
}
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
}
todo.notes?.let {
span(it)
}
}
}
}
Slide 79
Slide 79 text
todo.notes?.let {
span(it)
}
Slide 80
Slide 80 text
todo.notes?.let {
span(it) {
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
}
Slide 81
Slide 81 text
private val root = ui {
verticalLayout {
horizontalLayout {
checkBox {
value = todo.completedAt != null
}
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
todo.notes?.let {
span(it) {
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
}
}
}
}
Slide 82
Slide 82 text
I lied…a teeny tiny lie
Slide 83
Slide 83 text
.strikethrough {
text-decoration: line-through;
}
.link-text {
color: var(--lumo-primary-text-color);
cursor: pointer;
}
}
Slide 84
Slide 84 text
Making the component
functional
Slide 85
Slide 85 text
class TodoWithCheckbox(todo: Todo)
: KComposite() {
...
}
}
Slide 86
Slide 86 text
class TodoWithCheckbox(
todo: Todo,
onCheckChanged: (Boolean) -> Unit,
onClickLink: () -> Unit
) : KComposite() {
...
}
}
Slide 87
Slide 87 text
checkBox {
value = todo.completedAt != null
}
}
Slide 88
Slide 88 text
checkBox {
value = todo.completedAt != null
addValueChangeListener { event ->
onCheckChanged(event.value)
}
}
}
Slide 89
Slide 89 text
private val root = ui {
verticalLayout {
horizontalLayout {
checkBox {
value = todo.completedAt != null
addValueChangeListener { event ->
onCheckChanged(event.value)
}
}
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName("strikethrough") }
}
}
todo.notes?.let {
span(it) {
if (todo.completedAt != null) {
addClassName("strikethrough")
}
}
}
}
}
Slide 90
Slide 90 text
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName("strikethrough") }
}}
}
Slide 91
Slide 91 text
span(todo.title) {
addClassName("link-text")
if (todo.completedAt != null) {
addClassName(“strikethrough") }
}}
addClickListener { onClickLink() }
}
}
Slide 92
Slide 92 text
grid = grid {
setDefaults()
componentColumn({ todo -> TodoWithCheckbox(todo) }).setHeader("Todo")
column({ it.dueAt?.toString() }).setHeader("Due Date")
column({ it.user?.name }).setHeader("Assignee")
}
}
Slide 93
Slide 93 text
componentColumn({ todo -> TodoWithCheckbox(todo) }).setHeader("Todo")
}
Slide 94
Slide 94 text
componentColumn({ todo ->
TodoWithCheckbox(
todo = todo,
onCheckChanged = { isChecked ->
viewModel.updateCompletion(todo, isChecked)
},
onClickLink = { }
)
}).setHeader("Todo")
}
Slide 95
Slide 95 text
fun updateCompletion(todo: Todo, isCompleted: Boolean) {
launch {
newSuspendedTransaction(Dispatchers.IO, database) {
Todos.update({ Todos.id eq todo.id }) {
it[Todos.completedAt] = if (isCompleted) LocalDate.now() else null
}
}
fetchAll()
}
}
}
Slide 96
Slide 96 text
Todo Form
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
Another component
Slide 101
Slide 101 text
class TodoForm(
private val todo: Todo? = null,
onClickDelete: ((Todo) -> Unit)? = null,
onClickSave: (Todo) -> Unit
) : KComposite() {
Slide 102
Slide 102 text
private lateinit var dialog: Dialog
private lateinit var titleField: TextField
private lateinit var dueDateField: DatePicker
private lateinit var notesField: TextArea
private lateinit var userField: Select
Slide 103
Slide 103 text
private val root = ui {
verticalLayout {
dialog = openDialog {
verticalLayout {
formLayout {
titleField = textField("Title") {
isRequired = true
todo?.title?.let { value = it }
}
dueDateField = datePicker("Due Date") {
todo?.dueAt?.let { value = it }
}
notesField = textArea("Notes") {
maxRows = 2
todo?.notes?.let { value = it }
}
userField = select("Assignee") {
itemLabelGenerator = ItemLabelGenerator { it.name }
}
}
...
}
}
}
}
}
Slide 104
Slide 104 text
private val root = ui {
verticalLayout {
dialog = openDialog {
verticalLayout {
…
}
}
}
}
}
Slide 105
Slide 105 text
private val root = ui {
verticalLayout {
dialog = openDialog {
verticalLayout {
formLayout {
titleField = textField("Title") {
isRequired = true
todo?.title?.let { value = it }
}
dueDateField = datePicker("Due Date") {
todo?.dueAt?.let { value = it }
}
notesField = textArea("Notes") {
maxRows = 2
todo?.notes?.let { value = it }
}
userField = select("Assignee") {
itemLabelGenerator = ItemLabelGenerator { it.name }
}
}
...
}
}
}
}
}
Slide 106
Slide 106 text
formLayout {
titleField = textField("Title") {
isRequired = true
todo?.title?.let { value = it }
}
dueDateField = datePicker("Due Date") {
todo?.dueAt?.let { value = it }
}
notesField = textArea("Notes") {
maxRows = 2
todo?.notes?.let { value = it }
}
userField = select("Assignee") {
itemLabelGenerator = ItemLabelGenerator { it.name }
}
}
}
Slide 107
Slide 107 text
private val root = ui {
verticalLayout {
dialog = openDialog {
verticalLayout {
...
horizontalLayout {
if (todo != null) {
button("Delete") {
onClick {
onClickDelete?.invoke(todo)
dialog.close()
}
}
}
button("Cancel") {
onClick { dialog.close() }
}
button("Save") {
setPrimary()
onClick {
if (formIsInvalid()) return@onClick
val newTodo = generateTodoModel(todo)
onClickSave(newTodo)
dialog.close()
}
}
}
}
}
}
}
}
Slide 108
Slide 108 text
horizontalLayout {
if (todo != null) {
button("Delete") {
onClick {
onClickDelete?.invoke(todo)
dialog.close()
}
}
}
button("Cancel") {
onClick { dialog.close() }
}
button("Save") {
setPrimary()
onClick {
if (formIsInvalid()) return@onClick
val newTodo = generateTodoModel()
onClickSave(newTodo)
dialog.close()
}
}
}
}
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
fun fetchUsers() {
viewModel.fetchUsers()
}
private fun configObservers() {
viewModel.users.observe {
currentUi.accessSynchronously {
userField.setItems(it)
todo?.user?.let {
userField.value = it
}
}
}
}
}
Slide 111
Slide 111 text
fun fetchUsers() {
launch {
users.value = newSuspendedTransaction(Dispatchers.IO, database) {
Users.selectAll()
.orderBy(Users.name)
.map {
User(
id = it[Users.id].value,
name = it[Users.name] ?: "No Name"
)
}
}
}
}
Slide 112
Slide 112 text
Opening the Form
Slide 113
Slide 113 text
Add a New Todo
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
private val root = ui {
verticalLayout {
button("Add todo", icon = VaadinIcon.PLUS.create()) {
onClick {
TodoForm(onClickSave = { todo -> viewModel.insert(todo) })
}
}
...
}
}
}
Slide 116
Slide 116 text
fun insert(todo: Todo) {
launch {
newSuspendedTransaction(Dispatchers.IO, database) {
Todos.insert {
it[Todos.title] = todo.title
it[Todos.dueAt] = todo.dueAt
it[Todos.description] = todo.notes
it[Todos.userId] = todo.user?.id
}
}
fetchAll()
}
}
Slide 117
Slide 117 text
Edit a todo
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
class TodoForm(
private val todo: Todo? = null,
onClickDelete: ((Todo) -> Unit)? = null,
onClickSave: (Todo) -> Unit
) : KComposite() {
...
}
Slide 120
Slide 120 text
componentColumn({ todo ->
TodoWithCheckbox(
todo = todo,
onCheckChanged = { isChecked ->
viewModel.updateCompletion(todo, isChecked)
},
onClickLink = { }
)
}).setHeader("Todo")
}
Slide 121
Slide 121 text
componentColumn({ todo ->
TodoWithCheckbox(
todo = todo,
onCheckChanged = { isChecked ->
viewModel.updateCompletion(todo, isChecked)
},
onClickLink = {
TodoForm(
todo = todo,
onClickSave = { viewModel.update(it) }
)
}
)
}).setHeader("Todo")
Slide 122
Slide 122 text
fun update(todo: Todo) {
launch {
newSuspendedTransaction(Dispatchers.IO, database) {
Todos.update({ Todos.id eq todo.id }) {
it[Todos.title] = todo.title
it[Todos.dueAt] = todo.dueAt
it[Todos.description] = todo.notes
it[Todos.userId] = todo.user?.id
}
}
fetchAll()
}
}
Slide 123
Slide 123 text
Delete a Todo
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
horizontalLayout {
if (todo != null) {
button("Delete") {
onClick {
onClickDelete?.invoke(todo)
dialog.close()
}
}
} }
button("Cancel") {
onClick { dialog.close() }
}
button("Save") {
setPrimary()
onClick {
if (formIsInvalid()) return@onClick
val newTodo = generateTodoModel()
onClickSave(newTodo)
dialog.close()
}
}
}
Slide 126
Slide 126 text
if (todo != null) {
button("Delete") {
onClick {
onClickDelete?.invoke(todo)
dialog.close()
}
}
} }
}
Slide 127
Slide 127 text
componentColumn({ todo ->
TodoWithCheckbox(
todo = todo,
onCheckChanged = { isChecked ->
viewModel.updateCompletion(todo, isChecked)
},
onClickLink = {
TodoForm(
todo = todo,
onClickSave = { viewModel.update(it) }
)
}
)
}).setHeader("Todo")
Slide 128
Slide 128 text
onClickLink = {
TodoForm(
todo = todo,
onClickSave = { viewModel.update(it) }
)
}
Slide 129
Slide 129 text
onClickLink = {
TodoForm(
todo = todo,
onClickSave = { viewModel.update(it) },
onClickDelete = { viewModel.delete(it) }
)
}
Slide 130
Slide 130 text
fun delete(todo: Todo) {
launch {
newSuspendedTransaction(Dispatchers.IO, database) {
Todos.deleteWhere { Todos.id eq todo.id }
}
fetchAll()
}
}
Slide 131
Slide 131 text
Search
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
private val root = ui {
verticalLayout {
button("Add todo", icon = VaadinIcon.PLUS.create()) {
onClick {
TodoForm { todo -> viewModel.insert(todo) }
}
}
...
}
Slide 134
Slide 134 text
private val root = ui {
verticalLayout {
button("Add todo", icon = VaadinIcon.PLUS.create()) {
onClick {
TodoForm { todo -> viewModel.insert(todo) }
}
}
textField {
setWidthFull()
isClearButtonVisible = true
placeholder = "Search for todo title..."
valueChangeMode = ValueChangeMode.LAZY
addValueChangeListener { event ->
viewModel.fetchAll(event.value)
}
}
...
}
Slide 135
Slide 135 text
textField {
setWidthFull()
isClearButtonVisible = true
placeholder = "Search for todo title..."
valueChangeMode = ValueChangeMode.LAZY
addValueChangeListener { event ->
viewModel.fetchAll(event.value)
}
}
Slide 136
Slide 136 text
addValueChangeListener { event ->
viewModel.fetchAll(event.value)
}
Slide 137
Slide 137 text
fun fetchAll() {
launch {
withContext(Dispatchers.IO) {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
}
}
}
Slide 138
Slide 138 text
fun fetchAll(searchTerm: String? = null) {
searchTerm?.let {
[email protected] = it
}
...
}
}
Slide 139
Slide 139 text
fun fetchAll(searchTerm: String? = null) {
launch {
withContext(Dispatchers.IO) {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
query.map { resultRow ->
Todo(
id = resultRow[Todos.id].value,
title = resultRow[Todos.title],
dueAt = resultRow[Todos.dueAt],
notes = resultRow[Todos.description],
user = User(
id = resultRow[Users.id]?.value,
name = resultRow[Users.name]
),
completedAt = resultRow[Todos.completedAt]
)
}
}
}
}
}
}
Slide 140
Slide 140 text
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
...
}
}
Slide 141
Slide 141 text
launch {
todos.value = newSuspendedTransaction(Dispatchers.IO, database) {
val query = Todos.join(Users, JoinType.LEFT, Todos.userId, Users.id)
.selectAll()
.orderBy(Todos.completedAt, SortOrder.DESC)
.orderBy(Todos.dueAt, SortOrder.ASC)
.orderBy(Todos.title, SortOrder.ASC)
[email protected]?.let {
query.where { Todos.title.upperCase().like("%${it.uppercase()}%") }
}
...
}
}
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
We did it!
Slide 144
Slide 144 text
✅ Zero con
fi
guration App Server
✅ Database CRUD
✅ Reusable components with DSL syntax
✅ High
fi
delity UI with no very little CSS and zero
JavaScript
Slide 145
Slide 145 text
No HTML
(Mostly) No CSS
No JavaScript
No React / Vue / Angular
Slide 146
Slide 146 text
Kotlin
Slide 147
Slide 147 text
https://github.com/lateplate/kc2025-app
Slide 148
Slide 148 text
Thank You,
and Don’t
Forget to Vote
@dankim.com
Slide 149
Slide 149 text
Let’s party 🥳