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.

2307a37297162f815342545a2068b2f1?s=128

Erik Hellman

March 03, 2020
Tweet

Transcript

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

  2. None
  3. None
  4. None
  5. None
  6. kotlinlang.org

  7. Compile target

  8. fun sayHello(name: String): String { return "Hello, " + name

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

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

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

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

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

    } Nullability
  14. fun collectionsDemo(strings: List<String>) { strings .filter { it.length > 5

    } .map { it.toLowerCase() } .forEach { println(it) } } Collections - operations
  15. fun addToList(strings: List<String>, name:String): List<String> { return strings + name

    } Collections - modifications
  16. 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
  17. 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
  18. fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing =

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

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

    Thing(id) callback(thing) } createThing("first") { println(it) } Functions - lambdas
  21. class Pair(val first:String, val second:String) fun createPair(first:String, second:String): Pair {

    return Pair(first, second) } Functions - extension functions
  22. 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
  23. 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
  24. 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
  25. class Thing Classes & Interfaces

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

  27. class Thing { var name: String? = null var id:

    Int? = null } Classes - properties
  28. 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
  29. Classes - immutable data classes data class Thing(val name: String,

    val id: Int) val firstThing = Thing("Erik", 1) val secondThing = firstThing.copy(name = "John")
  30. Async functions - Kotlin Coroutines fun fetchDemo(url) { window.fetch(url) .then

    { response -> response.text() } .then { text -> println(text) } .catch { error -> println("Error: $error") } }
  31. 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") } }
  32. Kotlin/JS - compiler input fun main() { println("Hello, World -

    From Kotlin/JS!") }
  33. class Response<T>(val value: T) interface Api<T> { fun load(url: String):

    Response<T> } interface Ui<T> { fun show(data: T) } DSLs!
  34. fun dslDemo(api: Api<Thing>, ui: Ui<Thing>) { load ("http:=/api.server.com/v1/things/1") { api.load(it)

    } then { ui.show(it) } } DSLs!
  35. fun <T> load( url:String, loadFunc: (url:String) => Response<T>): Deferred<T> {

    return async { loadFunc(url).value } } infix fun <T> Deferred<T>.then(lambda: (T) => Unit) { launch { lambda(this@then.await()); } } DSLs!
  36. fun dslDemo(api: Api<Thing>, ui: Ui<Thing>) { load ("http:=/api.server.com/v1/things/1") { api.load(it)

    } then { ui.show(it) } } DSLs!
  37. 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!
  38. Kotlin/JS compiler $ kotlinc-js Main.kt -output main.js

  39. 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);
  40. 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() }
  41. But why?

  42. Compile target

  43. Thank you for listening! Any questions?

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