Copenhagen Denmark CREATING FULL- STACK WEB APPS WITH KOTLIN DSLS PAMELA HILL @pamelaahill

HELLO MOLO HALLO THOBELA DUMELA LUMELA ABUSHENI SANIBONA AVUWANI SALIBONANI SAWUBONA HELLO MOLO HALLO THOBELA DUMELA LUMELA ABUSHENI SANIBONA AVUWANI SALIBONANI

1. PROJECT INTRODUCTION What shall we build today?

Wikipedia A VISION BOARD IS A COLLAGE OF IMAGES, PICTURES, AND AFFIRMATIONS OF ONE'S DREAMS AND DESIRES, DESIGNED TO SERVE AS A SOURCE OF INSPIRATION AND MOTIVATION.

No content

No content

Kotlin/JS Unsplash Ktor Client H2 Exposed Ktor Server Axios Deployment Location

2. THE PROJECT PHILOSOPHY How shall we build today?

Ward Cunningham YOU CAN CALL IT BEAUTIFUL CODE WHEN THE CODE MAKES IT LOOK LIKE THE LANGUAGE WAS MADE FOR THE PROBLEM.

Why internal DSLs? . Concise Readable Maintainable

What makes Kotlin a great language for DSLs? Optional semicolon Infix functions No parentheses for last lambda argument Operators overloading using conventions Extension functions Lambdas with receivers Invoke convention Venkat Subramaniam, Creating Internal DSLS in Kotlin, Kotlinconf 2018

Lambdas with receivers Lambdas that are executed within the context of a receiver. val isEven: Int.() -> Boolean = { this % 2 == 0 } println(294823098.isEven())

3. BUILDING THE BACKEND WITH KTOR

Ktor is a Kotlin framework for creating asynchronous servers and clients Built on Kotlin and coroutines Easy setup using IntelliJ Plugin or generator at start.ktor.io Use DSL to specify application behaviour ThoughtWorks Trial category since April 2019

ThoughtWorks, April 2019 THE FLEXIBILITY TO INCORPORATE DIFFERENT TOOLS IN ADDITION TO ITS LIGHT-WEIGHT ARCHITECTURE- MAKES KTOR AN INTERESTING OPTION FOR CREATING RESTFUL SERVICES

Module Module Module Application Routing Auth Content Negotiation Routing Content Negotiation F Logging F F F F F

Client Server Convert to ApplicationCall Setup Monitoring Features Call HTTP 1.x HTTP 2.x Websockets Fallback Pipeline of Interceptors

No content

Creating the application fun Application.lifeVisualiser() { //Module feature installations routing { //Module routing } } fun main() { embeddedServer(Netty, port = 8080, module = Application::lifeVisualiser ).start(wait = true) }

Setting up the routes (1) routing { get("/inspirations") { ... } get("/users/{userId}/inspirations") { ... } } install(ContentNegotiation) { gson { } }

Setting up the routes (2) get("/inspirations") { val keywords = call.parameters["keywords"] if (keywords == null) { call.respond(HttpStatusCode.BadRequest) return@get } } val inspirations = api.searchPhotosByKeywords(keywords) if (inspirations != null) { call.respond(HttpStatusCode.OK, inspirations) } else { call.respond(HttpStatusCode.NoContent) }

Route refinement - Locations get { val inspirations = inspirationApi.searchPhotosByKeywords(it.keywords) if (inspirations != null) { call.respond(HttpStatusCode.OK, inspirations) } else { call.respond(HttpStatusCode.NoContent) } } @Location("/inspirations") data class KeywordInspirations(val keywords: String) install(Locations)

Route refinement - Splitting into files MyRoute.kt fun Route.searchInspirationsByKeywords(inspirationApi: InspirationApi) = get { … } routing { searchInspirationsByKeywords(api) ... } Application.kt

Unsplash API Register as a developer Register the app to get access key and secret key The API section we’re using doesn’t require OAuth, just an Auth header with the access key Extensive documentation for API use

Setting up the Ktor client private val httpClient = HttpClient(CIO) { install(JsonFeature) { serializer = GsonSerializer { serializeNulls() disableHtmlEscaping() } } }

Using the Ktor client override suspend fun searchPhotosByKeywords(keywords: String) : List? { val url = "$unsplashUrl/search/photos?query=$keywords" return httpClient.get(url) { header("Authorization", "Client-ID $accessKey") }?.results?.mapNotNull { mapUnsplashToInspiration(it) } }

Is it beautiful? • First iteration, not so much • Following iterations: framework/ language provides means of refactoring away boilerplate and complexity • Minimal setup, even in code • Routing is easy to read and understand

4. DATA WITH EXPOSED

Exposed is a light-weight SQL library written for the Kotlin language Created and maintained by JetBrains DSL and DAO flavours Supports many databases

Exposed setup (1) dependencies { compile "com.h2database:h2:1.4.200" compile "org.jetbrains.exposed:exposed:0.14.1" compile “com.zaxxer:HikariCP:3.4.1" ... }

Exposed setup (2) init { database = Database.connect(hikari()) transaction (database) { create(Users) create(Inspirations) create(Tags) } }

Creating a table object Inspirations : Table() { val id = varchar("id", 128).primaryKey() val userId = varchar("userId", 128) references Users.id val photoUrl = varchar("photoUrl", 1024) val title = varchar("title", 100) val description = varchar("description", 1000) val addedDate = long("addedDate") }

A clever little piece of Kotlin code private suspend fun dbTransaction(block: () -> T): T { return withContext(Dispatchers.IO) { transaction(database) { block() } } }

Inserting data dbTransaction { Inspirations.insert { it[id] = UUID.randomUUID().toString() it[Inspirations.userId] = userId it[photoUrl] = photo.photoURL it[title] = photo.title it[description] = photo.description it[addedDate] = photo.addedDate } }

Querying data Inspirations.select { Inspirations.id eq id }.mapNotNull { }.firstOrNull() Inspiration( id = it[Inspirations.id], userId = it[Inspirations.userId], photoURL = it[Inspirations.photoUrl], title = it[Inspirations.title], description = it[Inspirations.description], tags = syncFindTagsByInspirationId(it[Inspirations.id]) ?: emptyList(), addedDate = it[Inspirations.addedDate] )

Is it beautiful? • Follows SQL closely • Use of this and it context objects • Select query syntax is concise and expressive

5. FRONTEND WITH KOTLINX.HTML

Parent Component Child Component Properties flow down Events flow up

Project setup with npm Install the project creator
 npm install -g create-react-kotlin-app Create the project
 npx create-react-kotlin-app lifevisualiser Run in the browser (live reloading) 
 npm start npm start

Creating a component step-by-step 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

Defining the properties interface class PhotoSelectionProps : RProps { lateinit var callback: ((Inspiration) -> Unit) }

Defining the state interface class PhotoSelectionState : RState { var inspirations = mutableListOf() }

Creating the component class PhotoSelectionComponent() : RComponent() { override fun RBuilder.render() { //Create the HTML } //Other lifecycle functions //Other functions }

Implementing the render method state.inspirations.forEach { inspiration -> div("mdc-layout-grid__cell--span-4") { div("mdc-card") { img(src = inspiration.photoURL, classes = "photo-selection-photo") { attrs.height = "200px" attrs.onClickFunction = { props.callback.invoke(inspiration) } } p { +inspiration.title } override fun RBuilder.render() { div("mdc-typography--headline1 inspiration-header") { +"LifeVisualiser" } div("mdc-card main-card") { //Form with search component div("mdc-layout-grid") { div("mdc-layout-grid__inner") {

Implementing the builder fun RBuilder.photoSelector(callback: (app.Inspiration) -> Unit) : ReactElement { return child(PhotoSelectionComponent::class) { //Initialise props here attrs.callback = callback } }

Using a JavaScript library directly 1. Install the library 
 npm install axios —save 2. Create external functions and interfaces 3. Use like regular Kotlin

Creating the external functions and interfaces @JsModule("axios") external fun axios(config: AxiosConfigSettings): Promise> external interface AxiosConfigSettings { var url: String var method: String ... } external interface AxiosResponse { val data: T val status: Number ... }

Using the functions fun getPhotosByKeywords(keywords: String) { val callConfig: AxiosConfigSettings = jsObject { url = "${App.BASE_URL}/inspirations/?keywords=$keywords" method = "GET" timeout = 3000 } axios>(callConfig).then { if (it.status == 200) { val newState = PhotoSelectionState().apply { inspirations.addAll(it.data) } setState(newState) } } }

Is it beautiful? • Follows HTML closely • Builder-like functions to construct the DOM

THANK YOU NGIYABONGA KE A LEBOGA NDZA NKHENSA KE ITUMETSE NDO LIVHUWA ENKOSI THANK YOU NGIYABONGA KE A LEBOGA NDZA NKHENSA KE ITUMETSE NDO LIVHUWA ENKOSI BAIE DANKIE THANK YOU NGIYABONGA KE A LEBOGA NDZA NKHENSA KE ITUMETSE NDO LIVHUWA ENKOSI THANK YOU NGIYABONGA KE A LEBOGA NDZA NKHENSA KE ITUMETSE NDO LIVHUWA ENKOSI

#KotlinConf THANK YOU AND REMEMBER TO VOTE Pamela Hill @pamelaahill