Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Getting started with WebAssembly & Emscripten

Name: Getting started with WebAssembly & Emscripten
Rating: 4.5 (909 reviews)

A complete guide for learning the WebAssembly JavaScript API and Emscripten toolset.

Created byRay Viljoen

Last updated 11/2020

English

What you'll learn

Understand what WebAssembly is and how it will impact Web Development
Learn to load and run WebAssembly modules, using native JavaScript browser APIs
Compile C and C++ code using Emscripten
Advanced Emscripten features such as calling JS from WA and vice-versa

Course content

5 sections • 23 lectures • 2h 28m total length

Introduction1:59
Course introduction
What you will learn
Course structure
About instructor
Prerequisites & Lesson Structure6:08
Preparation for course material
An overview of WebAssembly and it's purpose
Prerequisites for following along
Lesson setup including editor, server and CLI tools

Loading a WASM6:39
Learn to instantiate and run (load) a WebAssembly module, using native JavaScript
Exports: Calling C from JavaScript4:47
Learn to export and execute functions from a WebAssembly Module
Imports: Calling JavaScript from C7:29
Learn to import and execute functions from JavaScript, in a WebAssembly Module
Memory Access: Reading Strings8:20
Read data (type char) directly from a WASM's exported Memory object.
Custom Memory Imports6:00

What is Emscripten?2:35
A brief overview of what Emscripten is, and how it simplifies WebAssembly.
Installing Emscripten Tools11:59
A walkthrough lessons for installing the Emscripten toolset on both Mac, Windows & Linux.
Compiling your first WASM6:56
Use Emscripten to compile a C script to a WebAssembly Module.
Compilation Options6:06
Learn to use the various emcc compilation options for optimising compiled Emscripten code.
Exporting C functions to JavaScript9:04
Emscripten Exports:
Default exports
Specified function exports
Exported function execution in JavaScript
Calling JavaScript functions from C9:26
Learn to use the Emscripten C library to execute JavaScript from a WebAssembly Module
Preamble Conversion Functions5:05
Pointer to string conversions, using Preamble.js.
Emscripten Module & Memory Buffer2:56
An overview of the Emscripten Module object and how to access an Emscripten Memory Buffer.
Debugging3:26
Learn to debug an Emscripten WASM, using <emscripten.h> helper functions.
Runtime Initialisation2:54
Understand how to wait for an Emscripten Module to be initialised.
Emrun2:13
A quick overview of Emscripten's built-in development server.

Micro Benchmark: Prime Numbers10:27
A simple Benchmark project, demonstrating the performance differences in JavaScript and WebAssembly.
Canvas Project 1: Setup9:23
WASM Canvas Project - Part 1:
Overview of project
Basic setup of project
Canvas element
Render loop
Canvas Project 2: Data Structure13:10
WASM Canvas Project - Part 2:
Create data structures in a WASM
Generate random data to render on a Canvas
Use WASM data as a JavaScript Typed Array
Canvas Project 3: Animation10:38
WASM Canvas Project - Part 3:
Animate WASM data
Run a render loop with WASM animation data

Requirements

Must understand JavaScript in the Browser environment
Be capable of basic Command Line (Terminal) usage
Some experience with C or C++ beneficial, but not required.

Description

*** UPDATED FOR EMSCRIPTEN v2.0 ***

Learn to create and use WebAssembly Modules from scratch using Emscripten.

Bring your skills up to date with the very latest technology in Web Development.

This course is suitable for both beginners and experienced developers looking to get started with WebAssembly.

Understand what WebAssembly is and how it speeds up the web
Use native JavaScript APIs to load and run WebAssembly modules
Learn to use Emscripten and compile your own C or C++ code as a WebAssembly module
Use WebAssembly in a real-world project and micro benchmark

An invaluable skill for any developer looking to future-proof their skills

WebAssembly is the most promising new technology for the web, allowing browsers, and other JavaScript environments, to run blazing-fast raw binary modules, compiled directly from C, C++ and many other languages.

Understanding WebAssembly is an invaluable skill for anyone working with JavaScript or compiled languages, allowing you to bridge the gap between native software development and web-based JavaScript.

This course will provide a very practical and concise approach to learning WebAssembly & Emscripten, and will give you a solid base to immediately start creating and implementing fast, optimised WebAssembly modules.

Content and Overview

This course aims to teach a solid foundational understanding of what WebAssembly is, and why it's so powerful.

Section one starts with an overview of WebAssembly and a detailed setup lesson to help you follow along every step of the way.

Section two covers the native JavaScript browser API for loading and running WebAssembly modules. This section also includes importing and exporting functions to and from a WebAssembly module, and shows how to access WebAssembly memory.

The third and most substantial part of the course, covers Emscripten in-depth. Teaching everything from installing Emscripten on either Mac, Windows or Linux, compiling C code from scratch and the general Module runtime cycle.

This Emscripten section also teaches some more advanced features of Emscripten, including calling JavaScript from a WebAssembly module and vice-versa.

The final section of the course is a practical 4-part lesson, teaching how to implement a fully animated HTML5 Canvas project using WebAssembly as the main processor.

Upon completion of this course you will have the practical skills to immediately start creating high performance WebAssembly modules.

This course is to the point and everything is demonstrated in the most simple, yet practical ways.

Who this course is for:

Web Developers wanting to learn WebAssembly from scratch
C, C++ or other compiled language developers looking to expand their software reach by developing for the web
JavaScript Developers of all levels.

Getting started with WebAssembly & Emscripten

What you'll learn

Explore related topics

Course content

Overview2 lectures • 8min

WebAssembly Browser API5 lectures • 33min

Getting Started with Emscripten11 lectures • 1hr 3min

Practical WebAssembly4 lectures • 44min

Outro1 lecture • 1min

Requirements

Description

Who this course is for: