Kotlin/JS の仕組み / How KotlinJS works

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かわいい！