KOTLIN AND JS
@ 2k18
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054131/Kotlin-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/2537171/js.jpg)
Kotlin
What is Kotlin?
Why Kotlin?
Pros and Cons
JS
Current State
Kotlin to JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054131/Kotlin-logo.png)
Kotlin
What is it?
Island!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054136/660444_91630-670x400x.jpg)
Statically typed programming language
for modern multiplatform applications
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054131/Kotlin-logo.png)
FEATURES
Ultra-multi-platform
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/2537171/js.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054153/61120.png)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010672/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010675/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010730/pasted-from-clipboard.png)
Debug
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010682/pasted-from-clipboard.png)
Lot of Wrapper has arrived!
TS2KT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010691/ts2kt.png)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/2540417/ts.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054131/Kotlin-logo.png)
VS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054132/WebAssembly_Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/4054131/Kotlin-logo.png)
Text
Text
Text
Text
Text
2016
![](https://s3.amazonaws.com/media-p.slid.es/uploads/391469/images/5010753/pasted-from-clipboard.png)
2017
Conclusion
Thank for your attention!
Kotlin is here again
By diodredd
Kotlin is here again
- 263