Emscripten is a source-to-source compiler that takes C/C++ code and compiles it to browser-runnable JavaScript code. It works by first compiling the C/C++ code to LLVM IR code using clang/clang++, then using a LLVM backend called Fastcomp to generate the JavaScript output. The compiled code can then be run directly in the browser. Emscripten allows running large web applications, developing for multiple platforms, and porting performance critical libraries to the web. It enables debugging of compiled code directly in the browser developer tools.

1. EmscriptenCompile your C/C++ code to javascript
Actually, it's from LLVM bitcode to javascript
KK – Ying Reui Liang
2015/10/XX

2. What is Emscripten

3. It's a source to source compiler bases on LLVM
Compile your C/C++ code into browser runnable
javascript code
Averagely, it's faster than handwrite code
“Asm.js”

4. How it work

5. C/C++ source
|
clang/clang++
|
V
LLVM IR code
|
Fastcomp (LLVM backend)
|
v
Javascript code

6. em++ helloworld.cpp -c -o helloworld.bc

7. em++ helloworld.bc -o helloworld.html

8. Running in terminal
Running in browser

9. Why

10. Large web applications
Multi platform
Performance critical library

11. Demonstration

12. Debugging

13. The native way
Like we always do
The browser way
Compile your codebase with -gX (X is 1~4)
Then debug them on the browser

14. With -g4 you could even
set breakpoints on C++
source code inside
browser devtool!

15. Porting your project

16. Since I don't have much experience
I'll only talk a little then skip the rest of them :P

17. - Main loop -

18. - Threading -

19. - Files/Assets -

20. Porting libraries

21. Currently, there's mainly three ways to port a
library to javascript using Emscripten

22. - The first one -
If you're using portable C/C++, or the
dependencies you use had already been ported
Just compile it
Like jsoncpp, which relies on C++ std libraries

23. Write corresponding javascript code for
functions in that library
Like library_sdl.js
- The second one -

24. If the library you want to port has friendly
architecture for porting
Use html5.h and other headers which
Emscripten provide
Treat Emscripten like another platform
Like part of SDL2 does
- The third one -

25. If you want to add certain port to official repo
of Emscripten...
Check these out
Or you can discuss with me, I just port SDL2_ttf
last month :)

26. End?

27. Welcome to special round!

28. Let's talk a little about
WebAssembly

30. Q&A || Thanks

31. References

32. - http://kripken.github.io/emscripten-site/index.html
- https://github.com/kripken/emscripten/blob/master/docs/paper.pdf
- http://asmjs.org/
- https://github.com/WebAssembly/design