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. fun collectionsDemo(strings: List<String>) { strings .filter { it.length > 5

    } .map { it.toLowerCase() } .forEach { println(it) } } Collections - operations
  2. 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
  3. 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
  4. fun createThing(id:String, callback: (thing:Thing) -> Unit) { val thing =

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

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

    Thing(id) callback(thing) } createThing("first") { println(it) } Functions - lambdas
  7. 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
  8. 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
  9. 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
  10. class Thing { var name: String? = null var id:

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

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

    { response -> response.text() } .then { text -> println(text) } .catch { error -> println("Error: $error") } }
  14. 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") } }
  15. class Response<T>(val value: T) interface Api<T> { fun load(url: String):

    Response<T> } interface Ui<T> { fun show(data: T) } DSLs!
  16. 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([email protected]()); } } DSLs!
  17. 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!
  18. 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);
  19. 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() }