Kotlin Fest 2019の発表資料
Kotlin/JS の仕組みKotlin Fest 2019
View Slide
自己紹介- 名前: 小谷 優空 (Yuku Kotani)- GitHub: @Monchi- Twitter: @MonchiFC- 所属: Ubie, Everforth, 筑波大学情報科学類- Kontributor2
コンパイルの流れ
謎のコンパイラコンパイルの流れ4CLIkotlin-gradle-pluginJVMJavaScriptNative(LLVM)出力
コンパイルの流れ5CLIkotlin-gradle-pluginJVMJavaScriptNative(LLVM)AST(PSI)Kotlinコードコンパイラ出力IR(中間表現)
コンパイルの流れ6CLIkotlin-gradle-pluginJVMJavaScriptNative(LLVM)AST(PSI)Kotlinコードコンパイラ出力参照コンパイル先に関わらずKotlinコードとして参照、操作できる!IR(中間表現)
コンパイルの流れ7CLIkotlin-gradle-pluginJVMJavaScriptNative(LLVM)AST(PSI)Kotlinコードコンパイラ出力IR(中間表現)
Kotlin/JS変換の工夫
Dead Code Elimination- Tree Shakingとも言う- 使われていない関数やプロパティ、クラスを削除- KotlinのIRも参照する- JSにしてからwebpackとか使うより精度がいい9
結局バンドルサイズどうなの?
Dead Code Elimination- 単純なTodoMVCアプリケーションをDCE1922KB -> 416KB- minifyすると更に 198KB に- gzipすると更に 45KB に- webpackのTree Shakingも重ねがけでもっと減らせそう11
型変換- KotlinからJavaScriptに型変換String -> stringInt -> numberAny -> {}クラス -> prototypeでよしなに12
型変換- 型付き配列- 型に応じて [], Int8Array, Int16Array... に変換- Long(64bit整数)- JavaScriptは53bit整数までしか扱えない- 内部的にエミュレートするKotlin.Longクラスに変換13
モジュール14- JavaScriptには様々なモジュール管理方法がある- Kotlin/JSもそれに合わせて色々吐ける- plain: そのままブラウザで動く- commonjs, amd: webpackとかでバンドルする- umd: 上2つのハイブリッド
moduleKind = plain の場合
moduleKind = plain の場合グローバル変数として定義
moduleKind = plain の場合- モジュールシステムを使わない- ブラウザでそのまま動く- 依存順を意識してロードする必要がある
moduleKind = commonjs の場合
moduleKind = commonjs の場合require()でロード
moduleKind = commonjs の場合- Node.jsのモジュールシステム- Webpackなどでバンドルする必要がある- 最適化の余地がある- ライブラリとして他から読み込める(JSからも!)
Kotlin/JSすげー!もっと知りてー!
Deep Dive into Kotlin/JS22
Deep Dive into Kotlin/JS23激アツリポジトリ
Deep Dive into Kotlin/JS24https://github.com/JetBrains/kotlin/tree/master/compiler/ir/backend.js信じられるのはソースコードだけ
25ありがとうございましたKotlinかわいい!