Slide 1

Slide 1 text

2020/11/14 11:29 2 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo Ͱ SPA Λ࡞Ζ͏ʂ nobonobo

Slide 2

Slide 2 text

2020/11/14 11:29 3 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͱ͸ʁ Go ͷΤίγεςϜ͚ͩͰ SPA Λ࡞ΔπʔϧΩοτ

Slide 3

Slide 3 text

2020/11/14 11:29 4 / 32 ϖʔδ http://localhost:8080/#page20 ؔ࿈ϦϙδτϦ http://github.com/nobonobo/spago http://github.com/nobonobo/spago-spectre

Slide 4

Slide 4 text

2020/11/14 11:29 5 / 32 ϖʔδ http://localhost:8080/#page20 ηοτΞοϓ Go ࢖ͬͯΔਓͳΒ > go get github.com/nobonobo/spago/cmd/spago > spago Usage of spago: commands: new component scafold generate html to go for spago code generator server development http server deploy deploy static files ͨͬͨ͜Ε͚ͩͰ࢝ΊΒΕ·͢ɻ

Slide 5

Slide 5 text

2020/11/14 11:29 6 / 32 ϖʔδ http://localhost:8080/#page20 ͡Όɺ΍ͬͯΈΑ͏ʂ ࡞ۀϑΥϧμʹͯ mkdir sample cd sample go mod init sample mkdir frontend cd frontend

Slide 6

Slide 6 text

2020/11/14 11:29 7 / 32 ϖʔδ http://localhost:8080/#page20 جຊͷ։ൃϑϩʔ

Slide 7

Slide 7 text

2020/11/14 11:29 8 / 32 ϖʔδ http://localhost:8080/#page20 ϝΠϯϏϡʔίϯϙʔωϯτͷ࡞੒ spago new Top ↓ ग़ྗ ↓ top.go Top ίϯϙʔωϯτఆٛ top.html ۭͷ HTML ϑΝΠϧ

Slide 8

Slide 8 text

2020/11/14 11:29 9 / 32 ϖʔδ http://localhost:8080/#page20 HTML ͷهड़ top.html ԡ͢ͳΑʂ ...

Slide 9

Slide 9 text

2020/11/14 11:29 10 / 32 ϖʔδ http://localhost:8080/#page20 main.go ͷ࡞੒ main.go ΛҎԼͷΑ͏ʹॻ͖·͠ΐ͏ɻ package main import "github.com/nobonobo/spago" func main() { spago.RenderBody(&Top{}) select {} }

Slide 10

Slide 10 text

2020/11/14 11:29 11 / 32 ϖʔδ http://localhost:8080/#page20 ։ൃαʔόʔͷىಈ spago server -> http://localhost:8080 Λ։͘ɻ -> ͱ͍͏දࣔ

Slide 11

Slide 11 text

2020/11/14 11:29 12 / 32 ϖʔδ http://localhost:8080/#page20 ϓϩδΣΫτϑΥϧμΛΈͯΈΑ͏ top_gen.go ͱ͍͏ϑΝΠϧ͕૿͍͑ͯ·͢ɻ sample/ !"" !"" frontend/ # # !"" !"" main.go # # !"" !"" top.go # # !"" !"" top.html # # $"" $"" top_gen.go <-- !"" !"" go.mod $"" $"" go.sum

Slide 12

Slide 12 text

2020/11/14 11:29 13 / 32 ϖʔδ http://localhost:8080/#page20 ൜ਓ͸ͩΕʁ ͜ΕΛ࡞ΔίϚϯυ͸ top.go ͷઌ಄ʹهड़͕͋Γ·͢ɻ package main import ( "github.com/nobonobo/spago" ) //go:generate spago generate -c Top -p main top.html type Top struct { spago.Core }

Slide 13

Slide 13 text

2020/11/14 11:29 14 / 32 ϖʔδ http://localhost:8080/#page20 ͜ͷίϚϯυʹΑΓ top_gen.go ͕࡞ΒΕ·͢ spago generate -c Top -p main top.html ʮtop.htmlʯ->ʮTop ίϯϙʔωϯτ Render ϝιου ࣮૷ʯ func (c *Top) Render() spago.HTML { return spago.Tag("body", spago.Tag("button", spago.T(`ԡ͢ͳΑʂ`), ), spago.Tag("label", spago.T(`...`), ), ) }

Slide 14

Slide 14 text

2020/11/14 11:29 15 / 32 ϖʔδ http://localhost:8080/#page20 ։ൃαʔόʔͷڍಈ spago server ։ൃαʔόʔ͸ main.wasm Λཁٻ͞Εͨ৔߹ɺ go generate ./... go build -o main.wasm . Ҏ্ͷॲཧͯ͠ಘΒΕΔग़ྗΛϨεϙϯεͱͯ͠ฦ͢ ϦϩʔυͰ HTML ΍ WASM ͸ϦϏϧυ͞ΕΔ࢓૊Έ ͜ΕʹΑΓ SpaGo ϚʔΫΞοϓͷࣄ͸஌Βͳͯ͘΋͋ Δఔ౓ OK

Slide 15

Slide 15 text

2020/11/14 11:29 16 / 32 ϖʔδ http://localhost:8080/#page20 Top ίϯϙʔωϯτͷߋ৽ top.go ʹ Message ϓϩύςΟΛ૿΍͢ type Top struct { spago.Core Message string } top.html ͷϥϕϧςΩετʹͦͷϓϩύςΟΛࢦఆ ԡ͢ͳΑʂ {{c.Message}} ͋͞ɺϦϩʔυͯ͠ΈΑ͏ʂ

Slide 16

Slide 16 text

2020/11/14 11:29 17 / 32 ϖʔδ http://localhost:8080/#page20 ϥϕϧͷ಺༰͕ۭจࣈʹ ࣍͸ top.go ʹ OnClick ϝιουΛ૿΍͢ func (c *Top) OnClick(ev js.Value) { c.Message = "ԡͨ͠ͳʂ" spago.Rerender(c) } top.html ͷϘλϯʹ @click="{{c.OnClick}}" ͱ͍͏ଐੑΛ௥Ճ͠·͢ɻ ԡ͢ͳΑʂ ͋͞ɺϦϩʔυͯ͠ΈΑ͏ʂ

Slide 17

Slide 17 text

2020/11/14 11:29 18 / 32 ϖʔδ http://localhost:8080/#page20 ϘλϯΛԡ͢ͱʁ ͜ͷΑ͏ʹ HTML ʴ α ͱ Go ίʔυͷ هड़ΛϦϩʔυͰ൓ө

Slide 18

Slide 18 text

2020/11/14 11:29 19 / 32 ϖʔδ http://localhost:8080/#page20 JS ଆͷ੍ޚ js.Value Λૢ࡞͢Δͱ JS ͷ Object ͕ϦϞʔτૢ࡞͞Ε Δ

Slide 19

Slide 19 text

2020/11/14 11:29 20 / 32 ϖʔδ http://localhost:8080/#page20 ϑϩϯτΤϯυߏ଄

Slide 20

Slide 20 text

2020/11/14 11:29 21 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ϚʔΫΞοϓͱ͸ʁ DOM Λ૊ΈཱͯΔ Go ίʔυهड़ ͪΐͬͱ֮͑Δ͜ͱଟͯ͘൥ࡶ spago generate ͕͓ख఻͍͢ΔΑʂ HTML هड़͔Β SpaGo ϚʔΫΞοϓΛੜ੒

Slide 21

Slide 21 text

2020/11/14 11:29 22 / 32 ϖʔδ http://localhost:8080/#page20 JS ར༻ίʔυͱ͸ʁ syscall/js Λར༻͢Δ Go ίʔυهड़ ͪΐͬͱ֮͑Δ͜ͱଟͯ͘൥ࡶ js2go͕͓ख఻͍͢ΔΑʂ JavaScript ͷهड़Λ Go ͷهड़ʹτϥϯεϨʔτ

Slide 22

Slide 22 text

2020/11/14 11:29 23 / 32 ϖʔδ http://localhost:8080/#page20 ଞͷτϐοΫ Router Action ͱ Dispatcher ίϯϙʔωϯτͷ࡞੒ͱެ։ API ࿈ܞ γϯάϧόΠφϦԽ Go Ͱ࡞ΔγϯάϧϖʔδΞϓϦέʔγϣϯ ͱ͍͏ຊެ։ͯ͠·͢ɻಡΜͰΈͯͶʂ

Slide 23

Slide 23 text

2020/11/14 11:29 24 / 32 ϖʔδ http://localhost:8080/#page20 Isomorphic ͳ։ൃ TypeScript/nodejs ͡Όͳͯ͘΋ SpaGo Ͱ΋Ͱ͖Δʂ όοΫΤϯυͱϑϩϯτΤϯυͷڞ௨ͷ JSON ఆٛΛར༻Մೳ WebSocket ܦ༝Ͱ JSON-RPC, gRPC Ͱͭͳ͙͜ͱ΋Մೳ

Slide 24

Slide 24 text

2020/11/14 11:29 25 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͷ໨ࢦ͢ͱ͜Ζ Go ͷΤίγεςϜ͚ͩͰ։ൃΛՄೳʹ ඞཁͳ΋ͷΛۃྗӅ͞ͳ͍ ࠷଎Λ໨ࢦ͞ͳ͍͕ॏ͍ॲཧ΋࠾༻͠ͳ͍ ̍छྨͷϑΝΠϧʹෳ਺ݴޠهड़͸࠾༻͠ͳ͍ DSL ͰશͯදݱͰ͖ΔͷΛ໨ࢦ͞ͳ͍ TinyGo αϙʔτΛ TinyGo ͷޓ׵ੑ޲্ͱͱ΋ʹาΉ

Slide 25

Slide 25 text

2020/11/14 11:29 26 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͷ࣮ྫ ͜ͷϓϨθϯςʔγϣϯ CLI Λ࡞ͬͨ http://github.com/nobonobo/spago-slides JS2Go ͱ͍͏αʔϏε( https://nobonobo.github.io/js2go/ ) ͓࢓ࣄͰ BLE σόΠεͷϩΨʔ΍Ϟχλʔ ͓࢓ࣄͰ BLE σόΠεͷϑΝʔϜ΢ΣΞϥΠλʔ on RaspberryPi

Slide 26

Slide 26 text

2020/11/14 11:29 27 / 32 ϖʔδ http://localhost:8080/#page20 WASM αΠζʹ͍ͭͯ αϯϓϧ໊ Go Go+GZip TinyGo TinyGo+GZip spago/examples/simple 2.3MiB 683KiB 342KiB 146KiB spago.examples/todo 2.7MiB 717KiB - spago/examples/pwa 2.4MiB 701KiB 393KiB 170KiB spago/examples/forms 2.3MiB 678KiB 339KiB 143KiB spago/examples/spa 2.4MiB 719KiB 439KiB 185KiB Go ͷ৔߹+2MiB(GZip:500KiB)͘Β͍ͷ଍͔͕ͤࡌΔ ͱ͍͏͜ͱɻ TinyGo+GZip ͳΒαΠζ্ͷ໰୊͸ͳͦ͞͏ɻ ѹॖͨ͠ঢ়ଶͰαʔϒ͠ͳ͍ͱπϥΠ

Slide 27

Slide 27 text

2020/11/14 11:29 28 / 32 ϖʔδ http://localhost:8080/#page20 WASM ࣮૷ͷςετ͸ʁ GoͰWASM༻࣮૷ͷςετ NoboNobo͞ΜʹΑΔهࣄ zenn.dev Chrome ͱҎԼͷΠϯετʔϧΛߦ͏ͱී௨ʹ go test ͕࢖͑ΔΑ͏ʹͳΔɻ go get github.com/agnivade/wasmbrowsertest i=$(which wasmbrowsertest) mv $i $(dirname $i)/go_js_wasm_exec go env -w GOOS=js GOARCH=wasm go test . ཪͰϔουϨε Chrome Λಈ͔͠·͢

Slide 28

Slide 28 text

2020/11/14 11:29 29 / 32 ϖʔδ http://localhost:8080/#page20 TinyGo ʹ͍ͭͯ Go ͷαϒηοτͰ LLVM όοΫΤϯυɺݱঢ়҆ఆ൛: v0.15.0 ϚΠΫϩίϯϐϡʔλ޲͚͚ͩͲ WASM ग़ྗ΋αϙʔτ ·ͩͪΐͬͱͨ͜͠ͱͰίϯύΠϧͰ͖ͳ͍هड़͕͋Δ ಺෦ͷ IR ࣮૷ΛӶҙϦϥΠτதͰ͜Ε͕ࡌΕ͹͍ͩͿޓ׵͕޲্͢Δ༧ఆ ੒Ռ෺͸ຊՈʹൺ΂Δͱ 2MiB ΄Ͳখ͍͞ ͞Βʹ panic ϥϯλΠϜ࡟ͬͨΓɺGZip ͢Ε͹͔ͳΓίϯύΫτʹ

Slide 29

Slide 29 text

2020/11/14 11:29 30 / 32 ϖʔδ http://localhost:8080/#page20 ·ͱΊ Go ຊՈͷ WASM ग़ྗ͸αΠζ͕େ͖͍ ݱঢ়͸σεΫτοϓΞϓϦ୅ΘΓʹ࢖͏༻్޲͖ TinyGo ͕҆ఆಈ࡞͢Ε͹ར༻γʔϯ͕֦େ͢Δ ίϯύΠϧܕͳͷͰ༨ܭͳίʔυ͕ग़ྗʹࡌͬͯ͜ͳ͍ npm/webpack Λ࢖Θͳ͍ϑϩϯτΤϯυ։ൃ͸շద ґଘղܾ͕ܾఆతͰ҆ఆͯ͠ͱʹ͔͘Ϗϧυ͕ૣ͍

Slide 30

Slide 30 text

2020/11/14 11:29 31 / 32 ϖʔδ http://localhost:8080/#page20 ࣭໰͋Δʁ

Slide 31

Slide 31 text

2020/11/14 11:29 32 / 32 ϖʔδ http://localhost:8080/#page20 ͓ΘΓ