Web Assembly (Wasm)
Table of Contents
Binary OverviewJem introduces the "bit" which is the smallest unit of information in computing. A group of eight bits is called a byte. Some computer architectures read bytes from right to left, or little endian. Others read bytes from left to right, or big endian.
HexadecimalJem explains hexadecimal is often referred to as machine code. Hexadecimal is an intermediate step between high-level programming languages and binary because it's concise enough for machines to interpret but easier than binary for programmers to read. In response to a student question, the process of accessing information from the register by a CPU is also explained in this segment.
MemoryJem describes memory as a giant warehouse full of storage bins. Each bin has an address and can store anything as long as it fits within the bin. The main job of the operating system on a computer is to allocate and deallocate the use of these storage bins.
Your First Web AssemblyJem uses Web Assembly Studio to write a Hello World function. The function will take a 32-bit integer as input and return the input unmodified.
Stack & OpCodeJem explains Web Assembly is a stack machine which means all the instructions are either pushed or popped off a stack in a linear fashion. Operation Codes, or OpCodes, are readable computer instructions for representing machine language instructions.
Stack & OpCode ExerciseStudents are instructed to create a "minusone" function that takes a 32-bit integer and subtracts one from it.
Stack & OpCode SolutionJem demonstrates the solution to the Stack & OpCode exercise.
AssemblyScript SetupJem walks through how to set up an AssemblyScript project with Visual Studio Code. AssemblyScript is a TypeScript-to-Web Assembly compiler. It provides both high-level language features like loops but also allows for low-level memory access.
Writing AssemblyScriptJem writes a minusOne function using AssemblyScript. Function parameters and return values are typed. When the project is built, the wat and wasm files are generated in the build directory.
Running AssemblyScript Wasm in NodeJem imports the minusOne function and calls it from the Node REPL. The AssemblyScript loader automatically imports the AssemblyScipt functions from the build directory.
Creating an AssemblyScript Wasm LoaderJem codes a utility class that will use the fetch method to load a wasm file in the browser and return an instance for the compiled Web Assembly code. A fallback method is also created to for browsers that do not support Web Assembly's instantiateStreaming method.
Importing Wasm into the BrowserJem uses the loader class to load the wasm file into the browser. In order for the file to load correctly, a content type of application/wasm must be set in the headers for the file's reponse. An Express.js server is also created to serve the application.
Loading AssemblyScript Q&AJem answers questions about the types shared between TypeScript and AssemblyScript, exposing wasm endpoints on the server, and what happens to the OpCodes in production.
Debugging Wasm Modules & Defining ImportsJem demonstrates how to debug Web Assembly. The AssemblyScript source maps help identify the location of an exception within AssemblyScript code. Importing a custom log function into AssemblyScript is also covered in this segment.
Importing the AssemblyScript LoaderJem codes a fizzbuzz example to demonstrate how Strings are handled in WebAssembly. Since WebAssembly only uses integers, AssemblyScript will allocate space for the String values but only return their location in memory. The AssemblyScript loader is imported to the project to add the necessary helper functions to read the String values.
Using the __getString FunctionJem modifies the WasmLoader class to return all the utility functions provided by the AssemblyScript loader. The __getString function is used to access the String value located at the memory position returned by the fizzbuzz function.
Wrapping UpJem concludes the course by sharing some resources and example applications that use Web Assembly. Questions about file watchers and supported programming languages are also answered in this segment.