The Rise of Canvas and WebAssembly

Before the time of Canvas and WebAssembly there were these kinds of web embeds:

• ActiveX - C/C++ code, for browsers on Windows only
• Flash/Flex - ActionScript code, for all platforms
• Java Applet - Java code, for all platforms
• Java FX - Java code, for all platforms
• And some more

Since the introduction of Canvas in HTML5, most of all embeds can be done with 'canvas' tag and JavaScript; browsers JIT-compile JS to native code but no types, so it's slow.

However, for high performance, WebAssembly is, near-native performance. WebAssembly works in its own embed (window). WebAssembly has a drawback: no simple way to access DOM presently.

Solutions to choose:

• JS/Canvas: Draw UI with something like Zebkit, or raw canvas APIs
• C++(Emscripten)/Canvas: Draw UI with Qt, or raw OpenGL (browser renders as WebGL)
• Basically go for these canvases only when complex graphics, or native performance needed.

Compile to WebAssembly with:

• C/C++: Emscripten (WebGL, Qt, etc.)
• Python, Rust: Google will tell :)

Hello World in Emscripten:

1) Download

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

cd emsdk

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

2) Check version

em++ -v

3) Hello World (hello.cpp)

#include <iostream>

using namespace std;

int main(int Argc,char* Args[]){

  cout <<"Hello!" <<endl;

}

4) Build (output files: .wasm, .js, .html)

em++ hello.cpp -o hello.html

5) Config web server

micro /etc/nginx/mime.types

#Add 1 line to types:

application/wasm wasm;

6) Edit /etc/hosts, create .conf file in /etc/nginx/conf.d

127.0.0.1 hello.local

7) Clone hello.html to show canvas only

cp hello.html hello.custom.html

8) Open web browser to http://hello.local/hello.custom.html

Reference:

https://emscripten.org/docs/getting_started/Tutorial.html