Kotlin/JS の仕組み / How KotlinJS works

B9d723a1439affc92fcd589446f73d3b?s=47 Yuku Kotani
August 24, 2019

Kotlin/JS の仕組み / How KotlinJS works

Kotlin Fest 2019の発表資料

B9d723a1439affc92fcd589446f73d3b?s=128

Yuku Kotani

August 24, 2019
Tweet

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