I tried to get started with WebAssembly

Suddenly, I decided to try WebAssembly and tried it.

What is WebAssembly?

WebAssembly runs your code in a browser at high speed. The language that works on the front side of the Web was javascript. Since javascript is a dynamically typed language and is an interpreter type, it is intuitive and easy to write, but it is slow because it is executed while type inference. That's where WebAssembly comes in, which compiles a statically typed language into intermediate code and then converts it into a binary format. I understand that it is a technology that realizes faster execution speed by reducing the file size and shortening the parsing process by using this binary format. (Understanding after studying for about 30 minutes)

I haven't read it yet, but it looks good to deepen my understanding of the article WebAssembly below. https://qiita.com/ShuntaShirai/items/3ac92412720789576f22

getting started

The execution OS was Ubuntu 18.04.4. Ubuntu 16.04 seems to be the best. I tried to move it according to the following site. https://webassembly.org/getting-started/developers-guide/

First of all,

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest

It is a procedure to install emsdk, clone from Github and install. later

source ./emsdk_env.sh --build=Release

Ready to execute the command through the path. From here, the main is to create a Web API in C language. Create a new hello directory and create hello.c with the following contents directly under it.

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}

If hello.c is created,

emcc hello.c -o hello.html

And compile hello.c. After compiling, the directory

ll
total 256
drwxr-xr-x 2 kerneltyu kerneltyu 4096 May 10 02:37 ./
drwxr-xr-x 3 kerneltyu kerneltyu 4096 May 10 02:35 ../
-rw-r--r--1 kerneltyu kerneltyu 84 May 10 02:37 hello.c
-rw-r--r--1 kerneltyu kerneltyu 102675 May 10 02:37 hello.html
-rw-r--r--1 kerneltyu kerneltyu 115460 May 10 02:37 hello.js
-rw-r--r--1 kerneltyu kerneltyu 21716 May 10 02:37 hello.wasm

You can create a file like this. There is a javascript file, html and wasm in binary format.

emrun --no_browser --port 8080 .

When you start up with and access localhost: 8080

A screen like this will be displayed. That's all for getting started with WebAssembly!

Question

There was something I didn't understand, so I'll keep it as a record.

In this example, I don't think there was a part to use javascript. (Although a fair amount of code was written in the generated html and js) I don't really understand the advantages. Maybe I need to experiment with something that uses more js.
What do you do when debugging in a browser? I wonder if it will be while spitting out logs. It doesn't seem to be as rich as js in a debug environment.
I didn't understand how to associate html and wasm.

Impressions

It was good to realize that the era of developing web applications in C language is approaching. I feel that the background is that Web applications are getting richer and the demand for execution at the edge is increasing. I personally wanted to deepen the use at the edge. Suddenly I started writing, but I became even more interested. Let's study a little more.

reference

Serverless future created by WebAssembly and Rust WebAssembly