Web-based Data Visualization with Rust and WebAssembly

:PTVLF0OPVF !@MJLS 8FCCBTFE%BUB7JTVBMJ[BUJPO  XJUI3VTUBOE8FC"TTFNCMZ 3VTU5PLZP

"CPVU.F w ඌ্༸հ :PTVLF0OPVF w ೔ຊେֶจཧֶ෦৘ใՊֶՊ।ڭत  "TTPDJBUF1SPGFTTPS   %FQBSUNFOUPG*OGPSNBUJPO4DJFODF
  $PMMFHFPG)VNBOJUJFTBOE4DJFODFT   /JIPO6OJWFSTJUZ w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ  7JTJUJOH3FTFBSDIFS   5FJLPLV%BUBCBOL -5% w *OUFSFTUT*OGPSNBUJPO7JTVBMJ[BUJPO 8FC5FDIOPMPHJFT IUUQTUXJUUFSDPN@MJLS 'PMMPX.F IUUQTWETMBCKQ

5PQJDT w 8IZEJE*DIPPTF3VTUBOE8FC"TTFNCMZGPS WJTVBMJ[BUJPOTUVEJFT w )PXUPEFWFMPQ8FC"TTFNCMZBQQMJDBUJPOXJUI3VTU w )PXXJMM8FC"TTFNCMZDIBOHF8FCQFSGPSNBODFJO GVUVSF

8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

7JTVBMJ[BUJPO3FTFBSDI w %FWFMPQJOHOPWFMWJTVBMEFTJHOTBOEBMHPSJUINT w %FTJHOJOHVTFSJOUFSBDUJPOTGPSEBUBBOBMZTJT w %FWFMPQJOHWJTVBMJ[BUJPOBQQMJDBUJPOT w 6OEFSTUBOEJOHIVNBOQFSDFQUJPOPGEBUBWJTVBMJ[BUJPO w
FUD

w %FWFMPQNFOUPG8FCCBTFE7JTVBM"OBMZUJDT4ZTUFNT .Z8PSL $BVTBM/FU &(SJE IUUQTFHSJEKQ 4&"-7 POHPJOHQSPKFDU

7JTVBM"OBMZUJDT 7" &SB w 4UBUJDWJTVBMJ[BUJPO JOBOBSSPXTFOTF w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT w
0GUFOUBLFTBMPOHUJNF

7JTVBM"OBMZUJDT 7" &SB w 4UBUJDWJTVBMJ[BUJPO JOBOBSSPXTFOTF w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT w
0GUFOUBLFTBMPOHUJNF w 7JTVBM"OBMZTJT w )VNBODFOUFSFE w 7JTVBMBOEJOUFSBDUJWFBOBMZUJDBMSFBTPOJOH w 8JEFSBOHFVTFSTGSPNOPOFYQFSUUPFYQFSU

8FCBTB7JTVBM"OBMZUJDT1MBUGPSN w 0QFO4UBOEBSE1MBUGPSN w 5FDIOJDBMTPVOEOFTTBOEDPPQFSBUJWFHSPXUI w 'BNJMJBS6*BOE69 w &BTZQBSUJDJQBUJPOPGOPOFYQFSUVTFST w
&BTZUPTIBSFBOEQVCMJTI w "DUJWFDPMMBCPSBUJPOXJUICVTZEPNBJOFYQFSUT

3FRVJSFNFOUTGPS8FCCBTFE7" w 3FOEFSJOH1FSGPSNBODF w '14 NTQFSGSBNF w $PNQVUBUJPOBM1FSGPSNBODF w
$PNQVUBUJPOBMMZFYQFOTJWFBMHPSJUINT  FH%JNFOTJPOBMSFEVDUJPO DPNQVUBUJPOBMHFPNFUSZ w 3FBMUJNFSFTQPOTFUPVTFSPQFSBUJPOT NT w #BDLHSPVOEFYFDVUJPOGPSMPOHSVOOJOHSPVUJOF

3FDFOU8PSL1IF(F/FU )/BUTVLBXB 4*TIJOP :0OPVF ,,ZPEB 40OBNJ BOE,,PZBNBEB l&YQMPSBUJWF7JTVBMJ[BUJPOGPS1IFOPUZQJD(FOPUZQJD /FUXPSL zJO*O1SPDPG*&&&7*4
1PTUFS 4VQQPSUFECZ+45$3&45(SBOU/VNCFS+1.+$3

)/BUTVLBXB 4*TIJOP :0OPVF ,,ZPEB 40OBNJ BOE,,PZBNBEB l&YQMPSBUJWF7JTVBMJ[BUJPOGPS1IFOPUZQJD(FOPUZQJD /FUXPSL zJO*O1SPDPG*&&&7*4 1PTUFS
4VQQPSUFECZ+45$3&45(SBOU/VNCFS+1.+$3 *NQMFNFOUBUJPOPG1IF(F/FU w 'SBNFXPSL7VFKT w 3FOEFSJOH8FC(- w /FUXPSL-BZPVU  3VTUBOE8FC"TTFNCMZ

8FC"TTFNCMZ XBTN w #JOBSZGPSNBUMBOHVBHFSVOOJOHPOXFCCSPXTFST w 4NBMMTJ[FBOETIPSUMPBEJOHUJNF w $PNQJMFEGSPNWBSJPVTQSPHSBNNJOHMBOHVBHFT IUUQTXFCBTTFNCMZPSH

8IZ3VTUBOE8FC"TTFNCMZ w 3VTUJTXPOEFSGVM w -FTTPWFSIFBE w /BUJWFTVQQPSUGPSNVMUJUISFBEJOHBOE4*.% w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ

8FC"TTFNCMZ4VQQPSUPG3VTU w XBTNVOLOPXOFNTDSJQUFO w 6TF&NTDSJQUFO w &NTDSJQUFOSVOUJNF w XBTNVOLOPXOVOLOPXO w
-JHIUXFJHIU w /PSVOUJNF

8BZUP8SJUF"QQMJDBUJPOT w &NTDSJQUFO"1* w 6TJOH&NTDSJQUFO"1*WJB$''* w 8SJUJOHDEZMJC w %FWFMPQFSTTIPVMEXSJUF+BWB4DSJQUDPEF w
XBTNCJOEHFO w .JOJNBMSVOUJNFBOE+BWB4DSJQUDPEFHFOFSBUJPO

XBTNCJOEHFO'FBUVSFT w *OUFSPQFSBCJMJUZXJUI+BWB4DSJQU w +BWB4DSJQUGSJFOEMZXSBQQFSHFOFSBUJPO w $BMMJOH+BWB4DSJQUGVODUJPOT w KTTZT w
3VTU+BWB4DSJQUUZQFDPOWFSTJPO w XFCTZT w $BMMJOHCSPXTFSGVODUJPOT

(FUUJOH4UBSUFEXJUIXBTNCJOEHFO w <XBTN@CJOEHFO>"UUSJCVUFT w SFBEPOMZ DPOTUSVDUPS   KT@OBNF HFUUFSTFUUFS FUD
w &YQPSUJOHGVODUJPOTBOE DMBTTFTUP+BWB4DSJQU 1 use wasm_bindgen::prelude::*; 2 3 #[wasm_bindgen] 4 pub fn twice(x: f64) -> f64 { 5 2. * x 6 } 7 8 #[wasm_bindgen] 9 pub struct Counter { 10 #[wasm_bindgen(readonly)] 11 pub value: usize, 12 } 13 14 #[wasm_bindgen] 15 impl Counter { 16 #[wasm_bindgen(constructor)] 17 pub fn new() -> Counter { 18 Counter { value: 0 } 19 } 20 21 pub fn increment(&mut self) { 22 self.value += 1; 23 } 24 } 1 import { twice, Counter } from 'examples' 2 3 console.log(twice(1.23)) 4 5 const counter = new Counter() 6 console.log(counter.value) 7 counter.increment() 8 console.log(counter.value) *O+BWB4DSJQU

#VJMEBOE1VCMJTI w #VJMEXJUIXBTNQBDL w 1VCMJTIOQNQBDLBHFT w %FWFMPQBQQMJDBUJPOTXJUIXFCQBDL w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ w
DSFBUFXBTNBQQGPS+BWB4DSJQUCFHJOOFST  IUUQTHJUIVCDPNSVTUXBTNDSFBUFXBTNBQQ $ wasm-pack build $ wasm-pack publish

&SSPS)BOEMJOH w &SSXJMMCFDPOWFSUFEBTB+BWB4DSJQUFYDFQUJPO 1 import { causeError } from 'examples'
2 3 causeError() *O+BWB4DSJQU 1 use wasm_bindgen::prelude::*; 2 3 #[wasm_bindgen(js_name=causeError)] 4 pub fn cause_error() -> Result<(), JsValue> { 5 Err("some error occured!".into()) 6 } *O3VTU

5FTUJOH w 5FTUBTOBUJWF3VTUDPEF DBOOPUUFTUXBTNTQFDJpDMPHJD w 3VOOJOHUFTUTPOCSPXTFSTVTJOHXBTNQBDL w )FBEMFTTTVQQPSU $
wasm-pack test --chrome 1 #![cfg(target_arch = "wasm32")] 2 3 extern crate wasm_bindgen_test; 4 use examples::*; 5 use wasm_bindgen_test::*; 6 7 wasm_bindgen_test_configure!(run_in_browser); 8 9 #[wasm_bindgen_test] 10 fn test_twice() { 11 assert_eq!(twice(1.), 2.); 12 }

8JUIPVUXFCQBDL w 8JUIPVUJNQPSUJOHXBTNpMF w 4VQQPSUFEUBSHFUT  CVOEMFS EFGBVMU OPEFKT XFC OPNPEVMFT
w .BOVBMJOJUJBMJ[BUJPO w %FNPIUUQTDPEFQFOJPMJLSQFOP+1KX3 $ wasm-pack build --target web

$SPTTJOHUIF#PVOEBSZJT&YQFOTJWF 3VTU XBTN 8PSME +BWB4DSJQU8PSME DGIFUFSPHFOFPVTDPNQVUJOHMJLF(1(16 3VTU XBTN 8PSME +BWB4DSJQU8PSME
)JHIPWFSIFBE

0UIFS/PUBCMF'FBUVSFT w 4FSJBMJ[BUJPOBOEEFTFSJBMJ[BUJPOPG+4PCKFDUTXJUI4FSEF w "TZODTVQQPSUVTJOHXBTNCJOEHFOGVUVSFT w 'VUVSFBOE1SPNJTFDPOWFSTJPO w &YUFOET+BWB4DSJQUDMBTTFT POHPJOH
w &OBCMFUPXSJUF$VTUPN&MFNFOUTJO3VTU

*T8FC"TTFNCMZ3FBMMZ'BTU w 8FMMUVOFE+BWB4DSJQUDPEFJTGBTUFOPVHI w *UEFQFOETPOBQQMJDBUJPO w -FTTPCKFDUDPOWFSTJPO w &⒏DJFODZPGNFNPSZBDDFTT w
%J⒏DVMUUP TBGFMZ UVOF+BWB4DSJQU

1FBL1FSGPSNBODFPG$16 w $16'-014 qPBUJOHPQFSBUJPOTQFSTFDPOET   4JOHMFDPSF'-014ºOVNCFSPGDPSFT w 4JOHMFDPSF'-0144*.%XJEUIº$MPDLSBUF  WFSZSPVHIEJTDVTTJPO
w +BWB4DSJQUVTFTPOMZBQBSUPG$16QPXFS  ‎8FC"TTFNCMZJTBLFZUFDIOPMPHZ  ɹUPFYDFFEUIFMJNJUPG8FCBQQT

'VUVSF4QFDGPS1BSBMMFM$PNQVUBUJPO w 5ISFBET w 1UISFBETMJLF w 4IBSFENFNPSZ w "UPNJDPQFSBUJPOT w
'JYFEXJEUIBOE-POH4*.% w 'JYFEXJEUI4*.%CJU4*.%PQFSBUJPOT w -POH4*.% CJU4*.%PQFSBUJPOT

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC ".1
18"

8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT 8IBUZPVDBOEP  POUIF8FC -B[Z-PBEJOH
0⒎UIFNBJOUISFBE ".1 18"

0⒎UIFNBJOUISFBE ".1 18" 8FC"TTFNCMZ 1BSBMMFM$PNQVUBUJPO

0⒎UIFNBJOUISFBE ".1 18" 8FC"TTFNCMZ 1BSBMMFM$PNQVUBUJPO 1VSTVJUPGQFSGPSNBODFFYQBOET BQQMJDBCJMJUZPGXFCUFDIOPMPHJFT

4VNNBSZ w 8FC"TTFNCMZJTVTFGVMGPSTQFFEVQPGDPNQVUBUJPOBMMZ FYQFOTJWFQSPDFTTFTPOUIFpFMEPGXFCCBTFE WJTVBMJ[BUJPO w 3VTUJTBTVJUBCMFDIPJDFUPEFWFMPQ8FC"TTFNCMZ BQQMJDBUJPOT w XBTNQBDLJTBOFBTZXBZUPTUBSUSVTUXBTN
w 1MFBTFDIFDLP⒏DJBMEPDT  IUUQTSVTUXBTNHJUIVCJPEPDTCPPL w -FUTUSZBOEFOKPZ3VTUBOE8FC"TTFNCMZ

Web-based Data Visualization with Rust and WebA...

Web-based Data Visualization with Rust and WebAssembly

More Decks by Yosuke Onoue

Other Decks in Programming

Featured

Transcript

Web-based Data Visualization with Rust and WebA...

Web-based Data Visualization with Rust and WebAssembly