# Introducing WebAssembly with examples

[By\\
\\
Leo Daidone](/content/author/leo/index.html)

1. [Home](/content/site-root.html)
2. [Engineering Blog](/content/blog/index.html)
3. Introducing WebAssembly with examples

Hi folks, continuing with my previous post  [WebAssembly, the end of Javascript era?](/content/2019/01/webassembly-the-end-of-javascript-era/index.html) , today we are going to demonstrate WebAssembly with two simple

examples, one with C++ and the other with GO language. The example from two languages will help us to see different implementations that allow us to reach the same result.

## Tool set

Before jumping into setting up WebAssembly, I want to briefly cover the tools I’ve used to create this example ranging from IDE (integrated development environment) to WebAssembly plugin

In the C++ project I used _**CLion**_ and for the GO project I pick the _**Goland**_ which are both created by JetBrain. Of course, there are alternatives IDEs but these two have been chosen for consistency for side-by-side comparison

The other thing we will need in both cases is to compile and integrate with javascript. GO since version 1.11.4 already included WebAssembly port as a build-in feature we will go in depth in the next section.

For C++, we will have to install and set up EMSDK, a toolchain provided by [WebAssembly](https://webassembly.org/getting-started/developers-guide/)  that not only compile your code into _**.wasm**_ file, but also provides a scripting language that you can embed on your C++, allows extern “c” statements, generate HTML output _(including javascript’s integration of **wasm**) and more._

## The setup

As I already mentioned, for GO lang we will need to have version 1.11, which includes an experimental port to WebAssembly.

Now you only need to set **GOARCH=wasm** and **GOOS=js** environment variables to compile this small example into WebAssembly:

```
package main

import "fmt"

func main() {
    fmt.Println("Hello, WebAssembly!")
}
```

with just this line,

```
$ GOOS=js GOARCH=wasm go build -o main.wasm
```

Of course you can always automate this task in your IDE, here’s [how to configure Goland](https://github.com/golang/go/wiki/Configuring-GoLand-for-WebAssembly)

For C++, in addition to the compiler that match your OS, for example gcc, you will need to install the EMSDK.

```
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest
```

If you don’t want to use git, you can download the zip version.

## GO example

For a fully working example, the wasm file is not enough. Here we will need a web server that serves the HTML and javascript, and the javascript file that execute the wasm in the browser.

First we need to get the wasm\_exec.js and  and wasm\_exec.html that can be copied from GO installation

```
cp "$(go env GOROOT)/misc/wasm/wasm_exec.*” .
```

The next thing will be a web server, here’s a snippet of a simple net/http based server:

```
package main

import (
 "flag"
 "log"
 "net/http"
)

var (
 listen = flag.String("listen", ":8080", "listen address")
 dir = flag.String("dir", ".", "directory to serve")
)

func main() {
 flag.Parse()
 log.Printf("listening on %q...", *listen)
 log.Fatal(http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir))))
}
```

And finally “the code”, you will notice that instead of  **import** **“fmt”** I use **“syscall/js”**, this library gives us the ability to access to DOM elements and invoke javascript actions on them.

```
package main

import (
 "syscall/js"
)

func main() {
 console := js.Global().Get("console")
 console.Call("log", "Hi!")

wasmtest := js.Global().Get("document").Call("getElementById", "wasmtest")
 wasmtest.Set("innerText", "Am I a Gopher?")
}
```

When this code is loaded, it shows a “ _**Run**_” button and when you click it, a “Hi!” message will be printed in browser’s console and a “ _**<p>**_” element enclosing “ _**Am I a Gopher?**_”  will append to the browser.

## C++ exmaple

This example workflow is slightly easier than the previous one thanks of the EMSDK.

In this case we only need to implement the C++ code

```
#include <iostream>

int main() {
 std::cout << "Hello, WebAssemby!" << std::endl;
 return 0;
}
```

The SDK will generate all support files needed, such as Make files. To compile run:

```
emcc main.cpp -s WASM=1 -o hello.html
```

Once it finishes you can either open the HTML file in the browser or run a web server pointing to you project directory.

```
$ emrun --no_browser --port 8080 .
```

and open in your browse http://localhost:8080/hello.html

You will see a debug page created by emscripten.

You can do more elaborated things using emscripten library which allows you, for example,  run native C++ code in the browser  with the use of _**“extern C”**_

```cpp

```

For more information about this library take a peek at  [EMScripten documentation](https://emscripten.org/docs/)

## Final thoughts

As you could sneak peek with these two small examples, this is a promising new tech. However, as a very early tool scarce in features, it will take a while for WebAssembly to takeoff. Despite it’s lack in features, I am excited to see what the web could become.

Hope you enjoyed reading and see you on the next post. Thank you!

### Next Post

#### The future of jQuery

[Read More](/content/2019/03/the-future-of-jquery/index.html)

**Tags:** [c++](/content/post/tag/c/index.html), [cpp](/content/post/tag/cpp/index.html), [golang](/content/post/tag/golang/index.html), [javascript](/content/post/tag/javascript/index.html), [programming](/content/post/tag/programming/index.html), [wasm](/content/post/tag/wasm/index.html), [web apps](/content/post/tag/web-apps/index.html), [webassembly](/content/post/tag/webassembly/index.html)

**Categories:** [Golang](/content/post/category/golang/index.html), [JavaScript](/content/post/category/javascript/index.html), [Programming](/content/post/category/programming/index.html)

### Comments

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/).

❮

- 9 years ago
- 10 comments

Using components is a fantastic way to include 3rd party libraries like …

- 9 years ago
- 2 comments

Unit testing is a very important part of software development, and it is …

- 9 years ago
- 1 comment

In the second part of our NPM & Angular CLI series we discuss how we turned …

- 7 years ago
- 3 comments

The future of jQuery

- 10 years ago
- 1 comment

Evolution of the PHP Language

- 8 years ago
- 1 comment

Videojs component with Vuejs

- 9 years ago
- 3 comments

Creating a custom application with Angular CLI is easy and fun. …

- 8 years ago
- 4 comments

An overview and examples of debugging your PHP application with the use of …

❯

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/).

What do you think?

0 Responses

Upvote

Funny

Love

Surprised

Angry

Sad

G

Start the discussion…

Comment

###### Log in with

###### or sign up with Disqus  or pick a name

### Disqus is a discussion network

- Don't be a jerk or do anything illegal. Everything is easier that way.

[Read full terms and conditions](https://docs.disqus.com/kb/terms-and-policies/)

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

- Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our [Terms of Service](https://help.disqus.com/customer/portal/articles/466260-terms-of-service) and [Privacy Policy](https://disqus.com/privacy-policy), including supplementing that information with other data about me, such as my browsing and location data.
- Contact me or enable others to contact me by email with offers for goods or services
- Process any sensitive personal information that I submit in a comment. See our [Privacy Policy](https://disqus.com/privacy-policy) for more information

Acknowledge I am 18 or older

- [Favorite this discussion](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default# "Favorite this discussion")

- ## Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

[Find More Discussions](https://disqus.com/home/?utm_source=disqus_embed&utm_content=recommend_btn)

[Share](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default#)

- Tweet this discussion
  - Share this discussion on Facebook
  - Share this discussion via email
  - Copy link to discussion

- [Best](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default#)
  - [Newest](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default#)
  - [Oldest](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default#)

Be the first to comment.

[Load more comments](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=2037&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2019%2F02%2Fintroducing-webassembly-with-examples%2F&t_d=Introducing%20WebAssembly%20with%20examples&t_t=Introducing%20WebAssembly%20with%20examples&s_o=default#)

live.rezync.com

# live.rezync.com is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

pippio.com

# pippio.com is blocked

This page has been blocked by an extension

- Try disabling your extensions.

ERR\_BLOCKED\_BY\_CLIENT

Reload

This page has been blocked by an extension

# See how we can help

Lets talk!

Contact Us

# Stay up to date on the latest technologies

Join our mailing list, we promise not to spam.

Email AddressJoin