Kotlin/JS の仕組み / How KotlinJS works

Kotlin Fest 2019の発表資料

Transcript

1. Kotlin/JS の仕組み Kotlin Fest 2019
2. 自己紹介 - 名前: 小谷 優空 (Yuku Kotani) - GitHub: @Monchi - Twitter: @MonchiFC - 所属: Ubie, Everforth, 筑波大学情報科学類 - Kontributor 2
3. コンパイルの流れ
4. 謎のコンパイラ コンパイルの流れ 4 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) 出力
5. コンパイルの流れ 5 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コード コンパイラ 出力 IR (中間表現)
6. コンパイルの流れ 6 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コード コンパイラ 出力 参照 コンパイル先に関わらず Kotlinコードとして 参照、操作できる！ IR (中間表現)
7. コンパイルの流れ 7 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin コード コンパイラ 出力 IR (中間表現)
8. Kotlin/JS変換の工夫
9. Dead Code Elimination - Tree Shakingとも言う - 使われていない関数やプロパティ、クラスを削除 - KotlinのIRも参照する - JSにしてからwebpackとか使うより精度がいい 9
10. 結局バンドルサイズどうなの？
11. Dead Code Elimination - 単純なTodoMVCアプリケーションをDCE 1922KB -> 416KB - minifyすると更に 198KB に - gzipすると更に 45KB に - webpackのTree Shakingも重ねがけでもっと減らせそう 11
12. 型変換 - KotlinからJavaScriptに型変換 String -> string Int -> number Any -> {} クラス -> prototypeでよしなに 12
13. 型変換 - 型付き配列 - 型に応じて [], Int8Array, Int16Array... に変換 - Long(64bit整数) - JavaScriptは53bit整数までしか扱えない - 内部的にエミュレートするKotlin.Longクラスに変換 13
14. モジュール 14 - JavaScriptには様々なモジュール管理方法がある - Kotlin/JSもそれに合わせて色々吐ける - plain: そのままブラウザで動く - commonjs, amd: webpackとかでバンドルする - umd: 上2つのハイブリッド
15. moduleKind = plain の場合
16. moduleKind = plain の場合 グローバル変数として定義
17. moduleKind = plain の場合 - モジュールシステムを使わない - ブラウザでそのまま動く - 依存順を意識してロードする必要がある
18. moduleKind = commonjs の場合
19. moduleKind = commonjs の場合 require()でロード
20. moduleKind = commonjs の場合 - Node.jsのモジュールシステム - Webpackなどでバンドルする必要がある - 最適化の余地がある - ライブラリとして他から読み込める（JSからも！）
21. Kotlin/JSすげー！ もっと知りてー！
22. Deep Dive into Kotlin/JS 22
23. Deep Dive into Kotlin/JS 23 激アツリポジトリ
24. Deep Dive into Kotlin/JS 24 https://github.com/JetBrains/kotlin/tree /master/compiler/ir/backend.js 信じられるのはソースコードだけ
25. 25 ありがとうございました Kotlinかわいい！