Emscripten + wasm learning

[Ulhas Pawar]

Hello folks!
I recently started my wasm + emscripten journey just out of supporting existing project.
Now I am more than casually interested in it :)
Just wanted to start with rigorous training for same. Kindly help me with suggesting good training materials for same (beginner + intermediate). Emscripten site, unfortunately, I did not found beginner's friendly. 

I have good understanding of JavaScript + C++.

Any help is highly appreciated.

Thanks,

Ulhas

[Mark Sibly]

Hi,

You haven't mentioned what you actually want to achieve in emscripten so it's hard to give you any meaningful advice.

That said, assuming you want to write web apps in c++, here's a super rough beginners guide to building and running your first *very* minimal emscripten 'app'. None of this should really be particularly surprising to anyone with a 'good understanding' of C++, but I get emscripten can seem a bit overwhelming to begin in with, and I suspect it's probably a bit simpler than most people realize.

Note you'll need to know a little about how to use the command line (or 'shell') first.

1) Install emsdk:

This is pretty easy though you may need to install git first: https://emscripten.org/docs/getting_started/downloads.html

Note that emsdk is just an installer though, you need to use it to install the actual emscripten tools.

You can get git here: https://git-scm.com/downloads

2) Use emsdk to Install the latest emscripten tools:

From a shell inside your emsdk directory...

> emsdk install latest

> emsdk activate latest

Note you should regularly update emsdk itself using 'git pull' etc. otherwise 'latest' will always refer to the same version.

3) Add necessary emscripten directories to your system PATH.

You need to do this so emscripten tools can be found from within the shell.

I believe there is a 'correct' way to do this via emsdk but I've never had much luck with that for some reason.

Instead, I generally just add the path to '\Users\blah\etc\emsdk\upstream\emscripten' to my system PATH and hope for the best, usually seems to work OK for my needs. If you don't know how to add directories to your system PATH, you'll need to google up on it first.

To tell if you've got it right, open a *new* shell and type 'em++ --version' and it should come back with a bunch of version info. If it does, you're pretty much ready to go, if not, check your system paths etc.

Also, emscripten depends on python3 so you may need to install that as well. There is actually a diretctory in emsdk called '3.9.2-nuget_64bit' that appears to contain a full version of python, so perhaps even just adding that to your system PATH would be enough?

4) Give it a test:

Create a text file called test.cpp that contains:

;---------- begin ----------

#include <stdio.h>

int main() {

    puts("Hello world!");

    return 0;

}

;---------- end ---------

Open a shell in the same directory as test.cpp and enter:

> em++ -o test.html test.cpp

> emrun test.html

In theory, this should result in a browser magically opening and displaying a page that contains the text 'hello world!'.

Note I tend to use emscripten purely with cmake these days (using the CLion or Visual Studio IDEs). There's a cmake 'toolchain' file somewhere in emsdk and that tends to be all I use: as long as I pass this as the toolchain file to cmake I don't have to specify compilers or anything. I did't even have any emsdk PATHs set before writing this.

Bye!

Mark

[Floh]

> *quote* hello world sample with emcc and emrun...

Exactly this was an eye-opening moment for me, coming from Windows and being too used to large Visual Studio and all the bloated workflow processes that come with it I had completely forgotten the simplicity of just compiling a C source file on the command line (this was the first 'woah'), and the second 'woah' was that this also "just works" with Emscripten. Because at the time there have been competitors like NaCl and Flash Alchemy/Flascc where the standard hello-world *didn't* work.

I can't stress enough how much I respect Alon and the whole Emscripten team for paying proper attention to such "unimportant details"!

Cheers!

-Floh.