Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kotlin/JS の仕組み / How KotlinJS works

Yuku Kotani
August 24, 2019

Kotlin/JS の仕組み / How KotlinJS works

Kotlin Fest 2019の発表資料

Yuku Kotani

August 24, 2019
Tweet

More Decks by Yuku Kotani

Other Decks in Technology

Transcript

  1. Kotlin/JS の仕組み
    Kotlin Fest 2019

    View Slide

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

    View Slide

  3. コンパイルの流れ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Kotlin/JS変換の工夫

    View Slide

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

    View Slide

  10. 結局バンドルサイズどうなの?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. moduleKind = plain の場合

    View Slide

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

    View Slide

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

    View Slide

  18. moduleKind = commonjs の場合

    View Slide

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

    View Slide

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

    View Slide

  21. Kotlin/JSすげー!
    もっと知りてー!

    View Slide

  22. Deep Dive into Kotlin/JS
    22

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide