Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Kotlin/JS の仕組み / How KotlinJS works
Yuku Kotani
August 24, 2019
Technology
5
2.1k
Kotlin/JS の仕組み / How KotlinJS works
Kotlin Fest 2019の発表資料
Yuku Kotani
August 24, 2019
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
先を見据えたMVPのフロントエンド開発
yukukotani
0
27
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
1.7k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
210
Other Decks in Technology
See All in Technology
Data Warehouse or Data Lake, which one do I choose?
ahana
0
130
Whats new in Android Media?
myolwin00
2
110
Who owns the Service Level?
chaspy
5
1.1k
Oracle Content Management サービス概要 (2022年5月版)
oracle4engineer
PRO
0
120
BFFとmicroservicesアーキテクチャ
hirac1220
0
110
Learning from AWS Customer Security Incidents [2022]
ramimac
0
1.2k
LINE WORKS API 2.0について
mmclsntr
0
120
1,000万人以上が利用する「家族アルバム みてね」のSRE組織は4年間でどのように作られてきたのか/SRE NEXT 2022
isaoshimizu
6
3.1k
Data-Driven Healthcare - Techplay
kotaroito
0
110
OSINT/GEOINT ワークショップ 20220514 古橋資料
furuhashilab
2
310
Embedded SRE at Mercari
tcnksm
0
860
Poolにおける足を止めないシステム基盤構築
winebarrel
3
930
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
295
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
How to Ace a Technical Interview
jacobian
265
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Adopting Sorbet at Scale
ufuk
63
7.5k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
In The Pink: A Labor of Love
frogandcode
130
21k
Docker and Python
trallard
27
1.5k
Building an army of robots
kneath
299
40k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Transcript
Kotlin/JS の仕組み Kotlin Fest 2019
自己紹介 - 名前: 小谷 優空 (Yuku Kotani) - GitHub: @Monchi
- Twitter: @MonchiFC - 所属: Ubie, Everforth, 筑波大学情報科学類 - Kontributor 2
コンパイルの流れ
謎のコンパイラ コンパイルの流れ 4 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) 出力
コンパイルの流れ 5 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 IR (中間表現)
コンパイルの流れ 6 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 参照 コンパイル先に関わらず Kotlinコードとして 参照、操作できる! IR (中間表現)
コンパイルの流れ 7 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 IR (中間表現)
Kotlin/JS変換の工夫
Dead Code Elimination - Tree Shakingとも言う - 使われていない関数やプロパティ、クラスを削除 - KotlinのIRも参照する
- JSにしてからwebpackとか使うより精度がいい 9
結局バンドルサイズどうなの?
Dead Code Elimination - 単純なTodoMVCアプリケーションをDCE 1922KB -> 416KB - minifyすると更に
198KB に - gzipすると更に 45KB に - webpackのTree Shakingも重ねがけでもっと減らせそう 11
型変換 - KotlinからJavaScriptに型変換 String -> string Int -> number Any
-> {} クラス -> 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/JS 22
Deep Dive into Kotlin/JS 23 激アツリポジトリ
Deep Dive into Kotlin/JS 24 https://github.com/JetBrains/kotlin/tree /master/compiler/ir/backend.js 信じられるのはソースコードだけ
25 ありがとうございました Kotlinかわいい!