Introduction to Kotlin/JS for frontend development @ErikHellman speakerdeck.com/erikhellman/js-for-frontend-development

No content

No content

No content

No content

kotlinlang.org

Compile target

fun sayHello(name: String): String { return "Hello, " + name + "!"; }

fun sayHello(name: String): String { return "Hello, $name!"; }

fun sayHello(name: String): String = "Hello, $name!";

fun sayHello(name: String): String = "Hello, $name!"

fun nullAllowed(name: String?) { println("Hello, ${name ?: "You"}!") } Nullability

fun fetchData(url: String?): Data? { return url?.let { fetch(it) } } Nullability

fun collectionsDemo(strings: List) { strings .filter { it.length > 5 } .map { it.toLowerCase() } .forEach { println(it) } } Collections - operations

fun addToList(strings: List, name:String): List { return strings + name } Collections - modifications

fun buildKitten(name: String, color:Color = Color.Black, sex: Sex = Sex.Female, race: Race = Race.Siberian): Kitten { return Kitten(name, color, sex, race) } val kitten = buildKitten("Lucy", color = Color.Gray) Functions - default & named arguments

fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing = Thing(id) callback(thing) } val callback = { thing: Thing -> println(thing) } createThing("first", callback) Functions - lambdas

fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing = Thing(id) callback(thing) } createThing("first", { thing -> println(thing) }) Functions - lambdas

fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing = Thing(id) callback(thing) } createThing("first", { println(it) }) Functions - lambdas

fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing = Thing(id) callback(thing) } createThing("first") { println(it) } Functions - lambdas

class Pair(val first:String, val second:String) fun createPair(first:String, second:String): Pair { return Pair(first, second) } Functions - extension functions

class Pair(val first:String, val second:String) fun String.pairedWith(other:String) = Pair(this, other) fun createPair(first:String, second:String): Pair { return first.pairedWith(second) } Functions - extension functions

class Pair(val first:String, val second:String) infix fun String.pairedWith(other:String) = Pair(this, other) fun createPair(first:String, second:String): Pair { return first pairedWith second } Functions - infix functions

class Pair(val first:String, val second:String) { operator fun contains(text:String): Boolean { return text == first || text == second } } fun testPair() { val pair = Pair("Hello", "World") if ("World" in pair) { println("Match!") } } Functions - operator overloading

class Thing Classes & Interfaces

class Thing(val name: String, val id: Int) Classes - constructor

class Thing { var name: String? = null var id: Int? = null } Classes - properties

class Thing { var name: String? = null var id: Int? = null companion object { fun build(name: String, id: Int): Thing { return Thing().also { it.name = name it.id = id } } } } Classes - companion object

Classes - immutable data classes data class Thing(val name: String, val id: Int) val firstThing = Thing("Erik", 1) val secondThing = firstThing.copy(name = "John")

Async functions - Kotlin Coroutines fun fetchDemo(url) { window.fetch(url) .then { response -> response.text() } .then { text -> println(text) } .catch { error -> println("Error: $error") } }

Async functions - Kotlin Coroutines suspend fun fetchAndShowData(url: String) { try { val response = window.fetch(url).await() val text = response.text().await() println("Test data: $text") } catch (error: Exception) { println("Error: $error") } }

Kotlin/JS - compiler input fun main() { println("Hello, World - From Kotlin/JS!") }

class Response(val value: T) interface Api { fun load(url: String): Response } interface Ui { fun show(data: T) } DSLs!

fun dslDemo(api: Api, ui: Ui) { load ("http:=/api.server.com/v1/things/1") { api.load(it) } then { ui.show(it) } } DSLs!

fun load( url:String, loadFunc: (url:String) => Response): Deferred { return async { loadFunc(url).value } } infix fun Deferred.then(lambda: (T) => Unit) { launch { lambda([email protected]()); } } DSLs!

fun dslDemo(api: Api, ui: Ui) { load ("http:=/api.server.com/v1/things/1") { api.load(it) } then { ui.show(it) } } DSLs!

fun Application.main() { routing { get("/") { call.respondHtml { head { title { +"Ktor: html" } } body { p { +"Hello from Ktor html sample application" } } } } } } Ktor.io - Web DSL in practice!

Kotlin/JS compiler $ kotlinc-js Main.kt -output main.js

Kotlin/JS - compiler output if (typeof kotlin === 'undefined') { throw new Error("Error loading module 'main'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'main'."); } var main = function (_, Kotlin) { 'use strict'; var println = Kotlin.kotlin.io.println_s8jyv4$; function main() { println('Hello, World - From Kotlin/JS!'); } _.main = main; main(); Kotlin.defineModule('main', _); return _; }(typeof main === 'undefined' ? {} : main, kotlin);

Kotlin/JS - build.gradle.kts plugins { kotlin("js") version "1.3.50" } group = "se.hellsoft" version = "1.0.0" kotlin { target { browser() } sourceSets["main"].dependencies { implementation(kotlin("stdlib-js")) } } repositories { jcenter() }

But why?

Compile target

Thank you for listening! Any questions?

Resources ● https://speakerdeck.com/erikhellman/js-for-frontend-development ● https://play.kotlinlang.org/ ● https://kotlinlang.org/ ● https://kotlinconf.com/