This work is licensed under a Creative Commons
Attribution-ShareAlike 4.0 International License
Source: gitlab

Snake in KotlinJS

Andy Balaam
artificialworlds.net/blog

Snake

Why Snake?
It's Snake!
Easy, but requires:

Arrays
Loops
UI
Input

Kotlin

It's like Java
But with lots of the problems fixed
Shortens common patterns
Encourages good habits
Compiles to JVM, native, and JavaScript

KotlinJS

All of Kotlin (with standard library: List, Set etc.)
Compiles to nodejs or browser
Access to the browser DOM
Can use common module formats
Can't use Java code

♥ Kotlin

Null safety, smart casts
Data classes, named parameters
Immutability
Streams
Closures
Async, extension functions, operator overloading

♥ Kotlin

Null safety, smart casts

fun main(args: Array<String>) {
    val x: String? = args.firstOrNull()
    println(x.length);
}

♥ Kotlin

Null safety, smart casts

fun main(args: Array<String>) {
    val x: String? = args.firstOrNull()
    println(x.length);
             ^
error: only safe (?.) calls are allowed
       on a nullable receiver of type String?
}

♥ Kotlin

Null safety, smart casts

fun main(args: Array<String>) {
    val x: String? = args.firstOrNull()
    if (x != null) {
        println(x.length);
    }

Compiles fine.

♥ Kotlin

Data classes, named parameters

data class Point(val x: Int, val y: Int)

That is the whole file.

♥ Kotlin

Data classes, named parameters

data class Point(val x: Int, val y: Int)

val p = Point(x = 10, y = 10)

♥ Kotlin

Immutability

data class Point(val x: Int, val y: Int)

val p = Point( x = 10, y = 10 )
p.x = 3

♥ Kotlin

Immutability

data class Point(val x: Int, val y: Int)

val p = Point( x = 10, y = 10 )
p.x = 3
 ^
error: val cannot be reassigned

♥ Kotlin

Immutability, but!

data class Point(var x: Int, var y: Int)

fun main() {
    val p = Point( x = 10, y = 10 )
    p.x = 3
}

Compiles fine! Immutability is shallow.

♥ Kotlin

Streams

var body = (0..4).map { Point(10, 10 + it) }

♥ Kotlin

Closures

var body = (0..4).map { Point(10, 10 + it) }

How does it feel?

import kotlin.browser.document
import kotlin.browser.window
fun main() {
    val canvas = document.getElementById(
        "snake-canvas") as HTMLCanvasElement

    window.onresize = {
        scaleCanvas(canvas, window)
    }
}

It feels like JavaScript with types.

How does it feel?

fun headHittingBody() =
    snake.body.drop(1).any { head == it }

if (headOutsideGame ||
    (head != apple && headHittingBody())
) {
    snake.alive = false
}

No wait it feels like Kotlin

How does it feel?

val ctx = canvas.getContext("2d")
    as CanvasRenderingContext2D

ctx.fillText(
    "Score: ${game.snake.body.size}.",
    canvas.width / 2.0,
    canvas.height / 2.0
)

It's like you're calling JS APIs but passing in Kotlin objects and using Kotlin syntactic sugar.

How does it feel?

Friction-free
But you still need to understand the JS libraries you use
And you need to know Kotlin

How does it feel?

Designed with real-world interoperability in mind (e.g. there is a KotlinJS+React section in the tutorials)
Uses the DefinitelyTyped.org definitions so popular JS libraries work
Contrast with e.g. Elm

Deployment

$ grep script index.html
<script src="web/kotlin.js"...
<script src="web/snake-kotlinjs.js" ...

Deployment

$ ls web/
2078581 kotlin.js
 161108 kotlin.meta.js
   1594 snake-kotlinjs/root-package.kjsm
  13284 snake-kotlinjs.js
   1312 snake-kotlinjs.meta.js

Deployment

$ cat snake-kotlinjs.js
...
  var headHittingBody = Game$step$headHittingBody(this, head);
  if (
      headOutsideGame || (
          !(head != null ?
          head.equals(this.apple) : null
      ) &&
      headHittingBody())
  ) {
    this.snake.alive = false;
  }
...

Deployment

$ wc -l src/main/kotlin/*.kt
195 total

$ wc -l web/snake-kotlinjs.js
415 web/snake-kotlinjs.js

Deployment

$ wc -l web/kotlin.js
50868 web/kotlin.js

Runtime library is 50K lines of code

Deployment

$ wc -l web/kotlin.js
50868 web/kotlin.js

Runtime library is 50K lines of code
Most of it is incomprehensible gobbledegook

MutableMap.prototype.getOrDefault_xwzc9p$ = Map.prototype.getOrDefault_xwzc9p$;

Deployment

Credit: prnsml

Deployment

Credit: prnsml

$ ls -l web/kotlin.js   # Before
2.0M web/kotlin.js

$ ls -l web/kotlin.js   # After dead code elimination
192K web/kotlin.js

$ ls -l web/*ugly*.js   # After uglifyjs
88K web/kotlin.uglyfyjs.min.js