Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Kotlin/JS for frontend development

Introduction to Kotlin/JS for frontend development

Is there room for another alternative to JavaScript these days when TypeScript covers all the needs we have of a modern, type-safe language? Kotlin was unveiled by JetBrains in 2011 as an alternative to Java on the JVM, and has since evolved to include Android, native (including iOS), and JavaScript (node or browser).

In this talk I will introduce the Kotlin language to frontend developers and demonstrate the pros and cons to using this for your next project. We'll learn about the unique features of Kotlin, how it deals with concurrency, and how the JavaScript can be a compile target using Kotlin/JS.

Erik Hellman

March 03, 2020
Tweet

More Decks by Erik Hellman

Other Decks in Programming

Transcript

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

    View full-size slide

  2. kotlinlang.org

    View full-size slide

  3. Compile
    target

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 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

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. class Thing
    Classes & Interfaces

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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")
    }
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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!

    View full-size slide

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

    View full-size slide

  33. 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!

    View full-size slide

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

    View full-size slide

  35. 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);

    View full-size slide

  36. 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()
    }

    View full-size slide

  37. Compile
    target

    View full-size slide

  38. Thank you for listening!
    Any questions?

    View full-size slide

  39. Resources

    https://speakerdeck.com/erikhellman/js-for-frontend-development

    https://play.kotlinlang.org/

    https://kotlinlang.org/

    https://kotlinconf.com/

    View full-size slide