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
3k
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
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
940
Real World Type Puzzle and Code Generation
yukukotani
4
750
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
400
GraphQLスキーマ設計の勘所
yukukotani
39
16k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
620
先を見据えたMVPのフロントエンド開発
yukukotani
0
260
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
2.7k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
360
Other Decks in Technology
See All in Technology
AOAI Dev Day - Opening Session
yoshidashingo
2
440
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Music & Morning Musume
bryan
43
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Visualization
eitanlees
139
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Teambox: Starting and Learning
jrom
130
8.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
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かわいい!