gopherjs/gopherjs lets your golang code execute in browsers (Golang to JavaScript)

Keywords: github Javascript Attribute Front-end

Life goes on, go on!!!

Share gopherjs with you today.

A compiler from Go to JavaScript for running Go code in a browser

Introduction and configuration of gopherjs

github address:
https://github.com/gopherjs/gopherjs/

Introduction:
GopherJS compiles Go code (golang.org) to pure JavaScript code. Its main purpose is to give you the opportunity to write front-end code in Go which will still run in all browsers. Give GopherJS a try on the GopherJS Playground.

Document address:
https://godoc.org/github.com/gopherjs/gopherjs/js

Obtain:

go get -u github.com/gopherjs/gopherjs

Error handling:

github.com\gopherjs\gopherjs\compiler\compiler.go:20: undefined: ___GOPHERJS_REQUIRES_GO_VERSION_1_9___
github.com\gopherjs\gopherjs\compiler\package.go:436: o.IsAlias undefined (type *types.TypeName has no field or method IsAlias)

gopherjs was compiled using golang 1.9, so we need to use golang 1.9 as well.

Installation:

go install -v github.com/gopherjs/gopherjs

Determine whether the installation is successful:

D:\go_workspace\src\go_gopherjs
λ gopherjs
GopherJS is a tool for compiling Go source code to JavaScript.

Usage:
  gopherjs [command]

Available Commands:
  build       compile packages and dependencies
  doc         display documentation for the requested, package, method or symbol
  get         download and install packages and dependencies
  help        Help about any command
  install     compile and install packages and dependencies
  run         compile and run Go program
  serve       compile on-the-fly and serve
  test        test packages
  version     print GopherJS compiler version

Flags:
  -h, --help   help for gopherjs

Use "gopherjs [command] --help" for more information about a command.

If it fails, see if golang path bin adds environment variables.

Golang, JavaScript type comparison:

| Go type               | JavaScript type       | Conversions back to interface{} |
| --------------------- | --------------------- | ------------------------------- |
| bool                  | Boolean               | bool                            |
| integers and floats   | Number                | float64                         |
| string                | String                | string                          |
| []int8                | Int8Array             | []int8                          |
| []int16               | Int16Array            | []int16                         |
| []int32, []int        | Int32Array            | []int                           |
| []uint8               | Uint8Array            | []uint8                         |
| []uint16              | Uint16Array           | []uint16                        |
| []uint32, []uint      | Uint32Array           | []uint                          |
| []float32             | Float32Array          | []float32                       |
| []float64             | Float64Array          | []float64                       |
| all other slices      | Array                 | []interface{}                   |
| arrays                | see slice type        | see slice type                  |
| functions             | Function              | func(...interface{}) *js.Object |
| time.Time             | Date                  | time.Time                       |
| -                     | instanceof Node       | *js.Object                      |
| maps, structs         | instanceof Object     | map[string]interface{}          |

Gopher JS application

The simplest example (accessing native javascript apis in go code)

Write a golang file and name it main.go:

package main

import "github.com/gopherjs/gopherjs/js"

func main() {
    js.Global.Get("document").Call("write", "Hello world!")
}

Run the command line:

gopherjs build main.go -o demo.js

At this point, two files demo.js and demo.js.map are generated.

Create a new HTML file and name it test.html. Type:

<!doctype html>
<html>
<head>
  <title>Beginning of Gopherjs</title>
</head>
<body>

<script src="demo.js"></script>
</body>
</html>

Open test.html and view the results.

Operation DOM(honnef.co/go/js/dom)

github address:
https://github.com/dominikh/go-js-dom

Obtain:
go get honnef.co/go/js/dom

Browser Plays mp3 Audio
main.go

package main

import "honnef.co/go/js/dom"

func main() {
    d := dom.GetWindow().Document()

    foo := d.GetElementByID("foo").(*dom.HTMLButtonElement)
    foo.AddEventListener("click", false, func(event dom.Event) {
        a := d.GetElementByID("audio").(*dom.HTMLAudioElement)
        a.Play()
    })
}

Compile:
gopherjs build main.go -o demo.js

test.html

<!doctype html>
<html>
<head>
  <title>GopherJS DOM example - Play Sound on Click Event</title>
</head>
<body>

<button id="foo" type="button">Click Me to Play Sound</button>
<audio id="audio">
  <source src="test.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script src="demo.js"></script>
</body>
</html>

Create and Append Element
main.go

package main

import "honnef.co/go/js/dom"

func main() {
    d := dom.GetWindow().Document()

    foo := d.GetElementByID("foo").(*dom.HTMLDivElement)
    foo.AddEventListener("click", false, func(event dom.Event) {
        div := d.CreateElement("div").(*dom.HTMLDivElement)
        div.Style().SetProperty("color", "red", "")
        div.SetTextContent("I am new div")
        foo.AppendChild(div)
    })
}

Compile:
gopherjs build append.go -o demo.js

test.html

<!doctype html>
<html>
<head>
  <title>GopherJS DOM example - Create and Append Element</title>
</head>
<body>

<div id="foo">Click me to create and add new element</div>

<script src="demo.js"></script>
</body>
</html>

Posted by TaintedBloop on Thu, 07 Feb 2019 22:48:17 -0800

Programmer Group

gopherjs/gopherjs lets your golang code execute in browsers (Golang to JavaScript)

Introduction and configuration of gopherjs

Gopher JS application

The simplest example (accessing native javascript apis in go code)

Operation DOM(honnef.co/go/js/dom)

Hot Keywords