What is Wasm or WebAssembly ? Learn WebAssembly Basics with Rust Part C

  • Updated : 04-07-2024 18:59
  • By : Phosphataz
  • Resume


    In the Part A post :

    • - we created a rust library and compiled it to wasm file
    • - we created an html file index.html and integrated a small script tag to fetch the wasm file
    • - then we access to the method inside wasm file or module through JavaScript.


    In part B post

    • - we learnt how to compile rust code to wasm binary file
    • - we installed wasmer runtime and run the wasm binary file on the system.


    In this chapter we will look learn more about wasmer ecosystem and tools available for us and in the end we will use some of those tools to look inside wasm binary file.

    WebAssembly ecosystem and tooling


    WebAssembly ecosystem today is vast, it offer a lot of tools and frameworks, let see a few of them.

    1 - compilation

    A lot of languages offer tools to compile their source code to WebAssembly binary :

    • - rust language : have wasm-pack to compile rust source code to wasm binary file. Check the part B post for a quick how to use wasm-pack.
    • - C and C++ : Offer Emscripten for compiling C and C++ code to wasm binary. tu use it
    • Follow this download page to download and install emscripten. Or on Ubuntu / Linux install Emscripten with this command :
    sudo apt install emscripten
    


    • And create a C++ file (for me hello.cpp) and put this code inside :
    /* hello.cpp file*/
    #include <iostream>
    using namespace std;
    
    
    int main(){
        cout << "Hello world" << endl;
    }
    


    • To generate .wasm binary file from this code with Emscripten, run this command (from inside the folder containing the hello.cpp file).
    emcc hello.cpp -O3 -o hello.wasm
    

    This will generate the hello.wasm file.


    • To run this hello.wasm file in wasmer runtime, run this command :
    wasmer run hello.wasm
    

    This will output the "Hello world" message.


    • - Python : provide py2wasm package, to compile python file to wasm binary file.
    • First, install this package by running this command :
    pip install py2wasm # make sure to install python (i use 3.11) and pip first
    


    • To generate .wasm binary file from python program, run this command :
    • First create a python program that print "hello, world" from example :
    print("Hello, world from python") # inside hello.py file
    


    • Generate wasm binary file :
    py2wasm hello.py -o hellopy.wasm
    


    • To run the generated hellopy.wasm file, run this command below :
    wasmer run hellopy.wasm
    


    2 - Tools

    • - WebAssembly binary toolchain or WABT : it's a set of tools that allow us to convert wasm binary to wasm text representation.
    • wat2wasm : is used to convert WebAssembly text representation to WebAssembly binary format.
    • wasm2wat : is used to convert WebAssembly binary format to WebAssembly text representation. That is more readable.
    • We will see How to use these tools later in this article.
    • - xxd : is not special to WebAssembly ecosystem, it's a command line program we can use to view, convert, display binary files on Linux systems.
    • - WebAssembly explorer : is an online tools that help view the result of converting C and C++ code to webassembly code and web assembly representation. This help in code optimization.


    Inside WebAssembly binary file


    Let's view inside webassembly binary code format.