Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Kotlin/JS の仕組み / How KotlinJS works
Search
Yuku Kotani
August 24, 2019
Technology
5
2.9k
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
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
310
GraphQLスキーマ設計の勘所
yukukotani
39
15k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
570
先を見据えたMVPのフロントエンド開発
yukukotani
0
230
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
2.6k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
320
Other Decks in Technology
See All in Technology
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
2
490
本当のAWS基礎
toru_kubota
0
520
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
140
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
ココがすごいぜ!Playwright Component Test
rakus_fe
0
120
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
350
Janus
bkuhlmann
1
490
データベース02: データベースの概念
trycycle
0
160
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Unsuck your backbone
ammeep
663
57k
What the flash - Photography Introduction
edds
64
11k
Side Projects
sachag
451
41k
The Invisible Customer
myddelton
114
12k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Debugging Ruby Performance
tmm1
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
KATA
mclloyd
15
12k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
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かわいい!