Hello World on WebAssembly

What is WebAssembly?

A technology that allows you to run assembly language from a browser. It is used for the purpose of speeding up or doing something that the JavaScript processing system cannot do.

In June 2015, Mozilla, Google, Microsoft and Apple agreed to develop it as a standard format.

Supported languages are C / C ++, Rust, etc. Recently, Golang can also be used.

Can I use WebAssembly? <img width = "1272" alt = "Screenshot 2018-09-28 16.17.10.png " src = "https://qiita-image-store.s3.amazonaws.com/0/265344" /81bce170-2244-092c-e681-864551dedbd5.png ">

Currently supported by most browsers other than IE.

What is assembly language?

• A programming language that has a direct one-to-one correspondence with machine language (the world of 0 and 1)
• Also called assembler (this is also software that converts assembly language to machine language)
• "Assemble": Converting a program written in assembly language into machine language code

As an example, let's take a look at a Hello World program written in C ++ in assembly language.

hello.cpp

#include <iostream>
using namespace std;

int main() {
    cout << "Hello World!" << endl;
    return 0;
}

You can see the assembly language by adding the S option to g ++.

$ g++ -S hello.cpp

Will generate an assembler file called hello.s.

Since the file will have more than 1000 lines, I will put only the first 15 lines here.

	.section	__TEXT,__text,regular,pure_instructions
	.macosx_version_min 10, 13
	.globl	_main                   ## -- Begin function main
	.p2align	4, 0x90
_main:                                  ## @main
	.cfi_startproc
## %bb.0:
	pushq	%rbp
	.cfi_def_cfa_offset 16
	.cfi_offset %rbp, -16
	movq	%rsp, %rbp
	.cfi_def_cfa_register %rbp
	subq	$32, %rsp
	movq	__ZNSt3__14coutE@GOTPCREL(%rip), %rdi
	leaq	L_.str(%rip), %rsi

Hello World on WebAssembly

Here is the main issue.

Install Emscripten

Introducing the most popular Emscripten.

git clone https://github.com/juj/emsdk.git
cd emsdk

#Install the latest SDK tools
./emsdk install latest

#Activate
./emsdk activate latest

#Set path and environment variables
source ./emsdk_env.sh

It takes a lot of time, so I drink tea.

Execute

Now that you have a build environment, compile and run it.

• Prepare C file

hello.c

#include <stdio.h>

int main() {
    printf("Hello World!\n");
    return 0;
}

• Build & Run

$ emcc -0 hello.js -O0 hello.c
$ node hello.js
Hello World!

Make the output file .html

$ emcc -o index.html hello.c

#Set up a local server
## Python3.x series
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

## Python2.x series
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

When you access http: // localhost: 8000 /

Hello World! Is displayed properly.

At the end

This time I tried Hello World with WebAssembly.

If you feel like it, try more complicated arithmetic processing.

that's all!