The maintainer of this website has a Spotify Coding Playlist of their Lo-fi Hip Hop beats!

About

Made with WebAssembly

Made with WebAssembly is an Open Source showcase of awesome production applications, side projects, and use cases made with WebAssembly ( Wasm ). 👷

Author(s)

Made with WebAssembly is a project by Aaron Turner (torch2424) with help from James Milner, Jonathan Beri (beriberikix) and some amazing Contributors. With some additional input from Alex St. Louis.

Motivation

After several Twitter threads (1, 2, ...) on highlighting use cases, projects, and companies in production using WebAssembly. Myself and a few other Wasm community members thought it'd be a great idea to have a dedicated place to find projects using WebAssembly, and highlight what WebAssembly can be used for! We were hoping it could be easy to comb through, and provide additional context on why/how individual project are using Wasm. 👍🏾

When should I generally use WebAssembly?

There are two key features of WebAssembly. Performance and Portability. Here we will cover how and why these key features of WebAssembly can be used effectively for your application.

Performance

When we speak about performance here, we are referring to performance in JavaScript environments. This is not a comparison to native speeds, as that is another question in itself. My favorite answer to this question is from the AssemblyScript Documentation. I'd like to provide one that is along the same lines, but remember, this is a generalization and contains some metaphors. This section, and by looking through the projects on Made With WebAssembly can help you make a decision for your use case.

A good rule of thumb is: Use WebAssembly for computationally intensive tasks, such as games, image manipulation, math, physics, audio effects, etc....

You still generally want to use Javascript for a lot of things on the web. Such as Dom Manipulation (modifying/building views and UIs), blogs, ecommerce websites, using most Web APIs, etc...

I like to think about WebAssembly being another tool in a developer's toolbelt. For example, a web developer's tools are HTML (Declaring UI), CSS (Styling UI), JavaScript (Adding functionality to a UI), and now WebAssembly (Processing heavy tasks, to give results back to the UI)! In which using the "right tool for the job" is what will give you the best results for your project, and help it be the best it can be!

If you would like to see some numbers or benchmarks on comparing JavaScript and WebAssembly in a real world use case, I'd recommend the WasmBoy Benchmark Article and the Replacing a hot path in your app's JavaScript with WebAssembly. There are many more benchmarks out there you can search for.

Portability

WebAssembly is extremely portable. This can be explained in multiple scenarios:
  • WebAssembly allows bringing other languages to JavaScript environments like the web browser, and node js. For Example, browsing the projects here, you will see a lot of huge C/C++ applications that can now run on the web, by using WebAssembly as its compile target. Also, languages like Rust can have specialized tooling and support for WebAssembly, to offer a great experience for writing for the web, in languages that historically could not be run on the web.
  • Standalone Server side runtimes like Wasmer, Wasmtime, etc.. allow for running WebAssembly on the server, as its own application, or embedded in a host application written in a variety of languages. This is great, since you can write business logic, or computationally intensive algorithms once and have a common shared implementation that is run in a lightweight runtime in your application. Also, with the WebAssembly System interface, you can write entire system level applications (File manipulation, servers once the standard is more developed, etc..) in just WebAssembly that is then run in a runtime. And due to the sandboxing nature of WebAssembly (Linear memory, capability based security, etc...), WebAssembly also becomes a viable way to containerize applications, as noted by Solomon Hykes, the co-creator of Docker.
  • WebAssembly can easily be bundled and distributed. Because of this, there is now the WebAssembly Package Manager (WAPM) which allows for publishing and distributing WebAssembly packages to be run standalone on WebAssembly runtimes. Also, current packages managers like NPM already support and push for WebAssembly to be a part of their JavaScript packages.
TL;DR WebAssembly is portable as it provides a common ground for multiple languages to come to the web, it can be run in all kinds of host applications and platforms using runtimes, and WebAssembly can be easily bundles into new and existing package managers.

Thus, you may want to use WebAssembly, if you want your library or code to be flexible, sandboxed, and easily bundled, to be shared across many platforms.

If you are interested in trying out / learning WebAssembly yourself, you can checkout WasmByExample.

Proposing Changes to the Website

If you would like to add/edit/remove anything from this website, please see the contribution docs on the project repo. You can also open an issue on the repo, to start a discussion or propose changes there as well!

Privacy

Google Analytics is used on Made with WebAssembly, and is only used to record Basic visit data, as the script is only loaded.

Made with WebAssembly Resources

Additional WebAssembly Resources

  • World of Wasm - Another awesome WebAssembly Showcase.
  • WasmByExample - Set of hands-on introduction examples and tutorials for WebAssembly (Wasm).
  • AssemblyScript - TypeScript(like) to WebAssembly compiler.
  • Rust/Wasm Book - Book on getting started with Rust and WebAssembly.
  • Emscripten - Toolchain for compiling C / C++ to WebAssembly.
  • WasiEnv - Toolchain for compiling C / C++ to WebAssembly and WASI.

WebAssembly Logo

Just a quick shoutout to Carlos Baraza. Who created the WebAssembly Logo under a Creative Commons Universal license. The logo is used in the site favicon and title header.