- 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:
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:
