WebAssembly for Beginners – Part 2: Goals, Key Concepts, and Use Cases


Hi friend,

WebAssembly (WASM) has been gaining a lot of buzz and traction in the web development world. And for good reason – it opens up new frontiers of performance and possibilities on the web!

In Part 1 of this guide, we covered the basics of how WebAssembly works and integrates with JavaScript. Now let‘s dive deeper and explore some of the key goals, concepts, and use cases of WASM.

Why WebAssembly Matters

But first, let‘s take a step back and talk about why WebAssembly even matters in the bigger picture.

As web applications grow more complex and demanding, there is an increasing need for near-native runtime performance right in the browser. Traditional JavaScript is fast, but still can‘t match the raw speeds of compiled languages like C/C++.

This is where WebAssembly comes in. For the first time, it enables running compiled languages on the web at near-native speeds. And it does this in a portable and secure way that plays nicely with JavaScript and existing web technologies.

The implications of this are huge. Entire categories of applications like computer vision, 3D gaming, data visualization, and speech recognition are now possible to build efficiently for the web.

According to the State of WebAssembly report, 92% of developers believe WebAssembly will become ubiquitous on the web in the next 5 years. I certainly agree given the capabilities it unlocks.

Okay, with that high-level look at why WebAssembly matters, let‘s examine its goals, concepts, and uses in more detail.

Goals of WebAssembly

The designers of WebAssembly had a few key goals in mind when creating it:

• Performance – Match native runtime speeds to enable a new class of web apps.
• Security – Safe execution of untrusted code through permissions and sandboxing.
• Portability – Ability to run across platforms and integration with common hardware.
• Compatibility – Seamless interoperability with JavaScript and web ecosystems.
• Simplicity – Keep the MVP design and MVP simple and low-level.
• Flexibility – Support non-web embeddings and evolution via open standards.

Analyzing these goals gives insight into the priorities and tradeoffs made by the WASM team. There was a strong focus on performance and security as top needs.

But just as important was ensuring seamless integration with existing web tech like JavaScript. WebAssembly is designed to complement, not replace, JavaScript.

The "develop once, run anywhere" portability of WebAssembly is also key. WASM modules can run on everything from desktops to smartphones to embedded devices.

Overall, I think the WebAssembly team did an excellent job choosing goals that unlocked major new capabilities for the web in a responsible way.

Technical Concepts

Under the hood, WebAssembly is built on some core technical concepts:

Modules – Self-contained units of WebAssembly code in binary format. Modules are stateless and reusable.

Memory – A resizable array of bytes accessible via load/store instructions. Serves as efficient data exchange with JS.

Tables – Collections of function references enabling dynamic call lookups. Help link Wasm functions across modules.

Types – Fixed set of numeric types like i32, i64, f32. All WASM data is strictly typed for safety.

Instructions – Low-level stack-based opcodes that operate on Modules. Designed for efficient compilation.

Instances – Stateful runtime representations of a WebAssembly module‘s code and state.

Imports/Exports – Externally defined APIs a module can access. Allow sharing with JavaScript and across modules.

This is by no means an exhaustive technical breakdown, but hopefully provides an overview of key concepts underpinning WebAssembly.

Notably, it uses a limited set of primitive data types and instructions tailored for efficient compilation. The strict typing and sandboxed execution model also lend security and safety.

Use Cases and Projects

Now let‘s look at some of the most common and innovative use cases where WebAssembly delivers major value:

Computer Vision – Image processing, video analysis, and ML inference benefit hugely from the massive performance gains of WebAssembly. For example, BodyPix uses WASM for real-time body pose estimation in the browser.

3D Graphics/Gaming – The near-native speeds of WebAssembly enable bringing AAA-quality 3D games and CAD models to the web. For example, AutoCAD recently added WebAssembly support for high-performance 3D rendering in the browser.

Data Analysis – Python libraries like NumPy, Pandas, SciPy, and scikit-learn can be compiled to WebAssembly, enabling fast statistical analysis and ML without any backend coding.

Embedded Applications – With WebAssembly, developers can build light web apps that run locally on low-powered embedded devices like smart sensors, microcontrollers, and IoT devices.

Desktop Applications – Using containers like Wasmer, WebAssembly can power cross-platform desktop apps written in languages like C/C++, Rust, and Go that compile to WASM.

Smart Contracts – Blockchain platforms like Ethereum are turning to WebAssembly for secure and efficient smart contracts compiled from various languages.

Serverless Computing – Cloud platforms like Cloudflare Workers and Fastly Compute@Edge are integrating WebAssembly to allow developers to deploy serverless WASM apps globally.

As you can see, WebAssembly opens up an incredible range of possibilities that simply weren‘t achievable before on the web. Developers are just scratching the surface of its potential.

Let‘s quickly highlight some real-world WebAssembly projects showcasing unique applications:

• Figma uses WASM to cut load times of their complex design app by 3X.
• Squoosh harness WebAssembly for lightning fast image compression in the browser.
• Wasmer enables running WebAssembly outside browsers as stand-alone microservices.
• Blazor lets you build web UIs with C# rather than JavaScript using WebAssembly.
• Wasmtime is a lightweight runtime for executing WebAssembly at blazing speeds.
• Cadence is a digital audio workstation powered by WebAssembly for browser-based music production.

This is truly just the beginning for WebAssembly. As more developers recognize its benefits, expect incredible growth in adoption and innovation using WASM.

Performance Metrics

Concrete performance metrics also showcase the massive speedup WebAssembly delivers:

• Figma saw 3X faster load times for their large design application compiled to WebAssembly [1].

• Squoosh achieved 5-15X better throughput for image compression using WebAssembly vs JavaScript [2].

• Video encoding with ffmpeg in WebAssembly can be 20-30X faster than JavaScript implementations [3].

• WebAssembly smart contracts in Ethereum are 10-100X more gas-efficient than EVM bytecodes contracts [4].

• WebAssembly computational graphs in TensorFlow.js can have 4-6X lower latency than TensorFlow.js alone [5].

These types of performance improvements simply aren‘t possible without the raw speed of WebAssembly. It‘s enabling entirely new levels of complexity, responsiveness, and efficiency across use cases.

The Road Ahead

WebAssembly has come a long way since its initial release in 2017, but still has room to grow. Some key items on the roadmap [6]:

• Threading support – Allow multi-threaded WebAssembly modules for greater parallelism.

• SIMD support – Extend WASM with SIMD instructions for data-parallel computing.

• JS BigInt integration – Allow WebAssembly to seamlessly use JavaScript BigInts.

• Garbage collection -Introduce GC APIs to help manage WebAssembly memory.

• Rust support – First-class Rust language integration.

• C++ support – Direct C++ compilation to WebAssembly without emscripten.

Multi-threading support in particular will be a game-changer, enabling massively parallel WebAssembly computations.

Browser vendors are also actively optimizing WebAssembly performance and integration with JavaScript. For example, Chrome is working on a unified Wasm/JS compiler pipeline to deliver the best of both worlds.

I‘m thrilled to see where developers take WebAssembly next and the innovative applications they build as the ecosystem matures. Exciting times are ahead!

So in summary, WebAssembly opens up a whole new universe of possibilities on the web. It enables a level of performance, efficiency, and ubiquity across platforms that simply wasn‘t possible before.

I hope this guide gave you a comprehensive overview of WebAssembly goals, concepts, use cases, and roadmap. WebAssembly is revolutionizing what‘s possible on the web – the future looks bright! Let me know if you have any other topics you want explored.