Kotlin, Kotlin, Everywhere...

Many developers are under the mistaken impression that Kotlin is just for the Android platform. However, more and more developers are starting to use Kotlin for web backends and even frontends.

This talk will touch on the most popular language features of Kotlin. However, the bulk of the talk will consist of demonstrating that Kotlin can and should also be used for full-stack web development. I will take the audience through the development of a web app using Kotlin/JVM on the backend and Kotlin/JS on the frontend, using Spring Boot and React respectively.

Transcript

1. Kotlin, Kotlin… Everywhere!
2. I am Pamela Hill Android Engineer - Luno You can find me here: ‒ Twitter: @pamelaahill ‒ Blog: www.pamelaahill.com Hello! ! 2
3. Contents ‒ Why Kotlin? ‒ Project introduction ‒ Backend with Spring Boot ‒ Alternative backend with Ktor ‒ Frontend with React ‒ Cool experiment, but… ! 3
4. Why Kotlin? 1 ! 4
5. Why Kotlin? ‒ Supports more comprehensible code ‒ Supports safer code ‒ Allows different programming paradigms ‒ Fully interoperable with Java ! 5
6. Why Kotlin? ‒ Framework support ‒ Multiplatform support ‒ Excellent tooling ‒ Coroutines ! 6
7. Project Introduction 2 ! 7
8. Full-Stack Project Our goal: to create a full-stack Kotlin web app that generates absurd inspirational quotes. ! 8
9. The Deep… ! 9
10. The Dark… ! 10
11. The Absurd… ! 11
12. ! 12
13. ! 13 ‒ To get a new inspiration:
 POST /users/{{user_id}}/inspirations ‒ To get an inspiration image:
 GET /users/{{user_id}}/inspirations/{{inspiration_id}}/ images ‒ To change the tags for an inspiration:
 PUT /users/{{user_id}}/inspirations/{{inspiration_id}} ‒ To find a tag by title:
 GET /tags?title=anytitle ‒ To find inspirations by tag:
 GET /users/{{user_id}}/inspirations?tagId=tag_id
14. Backend with Spring Boot 3 ! 14
15. What is Spring Boot? ‒ Simplifies building services with Spring ‒ Easy setup, easy deploy ‒ Easy data access with JPA through Spring Data ‒ Support of Spring ecosystem ‒ First-class support of Kotlin ! 15
16. Application HTTP RestController Entities + Repositories H2 database Client
17. Steps to create the project 1. Generate the project with Spring Initializr 2. Application 3. Entities - representation of data and tables 4. Repositories - CRUD operations on database 5. Rest Controllers - handle HTTP requests ! 17
18. ! 18
19. ! 19
20. ! 20 @SpringBootApplication class InspirobotApplication fun main(args: Array<String>) { runApplication<InspirobotApplication>(*args) }
21. ! 21 @Entity @Table(name = "inspirations") data class Inspiration( val userId: Long, val fileURL: URL, @ManyToMany(...) @JoinTable( name = "post_tags", joinColumns = [JoinColumn(name = "post_id")], inverseJoinColumns = [JoinColumn(name = "tag_id")] ) var tags: List<Tag> = mutableListOf(), val generateDate: Long = Date().time ) { ... }
22. ! 22 data class Inspiration( ... ) { @Id @GeneratedValue var id: Long = 0L override fun equals(other: Any?): Boolean { //id based equality } override fun hashCode(): Int { //id based hash code } }
23. ! 23 interface InspirationRepository : CrudRepository<Inspiration, Long> { fun findByUserId(userId: Long): List<Inspiration> fun findByTags(tag: Tag): List<Inspiration> } interface TagRepository : CrudRepository<Tag, Long> { fun findByTitle(title: String): List<Tag> }
24. ! 24 @RestController @RequestMapping("/api/users/{userId}") class InspirationController( private val inspirationRepository: InspirationRepository, private val imageRepository: ImageRepository, private val tagRepository: TagRepository ) { ... }
25. ! 25 @PostMapping("/inspirations") fun create(@PathVariable("userId", required = true) userId: Long) : Inspiration? { val inspirobotURL = getInspirobotURL() ?: return null val inspirobotImage = getInspirobotImage(inspirobotURL) ?: return null val fileURL = imageRepository.save( inspirobotURL.substringAfterLast("."), inspirobotImage.inputStream()) return inspirationRepository.save(Inspiration(userId, fileURL)) }
26. Find it on GitHub: https://github.com/pahill/inspirobot- springboot ! 26
27. Alternative Backend with Ktor 4 ! 27
28. What is Ktor? ‒ Kotlin framework for building asynchronous clients and servers ‒ Built on coroutines ‒ Use DSL to specify application behaviour ‒ Easy setup using IntelliJ Plugin ‒ Production-ready ‒ ThoughtWorks Technology Radar - Assess category ! 28
29. “ The flexibility to incorporate different tools for logging, DI or a templates engine—in addition to its lightweight architecture—makes Ktor an interesting option for our teams for creating RESTful services. - ThoughtWorks ! 29
30. Application HTTP 1.x HTTP 2.x Websockets … Convert to ApplicationCall Interceptor Interceptor Interceptor Interceptor Client Pipeline
31. Application Modules Features
32. ! 32 fun main() { embeddedServer( Netty, port = 8080, module = Application::inspirobot ).start(wait = true) }
33. ! 33 fun Application.inspirobot() { val db: InspirationDb = InspirationDbImpl() val api: InspirationApi = InspirationApiImpl() install(ContentNegotiation) { gson { } } routing { ... } }
34. ! 34 routing { post("/users/{userId}/inspirations") { //Get and check userId //Create the inspiration //Save the inspiration //Return the inspiration } }
35. ! 35 ... //Get and check the userId val userId = call.parameters["userId"]?.toLongOrNull() if (userId == null) { call.respond(HttpStatusCode.BadRequest) return@post } ...
36. ! 36 ... //Create the inspiration val inspirationUrl = api.getInspiration() if (inspirationUrl == null) { call.respond(HttpStatusCode.InternalServerError) return@post } ...
37. ! 37 ... //Save the inspiration val inspiration = db.createInspiration( userId = userId, fileExtension = inspirationUrl.toExternalForm() .substringAfterLast("."), inputStream = api.getInspirationImage(inspirationUrl) ) if (inspiration == null) { call.respond(HttpStatusCode.InternalServerError) return@post } ...
38. ! 38 ... //Return the inspiration call.respond(HttpStatusCode.Created, inspiration) ...
39. ! 39 override suspend fun getInspiration(): URL? { val httpClient = HttpClient(CIO) val url = httpClient.get<String?>(INSPIROBOT_URL) return if (url != null) { URL(url) } else { null } }
40. Database access ‒ Exposed: API for relational databases ‒ H2: in-memory database ‒ HikariCP: connection pooling ! 40
41. ! 41 override suspend fun createInspiration( userId: Long, fileExtension: String, inputStream: ByteArrayInputStream ): Inspiration? { return dbQuery { //Save the file //Insert the inspiration //Find and return the inspiration } }
42. ! 42 //Insert the inspiration val id = Inspirations.insert { it[Inspirations.userId] = userId it[Inspirations.fileUrl] = inspirationImage .toURI().toURL().toExternalForm() it[Inspirations.generatedDate] = Date().time } get Inspirations.id
43. ! 43 //Find and return the inspiration id?.let { id -> Inspirations.select { Inspirations.id eq id }.mapNotNull { mapInspirationsToInspiration(it) }.firstOrNull() }
44. Find it on GitHub: https://github.com/pahill/inspirobot-ktor ! 44
45. Frontend with React 5 ! 45
46. What is React? ‒ Javascript framework for building UIs ‒ Compose UIs from small components ‒ Alternative to Angular and Vue.js ‒ Kotlin/JS React wrapper libraries ! 46
47. Components in React ! 47 App Chip ChipEditor Inspiration Home Chip Inspiration Search Properties flow down Events flow up
48. Setup ‒ Install the project creator
 npm install -g create-react-kotlin-app ‒ Create the project
 npx create-react-kotlin-app inspirobot ‒ Run (live-loading) in the browser
 npm start ! 48
49. Creating a component 1. Define a Properties interface (Optional) 2. Define a State interface (Optional) 3. Create a component templated with the interfaces 4. Implement the render method (with kotlinx.html DSL) 5. Create a builder ! 49
50. ! 50 interface ChipProps : RProps { var text: String var allowClose: Boolean var callback: (() -> Unit)? }
51. ! 51 class ChipComponent(props: ChipProps) : RComponent<ChipProps, RState>(props) { override fun RBuilder.render() { ... } }
52. ! 52 override fun RBuilder.render() { div("chip fade show") { +props.text if(props.allowClose) { button(classes = "close", type = ButtonType.button) { attrs { onClickFunction = { props.callback?.invoke() } } i(classes = "material-icons") { +"cancel" } } } } }
53. ! 53 fun RBuilder.chip(text: String, allowClose: Boolean = false, callback: (() -> Unit)? = null ) = child(ChipComponent::class) { attrs.text = text attrs.allowClose = allowClose attrs.callback = callback }
54. Using a new JavaScript library ‒ Install the library
 npm install axios --save ‒ Create external functions and interfaces ‒ Treat almost like normal Kotlin code ! 54
55. ! 55 @JsModule("axios") external fun <T> axios(config: AxiosConfigSettings): Promise<AxiosResponse<T>> external interface AxiosConfigSettings { var url: String var method: String var timeout: Number ... } external interface AxiosResponse<T> { val data: T val status: Number ... }
56. ! 56 private fun createInspiration(callback: (Inspiration) -> Unit) { val callConfig: AxiosConfigSettings = jsObject { url = "$BASE_URL/users/1/inspirations" method = "POST" timeout = 3000 } axios<Inspiration>(callConfig).then { callback(it.data) } }
57. Find it on GitHub: https://github.com/pahill/inspirobot- react ! 57
58. Cool Experiment, But… 6 ! 58
59. Documentation / Setup Documentation / tutorials / help: ‒ Kotlin/JS documentation is a bit scarce ‒ Documentation on Ktor & Spring Boot is much better ‒ Lively Slack / Twitter community Setup: ‒ Kotlin/JS through npm module ‒ Ktor & Spring Boot through IntelliJ IDEA ! 59
60. Skill / Effort Skills required: ‒ Kotlin basics, using DSLs, a little coroutines ‒ Intermediate level and above, or learn quickly Effort required: ‒ Spring Boot took the least time ‒ Kotlin/JS took the most time ! 60
61. My recommendation? ‒Spring Boot - yes! ‒Ktor - soon! ⏰ ‒Kotlin/JS - wait! ! 61
62. You can find me here: ‒ Twitter: @pamelaahill ‒ Blog: www.pamelaahill.com ‒ GitHub: https://github.com/pahill Thanks! ! 62