{"id":17274108,"url":"https://github.com/davidthorn/wasm","last_synced_at":"2025-03-26T13:26:25.631Z","repository":{"id":122658845,"uuid":"162995449","full_name":"davidthorn/wasm","owner":"davidthorn","description":null,"archived":false,"fork":false,"pushed_at":"2018-12-24T15:15:01.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T14:47:40.059Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidthorn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-24T13:52:45.000Z","updated_at":"2018-12-24T15:15:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"06cdb10f-c588-424f-b1ab-23e7852db5ba","html_url":"https://github.com/davidthorn/wasm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Fwasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Fwasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Fwasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidthorn%2Fwasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidthorn","download_url":"https://codeload.github.com/davidthorn/wasm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245661445,"owners_count":20651864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T08:53:09.064Z","updated_at":"2025-03-26T13:26:25.606Z","avatar_url":"https://github.com/davidthorn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Assembly\n\nSo, and I always like to start my read me's with So.\n\nI know quite a bit about C and C++, I would not stay that I am a master at it, but I can write the basic stuff.\n\n## Why use `C/C++`?\n\nThe thing was that I could never find a good reason to use either because I generally always do web development or app development using `Swift, PHP and Javascript`.\n\n## How did I get to know about `WASM`? \n\nObviously, this was not difficult do to me spending most of my spare time when at home watching either `youtube` or `netflix`.\n\nAfter watching a couple of videos on youtube about `wasm` I noticed that it would be possible for me to write some code in `C` or `C++` and use it directly in the browser. This makes `wasm` really interesting!\n\n## Creating a Basic (useless) C program \n\nSo, lets start by making the most basic `C`program to get it compiled and running.\n\n```c\n#include \u003cstdio.h\u003e\n\nint main(int argc , char ** argv) {\n\n    printf(\"Hello world\\n\");\n\n}\n```\n\n### Compiling our useless C program\n\nNow lets compile it into a executable called `main` using the flag `-o`.\n\n```bash\ngcc -o main main.c\n```\n\n### Running our useless program\n\nNow we can run our new amazing application.\n\n```bash\n./main\nHello world\n```\n\n## Installing all Web Assembly's dependencies\n\nLooking at the following documentation for `wasm` it seems pretty straight forward to me to get this working.\n\n[https://webassembly.org/getting-started/developers-guide/](https://webassembly.org/getting-started/developers-guide/)\n\nI am using `Ubuntu` so I followed the simple `Downloading the ToolChain` steps\n\n```bash\n$ git clone https://github.com/juj/emsdk.git\n$ cd emsdk\n$ ./emsdk install latest\n$ ./emsdk activate latest\n```\n\nAnd, it was all installed\n\n## Adding `emsdk` to your PATH\n\nAt the end of the `activate` command it provides you with a hint to run the following command so as to add some executable paths to your `PATH` environment variable:\n\n```bash\nTo conveniently access the selected set of tools from the command line, consider adding the following directories to PATH, or call 'source ./emsdk_env.sh' to do this for you.\n```\n\nSo I ran this command `source ./emsdk_env.sh` and by the power of grayskull it did what it said it would do and outputted the following stuff.\n\n```bash\n#Adding directories to PATH:\nPATH+=/home/david/emsdk\nPATH+=/home/david/emsdk/clang/e1.38.21_64bit\nPATH+=/home/david/emsdk/node/8.9.1_64bit/bin\nPATH+=/home/david/emsdk/emscripten/1.38.21\n\n#Setting environment variables:\nEMSDK=/home/david/emsdk\nEM_CONFIG=/home/david/.emscripten\nLLVM_ROOT=/home/david/emsdk/clang/e1.38.21_64bit\nEMSCRIPTEN_NATIVE_OPTIMIZER=/home/david/emsdk/clang/e1.38.21_64bit/optimizer\nBINARYEN_ROOT=/home/david/emsdk/clang/e1.38.21_64bit/binaryen\nEMSDK_NODE=/home/david/emsdk/node/8.9.1_64bit/bin/node\nEMSCRIPTEN=/home/david/emsdk/emscripten/1.38.21\n```\n\n# Emscripten Compiler Frontend (emcc)\n\nSo in order to compile any of your code into web assembly you need to use the `emcc` executable.\n\nAfter opening the man pages for `emcc` I read the following text which then made it clearer to me what it can compile.\n\n``` \nCommand line syntax\n===================\n\n   emcc [options] file...\n\n(Note that you will need \"./emcc\" if you want to run emcc from your\ncurrent directory.)\n\nThe input file(s) can be either source code files that *Clang* can\nhandle (C or C++), LLVM bitcode in binary form, or LLVM assembly files\nin human-readable form.\n```\n\n## Using it blind and trying it out\n\nRather than spend 10 minutes reading the doc's lets just see if it will compile our C program as is.\n\n```bash\nemcc src/main.c\n```\n\n### Output\n\nAfter running the previously command for the very first time I got the fillowing output and also to two files were created `a.out.js` and `a.out.wasm`.\n\n```bash\nemscripten:INFO: generating system library: dlmalloc.bc... (this will be cached in \"/home/david/.emscripten_cache/asmjs/dlmalloc.bc\" for subsequent builds)\nemscripten:INFO:  - ok\nemscripten:INFO: generating system library: libc.bc... (this will be cached in \"/home/david/.emscripten_cache/asmjs/libc.bc\" for subsequent builds)\nemscripten:INFO:  - ok\nemscripten:INFO: generating system library: compiler-rt.a... (this will be cached in \"/home/david/.emscripten_cache/asmjs/compiler-rt.a\" for subsequent builds)\nemscripten:INFO:  - ok\nemscripten:INFO: generating system library: wasm-libc.bc... (this will be cached in \"/home/david/.emscripten_cache/asmjs/wasm-libc.bc\" for subsequent builds)\nemscripten:INFO:  - ok\nemscripten:INFO: generating system asset: generated_struct_info.json... (this will be cached in \"/home/david/.emscripten_cache/asmjs/generated_struct_info.json\" for subsequent builds)\nemscripten:INFO:  - ok\n```\n\n## Reading the documentation for 0.3 seconds \n\nLets try it how the documentation says we should do it.\n\n```bash\nemcc src/main.c -s WASM=1 -o out/hello.html\n```\n\nThis then creates the `hello.html` page which we requested for.\n\n## Run the code in the Browser\n\nFollowing the next step in the doc's it mentions that you can serve the compiled files over `HTTP` by using the `emrun` web server.\n\n```bash\nemrun --no_browser --port 8080\n```\n![alt text](./screenshots/hello.html.png)\n\n## What does -s `WASM=1` mean? \n\nI not ready to go on until I am sure about what the `-s` flag means and why `WASM=1`.\n\nAfter googling just `-s WASM=1` the first result provided me with the answer.\n\nThe `WASM=1` means that the `emcc` should output a `wasm`file too, by default it only outputs the `.js` file as previously seen.\n\n\u003e [Creating HTML and JavaScript](https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm#Creating_HTML_and_JavaScript)\n\n```\nThe options we’ve passed in with the command are as follows:\n\n-s WASM=1 — Specifies that we want wasm output. If we don’t specify this, Emscripten will just output asm.js, as it does by default.\n\n-o hello.html — Specifies that we want Emscripten to generate an HTML page to run our code in (and a filename to use), as well as the wasm module and the JavaScript \"glue\" code to compile and instantiate the wasm so it can be used in the web environment.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidthorn%2Fwasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidthorn%2Fwasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidthorn%2Fwasm/lists"}