AssemblyScript for Beginners: Compile TypeScript to WebAssembly

Compiling JavaScript to WebAssembly faces challenges including garbage collection requirements and lack of static typing. Projects like AssemblyScript use TypeScript (adding static typing) as input, enabling workflows similar to C/C++. Walt provides JavaScript-like syntax over WebAssembly text format. Practical demonstrations show algorithmic code (D3.js force layout) can be rewritten with TypeScript types and compiled to WebAssembly while maintaining JavaScript API compatibility. This approach enables gradual migration of performance-critical components to WebAssembly within existing JavaScript applications.

WebAssembly and JavaScript have similar peak performance, but WebAssembly provides more predictable performance. JavaScript engines use an interpreter (Ignition) that collects runtime data before an optimizing compiler (TurboFan) generates machine code, meaning JavaScript code can fall off the fast path when assumptions change. WebAssembly uses a streaming compiler (Liftoff) that generates optimized code immediately, staying on the fast path without deoptimization. Benchmarks show JavaScript performance varies significantly across browsers (400ms to 8 seconds for the same operation), while WebAssembly provides consistent results around 500ms. AssemblyScript, a TypeScript-to-WebAssembly compiler, allows developers to write WebAssembly without learning a new language, though it requires manual memory management since WebAssembly lacks garbage collection. The key principle is that WebAssembly should complement JavaScript rather than replace it, with developers using performance audits to identify bottlenecks where WebAssembly can provide benefits.

AssemblyScript is a TypeScript-based language that compiles directly to WebAssembly (WASM), making it significantly easier to write and deploy WebAssembly modules by leveraging familiar JavaScript/TypeScript syntax while providing precise machine-level type control; it is particularly effective for computationally intensive tasks like mathematical operations and matrix transformations, though developers should minimize JavaScript-WASM interop calls due to overhead and avoid rewriting entire programs in AssemblyScript.

WebAssembly is a portable, low-level bytecode format that runs in modern web browsers, enabling developers to compile code written in various programming languages (such as C, C++, and Rust) into a compact, efficient format that executes at near-native speed. Unlike JavaScript, which must be parsed and interpreted each time it runs, WebAssembly provides pre-compiled bytecode that browsers can execute directly, solving performance limitations and enabling greater language diversity for web development.

AssemblyScript is designed specifically for WebAssembly with built-in wasm-opt integration. Key features: -O3z for size/speed optimization, convergence flag, assertion disabling, and runtime selection (no runtime if allocation not needed). Can use JavaScript Math object via --use-math-js flag. Future optimization directions include: indirect call optimization using LLVM virtualization and WebAssembly multi-table support (currently single monolithic table), and toolchain-specific optimizations leveraging known compiler properties.

This foundational section covers the complete introduction to AssemblyScript, a TypeScript-like language compiling to WebAssembly for JS/TS developers. Topics include: project structure with loader, build scripts, and test files; recursive function implementation (factorial); and systematic performance benchmarking using Benchmark.js. Results demonstrate that simple operations like addition favor JavaScript due to context switching overhead, while computationally intensive operations like factorial calculations show significant AssemblyScript performance advantages. This establishes the baseline understanding of when WebAssembly provides tangible benefits versus when JavaScript remains more efficient.

AssemblyScript enables parallel rendering by dividing work across multiple Web Workers, each rendering a portion of the screen simultaneously. This approach enables real-time rendering of complex scenes like path tracing with global illumination. Performance limitations include lack of built-in math libraries (requiring JavaScript function calls), absence of random number generators, and overhead from type conversions. Benchmarking is essential to compare AssemblyScript performance against JavaScript and native implementations. The design prioritizes predictable performance over convenience, making it suitable for real-time applications requiring consistent execution.

WebAssembly and JavaScript have similar peak performance, but WebAssembly provides more predictable performance. JavaScript engines use an interpreter (Ignition) that collects runtime data before an optimizing compiler (TurboFan) generates machine code, meaning JavaScript code can fall off the fast path when assumptions change. WebAssembly uses a streaming compiler (Liftoff) that generates optimized code immediately, staying on the fast path without deoptimization. Benchmarks show JavaScript performance varies significantly across browsers (400ms to 8 seconds for the same operation), while WebAssembly provides consistent results around 500ms. AssemblyScript, a TypeScript-to-WebAssembly compiler, allows developers to write WebAssembly without learning a new language, though it requires manual memory management since WebAssembly lacks garbage collection. The key principle is that WebAssembly should complement JavaScript rather than replace it, with developers using performance audits to identify bottlenecks where WebAssembly can provide benefits.

The video demonstrates multiple JavaScript performance benchmarking tools including Speedometer 3.0, V8 Benchmark, Acorn, Babel, Prepack, and TypeScript. These tools measure JavaScript execution performance for web development workflows. The MacBook with M4 Max significantly outperforms the Razer Blade 18 across all these benchmarks, with the geometric mean showing approximately 36.3 operations per second on the Mac versus 23 on the Windows machine. This demonstrates that Apple Silicon's unified architecture provides substantial advantages for JavaScript compilation and execution tasks commonly encountered in web development.

Benchmarks comparing current JavaScript-based TypeScript compiler (tsc) with a new native implementation show dramatic improvements: VS Code build time drops from 77 seconds to 7.5 seconds; Playwright from 11 seconds to 1.3 seconds; TRPC from 5.5 seconds to 0.6 seconds. These numbers represent orders of magnitude improvement in compilation speed, demonstrating the potential benefits of a native implementation approach.

WebAssembly is a binary instruction format for a virtual machine that runs in browsers and servers, enabling efficient compilation of languages like C, C++, and Rust. Key advantages include predictable performance (unlike JavaScript's interpreter which can make optimization errors), the ability to port complex libraries like cryptography and image codecs, and seamless JavaScript integration. AssemblyScript is a TypeScript-based language that compiles to WebAssembly, making it accessible to JavaScript developers while providing stricter type checking and built-in types. AssemblyScript modules operate at C/C++ performance levels. Project setup involves installing AssemblyScript via npm, initializing project structure, and creating instances with memory pages (64KB each). WebAssembly uses a linear memory buffer (ArrayBuffer) containing raw bytes. For image processing, each pixel requires 4 bytes (R, G, B, A channels). Memory is allocated by calculating total bytes needed (width × height × 4) and dividing by page size (64KB). Memory grows dynamically using the grow method. TypedArrays like Uint8Array are used to place and read pixel data. The invert colors filter demonstrates reading each pixel's bytes, inverting color values using XOR (255 XOR value), and writing them back. The grayscale filter reads RGB values, calculates luminance using (0.299R + 0.587G + 0.114B), and writes to all channels. WebAssembly requires explicit type casting, preventing subtle bugs like truncating 32-bit numbers to 8-bit values.

SIMD demonstrates substantial performance benefits across diverse workloads, with benchmarks on Skia (2D graphics) and Halide (image processing) showing 2-4x speedups across Intel, ARM, and mobile platforms. SIMD applies broadly to cryptography, physics simulation, image/video/audio processing, and general data processing. Programming approaches include manual intrinsics (C/C++ headers providing fine-grained control), automatic compiler vectorization (using flags like -msimd128), and language-specific abstractions (Rust, AssemblyScript). Both approaches require handling incomplete data sizes with scalar fallback code. SIMD represents single-instruction parallelism within a single CPU core, distinct from multi-threading which distributes work across multiple cores, though these approaches can be combined for maximum performance.

The AssemblyScript community is active but growing, with resources including Discord support, active team members, and increasing Stack Overflow questions. Success stories include: a GameBoy emulator (early stress-test), Mike Creo (storyboarding application with significant performance improvements), Fastly's Computed Edge platform (AssemblyScript as a supported language), and Shopify's experimentation. These examples demonstrate AssemblyScript's practical value for performance-critical applications. The community focuses on helping developers transition from JavaScript while leveraging their existing knowledge, with blog posts and documentation available.

WebAssembly and JavaScript have similar peak performance, but WebAssembly provides more predictable performance. JavaScript engines use an interpreter (Ignition) that collects runtime data before an optimizing compiler (TurboFan) generates machine code, meaning JavaScript code can fall off the fast path when assumptions change. WebAssembly uses a streaming compiler (Liftoff) that generates optimized code immediately, staying on the fast path without deoptimization. Benchmarks show JavaScript performance varies significantly across browsers (400ms to 8 seconds for the same operation), while WebAssembly provides consistent results around 500ms. AssemblyScript, a TypeScript-to-WebAssembly compiler, allows developers to write WebAssembly without learning a new language, though it requires manual memory management since WebAssembly lacks garbage collection. The key principle is that WebAssembly should complement JavaScript rather than replace it, with developers using performance audits to identify bottlenecks where WebAssembly can provide benefits.