SlideShare ist ein Scribd-Unternehmen logo
1 von 34
David Chang
DevOps@mithril
初探 Go-WebAssembly
What is WebAssembly
WebAssembly
● A new language for web
● Compiled from other
languages
● Offers maximized, reliable
performance
● Not replacing JS
A new language for web
● A low level language
● standard
● a binary instruction and a
assembly-like format
● Supported by Mozilla, Google,
Microsoft, Apple
WebAssembly Now
● Release 1.0
(Draft, last updated Dec 13,
2018)
● Experimental
Why WebAssembly
What’s wrong with JS?
Web Javascript
● Slow
● Insecure
● Dynamic type vs static type
● Avoid heavy computing in
Front-End
● Easy-writing
● Huge eco-system
Historical Javascript
● ECMAScript
-> by Brendan Eich in late 1995
● Internet Explorer 3
● NodeJS -> 2009
● npm -> 2010
JS is getting faster
● Just In Time compiler of JS
engine
● trace and re-optimize (loop)
● GC
● Built-in functions / Stadard
Library / APIs
But wasm is faster
https://hacks.mozilla.org/2017/02/w
hat-makes-webassembly-fast/
● Wasm is compiled
● No type assertion
● No need to re-optimize
● Much less GC
.go
.wasm
(IR)
Firefox x86
Assembly
spider
monkey
Chart Data Source Info
From WebAssembly to JS engine
https://mbebenita.github.io/WasmExplorer/
Some Examples
“Unleash the power of your web devices”
Wasm vs JS
github.com/shamadee/web-dsp
https://d2jta7o2zej4pf.cloudfront.net/
Epic Epic Zen Garden
Unreal Engine in WebAssembly and WebGL 2.0
https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
Go WebAssembly
From Go to web
Go-WebAssembly
● go 1.11 (Aug. 2018)
● Experimental feature
https://github.com/golang/go/wiki/W
ebAssembly
1.11 Release Note
Go 1.11 adds an experimental port to WebAssembly (js/wasm).
Go programs compile to one WebAssembly module
Go runtime for goroutine scheduling, garbage collection,
maps, etc.
Go programs can call into JavaScript using the new
experimental syscall/js package.
new GOOS "js" and GOARCH "wasm"
Why Go-WebAssembly
Again, why?
Go-WebAssembly
● Runs existing program / library
in Front-End
● Make golang protable
● Thread Safe
● Back-End to Full-Stack?
Let’s Go-WebAssembly
<html>
<head>
<meta charset="utf-8">
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(
fetch("main.wasm"),
go.importObject)
.then((result) => {
go.run(result.instance);
});
</script>
</head>
<body></body>
</html>
run-%:
GOOS=js GOARCH=wasm
go run -exec="$(shell go env
GOROOT)/misc/wasm/go_js_wasm_exec" ./src/$*
test:
GOOS=js GOARCH=wasm
go test -exec="$(shell go env GOROOT)/misc/wasm/go_js_wasm_exec" ./...
build-%:
GOOS=js GOARCH=wasm
go build -o public/lib.wasm ./src/$*
server:
go run ./src/server -listen :8080 -dir public
.go .wasm JS API
Engine
Chart Data Source Info
From Golang to Web
Compile golang functions to wasm, and runs in JS
package main
import (
"strconv"
"syscall/js"
)
func add(i []js.Value) {
doc := js.Global().Get("document")
value1 := doc.Call("getElementById", "input1").Get("value").String()
value2 := doc.Call("getElementById", "input2").Get("value").String()
int1, _ := strconv.Atoi(value1)
int2, _ := strconv.Atoi(value2)
doc.Call("getElementById", "sum").Set("value", int1+int2)
}
// JS
func add() {
var value1 = document.getElementById("input1").value;
vat value2 = document.getElementById("input2").value;
document.getElementById("sum").value = Number(value1) + Number(value2);
}
// Go
func add(i []js.Value) {
doc := js.Global().Get("document")
value1 := doc.Call("getElementById", "input1").Get("value").String()
value2 := doc.Call("getElementById", "input2").Get("value").String()
int1, _ := strconv.Atoi(value1)
int2, _ := strconv.Atoi(value2)
doc.Call("getElementById", "sum").Set("value", int1+int2)
}
Pacakge syscall/js
● Bumpy when manipulate DOM
● access WebAssembly host
environment using the
js/wasm architecture
● API is based on JavaScript
semantics.
● EXPERIMENTAL
func main() {
c := make(chan struct{}, 0)
println("WASM Go Initialized")
// register functions
registerCallbacks()
<-c
println("Callbacks registered.") // console.log
}
func registerCallbacks() {
js.Global().Set("add", js.NewCallback(add))
js.Global().Set("subtract", js.NewCallback(subtract))
}
Use Go as Modules
● Import Go packages
● Complie to .wasm
● Register functions as JS
callbacks
● Invoke functions in JS
● Leave the DOMs to JS
Benefits from Go-wasm
● Runs existing program / library
in Front-End
● Make golang protable
● Thread Safe
● Join .wasm from other
languages
Go-Wasm Examples
https://justinclift.github.io/wasmGraph1/
GameBoyColor-Wasm
https://github.com/djhworld/gomeboycolor-wasm
Move Back-End Front
Performance no longer a problem. What you want to run in browser?
kubernetes, kubectl, geth...
Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017
https://www.youtube.com/watch?v=HktWin_LPf4
https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/
Dan Callahan: Practical WebAssembly | JSConf Budapest 2017
https://www.youtube.com/watch?v=bac0dGQbUto
Using WebAssembly and Threads (Chrome Dev Summit 2018)
https://www.youtube.com/watch?v=zgOGZgAPUjQ
Watch Lin Clark cartoon if you only have 30 mins!
Q&A

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Hey webpack
Hey webpackHey webpack
Hey webpack
 
Create Rest API in Nodejs
Create Rest API in Nodejs Create Rest API in Nodejs
Create Rest API in Nodejs
 
Webpack: from 0 to 2
Webpack: from 0 to 2Webpack: from 0 to 2
Webpack: from 0 to 2
 
Improving build solutions dependency management with webpack
Improving build solutions  dependency management with webpackImproving build solutions  dependency management with webpack
Improving build solutions dependency management with webpack
 
Webpack
Webpack Webpack
Webpack
 
Webpack slides
Webpack slidesWebpack slides
Webpack slides
 
JS & NodeJS - An Introduction
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An Introduction
 
Node.js with Express
Node.js with ExpressNode.js with Express
Node.js with Express
 
Bundle your modules with Webpack
Bundle your modules with WebpackBundle your modules with Webpack
Bundle your modules with Webpack
 
Webpack: your final module bundler
Webpack: your final module bundlerWebpack: your final module bundler
Webpack: your final module bundler
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
 
CasperJS
CasperJSCasperJS
CasperJS
 
Continuous Integration for front-end JavaScript
Continuous Integration for front-end JavaScriptContinuous Integration for front-end JavaScript
Continuous Integration for front-end JavaScript
 
Nodejs web,db,hosting
Nodejs web,db,hostingNodejs web,db,hosting
Nodejs web,db,hosting
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task Runner
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
JavaScript Engine and WebAssembly
JavaScript Engine and WebAssemblyJavaScript Engine and WebAssembly
JavaScript Engine and WebAssembly
 
Node.js 201: building real-world applications in pure JavaScript
Node.js 201: building real-world applications in pure JavaScriptNode.js 201: building real-world applications in pure JavaScript
Node.js 201: building real-world applications in pure JavaScript
 
What grunt?
What grunt?What grunt?
What grunt?
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scripts
 

Ähnlich wie Intro to go web assembly

Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
catherinewall
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
oazabir
 

Ähnlich wie Intro to go web assembly (20)

Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Grails 101
Grails 101Grails 101
Grails 101
 
Why Gradle?
Why Gradle?Why Gradle?
Why Gradle?
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Devfest09 Cschalk Gwt
Devfest09 Cschalk GwtDevfest09 Cschalk Gwt
Devfest09 Cschalk Gwt
 
Supercharging tutorials with WebAssembly
Supercharging tutorials with WebAssemblySupercharging tutorials with WebAssembly
Supercharging tutorials with WebAssembly
 
The Dojo Build System
The Dojo Build SystemThe Dojo Build System
The Dojo Build System
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
 
Treinamento frontend
Treinamento frontendTreinamento frontend
Treinamento frontend
 
Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2
 
Andriy Shalaenko - GO security tips
Andriy Shalaenko - GO security tipsAndriy Shalaenko - GO security tips
Andriy Shalaenko - GO security tips
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
 

Mehr von Che-Chia Chang

Mehr von Che-Chia Chang (8)

COSCUP Scouter: Face recognizer retrieves your Github contribution
COSCUP Scouter: Face recognizer retrieves your Github contributionCOSCUP Scouter: Face recognizer retrieves your Github contribution
COSCUP Scouter: Face recognizer retrieves your Github contribution
 
Elk for applications on k8s
Elk for applications on k8sElk for applications on k8s
Elk for applications on k8s
 
Gdg devfest-2018
Gdg devfest-2018Gdg devfest-2018
Gdg devfest-2018
 
CRI, OCI, and CRI-O
CRI, OCI, and CRI-OCRI, OCI, and CRI-O
CRI, OCI, and CRI-O
 
Kubernetes networks
Kubernetes networksKubernetes networks
Kubernetes networks
 
Automated container-deployment-on-kubernetes
Automated container-deployment-on-kubernetesAutomated container-deployment-on-kubernetes
Automated container-deployment-on-kubernetes
 
Deploy High Availability Kubernetes with Kubespray
Deploy High Availability Kubernetes with KubesprayDeploy High Availability Kubernetes with Kubespray
Deploy High Availability Kubernetes with Kubespray
 
K8s storage-glusterfs-20180210
K8s storage-glusterfs-20180210K8s storage-glusterfs-20180210
K8s storage-glusterfs-20180210
 

Kürzlich hochgeladen

Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
masabamasaba
 
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
masabamasaba
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
masabamasaba
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
chiefasafspells
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 

Kürzlich hochgeladen (20)

WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open SourceWSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
WSO2CON 2024 - Freedom First—Unleashing Developer Potential with Open Source
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
 
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
 
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security ProgramWSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security Program
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
 
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 

Intro to go web assembly

  • 3. WebAssembly ● A new language for web ● Compiled from other languages ● Offers maximized, reliable performance ● Not replacing JS
  • 4. A new language for web ● A low level language ● standard ● a binary instruction and a assembly-like format ● Supported by Mozilla, Google, Microsoft, Apple
  • 5. WebAssembly Now ● Release 1.0 (Draft, last updated Dec 13, 2018) ● Experimental
  • 7. Web Javascript ● Slow ● Insecure ● Dynamic type vs static type ● Avoid heavy computing in Front-End ● Easy-writing ● Huge eco-system
  • 8. Historical Javascript ● ECMAScript -> by Brendan Eich in late 1995 ● Internet Explorer 3 ● NodeJS -> 2009 ● npm -> 2010
  • 9. JS is getting faster ● Just In Time compiler of JS engine ● trace and re-optimize (loop) ● GC ● Built-in functions / Stadard Library / APIs
  • 10. But wasm is faster https://hacks.mozilla.org/2017/02/w hat-makes-webassembly-fast/ ● Wasm is compiled ● No type assertion ● No need to re-optimize ● Much less GC
  • 11. .go .wasm (IR) Firefox x86 Assembly spider monkey Chart Data Source Info From WebAssembly to JS engine https://mbebenita.github.io/WasmExplorer/
  • 12. Some Examples “Unleash the power of your web devices”
  • 14. Epic Epic Zen Garden Unreal Engine in WebAssembly and WebGL 2.0 https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
  • 16. Go-WebAssembly ● go 1.11 (Aug. 2018) ● Experimental feature https://github.com/golang/go/wiki/W ebAssembly
  • 17. 1.11 Release Note Go 1.11 adds an experimental port to WebAssembly (js/wasm). Go programs compile to one WebAssembly module Go runtime for goroutine scheduling, garbage collection, maps, etc. Go programs can call into JavaScript using the new experimental syscall/js package. new GOOS "js" and GOARCH "wasm"
  • 19. Go-WebAssembly ● Runs existing program / library in Front-End ● Make golang protable ● Thread Safe ● Back-End to Full-Stack?
  • 21. <html> <head> <meta charset="utf-8"> <script src="wasm_exec.js"></script> <script> const go = new Go(); WebAssembly.instantiateStreaming( fetch("main.wasm"), go.importObject) .then((result) => { go.run(result.instance); }); </script> </head> <body></body> </html>
  • 22. run-%: GOOS=js GOARCH=wasm go run -exec="$(shell go env GOROOT)/misc/wasm/go_js_wasm_exec" ./src/$* test: GOOS=js GOARCH=wasm go test -exec="$(shell go env GOROOT)/misc/wasm/go_js_wasm_exec" ./... build-%: GOOS=js GOARCH=wasm go build -o public/lib.wasm ./src/$* server: go run ./src/server -listen :8080 -dir public
  • 23. .go .wasm JS API Engine Chart Data Source Info From Golang to Web Compile golang functions to wasm, and runs in JS
  • 24. package main import ( "strconv" "syscall/js" ) func add(i []js.Value) { doc := js.Global().Get("document") value1 := doc.Call("getElementById", "input1").Get("value").String() value2 := doc.Call("getElementById", "input2").Get("value").String() int1, _ := strconv.Atoi(value1) int2, _ := strconv.Atoi(value2) doc.Call("getElementById", "sum").Set("value", int1+int2) }
  • 25. // JS func add() { var value1 = document.getElementById("input1").value; vat value2 = document.getElementById("input2").value; document.getElementById("sum").value = Number(value1) + Number(value2); } // Go func add(i []js.Value) { doc := js.Global().Get("document") value1 := doc.Call("getElementById", "input1").Get("value").String() value2 := doc.Call("getElementById", "input2").Get("value").String() int1, _ := strconv.Atoi(value1) int2, _ := strconv.Atoi(value2) doc.Call("getElementById", "sum").Set("value", int1+int2) }
  • 26. Pacakge syscall/js ● Bumpy when manipulate DOM ● access WebAssembly host environment using the js/wasm architecture ● API is based on JavaScript semantics. ● EXPERIMENTAL
  • 27. func main() { c := make(chan struct{}, 0) println("WASM Go Initialized") // register functions registerCallbacks() <-c println("Callbacks registered.") // console.log } func registerCallbacks() { js.Global().Set("add", js.NewCallback(add)) js.Global().Set("subtract", js.NewCallback(subtract)) }
  • 28. Use Go as Modules ● Import Go packages ● Complie to .wasm ● Register functions as JS callbacks ● Invoke functions in JS ● Leave the DOMs to JS
  • 29. Benefits from Go-wasm ● Runs existing program / library in Front-End ● Make golang protable ● Thread Safe ● Join .wasm from other languages
  • 32. Move Back-End Front Performance no longer a problem. What you want to run in browser? kubernetes, kubectl, geth...
  • 33. Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017 https://www.youtube.com/watch?v=HktWin_LPf4 https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ Dan Callahan: Practical WebAssembly | JSConf Budapest 2017 https://www.youtube.com/watch?v=bac0dGQbUto Using WebAssembly and Threads (Chrome Dev Summit 2018) https://www.youtube.com/watch?v=zgOGZgAPUjQ Watch Lin Clark cartoon if you only have 30 mins!
  • 34. Q&A

Hinweis der Redaktion

  1. Runs in javascript engines
  2. Slow: type assertion, parse, execute, requires lots of optimization Insecure: memory control
  3. Designed for web
  4. Slow: type assertion, parse, execute, requires lots of optimization
  5. Near machine code performance
  6. Runs in javascript engines
  7. Go
  8. The WebAssembly.instantiateStreaming() function compiles and instantiates a WebAssembly module directly from a streamed underlying source. This is the most efficient, optimized way to load wasm code.
  9. Go