Egghead Instructor Guy Bedford

Guy Bedford

Web software developer and open source contributor. Creator of SystemJS and jspm.



Unlock all of Guy's PRO Lessons
click for instant access!

Browse Guy Bedford's lessons.

showing 15 lessons...

Allocate Dynamic Memory in WebAssembly with Malloc

P

Create and Import a WebAssembly Memory

P

Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

P

Optimize Collision Detection in JS with a Grid

P

Compile C Code into WebAssembly

P

Step-by-Step JS to WebAssembly Conversion

P

Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

P

Typed Arrays in High Performance JavaScript

P

A First Comparison of the Performance between JS and WebAssembly

P

Write to WebAssembly Memory from JavaScript

P

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

P

Clone and Build LLVM with the Experimental WebAssembly Target

P

Read WebAssembly Memory from JavaScript

P

Call a JavaScript Function from WebAssembly

P

Create and Run a Native WebAssembly Function

P
js tutorial about Allocate Dynamic Memory in WebAssembly with Malloc

Allocate Dynamic Memory in WebAssembly with Malloc

5:44 js PRO

We demonstrate how to build a WebAssembly module that depends on malloc, linking in a pre-built malloc implementation at runtime, using a JS binding trick to handle the circular reference between the two WebAssembly modules. We then optimize the load process to ensure we are fetching these modules in parallel.

Malloc implementation: https://github.com/guybedford/wasm-stdlib-hack/blob/master/dist/memory.wasm

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?1feerp

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Create and Import a WebAssembly Memory

Create and Import a WebAssembly Memory

2:55 js PRO

Starting from the previous example, we rebuild the program code to import its memory instead of exporting it. We then use this to simplify the application loading code.

Emscripten: https://kripken.github.io/emscripten-site/

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

6:43 js PRO

To write a grid collision detection optimization in C requires thinking about the data structure of the grid more than in JS. In C we can represent this with a linked list and show how to convert the JS optimization code into this structure. When we compare the final performance, the WebAssembly code is now faster than the JS code - being able to write a low-level, more efficient data structure in memory is what gives WebAssembly its best advantage over JS. For those new to the principles, a good introduction to data structures and algorithms is the CLRS Introduction to Algorithms book.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Optimize Collision Detection in JS with a Grid

Optimize Collision Detection in JS with a Grid

4:56 js PRO

To improve the performance of collision detection, we need to dive into the internals of the algorithm. Here we update the JS collision detection code to use a grid for collision detection, which brings a big performance boost at the end.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Compile C Code into WebAssembly

Compile C Code into WebAssembly

2:36 js PRO

We use the C language instead of pure WAST to create a square root function using WASM Fiddle (https://wasdk.github.io/WasmFiddle//). We show how to run the WebAssembly in WASM Fiddle, then download and run it in the browser using a helper function to load the WebAssembly.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?t96rp

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Step-by-Step JS to WebAssembly Conversion

Step-by-Step JS to WebAssembly Conversion

6:38 js PRO

Using the previous JS example (with some polishing), we start the conversion by copying the JS code into a C file. Step-by-step we run through the principles of converting this JS code into valid C code that we can compile into Web Assembly, based on the same principles we learnt in the initial lessons. We paste the C code into WASM Fiddle to get the resulting WebAssembly binary, and wire it into the application.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

3:23 js PRO

We go through the command-line steps to compile C/C++ via LLVM into an intermediate S file, then use Binaryen to compile that S file into a WAST file and finally WABT to get the WASM binary. We then show an approach to clone and configure a custom std library headers for Web Assembly to build includes to the standard library.

js tutorial about Typed Arrays in High Performance JavaScript

Typed Arrays in High Performance JavaScript

4:56 js PRO

We introduce a black-box render function which draws circles to the screen, explaining how the position information is represented in the memory for the renderer (a typed array of [x1, y1, r1, x2, y2, r2, …]). We draw a simple circle (at [0, 0, 100]), then many random circles to get a feel for passing rendering data by directly setting Typed Array memory. The details of the renderer are not discussed at all. We set up some simple dynamics and wall bounds, and then push the circle count up over 1,000,000 renders to demonstrate the performance of dealing with raw memory and WebGL.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about A First Comparison of the Performance between JS and WebAssembly

A First Comparison of the Performance between JS and WebAssembly

2:34 js PRO

To compare the performance between JS and WebAssembly, we use an example that calculates the collisions between circles on the screen. This quickly slows down the rendering performance making the performance comparison visible. We briefly go over the same steps of converting JS into C code, and find that the JS version of the code is actually faster than the WASM version - WebAssembly improving performance is not such a simple argument.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Write to WebAssembly Memory from JavaScript

Write to WebAssembly Memory from JavaScript

3:33 js PRO

We write a function that converts a string to lowercase in WebAssembly, demonstrating how to set the input string from JavaScript.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?h1s69

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Install Binaryen and the WebAssembly Binary Toolkit (WABT)

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

0:58 js PRO

In this lesson we cover the install process for Binaryen (http://github.com/WebAssembly/binaryen) to get the s2wasm binary and WABT (https://github.com/WebAssembly/wabt) to get the wast2wasm binary.

Prerequisites are cmake (https://cmake.org/download/), XCode CLI tools on Mac, or Visual Studio on Windows.

js tutorial about Clone and Build LLVM with the Experimental WebAssembly Target

Clone and Build LLVM with the Experimental WebAssembly Target

2:10 js PRO

This lesson demonstrates a full build of LLVM roughly following the steps in GettingStarted.html (or GettingStartedVS.html for Windows), but with the experimental WebAssembly target build option. Prerequisites include cmake (which can be downloaded from cmake.org/download), Visual Studio on windows, or Xcode command line tools on mac.

js tutorial about Read WebAssembly Memory from JavaScript

Read WebAssembly Memory from JavaScript

3:03 js PRO

We use an offset exporting function to get the address of a string in WebAssembly memory. We then create a typed array on top of the WebAssembly memory representing the raw string data, and decode that into a JavaScript string.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?6wzgh

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Call a JavaScript Function from WebAssembly

Call a JavaScript Function from WebAssembly

2:46 js PRO

Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Create and Run a Native WebAssembly Function

Create and Run a Native WebAssembly Function

3:12 js PRO

In this introduction, we show a simple WebAssembly function that returns the square root of a number. To create this function we load up WebAssembly Explorer (https://mbebenita.github.io/WasmExplorer/), writing the native WAST code to create and export the function. We compile and download the resulting WebAssembly binary, loading this with the Fetch API and WebAssembly JavaScript API to call the function in the browser.

Demo Repo: https://github.com/guybedford/wasm-intro

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?