Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Rust + WebAssemblyで広がるWebの未来
Yosuke Onoue
November 24, 2018
Technology
16
6.3k
Rust + WebAssemblyで広がるWebの未来
FRONTEND CONFERENCE 2018(
https://2018.kfug.jp/)の登壇資料です
。
Yosuke Onoue
November 24, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
Think About Front-end Web Development with Rust
likr
2
410
Yewにおけるoff-the-main-thread
likr
1
520
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
120
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
10k
Web-based Data Visualization with Rust and WebAssembly
likr
4
4.5k
Introduction to Graph Drawing
likr
0
300
20190707Ionic_Meetup.pdf
likr
0
320
About the end of the web
likr
2
410
Ionic + WebAssembly
likr
1
700
Other Decks in Technology
See All in Technology
WebLogic Server for OCI 概要
oracle4engineer
PRO
3
840
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
150
CES_2023_FleetWise_demo.pdf
sparkgene
0
100
FlexScan HD2452Wの 後継を探して
tring
0
4.1k
2年で10→70人へ! スタートアップの 情報セキュリティ課題と施策
miekobayashi
1
210
Media JAWS 2023/1
matsuihidetoshi
1
110
USB PD で迎える AC アダプター大統一時代
puhitaku
2
1.7k
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
230
OVN-Kubernetes-Introduction-ja-2023-01-27.pdf
orimanabu
1
250
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
120
GitHub Codespaces が拡げる開発環境、いつでもどこでも Visual Studio Code で!
dzeyelid
0
160
Exploring MapStore Release 2022.02: improved 3DTiles support and more
simboss
PRO
0
200
Featured
See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Debugging Ruby Performance
tmm1
67
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.8k
Optimizing for Happiness
mojombo
365
64k
Clear Off the Table
cherdarchuk
79
290k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
In The Pink: A Labor of Love
frogandcode
132
21k
Code Reviewing Like a Champion
maltzj
508
38k
The Invisible Customer
myddelton
113
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Designing for Performance
lara
600
65k
Transcript
͓ͷ͏͑ 3VTU 8FC"TTFNCMZͰ͕Δ 8FCͷະདྷ '30/5&/%$0/'&3&/$& ݄
ࣗݾհ w ඌ্༸հ :PTVLF0OPVF w ຊେֶจཧֶ෦ใՊֶՊॿڭ w OHLZPUPΦʔΨφΠβʔ w
ใՄࢹԽɺཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ༻
લճ·Ͱͷ͋Β͢͡
2015/08/22 グランフロントエンド asm.jsとWebAssemblyって実際なんなの? おのうえ (@_likr) !4
フリーランチの終焉 ✤ フロントエンド開発への要求は⾼まる ✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな いうちに受けていた時代は終わるかもしれない? ✤ フロントエンドエンジニア(JSプログラマ)が JavaScriptプログラムの速度に負う責任が増す !5
まとめ ✤ asm.jsを効果的に使えば、これまでWebでできなかっ た種類のアプリケーションが実現できる ✤ WebAssemblyによる順当な進化に期待 ✤ なんでも速くなる魔法ではないので、 ⽤法⽤量を守って正しくお使いください !6
プログラミング⾔言語Rust おのうえ@_likr Grand Frontend Osaka 2016 2016年年8⽉月27⽇日
まとめ • Rustはいいぞ • WebAssemblyの実装は着実に進んでいる • RustでWebの部品を作れる未来はそう遠くない(かも • 未来に備えよう •
たまにはWebの未来を考えてみるのはいかが?
ͦͯͦ͠ͷޙ
IUUQTXFCBTTFNCMZPSH
IUUQTXFCBTTFNCMZPSH 8FC"TTFNCMZIBTTIJQQFE JONBKPSCSPXTFSFOHJOFT ݄
8FC"TTFNCMZʢXBTNʣʁ w 8FCϒϥβ্Ͱಈ࡞͢ΔόΠφϦϑΥʔϚοτݴޠ w ଞݴޠ͔ΒίϯύΠϧͯ͠ੜ͢Δͷ͕Ұൠత w $$ ɺ3VTUɺ(Pɺ"TTFNCMZ4DSJQUɺʜ IUUQTHJUIVCDPNBQQDZQIFSBXFTPNFXBTNMBOHT w
ߴੑೳͰল༰ྔ w 4*.%ɺϚϧνεϨου wωΠςΟϒॲཧͱ8FCͷΪϟοϓΛຒΊΔ
&NTDSJQUFO w IUUQFNTDSJQUFOPSH w $$ UPBTNKT8FC"TTFNCMZίϯύΠϥ w .P[JMMB͕த৺Ͱ։ൃ w --7.ϕʔε
w MJCDɺMJCD ʢ ЋʣͷޓϨΠϠʔ w ϑΝΠϧγεςϜɺ$(ɺήʔϜΤϯδϯɺFUD
(FUUJOH4UBSUFEXJUI&NTDSJQUFO $ emcc -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \ -s EXPORTED_FUNCTIONS='["_twice"]' \
-s MODULARIZE=1 -s -o example.js example.c $ node main.js 4.4 1 double twice(double value) { 2 return value * 2; 3 } FYBNQMFD 1 const wasm = require('./example') 2 3 wasm().then((Module) => { 4 const twice = Module.cwrap('twice', 'number', ['number']) 5 console.log(twice(2.2)) 6 }) NBJOKT
$$ ʁ w ϝϦοτ w ߴ w ϨΠϠʔͷૢ࡞ w աڈͷࢿ࢈ͷ׆༻
w σϝϦοτ w ҆શੑ w पลπʔϧͷෆࡏ #FUUFS$ ͱͯ͠ͷ3VTU
3VTUʹΑΔ8FC"TTFNCMZͷग़ྗ w XBTNVOLOPXOFNTDSJQUFO w &NTDSJQUFOΛܦ༝ w &NTDSJQUFOͷϥϯλΠϜΛར༻Ͱ͖Δ w +BWB4DSJQUϒϥβ"1*ͱͷ࿈ܞ wXBTNVOLOPXOVOLOPXO
w ϥϯλΠϜͳ͠ʢܰྔ͕ͩ࠷খݶͷػೳ͚ͩʣ
4FUVQ $ curl https://sh.rustup.rs -sSf | sh $ source ~/.cargo/env
$ rustup default nightly $ rustup target add wasm32-unknown-unknown
Ϗϧυ $ cargo new --lib example $ cd example $
cargo build --target wasm32-unknown-unknown 1 [package] 2 name = "example" 3 version = "0.1.0" 4 authors = ["Yosuke Onoue <
[email protected]
>"] 5 6 [dependencies] 7 8 [lib] 9 crate-type = ["cdylib"] $BSHPUPNM 1 #[no_mangle] 2 pub fn twice(value: f64) -> f64 { 3 value * 2.0 4 } TSDMJCST
࣮ߦ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="utf-8"/> 5 <title>Rust + WebAssembly Example</title> 6 </head> 7 <body> 8 <script> 9 fetch('./target/wasm32-unknown-unknown/debug/example.wasm') 10 .then((response) => response.arrayBuffer()) 11 .then((buffer) => WebAssembly.instantiate(buffer)) 12 .then(({ instance }) => { 13 const { twice } = instance.exports 14 console.log(twice(2.2)) 15 }) 16 </script> 17 </body> 18 </html> JOEFYIUNM
8FC"TTFNCMZ+4"1* w XBTNϑΝΠϧΛಡΈࠐΜͰ8FC"TTFNCMZJOTUBOUJBUF ʹ͢ w "SSBZ#V⒎FSΛ௨ͨ͡ϨΠϠʔͳૢ࡞ w /VNCFSʢɺϙΠϯλʣɺ5ZQFE"SSBZΛ ѻ͏ؔͷݺͼग़͠ͷΈ 9
fetch('./target/wasm32-unknown-unknown/debug/example.wasm') 10 .then((response) => response.arrayBuffer()) 11 .then((buffer) => WebAssembly.instantiate(buffer)) 12 .then(({ instance }) => { 13 const { twice } = instance.exports 14 console.log(twice(2.2)) 15 })
XBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w 3VTUΦϒδΣΫτͱ+BWB4DSJQUΦϒδΣΫτͷ ૬ޓมϨΠϠʔΛఆٛͯࣗ͠ಈੜ w KTTZTɺXFCTZTʹΑΔ+BWB4DSJQUɺϒϥβ"1*ͷૢ࡞ w &NTDSJQUFOෆཁ
w XFCQBDLͰྑ͍ײ͡ʹಡΈࠐΈՄೳ DBSHPJOTUBMMXBTNCJOEHFODMJ
Ϗϧυ 1 extern crate wasm_bindgen; 2 3 use wasm_bindgen::prelude::*; 4
5 #[wasm_bindgen] 6 pub fn twice(value: f64) -> f64 { 7 value * 2.0 8 } TSDMJCST 1 [package] 2 name = "bindgen-example" 3 version = "0.1.0" 4 authors = ["Yosuke Onoue <
[email protected]
>"] 5 edition = "2018" 6 7 [dependencies] 8 wasm-bindgen = "0.2" 9 10 [lib] 11 crate-type = ["cdylib"] $BSHPUPNM $ wasm-bindgen --out-dir . target/wasm32-unknown-unknown/debug/bindgen_example.wasm
࣮ߦ 1 import('./bindgen_example').then(({ twice }) => { 2 console.log(twice(2.2)) 3
}) JOEFYKT 1 const path = require('path') 2 3 module.exports = { 4 entry: './index.js', 5 output: { 6 path: path.resolve(__dirname), 7 filename: 'bundle.js' 8 } 9 } XFCQBDLDPOpHKT 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>wasm-bindgen Example</title> 6 </head> 7 <body> 8 <script src="bundle.js"></script> 9 </body> 10 </html> JOEFYIUNM
ଞʹͰ͖Δ͜ͱ 15 #[wasm_bindgen] 16 pub struct Screen { 17 bytes:
Vec<u8>, 18 #[wasm_bindgen(readonly)] 19 pub width: usize, 20 #[wasm_bindgen(readonly)] 21 pub height: usize, 22 } 23 24 #[wasm_bindgen] 25 impl Screen { 26 #[wasm_bindgen(constructor)] 27 pub fn new(width: usize, height: usize) -> Screen { 28 Screen { 29 bytes: create_buffer(width, height), 30 width, 31 height, 32 } 33 } 34 42 43 pub fn resize(&mut self, width: usize, height: usize) { 44 self.bytes = create_buffer(width, height); 45 self.width = width; 46 self.height = height; 47 } 48 }
+BWB4DSJQUΫϥεͷੜ w 3VTUͷߏମɺUSBJU͔Β+BWB4DSJQUΫϥεΛੜ 1 const mod = import('mandelbrot') 2 const
bg = import('mandelbrot/mandelbrot_bg') 3 Promise.all([mod, bg]).then(([{ mandelbrot, Screen }, { memory }]) => { 4 const canvas = this.display.nativeElement; 5 const screen = new Screen(canvas.width, canvas.height); 6 7 const bytes = new Uint8ClampedArray(memory.buffer, screen.pointer(), screen.size()); 8 const image = new ImageData(bytes, screen.width, screen.height); 9 mandelbrot(screen, -3, -2, 0.01, 100); 10 11 const ctx = canvas.getContext('2d'); 12 ctx.putImageData(image, 0, 0); 13 })
XBTNQBDL w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL w DBSHPͷUBSHFUՃɺϏϧυͷ࣮ߦɺOQNύοέʔ δͷੜɺ·ͰΛࣗಈԽ DBSHPJOTUBMMXBTNQBDL XBTNQBDLCVJME XBTNQBDLQVCMJTI
ͬͯΈͨ
ωοτϫʔΫՄࢹԽʹ͓͚Δར༻ w ωοτϫʔΫՄࢹԽʹ͏ܭࢉॲཧΛ8FC"TTFNCMZԽ %KTͷഒͷੑೳΛୡ w େنͳωοτϫʔΫͷՄࢹԽ8FCͰ࣮ݱʂ IUUQTFHSBQIMJLSMBCDPNHSPVQJOBCPY
"OHVMBS*POJDͱ͏
"OHVMBS *POJDͰͷϚϯσϧϒϩू߹ͷඳը IUUQTJPOJDXBTNNBOEFMCSPUMJLSMBCDPN
8FC"TTFNCMZͷࠓޙ
8FC"TTFNCMZͷࠓޙ w 1PTU.71'FBUVSFT w 5ISFBET w 4*.% w (BSCBHF$PMMFDUPS*OUFHSBUJPO w
FUD w πʔϧαϙʔτͷॆ࣮ w TPVSDFNBQQJOH
8FCͷύϑΥʔϚϯεΛٻ͢Δҙຯ ཁٻύϑΥʔϚϯε ԸܙΛड͚ΔϢʔβʔͷ ωΠςΟϒ σεΫτοϓΞϓϦ ͕Ͱ͖Δ͜ͱ ίϯϐϡʔλͷੑೳ্ ˍཧͷൃల 8FC͕Ͱ͖Δ͜ͱ -B[Z-PBEJOHɺ
ΦϑεϨουॲཧ ".1ɺ18" 8FC"TTFNCMZɺ ฒྻॲཧ ύϑΥʔϚϯεͷٻ͕ 8FCͷՄೳੑΛ͛Δ
·ͱΊ w ීٴஈ֊ʹਐΉ8FC"TTFNCMZ w 3VTUͰ҆શ͔ͭߴͳ8FC։ൃΛ͢Δ࣌ͷ౸དྷ w ύϑΥʔϚϯε͕8FCͷՄೳੑΛ͛Δʂ w ศརͳपลπʔϧΛੋඇνΣοΫʂ w
IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL