Laboratory WebAssembly

Georgina González Enríquez

Sebastián Cedeño González

Web Applications Development Laboratory

Basic 

  • Imagine what kind of applications you can do using WebAssembly

Some applications that can be done using WebAssembly are interactive pages for a business or academic entity, game applications, or streaming of content.

  • Do you see a future for WebAssembly?

Yes, because since it can be implemented along with web developing languages, it can bring together the advantages of the language WebAssembly is compiling, like C, with the advantages of web languages, like javascript.

Research

  • Write a mini-tutorial for using WebAssembly with another language. You must write at least three simple examples. 

Compile and run a hello world program in C

  1. Clone precompiled Toolchain repo to compile C to WebAssembly:

$ git clone https://github.com/emscripten-core/emsdk.git

$ cd emsdk

$ ./emsdk install latest

$ ./emsdk activate latest

2. In current command prompt, setup an Emscripten compiler environment (variables and directory entries):

$ source ./emsdk_env.sh –build=Release

3. Create our hello world program in C:

$ mkdir hello

$ cd hello

$ cat << EOF > hello.c

#include <stdio.h>

int main(int argc, char ** argv) {

  printf(“Hello, world!\n”);

}

EOF

4. Compile our program to WebAssembly:

$ emcc hello.c -o hello.html

5. Serve compiled files over HTTP:

$ emrun –no_browser –port 8080 .

6. Open http://localhost:8080/hello.html in your browser. The result should display “Hello, World!”:

1

Reference: https://webassembly.org/getting-started/developers-guide/

Compile and run a hello world program in C++

Note: since the toolchain used in the previous lesson works also with c++, the steps are almost the same.

  1. Clone precompiled Toolchain repo to compile C to WebAssembly

$ git clone https://github.com/emscripten-core/emsdk.git

$ cd emsdk

$ ./emsdk install latest

$ ./emsdk activate latest

2. In current command prompt, setup an Emscripten compiler environment (variables and directory entries):

$ source ./emsdk_env.sh –build=Release

3. Create our hello world program in C++:

$ mkdir hello2

$ cd hello2

$ cat << EOF > hello.cpp

#include<iostream>

int main() {

  std::cout << “Hello World” << std::endl;

  return 0;

}

EOF

4. Compile our program to WebAssembly:

$ em++ hello.cpp -s WASM=1 -o hello.html

5. Serve compiled files over HTTP:

$ emrun –no_browser –port 8080 .

6. Open http://localhost:8080/hello.html in your browser. The result should display “Hello, World”:

2

References: https://webassembly.org/getting-started/developers-guide/

      https://medium.com/@tdeniffel/pragmatic-compiling-from-c-to-webassembly-a-guide-a496cc5954b8

Compile and run a hello world program in Rust

  1. You must have Rust installed in your system. If not, here’s a link with instructions for the installation: https://www.rust-lang.org/tools/install
  2. You must also install wasm-pack: https://rustwasm.github.io/wasm-pack/installer/
  3. Install cargo-generate with the next command:

cargo install cargo-generate

It will not work if openssl is not well configured

4. Also, install or update npm with this

npm install npm@latest -g

5. Clone the project template with the next command:

cargo generate –git https://github.com/rustwasm/wasm-pack-template

Then name your project as you wish, for this tutorial we will use the name “wasm-game-of-life”

6. Then enter the folder where your project was created

cd wasm-game-of-life

7. After you are inside the folder, build a wasm project with the next command:

wasm-pack build

8. Now, to put the project in a web page run the next command:

npm init wasm-app www

9. Now, enter the www folder and install the dependencies with the next commands:

cd www

npm install

10.  Finally, to run the project, use this command:

npm run start

11. Open your browser on the localhost port 8080

http://localhost:8080/

It should look something like this:

3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s