Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web-based Data Visualization
with Rust and WebAssembly

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の今後の展望をネットワークビジュアライゼーションでの事例を混じえてご紹介します。

Yosuke Onoue

October 26, 2019
Tweet

More Decks by Yosuke Onoue

Other Decks in Programming

Transcript

  1. :PTVLF0OPVF !@MJLS

    8FCCBTFE%BUB7JTVBMJ[BUJPO

    XJUI3VTUBOE8FC"TTFNCMZ
    3VTU5PLZP

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT
    w 0GUFOUBLFTBMPOHUJNF

    View full-size slide

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

    w 4UBUJDBMMZXSJUFTJNBHFTPSWJEFPpMFT
    w 0GUFOUBLFTBMPOHUJNF
    w 7JTVBM"OBMZTJT
    w )VNBODFOUFSFE
    w 7JTVBMBOEJOUFSBDUJWFBOBMZUJDBMSFBTPOJOH
    w 8JEFSBOHFVTFSTGSPNOPOFYQFSUUPFYQFSU

    View full-size slide

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

    View full-size slide

  11. 3FRVJSFNFOUTGPS8FCCBTFE7"
    w 3FOEFSJOH1FSGPSNBODF
    w '14 NTQFSGSBNF

    w $PNQVUBUJPOBM1FSGPSNBODF
    w $PNQVUBUJPOBMMZFYQFOTJWFBMHPSJUINT

    FH%JNFOTJPOBMSFEVDUJPO DPNQVUBUJPOBMHFPNFUSZ
    w 3FBMUJNFSFTQPOTFUPVTFSPQFSBUJPOT NT

    w #BDLHSPVOEFYFDVUJPOGPSMPOHSVOOJOHSPVUJOF

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  15. 8FC"TTFNCMZ XBTN

    w #JOBSZGPSNBUMBOHVBHFSVOOJOHPOXFCCSPXTFST
    w 4NBMMTJ[FBOETIPSUMPBEJOHUJNF
    w $PNQJMFEGSPNWBSJPVTQSPHSBNNJOHMBOHVBHFT
    IUUQTXFCBTTFNCMZPSH

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. (FUUJOH4UBSUFEXJUIXBTNCJOEHFO
    w "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

    View full-size slide

  21. #VJMEBOE1VCMJTI
    w #VJMEXJUIXBTNQBDL
    w 1VCMJTIOQNQBDLBHFT
    w %FWFMPQBQQMJDBUJPOTXJUIXFCQBDL
    w 'JSTUDMBTTTVQQPSUGPS8FC"TTFNCMZ
    w DSFBUFXBTNBQQGPS+BWB4DSJQUCFHJOOFST

    IUUQTHJUIVCDPNSVTUXBTNDSFBUFXBTNBQQ
    $ wasm-pack build
    $ wasm-pack publish

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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 }

    View full-size slide

  25. 8JUIPVUXFCQBDL
    w 8JUIPVUJNQPSUJOHXBTNpMF
    w 4VQQPSUFEUBSHFUT

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

    View full-size slide

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

    View full-size slide

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

    w &OBCMFUPXSJUF$VTUPN&MFNFOUTJO3VTU

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 1FBL1FSGPSNBODFPG$16
    w $16'-014 qPBUJOHPQFSBUJPOTQFSTFDPOET

    4JOHMFDPSF'-014ºOVNCFSPGDPSFT
    w 4JOHMFDPSF'-0144*.%XJEUIº$MPDLSBUF

    WFSZSPVHIEJTDVTTJPO

    w +BWB4DSJQUVTFTPOMZBQBSUPG$16QPXFS

    ‎8FC"TTFNCMZJTBLFZUFDIOPMPHZ

    ɹUPFYDFFEUIFMJNJUPG8FCBQQT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    POUIF8FC

    View full-size slide

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

    POUIF8FC ".1 18"

    View full-size slide

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

    POUIF8FC
    -B[Z-PBEJOH
    0⒎UIFNBJOUISFBE
    ".1 18"

    View full-size slide

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

    POUIF8FC
    -B[Z-PBEJOH
    0⒎UIFNBJOUISFBE
    ".1 18"
    8FC"TTFNCMZ
    1BSBMMFM$PNQVUBUJPO

    View full-size slide

  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

    View full-size slide

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

    IUUQTSVTUXBTNHJUIVCJPEPDTCPPL
    w -FUTUSZBOEFOKPZ3VTUBOE8FC"TTFNCMZ

    View full-size slide