Kotlin/JS の仕組み / How KotlinJS works

Kotlin Fest 2019の発表資料

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