Hands-On WebAssembly for C++ Programmers

Here, see how you can configure your environment to compile C++ to WebAssembly.

   •  Learn what the tools are

   •  Install the tools on your own system

   •  Verify your tools are working correctly

Now that your tools are installed, how do you write your first C++ program to run in the browser?

   •  Write C++ code

   •  Compile the C++ code into WebAssembly

   •  Integrate input and output between the browser and your code

How can you learn more about what your compiler can do for you?

   •  Read the compiler help

   •  Define and measure optimizations

   •  Learn about output control

So far, we've written entire C++ applications. See how you can JavaScript call just a single C++ function.

   •  Learn about embind

   •  Setup C++ code to expose functions through embind

   •  Modify the JavaScript code to call the C++ code

So far, we can pass primitive types only. How do we pass objects, enumerations, and more?

   •  Learn how to pass enumerations

   •  Learn how to pass value objects

   •  Learn how to pass classes

You've learned how to call C++ from JavaScript, but how do you go the other direction?

   •  Learn how C++ can call JavaScript functions

   •  Change our Pong game to call JavaScript functions

   •  Observe the behavior of our change

Before we go too much deeper, it is worth understanding what WebAssembly looks like when compiled. It will help with debugging and diagnostics.

   •  Learn how to convert WASM code to a human-readable format

   •  Explore what a function looks like in WebAssembly

   •  Explore what is in a module inside WebAssembly

We've seen native numeric types, but how are objects and strings represented?

   •  Learn how linear memory operates in WebAssembly

   •  Observe the difference between Emscripten and non-Emscripten behavior

   •  Explore support of raw and smart pointers in Emscripten

What happens if something catastrophic happens in WebAssembly?

   •  Catch traps that occur during exceptional behavior

   •  Learn how exceptions bubble up through WebAssembly

   •  Change exception behavior at the command-line when compiling

We've used the term module throughout the course, but have not actually stopped to define it

   •  Learn about WebAssembly modules

   •  Learn about Emscripten modules

   •  Override Module behavior using --pre-js flags

You are compiling against standard libraries, but we obviously cannot use OS libraries in the web browser. How does this work?

   •  Learn how Emscripten substitutes standard libraries for web-browser compatible libraries

   •  See an example of what libc looks like in Emscripten

   •  See an example of what libc++ looks like in Emscripten

How can we interact with file systems, especially with reading and writing files when we are just in a web browser?

   •  Learn about the different supported file systems in WebAssembly

   •  Change our source code to write to files in the web browser

   •  Persist this data into an IndexedDB

Does time behave any differently in a WebAssembly context than in native? Let us see if there are other ways to pull in more robust time libraries.

   •  Understand that a web browser supplies the time, not the operating system

   •  Learn about Emscripten Ports

   •  Use Boost to pull in new time libraries for our project

How do we convert threaded C++ code to execute in a single-threaded JavaScript environment?

   •  Discuss the usage of threads and pthreads and how they map to web concepts

   •  Comprehend the restrictions around threading in WebAssembly

   •  Modify game source code to log to file in a separate thread

Does socket communication change at all with WebAssembly? Can we still make network requests to other sites?

   •  Learn about different options for socket communication

   •  Integrate the Fetch API into our game

   •  Understand the restrictions of the Fetch API

How do we start moving more functionality to C++, especially hardware interactions?

   •  Learn about the Simple DirectMedia Layer API

   •  Compile our program with SDL

   •  Convert our pong game to use an SDL loop

In the last video, we lost all our graphics progress. How do we draw the graphics in C++?

   •  Learn about SDL Graphics

   •  Utilize fonts in your SDL code

   •  Draw all graphics in C++ instead of JavaScript

Now that graphics are moved to C++, the last big piece of JavaScript is keyboard input.

   •  Poll for events with SDL

   •  Switch on proper event types to capture keyboard input

   •  Use keyboard input to control the paddles in C++

How do we get more advanced graphics, especially anything that uses OpenGL?

   •  Learn about OpenGL conversions to WebGL

   •  Compile examples from Emscripten related to OpenGL

   •  See WebGL drawn graphics in the browser

While drawing graphics, can we add windows, dropdowns, menus, and more?

   •  Discuss options for windowing

   •  Build a sample windowing library

   •  View the demo of the sample in the browser to see all widgets

What options are available to us for audio processing in Emscripten.

   •  Learn about SDL options

   •  Learn about OpenAL

   •  Explore OpenAL sample programs

How can we do simple beeps with SDL?

   •  Discover SDL Audio

   •  Create sample beeping code

   •  Run code to observe beeps

We've covered beeps, but what about more complex sounds?

   •  Explore SDL Mixer

   •  Integrate .wav sounds into game

   •  Play game to hear the sounds played

How do we integrate music into our games?

   •  Explore how music differs from sounds

   •  Integrate music tracks into our game

   •  Learn how to play/pause music with a keypress

What tools are available to us in the web browser for debugging?

   •  Explore HTML and Debug code

   •  Profile CPU and network calls

   •  Introspect memory and storage

How do we debug our C++ in the web browser?

   •  Setup source maps to translate C++

   •  Use Chrome to step through code

   •  Use Firefox to introspect variables

What can we do to catch bugs earlier, without having to manually test?

   •  Adopt a DevOps mindset to catch bugs early

   •  Add debug capabilities to flag problematic code

   •  Utilize sanitizers to detect undefined behavior and address violations

How do we accurately measure performance of our code?

   •  Profile memory using the Emscripten memory profiler

   •  Add profiling data to our application

   •  Profile CPU execution in the browser

How can we get more fine-grained memory control and introspection into our program?

   •  Instrument our code with the tracing API

   •  Set up a tracing server

   •  Run the code and observe tracing results

This video provides the summary of the course.

   •  Review the concepts covered in the course

   •  Check out the extra resources