SpaGoでSPAを作ろう！

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

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

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

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 ͨͬͨ͜Ε͚ͩͰ࢝ΊΒΕ·͢ɻ

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

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

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

2020/11/14 11:29 9 / 32 ϖʔδ http://localhost:8080/#page20 HTML ͷهड़ top.html
<body> <button>ԡ͢ͳΑʂ</button> <label>...</label> </body>

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 {} }

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

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

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 }

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(`...`), ), ) }

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

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

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}}" ͱ͍͏ଐੑΛ௥Ճ͠·͢ɻ <button @click="{{c.OnClick}}">ԡ͢ͳΑʂ</button> ͋͞ɺϦϩʔυͯ͠ΈΑ͏ʂ

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

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

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

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

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

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

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

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

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

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 ͳΒαΠζ্ͷ໰୊͸ͳͦ͞͏ɻ ѹॖͨ͠ঢ়ଶͰαʔϒ͠ͳ͍ͱπϥΠ

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 Λಈ͔͠·͢

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

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

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

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

SpaGoでSPAを作ろう！

SpaGoでSPAを作ろう！

irieda

More Decks by irieda

Other Decks in Programming

Featured

Transcript

2020/11/14 11:29 2 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo Ͱ SPA

2020/11/14 11:29 3 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͱ͸ʁ Go

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

2020/11/14 11:29 5 / 32 ϖʔδ http://localhost:8080/#page20 ηοτΞοϓ Go ࢖ͬͯΔਓͳΒ

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

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

2020/11/14 11:29 8 / 32 ϖʔδ http://localhost:8080/#page20 ϝΠϯϏϡʔίϯϙʔωϯτͷ࡞੒ spago new

2020/11/14 11:29 9 / 32 ϖʔδ http://localhost:8080/#page20 HTML ͷهड़ top.html

2020/11/14 11:29 10 / 32 ϖʔδ http://localhost:8080/#page20 main.go ͷ࡞੒ main.go

2020/11/14 11:29 11 / 32 ϖʔδ http://localhost:8080/#page20 ։ൃαʔόʔͷىಈ spago server

2020/11/14 11:29 12 / 32 ϖʔδ http://localhost:8080/#page20 ϓϩδΣΫτϑΥϧμΛΈͯΈΑ͏ top_gen.go ͱ͍͏ϑΝΠϧ͕૿͍͑ͯ·͢ɻ

2020/11/14 11:29 13 / 32 ϖʔδ http://localhost:8080/#page20 ൜ਓ͸ͩΕʁ ͜ΕΛ࡞ΔίϚϯυ͸ top.go

2020/11/14 11:29 14 / 32 ϖʔδ http://localhost:8080/#page20 ͜ͷίϚϯυʹΑΓ top_gen.go ͕࡞ΒΕ·͢

2020/11/14 11:29 15 / 32 ϖʔδ http://localhost:8080/#page20 ։ൃαʔόʔͷڍಈ spago server

2020/11/14 11:29 16 / 32 ϖʔδ http://localhost:8080/#page20 Top ίϯϙʔωϯτͷߋ৽ top.go

2020/11/14 11:29 17 / 32 ϖʔδ http://localhost:8080/#page20 ϥϕϧͷ಺༰͕ۭจࣈʹ ࣍͸ top.go

2020/11/14 11:29 18 / 32 ϖʔδ http://localhost:8080/#page20 ϘλϯΛԡ͢ͱʁ ͜ͷΑ͏ʹ HTML

2020/11/14 11:29 19 / 32 ϖʔδ http://localhost:8080/#page20 JS ଆͷ੍ޚ js.Value

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

2020/11/14 11:29 21 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ϚʔΫΞοϓͱ͸ʁ DOM

2020/11/14 11:29 22 / 32 ϖʔδ http://localhost:8080/#page20 JS ར༻ίʔυͱ͸ʁ syscall/js

2020/11/14 11:29 23 / 32 ϖʔδ http://localhost:8080/#page20 ଞͷτϐοΫ Router Action

2020/11/14 11:29 24 / 32 ϖʔδ http://localhost:8080/#page20 Isomorphic ͳ։ൃ TypeScript/nodejs

2020/11/14 11:29 25 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͷ໨ࢦ͢ͱ͜Ζ Go

2020/11/14 11:29 26 / 32 ϖʔδ http://localhost:8080/#page20 SpaGo ͷ࣮ྫ ͜ͷϓϨθϯςʔγϣϯ

2020/11/14 11:29 27 / 32 ϖʔδ http://localhost:8080/#page20 WASM αΠζʹ͍ͭͯ αϯϓϧ໊

2020/11/14 11:29 28 / 32 ϖʔδ http://localhost:8080/#page20 WASM ࣮૷ͷςετ͸ʁ GoͰWASM༻࣮૷ͷςετ

2020/11/14 11:29 29 / 32 ϖʔδ http://localhost:8080/#page20 TinyGo ʹ͍ͭͯ Go

2020/11/14 11:29 30 / 32 ϖʔδ http://localhost:8080/#page20 ·ͱΊ Go ຊՈͷ

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

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