[SnowOne 2025] Дмитрий Черкасов: "Kotlin Frontend: как создавать фулстек-приложения с UI и не выглядеть фриком"

Затронем холиварную тему: как бэкенд-разработчику правильно и удобно писать фронт и какие есть решения для этого.

Ktor HTML Templates? Vaadin Kotlin DSL? React? Что выбрать и как не погрязнуть в бесконечном списке технологий, чтобы написать свой фронтенд.

Видео: https://youtu.be/QBtji0qpvqc

Transcript

1. Kotlin Frontends
2. Activities: ▪ Java /JVM ▪ Cloud / Microservices ▪ Jmix Framework, OpenIDE, OpenBPM ▪ Different PL ▪ Asio & guitars Cherkasov Dmitry Java Backend dev Jmix DevRel About 2
3. How to write client properly being Java Dev? 3 ▪ Java Dev ▪ Don’t know JS ▪ Build frontend
4. How to write client properly? ▪ Template Engines ▪ Client Frameworks ▪ React / Next.js ▪ Vue / Nuxt.js ▪ Angular ▪ Vaadin + Spring Boot ▪ Jmix ▪ Native development 4
5. How to write client properly? ▪ Ktor & Kotlin DSL HTML ▪ Kotlin React ▪ Kotlin Vaadin DSL ▪ Kotlin + Jmix ▪ Compose Multiplatform 5
6. Why Kotlin? ▪ Jmix: Kotlin as Platform 6
7. Why Kotlin? ▪ Jmix: Kotlin as Platform ▪ DSL / Client code 7
8. Why Kotlin? ▪ Jmix: Kotlin as Platform ▪ DSL / Client code 8
9. Why Kotlin? ▪ Jmix: Kotlin as Platform ▪ DSL / Client code ▪ Improving & Expending 9
10. Why Kotlin? ▪ Jmix: Kotlin as Platform ▪ DSL / Client code ▪ Improving & Expending ▪ More Stable 10
11. Why Kotlin? ▪ Jmix: Kotlin as Platform ▪ DSL / Client code ▪ Improving & Expending ▪ More Stable ▪ Hype-train 11
12. Web approaches ▪ Static ▪ Server Side ▪ Web Component ▪ Web Assembly ▪ Client Side 12
13. End
14. Ktor & HTML DSL
15. Kotlin HTML • Ktor ◦ Kotlin HTML ◦ Kotlin CSS ◦ Kotlin HTMX ◦ Kotlin.js 15
16. Kotlin HTML: DSL ▪ Mapping 16
17. Kotlin HTML: DSL ▪ Mapping ▪ Type-safe 17
18. Kotlin HTML: DSL ▪ Mapping ▪ Type-safe 18
19. Kotlin HTML: DSL ▪ Mapping ▪ Type-safe ▪ Dynamic build 19
20. Kotlin HTML: DSL ▪ Mapping ▪ Type-safe ▪ Dynamic build ▪ Integrated BI 20
21. • Mapping • Type-safe • Dynamic build • Integrated BI ▪ SSR Component ▪ Server-Side Rendering ▪ PHP? Kotlin HTML: Server Side Render 21
22. More features
23. Kotlin SSR: Adding more magic • Kotlin CSS DSL 23
24. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS 24
25. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS 25
26. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Theme import 26
27. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX 27
28. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity
29. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: 29
30. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: ◦ Kotlinwind.css ◦ … 30
31. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: ◦ Kotlinwind.css ◦ … • JS: 31
32. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: ◦ Kotlinwind.css ◦ … • JS: ◦ Unsafe JS 32
33. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: ◦ Kotlinwind.css ◦ … • JS: ◦ Unsafe JS ◦ Raw JS 33
34. Kotlin SSR: Adding more magic • Kotlin CSS DSL: ◦ Static CSS ◦ Dynamic CSS ◦ Themes • Kotlin HTMX ◦ Interactivity • Community Libs: ◦ Kotlinwind.css ◦ … • JS: ◦ Unsafe JS ◦ Raw JS ◦ Compiled JS from Kotlin 34
35. kotlinx.html • User request • Server handle • Http Request • Finds target route • Route code invoking • DSL already build as AST • Transforming AST to HTML • HTML returns to User DSL Code HTML In-Memory Tree Runtine Transform 35
36. Something missing?
37. kotlinx.html.js - Server 37
38. kotlinx.html.js - Server app.js 38
39. kotlinx.html.js - Client
40. kotlinx.html.js - Client
41. kotlinx.html.js - Server 41
42. kotlinx.html.js - Client
43. Kotlin HTML DSL - results • Client & Server • Fast performance (compare to template engines) • “Single Page Application” • Easy • Generic • Speed - HTML/CSS • No config for build tools (minify, chunk, etc) • Frontend knowledge • Small community - no libs • Security - JS 43
44. Kotlin React
45. Kotlin React, 2025 45
46. Kotlin Wrappers 46
47. Project creation • Kotlin Project
48. Project creation • Kotlin Project: ◦ Js Project / Multiplatform Project 48
49. Project creation • Kotlin Project: ◦ Js Project / Multiplatform Project ◦ Kotlin-wrappers 49
50. Project creation • Kotlin Project: ◦ Js Project / Multiplatform Project ◦ Kotlin-wrappers ◦ HTML in resources 50
51. Project creation • Kotlin Project: ◦ Js Project / Multiplatform Project ◦ Kotlin-wrappers ◦ HTML • React.kt DSL ◦ Main 51
52. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component 52
53. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ useState 53
54. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ useState ▪ useEffect 54
55. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ useState ▪ useEffect ▪ Inline lambda 55
56. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ useState ▪ useEffect ▪ Inline lambda ▪ DSL 56
57. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ …. • Custom Components 57
58. Project creation • Kotlin Project: ◦ …. • React.kt DSL ◦ Main func ◦ App component ▪ …. • Custom Components 58
59. Demo 59
60. React.kt • Source Kt -> JS • Links Kt Wrappers -> JS • Source + Wrappers -> Client JS • Client JS -> Bundling WebPack • Dist Code -> Node.js Kotlin SRC IR Kotlin JavaScript ES WebPack Kotlin API for ES (KW) DevServer JS API Dist Code 60
61. Kotlin React - results • Type - safe • Complex frontend • Any solution • Dev UX (optional) • Performance ◦ React - quick render ◦ Node.js - fast performance •Huge knowledges ◦ JVM -> V8 •Configuration •Cost & Time •JB Support •Small community 61
62. Vaadin
63. • Optimization • Modern UI • Shadow DOM • Headless Java-JS/TS • Secured RPC • React • Lit.js • Mobile • Progressive Web Application • Java • Kotlin 63
64. Build-in UI Kit
65. Easy to code, faster to prod
66. Easy to code, faster to prod 66
67. Something is missing
68. Variants • Official Vaadin Kotlin DSL • Third-party libs: ◦ Karibu-DSL ◦ …. 68
69. Variants Vaadin DSL Karibu DSL 69
70. Demo 70
71. Demo 71
72. Vaadin Security 72
73. Vaadin - results • Easy 2 pro • Fullstack • Secured front • Dev Speed • Learn curve • Shoot your knee • Stateful 73
74. Jmix on Kotlin
75. Jmix 2 • High-level Framework • Spring boot • UI - vaadin • Dev speed • Full secured • Domain based 75
76. Jmix + Kotlin • View (Screen/Page) • ListView • DetailView 76
77. XML is DSL 77
78. Jmix + Kotlin 78
79. Jmix + Kotlin 79
80. Kotlin DSL + Jmix DSL 80
81. Jmix development with Kotlin • DSL • Ui Thread • Null-safe • Fragments • Jmix = Dev Speed • Kotlin = Dev Speed • Kotlin + Jmix DSL 81
82. Made on Jmix
83. Jmix on Kotlin - results • MVC • Agility • Secured fullstack • Dev Speed x2 • IntelliJ plugin • Dev Ex • Learn curve x2 • Debug • Stateful • Harder migration 83
84. Compose Multiplatform
85. Compose Multiplatform • Jetpack Compose • KMP • Compose MP 85
86. Compose • Jetpack Compose • KMP • Compose MP • IOS Focus 86
87. Compose • Jetpack Compose • KMP • Compose MP • IOS Focus • Web? 87
88. Compose • Jetpack Compose • KMP • Compose MP • IOS Focus • JavaScript WebAsm 88
89. Compose • Jetpack Compose • KMP • Compose MP • IOS Focus • JavaScript WebAsm 89
90. Wasm IR Compile Transpile Client Request Client’s Browser VM 90
91. Compose Multiplatform in Action 91
92. Compose - Desktop 92
93. Compose - Web 93
94. Dev Tools 94
95. Dev Tools
96. Compose Multiplatform - results • Cross-platform • Security • No JavaScript • Fast • Stable & Support by JB • Web Assembly • JS utilize • Dev Tools • Relatively new • Implement each platform • Mobile first - web second 96
97. Result
98. Summary 98
99. Summary • Kotlin HTML • Kotlin React • Vaadin DSL Kotlin • Jmix + Kotlin • Compose Multiplatform 99
100. Summary Tech / Feature Kotlin HTML Kotlin React Vaadin Kotlin DSL Jmix + Kotlin Compose MP Production Ready No No Yes Excellent Yes Dev UX Yes No No Yes Excellent Fast Performance Yes Excellent No No Yes 100
101. Thanks for your attention Resources https://t.me/kartondev