Kotlin/JS の仕組み / How KotlinJS works

Transcript

1. 1.

   Kotlin/JS の仕組み Kotlin Fest 2019

2. 2.

   自己紹介 - 名前: 小谷 優空 (Yuku Kotani) - GitHub: @Monchi

   - Twitter: @MonchiFC - 所属: Ubie, Everforth, 筑波大学情報科学類 - Kontributor 2
3. 3.

   コンパイルの流れ

4. 4.

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

5. 5.

   コンパイルの流れ 5 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin

   コード コンパイラ 出力 IR (中間表現)
6. 6.

   コンパイルの流れ 6 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin

   コード コンパイラ 出力 参照 コンパイル先に関わらず Kotlinコードとして 参照、操作できる！ IR (中間表現)
7. 7.

   コンパイルの流れ 7 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin

   コード コンパイラ 出力 IR (中間表現)
8. 8.

   Kotlin/JS変換の工夫

9. 9.

   Dead Code Elimination - Tree Shakingとも言う - 使われていない関数やプロパティ、クラスを削除 - KotlinのIRも参照する

   - JSにしてからwebpackとか使うより精度がいい 9
10. 10.

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

11. 11.

    Dead Code Elimination - 単純なTodoMVCアプリケーションをDCE 1922KB -> 416KB - minifyすると更に

    198KB に - gzipすると更に 45KB に - webpackのTree Shakingも重ねがけでもっと減らせそう 11
12. 12.

    型変換 - KotlinからJavaScriptに型変換 String -> string Int -> number Any

    -> {} クラス -> prototypeでよしなに 12
13. 13.

    型変換 - 型付き配列 - 型に応じて [], Int8Array, Int16Array... に変換 -

    Long(64bit整数) - JavaScriptは53bit整数までしか扱えない - 内部的にエミュレートするKotlin.Longクラスに変換 13
14. 14.

    モジュール 14 - JavaScriptには様々なモジュール管理方法がある - Kotlin/JSもそれに合わせて色々吐ける - plain: そのままブラウザで動く -

    commonjs, amd: webpackとかでバンドルする - umd: 上2つのハイブリッド
15. 15.

    moduleKind = plain の場合

16. 16.

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

17. 17.

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

18. 18.

    moduleKind = commonjs の場合

19. 19.

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

20. 20.

    moduleKind = commonjs の場合 - Node.jsのモジュールシステム - Webpackなどでバンドルする必要がある - 最適化の余地がある

    - ライブラリとして他から読み込める（JSからも！）
21. 21.

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

22. 22.

    Deep Dive into Kotlin/JS 22

23. 23.

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

24. 24.

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

25. 25.

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