KOTLIN AND JS

@ 2k18

 

Kotlin

What is Kotlin?

Why Kotlin?

Pros and Cons

 

JS

Current State

Kotlin to JS

Kotlin

What is it?

Island!

Statically typed programming language
for modern multiplatform applications

FEATURES

Ultra-multi-platform

Concise
Safe
Interoperable

Functional yet static typed

fun main(args: Array<String>) {
    val oddLength = compose(::isOdd, ::length)
    val strings = listOf("a", "ab", "abc")
    println(strings.filter(oddLength))
}

fun isOdd(x: Int) = x % 2 != 0
fun length(s: String) = s.length

fun <A, B, C> compose(f: (B) -> C, g: (A) -> B): (A) -> C {
    return { x -> f(g(x)) }
}

Destructuring and Tuples

val (name, age) = person

data class Result(val result: Int, val status: Status)
fun function(...): Result {
    // computations
    return Result(result, status)
}

// omitting
val (_, status) = getResult()

// for loops
for ((a, b) in collection) { ... }

// in lambdas
map.mapValues { entry -> "${entry.value}!" }
map.mapValues { (key, value) -> "$value!" }

Null Safety

fun parseInt(str: String): Int? {
    try {
        return str.toInt()
    } catch (e: NumberFormatException) {
        println("One of the arguments isn't Int")
    }
    return null
}

fun main(args: Array<String>) {
    if (args.size < 2) {
        println("No number supplied");
    } else {
        val x = parseInt(args[0])
        val y = parseInt(args[1])

        if (x != null && y != null) {
            print(x * y) // Now we can
        } else {
            println("One of the arguments is null")
    }
    }
}

Elvis Operator

val l: Int = if (b != null) b.length else -1
// equals to
val l = b?.length ?: -1

if - expression

val max = if (a > b) a else b

val max = if (a > b) {
    print("Choose a")
    a
} else {
    print("Choose b")
    b
}

for loop

for (item in collection) print(item)
for (item: Int in ints) {
    // ...
}
for (i in array.indices) {
    print(array[i])
}
for ((index, value) in array.withIndex()) {
    println("the element at $index is $value")
}

when

fun main(args: Array<String>) {
    cases("Hello")
    cases(1)
    cases(0L)
    cases(MyClass())
    cases("hello")
}

fun cases(obj: Any) {
    when (obj) {
        1 -> println("One")
        "Hello" -> println("Greeting")
        is Long -> println("Long")
        !is String -> println("Not a string")
        else -> println("Unknown")
    }
}

class MyClass() {
}

JS Interop

// Dynamic Type

val dyn: dynamic = ...
dyn.foo().bar.baz()

// external

external class MyClass {
    companion object {
        fun sharedMember()
    }

    fun ownMember()
}

external interface HasFooAndBar {
    fun foo()

    fun bar()
}

external fun myFunction(p: HasFooAndBar)

And much more

This expression, Annotation, Type checks is and as, Operator overloading, 

Coroutines, delegate, callable references and much more (even native canvas support!)

Current State

Here might be a life demo.

App.kt

package app

import react.*
import react.dom.*
import logo.*
import ticker.*
import button.*
import detector.*
import store.appStore

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div("App-header") {
            logo()
            h2 {
                +"Hello Storm The Front #1"
            }
        }
        p("App-ticker") {
            ticker()
        }
        p {
            awesomeButton(fun (_) { appStore.dispatch(awesomeAction) })
        }
        p {
            detector()
        }
    }
}

fun RBuilder.app() = child(App::class) {}

Detector.kt

package detector

import react.*
import react.dom.*
import store.appStore

class Detector : RComponent<RProps, State>() {
    override fun componentDidMount() {
        appStore.subscribe({
            setState { awesomeness = appStore.getState().awesomeness }
        })
    }

    override fun RBuilder.render() {
        if (state.awesomeness) p ("awesome") { + "$!Awesomeness Gained!$" }
        else p { + "Not Yet Awesome..." }
    }
}

fun RBuilder.detector() = child(Detector::class) {}

interface  State : RState {
    var awesomeness: Boolean
}

Button.kt

package button

import react.*
import react.dom.*

fun RBuilder.awesomeButton(handleClick: (dynamic) -> Unit) {
    button(classes = "awesome-button") {
        +"Become Awesome!"
        setProp("onClick", handleClick)
    }
}

store.kt

package store

import kotlin.js.Json
import kotlin.js.json

import ticker.tickReducer
import app.awesomeReducer

external interface Window {
    val __REDUX_DEVTOOLS_EXTENSION__: dynamic
}

external val window: Window

external object Redux {
    fun createStore(fn: dynamic, enhancer: dynamic): ReduxStore
    fun combineReducers(reducers: dynamic)
}

external interface ReduxStore {
    fun dispatch(action: Json): dynamic
    fun getState(): dynamic
    fun subscribe(sub: dynamic)
}

val appStore: ReduxStore = Redux.createStore(
        Redux.combineReducers(json(Pair("tick", ::tickReducer), Pair("awesomeness", ::awesomeReducer))),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

reducer and action

// reducer
package app

const val INITIAL_STATE = false

fun awesomeReducer(state: Boolean = INITIAL_STATE, action: dynamic): Boolean {
    return when(action.type) {
        "AWESOME_ACTION" -> true
        else -> state
    }
}

// action

package app

import store.*
import kotlin.js.json

val awesomeAction = json(Pair("type", "AWESOME_ACTION"))

A bit of imagination...

Debug

Lot of Wrapper has arrived!

TS2KT

DISCLAIMER!

All my next words, is only my personal opinion about topic subject, it's not even close an "expert opinion", or not intended to harm someone's tender feelings. So If you feelings will be harmed nevertheless, just live with that, and remember - they watching you...

VS

Text

Text

Text

Text

Text

2016

2017

Conclusion

Thank for your attention!

Kotlin is here again

By diodredd

Kotlin is here again

  • 263