Web-based Data Visualization
with Rust and WebAssembly

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=47 Yosuke Onoue
October 26, 2019

Web-based Data Visualization
with Rust and WebAssembly

Rust.Tokyo 2019の登壇資料です。
https://rust.tokyo/

Webベースのデータビジュアライゼーションの需要は高まっていますが、大量のデータをWebブラウザ上で処理するためにはパフォーマンス上の課題が発生します。そのようなWebでのパフォーマンス上の課題を解決するために、WebAssemblyと呼ばれるWebブラウザ上で実行可能なバイナリフォーマット言語が新たに整備されてきました。WebAssemblyはRustによって公式にサポートされているため、Rustの表現力とパフォーマンスの恩恵を受けながらWebAssemblyを用いた開発を行うことができます。本セッションでは、WebAssemblyの概要やRustによるWebAssembly開発の方法、RustとWebAssemblyの今後の展望をネットワークビジュアライゼーションでの事例を混じえてご紹介します。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

October 26, 2019
Tweet

Transcript

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

  2. "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
  3. 5PQJDT w 8IZEJE*DIPPTF3VTUBOE8FC"TTFNCMZGPS WJTVBMJ[BUJPOTUVEJFT  w )PXUPEFWFMPQ8FC"TTFNCMZBQQMJDBUJPOXJUI3VTU w )PXXJMM8FC"TTFNCMZDIBOHF8FCQFSGPSNBODFJO GVUVSF

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

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

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

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

  8. 7JTVBM"OBMZUJDT 7" &SB w 4UBUJDWJTVBMJ[BUJPO JOBOBSSPXTFOTF  w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT w

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

    0GUFOUBLFTBMPOHUJNF w 7JTVBM"OBMZTJT w )VNBODFOUFSFE w 7JTVBMBOEJOUFSBDUJWFBOBMZUJDBMSFBTPOJOH w 8JEFSBOHFVTFSTGSPNOPOFYQFSUUPFYQFSU
  10. 8FCBTB7JTVBM"OBMZUJDT1MBUGPSN w 0QFO4UBOEBSE1MBUGPSN w 5FDIOJDBMTPVOEOFTTBOEDPPQFSBUJWFHSPXUI w 'BNJMJBS6*BOE69 w &BTZQBSUJDJQBUJPOPGOPOFYQFSUVTFST w

    &BTZUPTIBSFBOEQVCMJTI w "DUJWFDPMMBCPSBUJPOXJUICVTZEPNBJOFYQFSUT
  11. 3FRVJSFNFOUTGPS8FCCBTFE7" w 3FOEFSJOH1FSGPSNBODF w '14 NTQFSGSBNF  w $PNQVUBUJPOBM1FSGPSNBODF w

    $PNQVUBUJPOBMMZFYQFOTJWFBMHPSJUINT
 FH%JNFOTJPOBMSFEVDUJPO DPNQVUBUJPOBMHFPNFUSZ w 3FBMUJNFSFTQPOTFUPVTFSPQFSBUJPOT NT  w #BDLHSPVOEFYFDVUJPOGPSMPOHSVOOJOHSPVUJOF
  12. 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
  13. )/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
  14. 8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

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

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

  17. 8FC"TTFNCMZ4VQQPSUPG3VTU w XBTNVOLOPXOFNTDSJQUFO w 6TF&NTDSJQUFO w &NTDSJQUFOSVOUJNF w XBTNVOLOPXOVOLOPXO w

    -JHIUXFJHIU w /PSVOUJNF
  18. 8BZUP8SJUF"QQMJDBUJPOT w &NTDSJQUFO"1* w 6TJOH&NTDSJQUFO"1*WJB$''* w 8SJUJOHDEZMJC w %FWFMPQFSTTIPVMEXSJUF+BWB4DSJQUDPEF w

    XBTNCJOEHFO w .JOJNBMSVOUJNFBOE+BWB4DSJQUDPEFHFOFSBUJPO
  19. XBTNCJOEHFO'FBUVSFT w *OUFSPQFSBCJMJUZXJUI+BWB4DSJQU w +BWB4DSJQUGSJFOEMZXSBQQFSHFOFSBUJPO w $BMMJOH+BWB4DSJQUGVODUJPOT w KTTZT w

    3VTU+BWB4DSJQUUZQFDPOWFSTJPO w XFCTZT w $BMMJOHCSPXTFSGVODUJPOT
  20. (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
  21. #VJMEBOE1VCMJTI w #VJMEXJUIXBTNQBDL w 1VCMJTIOQNQBDLBHFT w %FWFMPQBQQMJDBUJPOTXJUIXFCQBDL w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ w

    DSFBUFXBTNBQQGPS+BWB4DSJQUCFHJOOFST
 IUUQTHJUIVCDPNSVTUXBTNDSFBUFXBTNBQQ $ wasm-pack build $ wasm-pack publish
  22. 8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

  23. &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
  24. 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 }
  25. 8JUIPVUXFCQBDL w 8JUIPVUJNQPSUJOHXBTNpMF w 4VQQPSUFEUBSHFUT
 CVOEMFS EFGBVMU OPEFKT XFC OPNPEVMFT

    w .BOVBMJOJUJBMJ[BUJPO w %FNPIUUQTDPEFQFOJPMJLSQFOP+1KX3 $ wasm-pack build --target web
  26. $SPTTJOHUIF#PVOEBSZJT&YQFOTJWF 3VTU XBTN 8PSME +BWB4DSJQU8PSME DGIFUFSPHFOFPVTDPNQVUJOHMJLF(1(16 3VTU XBTN 8PSME +BWB4DSJQU8PSME

    )JHIPWFSIFBE
  27. 0UIFS/PUBCMF'FBUVSFT w 4FSJBMJ[BUJPOBOEEFTFSJBMJ[BUJPOPG+4PCKFDUTXJUI4FSEF w "TZODTVQQPSUVTJOHXBTNCJOEHFOGVUVSFT w 'VUVSFBOE1SPNJTFDPOWFSTJPO w &YUFOET+BWB4DSJQUDMBTTFT POHPJOH

     w &OBCMFUPXSJUF$VTUPN&MFNFOUTJO3VTU
  28. 8FCCBTFE%BUB7JTVBMJ[BUJPO 3VTUBOE8FC"TTFNCMZ XBTNCJOEHFOBOEXBTNQBDL5JQT 4VNNBSZBOE'VUVSF1SPTQFDUT

  29. *T8FC"TTFNCMZ3FBMMZ'BTU w 8FMMUVOFE+BWB4DSJQUDPEFJTGBTUFOPVHI w *UEFQFOETPOBQQMJDBUJPO w -FTTPCKFDUDPOWFSTJPO w &⒏DJFODZPGNFNPSZBDDFTT w

    %J⒏DVMUUP TBGFMZ UVOF+BWB4DSJQU
  30. 1FBL1FSGPSNBODFPG$16 w $16'-014 qPBUJOHPQFSBUJPOTQFSTFDPOET 
 4JOHMFDPSF'-014ºOVNCFSPGDPSFT w 4JOHMFDPSF'-0144*.%XJEUIº$MPDLSBUF
 WFSZSPVHIEJTDVTTJPO 

    w +BWB4DSJQUVTFTPOMZBQBSUPG$16QPXFS
 ‎8FC"TTFNCMZJTBLFZUFDIOPMPHZ
 ɹUPFYDFFEUIFMJNJUPG8FCBQQT
  31. 'VUVSF4QFDGPS1BSBMMFM$PNQVUBUJPO w 5ISFBET w 1UISFBETMJLF w 4IBSFENFNPSZ w "UPNJDPQFSBUJPOT w

    'JYFEXJEUIBOE-POH4*.% w 'JYFEXJEUI4*.%CJU4*.%PQFSBUJPOT w -POH4*.% CJU4*.%PQFSBUJPOT
  32. 8IZ8FC1FSGPSNBODFJT*NQPSUBOU 1FSGPSNBODF3FRVJSFNFOUT "⒎FDUFE6TFST 8IBUZPVDBOEP POOBUJWFBOEEFTLUPQBQQT )BSEXBSF*NQSPWFNFOUTBOE 5IFPSFUJDBM#SFBLUISPVHIT

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

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

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

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

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

     0⒎UIFNBJOUISFBE ".1 18" 8FC"TTFNCMZ  1BSBMMFM$PNQVUBUJPO 1VSTVJUPGQFSGPSNBODFFYQBOET BQQMJDBCJMJUZPGXFCUFDIOPMPHJFT
  38. 4VNNBSZ w 8FC"TTFNCMZJTVTFGVMGPSTQFFEVQPGDPNQVUBUJPOBMMZ FYQFOTJWFQSPDFTTFTPOUIFpFMEPGXFCCBTFE WJTVBMJ[BUJPO w 3VTUJTBTVJUBCMFDIPJDFUPEFWFMPQ8FC"TTFNCMZ BQQMJDBUJPOT w XBTNQBDLJTBOFBTZXBZUPTUBSUSVTUXBTN

    w 1MFBTFDIFDLP⒏DJBMEPDT
 IUUQTSVTUXBTNHJUIVCJPEPDTCPPL w -FUTUSZBOEFOKPZ3VTUBOE8FC"TTFNCMZ