Enviar búsqueda
Cargar
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
•
1 recomendación
•
4,026 vistas
LINE Corporation
Seguir
HTML5 CONFERENCEでの発表資料です https://events.html5j.org/conference/2018/11/session/
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 87
Recomendados
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
Deep Learning JP
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
組み込み関数(intrinsic)によるSIMD入門
組み込み関数(intrinsic)によるSIMD入門
Norishige Fukushima
Transformerを多層にする際の勾配消失問題と解決法について
Transformerを多層にする際の勾配消失問題と解決法について
Sho Takase
論理と計算のしくみ 5.3 型付きλ計算 (前半)
論理と計算のしくみ 5.3 型付きλ計算 (前半)
Lintaro Ina
ウェーブレット木の世界
ウェーブレット木の世界
Preferred Networks
暗号文のままで計算しよう - 準同型暗号入門 -
暗号文のままで計算しよう - 準同型暗号入門 -
MITSUNARI Shigeo
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
MITSUNARI Shigeo
Recomendados
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
【DL輪読会】Llama 2: Open Foundation and Fine-Tuned Chat Models
Deep Learning JP
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
組み込み関数(intrinsic)によるSIMD入門
組み込み関数(intrinsic)によるSIMD入門
Norishige Fukushima
Transformerを多層にする際の勾配消失問題と解決法について
Transformerを多層にする際の勾配消失問題と解決法について
Sho Takase
論理と計算のしくみ 5.3 型付きλ計算 (前半)
論理と計算のしくみ 5.3 型付きλ計算 (前半)
Lintaro Ina
ウェーブレット木の世界
ウェーブレット木の世界
Preferred Networks
暗号文のままで計算しよう - 準同型暗号入門 -
暗号文のままで計算しよう - 準同型暗号入門 -
MITSUNARI Shigeo
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
MITSUNARI Shigeo
Deflate
Deflate
7shi
明日使えないすごいビット演算
明日使えないすごいビット演算
京大 マイコンクラブ
Marp Tutorial
Marp Tutorial
Rui Watanabe
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
masayoshi takahashi
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
Deep Learning JP
トランザクションの並行実行制御 rev.2
トランザクションの並行実行制御 rev.2
Takashi Hoshino
Layer Normalization@NIPS+読み会・関西
Layer Normalization@NIPS+読み会・関西
Keigo Nishida
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Rustに触れて私のPythonはどう変わったか
Rustに触れて私のPythonはどう変わったか
ShunsukeNakamura17
Linux の hugepage の開発動向
Linux の hugepage の開発動向
Naoya Horiguchi
BuildKitの概要と最近の機能
BuildKitの概要と最近の機能
Kohei Tokunaga
ゼロから始める転移学習
ゼロから始める転移学習
Yahoo!デベロッパーネットワーク
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
Takuya Takaseki
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
Shota Imai
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
Yahoo!デベロッパーネットワーク
ELFの動的リンク
ELFの動的リンク
7shi
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
MITSUNARI Shigeo
暗認本読書会7
暗認本読書会7
MITSUNARI Shigeo
ラムダ計算入門
ラムダ計算入門
Eita Sugimoto
BLS署名の実装とその応用
BLS署名の実装とその応用
MITSUNARI Shigeo
第2回勉強会スライド
第2回勉強会スライド
koturn 0;
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISる
Hideyuki Tanaka
Más contenido relacionado
La actualidad más candente
Deflate
Deflate
7shi
明日使えないすごいビット演算
明日使えないすごいビット演算
京大 マイコンクラブ
Marp Tutorial
Marp Tutorial
Rui Watanabe
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
masayoshi takahashi
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
Deep Learning JP
トランザクションの並行実行制御 rev.2
トランザクションの並行実行制御 rev.2
Takashi Hoshino
Layer Normalization@NIPS+読み会・関西
Layer Normalization@NIPS+読み会・関西
Keigo Nishida
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
モノビット エンジン
Rustに触れて私のPythonはどう変わったか
Rustに触れて私のPythonはどう変わったか
ShunsukeNakamura17
Linux の hugepage の開発動向
Linux の hugepage の開発動向
Naoya Horiguchi
BuildKitの概要と最近の機能
BuildKitの概要と最近の機能
Kohei Tokunaga
ゼロから始める転移学習
ゼロから始める転移学習
Yahoo!デベロッパーネットワーク
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
Takuya Takaseki
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
Shota Imai
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
Yahoo!デベロッパーネットワーク
ELFの動的リンク
ELFの動的リンク
7shi
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
MITSUNARI Shigeo
暗認本読書会7
暗認本読書会7
MITSUNARI Shigeo
ラムダ計算入門
ラムダ計算入門
Eita Sugimoto
BLS署名の実装とその応用
BLS署名の実装とその応用
MITSUNARI Shigeo
La actualidad más candente
(20)
Deflate
Deflate
明日使えないすごいビット演算
明日使えないすごいビット演算
Marp Tutorial
Marp Tutorial
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
[DL輪読会]BERT: Pre-training of Deep Bidirectional Transformers for Language Und...
トランザクションの並行実行制御 rev.2
トランザクションの並行実行制御 rev.2
Layer Normalization@NIPS+読み会・関西
Layer Normalization@NIPS+読み会・関西
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
Rustに触れて私のPythonはどう変わったか
Rustに触れて私のPythonはどう変わったか
Linux の hugepage の開発動向
Linux の hugepage の開発動向
BuildKitの概要と最近の機能
BuildKitの概要と最近の機能
ゼロから始める転移学習
ゼロから始める転移学習
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
ELFの動的リンク
ELFの動的リンク
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
暗認本読書会7
暗認本読書会7
ラムダ計算入門
ラムダ計算入門
BLS署名の実装とその応用
BLS署名の実装とその応用
Similar a コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
第2回勉強会スライド
第2回勉強会スライド
koturn 0;
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISる
Hideyuki Tanaka
とあるFlashの自動生成
とあるFlashの自動生成
Akineko Shimizu
Start!! Ruby
Start!! Ruby
mitim
卒研発表
卒研発表
yayugu
Programming camp 2008, Codereading
Programming camp 2008, Codereading
Hiro Yoshioka
中3女子でもわかる constexpr
中3女子でもわかる constexpr
Genya Murakami
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみている
pocketberserker
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
Koichi Sakata
Stan勉強会資料(前編)
Stan勉強会資料(前編)
daiki hojo
.NET Compiler Platform
.NET Compiler Platform
信之 岩永
Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011
Hiro Yoshioka
第1回勉強会スライド
第1回勉強会スライド
koturn 0;
20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)
Yoshifumi Yamaguchi
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
Jun-ichi Sakamoto
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Masahiro Wakame
Programming camp 2010 debug hacks
Programming camp 2010 debug hacks
Hiro Yoshioka
最近の単体テスト
最近の単体テスト
Ken Morishita
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Kei IWASAKI
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
shoma h
Similar a コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
(20)
第2回勉強会スライド
第2回勉強会スライド
C++コミュニティーの中心でC++をDISる
C++コミュニティーの中心でC++をDISる
とあるFlashの自動生成
とあるFlashの自動生成
Start!! Ruby
Start!! Ruby
卒研発表
卒研発表
Programming camp 2008, Codereading
Programming camp 2008, Codereading
中3女子でもわかる constexpr
中3女子でもわかる constexpr
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみている
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
JJUG CCC 2017 Fall オレオレJVM言語を作ってみる
Stan勉強会資料(前編)
Stan勉強会資料(前編)
.NET Compiler Platform
.NET Compiler Platform
Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011
第1回勉強会スライド
第1回勉強会スライド
20130228 Goノススメ(BPStudy #66)
20130228 Goノススメ(BPStudy #66)
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
ng-japan 2015 TypeScript+AngularJS 1.3
ng-japan 2015 TypeScript+AngularJS 1.3
Programming camp 2010 debug hacks
Programming camp 2010 debug hacks
最近の単体テスト
最近の単体テスト
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Más de LINE Corporation
JJUG CCC 2018 Fall 懇親会LT
JJUG CCC 2018 Fall 懇親会LT
LINE Corporation
Reduce dependency on Rx with Kotlin Coroutines
Reduce dependency on Rx with Kotlin Coroutines
LINE Corporation
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
LINE Corporation
Use Kotlin scripts and Clova SDK to build your Clova extension
Use Kotlin scripts and Clova SDK to build your Clova extension
LINE Corporation
The Magic of LINE 購物 Testing
The Magic of LINE 購物 Testing
LINE Corporation
GA Test Automation
GA Test Automation
LINE Corporation
UI Automation Test with JUnit5
UI Automation Test with JUnit5
LINE Corporation
Feature Detection for UI Testing
Feature Detection for UI Testing
LINE Corporation
LINE 新星計劃介紹與新創團隊分享
LINE 新星計劃介紹與新創團隊分享
LINE Corporation
LINE 技術合作夥伴與應用分享
LINE 技術合作夥伴與應用分享
LINE Corporation
LINE 開發者社群經營與技術推廣
LINE 開發者社群經營與技術推廣
LINE Corporation
日本開發者大會短講分享
日本開發者大會短講分享
LINE Corporation
LINE Chatbot - 活動報名報到設計分享
LINE Chatbot - 活動報名報到設計分享
LINE Corporation
在 LINE 私有雲中使用 Managed Kubernetes
在 LINE 私有雲中使用 Managed Kubernetes
LINE Corporation
LINE TODAY高效率的敏捷測試開發技巧
LINE TODAY高效率的敏捷測試開發技巧
LINE Corporation
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE Corporation
LINE Things - LINE IoT平台新技術分享
LINE Things - LINE IoT平台新技術分享
LINE Corporation
LINE Pay - 一卡通支付新體驗
LINE Pay - 一卡通支付新體驗
LINE Corporation
LINE Platform API Update - 打造一個更好的Chatbot服務
LINE Platform API Update - 打造一個更好的Chatbot服務
LINE Corporation
Keynote - LINE 的技術策略佈局與跨國產品開發
Keynote - LINE 的技術策略佈局與跨國產品開發
LINE Corporation
Más de LINE Corporation
(20)
JJUG CCC 2018 Fall 懇親会LT
JJUG CCC 2018 Fall 懇親会LT
Reduce dependency on Rx with Kotlin Coroutines
Reduce dependency on Rx with Kotlin Coroutines
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
Kotlin/NativeでAndroidのNativeメソッドを実装してみた
Use Kotlin scripts and Clova SDK to build your Clova extension
Use Kotlin scripts and Clova SDK to build your Clova extension
The Magic of LINE 購物 Testing
The Magic of LINE 購物 Testing
GA Test Automation
GA Test Automation
UI Automation Test with JUnit5
UI Automation Test with JUnit5
Feature Detection for UI Testing
Feature Detection for UI Testing
LINE 新星計劃介紹與新創團隊分享
LINE 新星計劃介紹與新創團隊分享
LINE 技術合作夥伴與應用分享
LINE 技術合作夥伴與應用分享
LINE 開發者社群經營與技術推廣
LINE 開發者社群經營與技術推廣
日本開發者大會短講分享
日本開發者大會短講分享
LINE Chatbot - 活動報名報到設計分享
LINE Chatbot - 活動報名報到設計分享
在 LINE 私有雲中使用 Managed Kubernetes
在 LINE 私有雲中使用 Managed Kubernetes
LINE TODAY高效率的敏捷測試開發技巧
LINE TODAY高效率的敏捷測試開發技巧
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE 區塊鏈平台及代幣經濟 - LINK Chain及LINK介紹
LINE Things - LINE IoT平台新技術分享
LINE Things - LINE IoT平台新技術分享
LINE Pay - 一卡通支付新體驗
LINE Pay - 一卡通支付新體驗
LINE Platform API Update - 打造一個更好的Chatbot服務
LINE Platform API Update - 打造一個更好的Chatbot服務
Keynote - LINE 的技術策略佈局與跨國產品開發
Keynote - LINE 的技術策略佈局與跨國產品開發
Último
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
Último
(9)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
1.
コンパイルターゲット⾔語としての WEBASSEMBLY、 そしてLINEでの実践 Jun, LINE Corp. kawasako,
LINE Corp.
2.
⾃⼰紹介 @uta_tti https://github.com/utatti
3.
•プログラミング⾔語を作る、とは •Wasmをターゲット⾔語*にする WEB⾔語の設計 •Wasmバイトコードを⽣成する コンパイラの作成 •LINEでの実践 Agenda *コンパイルターゲット⾔語: コンパイラがコードジェネレーションで吐き出す⾔語 e.g. TypeScriptのターゲット⾔語はJavaScript
4.
プログラミング⾔語を作る
5.
● Wasmのコンパイルターゲット⾔語としての可能性を調査 ● Wasmに直接コンパイルする
(v.s. LLVM IR) ● 容量をへらす ● ユースケースを考慮した設計 なぜ作る必要があるのか
6.
● https://github.com/utatti/kou ● A
minimal language compiled into wasm bytecode The kou Programming Language
7.
● ⾔語を設計する ● ⾔語のコンパイラを書く プログラミング⾔語を作る
8.
● 機能と⽂法を決める ● 想定しているユースケース ●
好み プログラミング⾔語の設計
9.
● どういう⾔語を作りたいのか ● 他の⾔語のいいところを考えてみる 好みは重要
10.
let fac =
fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } Example
11.
let fac =
fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み1: 型安全性
12.
let fac =
fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み2: Braces over indents Easier to parse
13.
let fac =
fn (n int) int { let res = if n == 1 { 1 } else { n * fac(n - 1) }; res } 好み3: Expression-oriented From Rust
14.
● Wasm: 現在仕様で作りやすいように ●
WEB上動く: バイトコードの容量を⼩さく ● 想定ユーザー: JS開発者 ユースケース
15.
let arr =
[1, 2, 3, 4, 5]; let i = 0; while i < len(arr) { ... i = i + 1; } ユースケース1: Wasm Smaller bytecode output
16.
let arr =
[1, 2, 3, 4, 5]; let i = 0; while i < len(arr) { ... i = i + 1; } ユースケース2: ⽂法 C-like
17.
● ⾔語仕様書を書く ● EBNF
(Extended Backus-Naur Form) ● | alternation ● () grouping ● [] option (0 or 1 times) ● {} repetition (0 to n times) ● 他の⾔語の仕様書を参考にすると良い ● The Go Programming Language ● https://golang.org/ref/spec 設計を形にする
18.
いったんDEMO kouのリポジトリでも⾒れます! https://github.com/utatti/kou
19.
20.
● The real
work starts here... ● 😇 コンパイラを書く
21.
Optim. Code gen. コンパイラの構造 ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
22.
Optim. Code gen.ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
23.
● Lexical analyzer ●
Source code → Token* stream ● *Token: プログラミング⾔語のalphabet ● e.g. "hello", 1234, if, else, {, } Lexer
24.
Optim. Code gen.ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
25.
● Syntactic analyzer ●
Token stream → *AST ● *AST: Abstract syntax tree ● コードをツリー化したもの Parser
26.
Example: AST main Declaration ... Module Identifier Params
FunctionExpr let main = fn () void { .. }
27.
● Parser generator ●
EBNF → Parser ● Parser combinator ● e.g. Parsec in Haskell ● DSL for parser ● kou uses this ● Or just write from scratch How to write parser
28.
Optim. Code gen.ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
29.
● Syntactic sugarの解除 ●
難しくいうと: Isomorphismの適⽤ ● 簡単にいうと: あれとこれって同じっしょ、の適⽤ Desugarer
30.
● Unary +の解除 ●
+1234 == 1234 ● 1-tupleの解除 ● (1234) == 1234 Example: Desugarer
31.
Optim. Code gen.ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
32.
● Semantic analyzer ●
Hindley-Milner type system Type checker
33.
● App for
function application let x: A function f(x: A): B f(x): B Example: Hindley-Milner type system
34.
Optim. Code gen.ParserLexer Source code Target code コンパイラ フロントエンド コンパイラ バックエンド Desugarer Type
35.
● AST →
Target code (Wasm bytecode) ● 実際Wasmバイトコードを⽣成する部分 Code generator
36.
Wasm bytecodeWATASTkou kou compiler Source code Target code
37.
● Specification ● https://webassembly.github.io/spec/core/ ●
Stack machine WebAssembly bytecode
38.
● Use stack
to pass/return values ● v.s. Register machine ● e.g. WebAssembly VM, JVM Stack machine
39.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack
40.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1
41.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 2
42.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 2 3
43.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1
44.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 1 6 ← 2 * 3
45.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack
46.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7 ← 1 + 6
47.
Example: Stack machine 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7
48.
Example: Value types 1
+ 2 * 3 ! i32.const 1 i32.const 2 i32.const 3 i32.mul i32.add Stack 7
49.
● Integer ● i32,
i64 ● Floating-point number ● f32, f64 ● kou uses i32 and f64 ● i64 cannot be used directly in JS WebAssembly value types
50.
● Tuple ● (1,
true, 1.5) ● Array ● [1, 2, 3, 4, 5] ● WebAssembly Memory Complex types
51.
● Linear ● Virtual ●
JS⼜はWasmでメモリを宣⾔ ● (memory 1) WebAssembly Memory
52.
● Wasm has
no high-level support for memory allocation ● ⼿動で管理するしか無い Memory allocation
53.
Memory allocation 4 … 4 because
the pointer itself uses i32 ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い
54.
Memory allocation 4 … 16バイトください‼ ● Wasm
has no high-level support for memory allocation ● ⼿動で管理するしか無い
55.
Memory allocation 20 16 bytes
… ● Wasm has no high-level support for memory allocation ● ⼿動で管理するしか無い
56.
● Array Complex type
(again!) [1.0, 2.0, 3.0, 4.0, 5.0] ! "###$#######$#######$#######$#######$#######% & 5 & 1.0 & 2.0 & 3.0 & 4.0 & 5.0 & '###(#######(#######(#######(#######(#######) 4 + 8 * 5 = 44 bytes
57.
● Tuple Complex type
(again!) (9, false, 5.35) ! "###$###$########% & 9 & 0 & 5.35 & '###(###(########) 4 + 4 + 8 = 16 bytes
58.
● しない ● Garbage
collection: runtime overhead ● Reference counting: memory (and operation) overhead ● Handling memory fragment ● ユースケース: そこまでは必要ない Memory freeing
59.
もう1回DEMO kouのリポジトリでも⾒れます! https://github.com/utatti/kou
60.
61.
● AssemblyScript ● https://assemblyscript.org ●
A TypeScript to WebAssembly compiler ● WebAssembly Studio ● https://webassembly.studio Wasm Code gen. tip
62.
つづく
63.
後編 LINEでの実践について @kawasako より
64.
FRONT-END STANDARDIZATION 組織横断的にフロントエンド開発を標準化する
65.
IN 技術調査/実践 内製ツール開発 OUT OSS活動 技術イベント協賛 イベント運営 ブログ執筆 LINE の Front-end
Standardization Team における標準化とは WHAT IS STANDARDIZATION 社内だけでやっていること 社内でできていないこと 社内の均⼀化 × 社内外がシームレスな組織になること ○
66.
本題 WASMをどう使っていくか?
67.
⼤量の演算が必要な時
68.
UIの利⽤状況をヒートマップ形式で可視化するツール YAKIMOCHI
69.
[{"x":0,"y":55,"value":42},{"x":0,"y":65,"value":36},{"x":0,"y":75,"value":17},{"x": 0,"y":85,"value":25},{"x":0,"y":95,"value":31},{"x":0,"y":105,"value":19},{"x":0,"y": 115,"value":27},{"x":0,"y":125,"value":41},{"x":0,"y":135,"value":30},{"x":0,"y": 145,"value":33},{"x":0,"y":155,"value":44},{"x":0,"y":165,"value":58},{"x":0,"y": 175,"value":91},{"x":0,"y":185,"value":64},{"x":0,"y":195,"value":97},{"x":0,"y": 205,"value":81},{"x":0,"y":215,"value":249},{"x":0,"y":225,"value":103},{"x":0,"y": 235,"value":114},{"x":0,"y":245,"value":63},{"x":0,"y":255,"value":64},{"x":0,"y": 265,"value":79},{"x":0,"y":275,"value":26},{"x":0,"y":285,"value":33},{"x":0,"y": 295,"value":9},{"x":0,"y":305,"value":29},{"x":0,"y":315,"value":6},{"x":0,"y": 325,"value":20},{"x":0,"y":335,"value":8},{"x":0,"y":345,"value":8},{"x":0,"y": 355,"value":38},{"x":0,"y":365,"value":19},{"x":0,"y":375,"value":5},{"x":0,"y": 385,"value":13},{"x":0,"y":395,"value":27},{"x":0,"y":405,"value":20},{"x":0,"y": 415,"value":8},{"x":0,"y":425,"value":19},{"x":0,"y":435,"value":7},{"x":0,"y": 445,"value":181},{"x":0,"y":455,"value":23},{"x":0,"y":465,"value":16},{"x":0,"y": 475,"value":29},{"x":0,"y":485,"value":63},{"x":0,"y":495,"value":34},{"x":0,"y": 505,"value":24},{"x":0,"y":515,"value":8},{"x":0,"y":525,"value":35},{"x":0,"y": 画⾯に対して⼤量のデータが必要 解決したい課題 mb単位のデータがカジュアルに通信されてしまう = 遅い
70.
データ圧縮/解凍をWASM(kou)で実装
71.
ENCODED DATA ENCODER /
DECODER ENCODER (WASM) DECODER (WASM) RAW DATA API SERVER (NODE.JS) CLIENT (BROWSER) RAW DATA 圧縮された⼩さいデータ元データ 復元されたデータ
72.
Step-1 やること pixel毎にどのくらいtapされているかというデータがたくさんある
73.
Step-1 やること X: 4 Y: 1 VALUE:
5 ひとつひとつは x座標, y座標, その座標のtap数のデータ
74.
Step-1 やること X: 4 Y: 1 VALUE:
5 もしXとYを省略できればデータ量は1/3にできる
75.
Step-2 やること 実はX,Yの座標は⾏列に変換すると必要なくなる 5 4px, 1px value: 5 4px 1px
76.
Step-2 やること そのデータが何番⽬にあるかで座標がわかる 2x3の場合は12番⽬のデータになる 5 1 2px, 3px value:
1 2px 3px
77.
Step-2 やること データを⾏列に埋めていくとデータの⼊らない場所ができる 0 1 2
3 5 5 6 7 8 9 10 1 12 13 14 15 16 17 18 19 20 21 22 23 24
78.
Step-3 やること 連続したデータは何回連続するかという情報に変換して詰めちゃう(圧縮しちゃう) *4 5 *6
1 *2 14 *4 19 21*1 *3
79.
Step-4 やること この⼩さいデータをブラウザで受け取って逆の処理をする (decode) 0 1
2 3 5 5 6 7 8 9 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 圧縮済データ ⾏列データ 元データ
80.
の場合 WAT 全662⾏ 半年ほど前にflood-fillという簡単なアルゴリズムを実装したが苦⾏だった..
81.
の場合 kou 全79⾏
82.
let zip =
fn (a [int], col int, row int) ([int], int) { ~ 中略 ~ while (i < l) { if (a[i - 1] == a[i]) { ct = ct + 1; } else { res = next(res, a[i - 1], ct); ct = 0; }; if (i == l - 1) { res = next(res, a[i], ct); } else {}; i = i + 1; }; ~ 中略 ~ res } の場合 kou JSerであれば直感的に書ける
83.
成果 じゃんじゃかじゃん
84.
すごい 成果 約1/5まで圧縮 encode処理もJSで書くよりも3-4倍⾼速 1.4mb >
255kb
85.
● ⾼階層な⾔語ではないので中で何をやっているかは想像しやすい ● わからなくても作者が近くにいたので最強になれる ●
それは普段あまりない経験 ● wat書くよりはるかに楽で感動すら覚える ● しかしlog関数がないのはしんどい (⾃分で追加しようとした) ● 型の問題があってちゃんとやろうとするとそこそこ⼤変 ● 全てがUint32Array問題 ● ⼤きな動画や画像データなど扱いたい時メモリを⾷いすぎる ● wasm使いたいモチベーションと相反する ● いつも⽂句いいながら書いてたけどJavaScriptって便利だな...なんでもあるやんけ... 所感 kou
86.
● LINEでは実験的な社内プロダクトがいくつかありその中では様々な挑戦をしている ● wasmもその中のひとつ ●
wasmを直接触ることになるエンジニアの数は少ないと思う ● しかし、間違いなくライブラリやフレームワークで利⽤することになる ● 今後こんなことができるようになるかも と可能性を⾒据えて置くことは⼤事 ● 「これって実現可能なの?」を判断するのは開発者の⼤事な仕事 ● それはwasmで⾔えば今まで扱えなかったような巨⼤なデータや処理を扱うことだっ たりするかもしれない webp, webm ⾔いたいこと⾔う まとめ
87.
THANK YOU