Kotlin/JS の仕組み / How KotlinJS works

Slide 1

Slide 1 text

Kotlin/JS の仕組み Kotlin Fest 2019

Slide 2

Slide 2 text

自己紹介 - 名前: 小谷優空 (Yuku Kotani) - GitHub: @Monchi - Twitter: @MonchiFC - 所属: Ubie, Everforth, 筑波大学情報科学類 - Kontributor 2

Slide 3

Slide 3 text

コンパイルの流れ

Slide 4

Slide 4 text

謎のコンパイラコンパイルの流れ 4 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) 出力

Slide 5

Slide 5 text

コンパイルの流れ 5 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コードコンパイラ出力 IR (中間表現)

Slide 6

Slide 6 text

コンパイルの流れ 6 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コードコンパイラ出力参照コンパイル先に関わらず Kotlinコードとして参照、操作できる！ IR (中間表現)

Slide 7

Slide 7 text

コンパイルの流れ 7 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コードコンパイラ出力 IR (中間表現)

Slide 8

Slide 8 text

Kotlin/JS変換の工夫

Slide 9

Slide 9 text

Dead Code Elimination - Tree Shakingとも言う - 使われていない関数やプロパティ、クラスを削除 - KotlinのIRも参照する - JSにしてからwebpackとか使うより精度がいい 9

Slide 10

Slide 10 text

結局バンドルサイズどうなの？

Slide 11

Slide 11 text

Dead Code Elimination - 単純なTodoMVCアプリケーションをDCE 1922KB -> 416KB - minifyすると更に 198KB に - gzipすると更に 45KB に - webpackのTree Shakingも重ねがけでもっと減らせそう 11

Slide 12

Slide 12 text

型変換 - KotlinからJavaScriptに型変換 String -> string Int -> number Any -> {} クラス -> prototypeでよしなに 12

Slide 13

Slide 13 text

型変換 - 型付き配列 - 型に応じて [], Int8Array, Int16Array... に変換 - Long(64bit整数) - JavaScriptは53bit整数までしか扱えない - 内部的にエミュレートするKotlin.Longクラスに変換 13

Slide 14

Slide 14 text

モジュール 14 - JavaScriptには様々なモジュール管理方法がある - Kotlin/JSもそれに合わせて色々吐ける - plain: そのままブラウザで動く - commonjs, amd: webpackとかでバンドルする - umd: 上2つのハイブリッド

Slide 15

Slide 15 text

moduleKind = plain の場合

Slide 16

Slide 16 text

moduleKind = plain の場合グローバル変数として定義

Slide 17

Slide 17 text

moduleKind = plain の場合 - モジュールシステムを使わない - ブラウザでそのまま動く - 依存順を意識してロードする必要がある

Slide 18

Slide 18 text

moduleKind = commonjs の場合

Slide 19

Slide 19 text

moduleKind = commonjs の場合 require()でロード

Slide 20

Slide 20 text

moduleKind = commonjs の場合 - Node.jsのモジュールシステム - Webpackなどでバンドルする必要がある - 最適化の余地がある - ライブラリとして他から読み込める（JSからも！）

Slide 21

Slide 21 text

Kotlin/JSすげー！もっと知りてー！

Slide 22

Slide 22 text

Deep Dive into Kotlin/JS 22

Slide 23

Slide 23 text

Deep Dive into Kotlin/JS 23 激アツリポジトリ

Slide 24

Slide 24 text

Deep Dive into Kotlin/JS 24 https://github.com/JetBrains/kotlin/tree /master/compiler/ir/backend.js 信じられるのはソースコードだけ

Slide 25

Slide 25 text

25 ありがとうございました Kotlinかわいい！