Say WAT Now!? Turbocharged JavaScript With Hand Crafted WASM

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Breathe a sigh of relief — you don’t need to learn Rust to use WASM! WebAssembly has its own human readable language: Web Assembly Text format (WAT), and it’s surprisingly easy to use. In this talk we’ll discuss using WAT as a first-class language for enhancing JavaScript performance.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

WebAssembly, or Wasm, is a virtual stack machine specification that is hardware independent. It allows you to build applications once and run them anywhere, similar to the promise of JavaScript. Wasm can be run in the browser, in Node.js, and as a system utility.

JavaScript's success can be attributed to its ease of learning and its unique position as the only runtime in browsers for a long time. This made it essential for web development.

WebAssembly offers several benefits including hardware independence, improved performance for CPU-intensive tasks, and the ability to run code written in other languages like Rust, C, and C++ in the browser.

WebAssembly can be used in JavaScript projects to accelerate performance, especially for CPU-intensive tasks like canvas rendering and game optimizations. Developers can write small amounts of handwritten Wasm and run it directly from JavaScript code.

The WebAssembly text format (WAT) is a human-readable representation of WebAssembly binary code. It allows developers to write and understand WebAssembly code more easily by providing readable labels and syntax.

One useful tool is Wabbit (or Rabbit), the WebAssembly binary toolkit. It allows you to convert between binary and WebAssembly text format (WAT), making it easier to read and write WebAssembly code.

Yes, WebAssembly can be run outside of browsers. It can be executed in Node.js and as a system utility, making it versatile for various applications.

Languages like Rust, C, C++, and Go can be compiled into WebAssembly, allowing developers to run code written in these languages in the browser or other environments that support Wasm.

WebAssembly improves performance by allowing developers to write code that runs closer to the hardware level, making it suitable for CPU-intensive tasks. This can significantly speed up performance for specific parts of an application.

The handcrafted Wasm project by Austin Theroux demonstrates the potential of handwritten WebAssembly code to achieve high performance in tasks like canvas rendering. His projects, such as Conway's Game of Life, show how Wasm can be used to optimize performance.

Justin Schroeder
Justin Schroeder
11 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
JavaScript became successful due to its association with the browser as the only runtime. WebAssembly (WASM) is a virtual machine that can run anywhere and has a different computation model. WebAssembly code can be analyzed and converted into a more readable format. It can be used to accelerate code and enhance performance. Check out Austin Theroux's repository for examples.

1. Introduction to JavaScript and WebAssembly

Short description:

JavaScript became successful due to its association with the browser as the only runtime. However, WebAssembly (WASM) has been available as a runtime in the browser since 2017. Let's explore the benefits and what WebAssembly is.

Hey, and welcome to my talk, Say What Now? Turbocharged JavaScript with Handcrafted Wasm. Let's get into it.

Take a look at this chart. Starting on the left, we've got Lua, Dart, Ruby, working all the way to the right of all these different programming languages. And on the far right side, by far the most programmers in the world are JavaScript programmers. Have you ever wondered why JavaScript was so successful?

Okay, before I answer that, real quick, my intro. I'm Justin. You can follow me on X, and I consider myself an open-source creator. Some projects that I've worked on are FormKit, which is a form-building framework in the Vue ecosystem. Arrow.js is a small, lightweight, reactive framework. AutoAnimate does automatic animations on your applications. Tempo is a datetime library, sort of like Moment.js. Drag and drop to make your drag and drops easy. And Vue.Formulate for the old days of Vue 2. But I'm going to get back into that question, why was JavaScript so successful? And I think that this is a really interesting question that has a few different variables playing into it. Certainly, if you look to the right-hand side of this list of developers, you have some of the easier languages to learn. Maybe not to master, but to learn. Things like JavaScript, but also Python is famously user-friendly. But I think the real reason why JavaScript took it is because of the browser. In fact, JavaScript is the only runtime in the browser, and has been for a super long time. Although I'm sure many of you know this, that's not entirely true anymore. Starting in 2017, which if you look at a calendar, is actually a long time ago. It's like a full five years ago now, more than that, six years ago now. WASM, or WebAssembly, has been also available as a runtime in the browser. And yet, we don't seem to use that much of it. What are its benefits? What's it all about? That's what I want to talk to you about. So first of all, what is WebAssembly? It's a virtual stack machine specification. Let me dig into this just a little bit more. So virtual, it's a virtual machine. That basically just means it's hardware independent.

2. Overview of WebAssembly

Short description:

JavaScript allows code to be written once and run anywhere, just like Java. WebAssembly (Wasm) is a virtual machine that can also run anywhere. It uses a stack machine computation model, which is different from most assembly languages. Wasm is defined by a specification that can be implemented by different runtimes, allowing it to be utilized in various environments. It is a binary format that can be translated into hexadecimal for more detailed analysis.

You build it once and you run it everywhere, right? That was always the promise of Java back in the day. And frankly, it's one of the promises of JavaScript. You write your JavaScript and you can run it in the browser, you can run it in Node, you can run it all over the place. You don't need to worry about, you know, hey, is this a 64-bit or a 32-bit CPU? Is it running some particular chipset that doesn't work with the way that I compile these binaries? It's not like that. And Wasm is not like that either. It is a virtual machine that you can run anywhere.

Now, how about this one, stack machine? That's probably a little bit less familiar to people. And we're going to get into this a little bit more. But essentially, this is the computation model. Every machine that does computation needs a way to do that computation. You know, the sort of maybe the most famous one might be a Turing machine. But there are other computation models, like a register machine, which is what most assemblies are written in. This one's a little bit different. It's a stack machine. We're going to look into that.

And then finally, it's a specification. And that's actually maybe the most interesting part, is there's no canonical implementation of Wasm. Instead, it's a specification that anybody can comply with and have done so. There's browser runtimes, but there's also runtimes, you know, you can run Wasm in Node.js. And now you have systems level runtime. So you could compile your Rust binary, not just to run in the browser, but also to run as a system utility running in Wasm. So you don't have to compile to all the different binary formats. All right. What does it actually look like? Well, fundamentally, this is a binary format. So here's what it looks like. It looks like a bunch of binary code. But if we were to take this, this is an actual application you're looking at here. And in Wasm, all bits are 8 bits, or all bytes are 8 bits. So we could translate this into hex, for example. And we could see a little bit more resolution.

3. Analyzing WebAssembly Code

Short description:

You can recognize ASCII code characters and convert binary WebAssembly files to the WAT format using tools like Wabit. By adding conventions and syntax, the assembly code becomes more readable. Functions can be exported with specific names for access in JavaScript. Parameters can be typed for better clarity.

You can get some pattern matching out of here. If you're really clever, you might even recognize some ASCII code characters. And so, like, what if we do that? Okay, let's put it in ASCII. Interesting. And now we're starting to see a little bit of this application. But you still can't see or understand what these dots are. Those are undefined in the ASCII range.

So let's use a tool here. This is Wabit, or Rabbit, which is the WebAssembly binary toolkit. And you can go get this on GitHub. It's created by the WebAssembly team and allows you to convert between binary and WebAssembly and back into this new format that we're going to talk about called WAT. You take your Wasm file, full of binary, you run it through here, Wasm to WAT. And you just output it, and you get a string with the code, the assembly code, that actually made up that file.

And look at this. This is almost human readable. Let's take it one step further, and let's actually just add some conventions on here. You can see it says local get 0, local get 1. We can actually use a syntax to give names to those things. And now we have something that does look downright readable. Let's look at this file a little bit. So here we have a function, func. Okay, I think we can all understand what's happening here. And this function is exported as the name, add. We'll get to this later, but that's how we access it in JavaScript, is by the name that it's exported as. Not too hard to understand. And this function is going to take two parameters. It's taking parameter a and parameter b, and we can see that they're both typed as i32.

4. Working with WebAssembly

Short description:

If you've done systems level programming, you'll be familiar with i32, a 32-bit signed integer. In the body of the function, we put parameters on the stack and run the i32.add function, which consumes two stack variables and returns the value back onto the stack. Wasm text format is surprisingly human readable and allows for nice labels. The Watt file can be converted to a Wasm file using the reverse command line tool. To run the Wasm file in your browser, you can use WebAssembly instantiate streaming or the native browser fetch.

If you've done any systems level programming in Rust or any other language, you'll be familiar with i32. This is a 32-bit signed integer. And then down here we have a result. So the result of this is also going to be a number, another 32-bit integer.

Now let's get into the body of the function, and here's where that stack machine context comes into play. On the right-hand side, we have our stack. And what we're going to do is we're going to put something onto the stack here. So here we say local.get a. That's going to get parameter a, and it's going to put it on the stack. You have to imagine this in your mind a little bit for how it works. We're going to get parameter two here, or b, and that is also going to be added to the stack. So now we have two numbers in memory on our stack. And then finally we're going to run a function on top of what's in our stack. So in this case, i32.add. And i32.add consumes exactly two stack variables. So our a and our b in this case are going to be the input to that, and they just pop off the stack. So i32 consumes those and then returns its value, which is another i32, back onto the stack. That ends up becoming the return value, and that's it.

I think if you sit down and you actually look at this, you'll see it's not that complicated. And this was a big surprise to me. This was a big surprise to me that Wasm or WebAssembly text format was surprisingly human readable. Compared to, I would say, almost any other assembly language that I've read in the past, this is very human readable because it gives you the ability to have all of these nice human readable labels. So what we can do then with our file is we can pump it into the reverse command line tool that we saw before. This one is Watt to Wasm instead of Wasm to Watt. And we give it our Watt file and it pumps out a Wasm file. And this is what actually will run in your browser. And to do that, it's not that complicated. I'll show you three quick ways here. We've got WebAssembly instantiate streaming. And then you can just use the native browser fetch to go fetch the Wasm file.

5. Importing and Running WebAssembly

Short description:

You can import a Wasm file directly into JavaScript using different methods. One interesting way is to base64 encode the Wasm into a string and pass it into WebAssembly instantiation. This allows you to run WebAssembly without needing a separate file. It's a great way to accelerate your code by adding a small amount of handwritten Wasm. Austin Theroux's handcrafted Wasm project provides readable examples of Wasm files that can greatly enhance performance. Check out his repository for amazing examples. Thank you for your time and follow me at JPShrader.

And then it returns a promise that when it resolves, gives you the instance of that module. And then you can see here, you can say instance.exports.add. And that is our add function that we exported. And this works fine. Another way you can do it if you're using Vite, they've added this parameter question mark init. If you do that with a Wasm file, you can actually just directly import it into your JavaScript if you're using Vite and they'll do all of the hard work for you. And then this is perhaps the most interesting way to me. You can actually just base64 encode the Wasm into a string and then automatically or very easily translate it into an unsigned 8-bit integer array and then pass that into the WebAssembly instantiation and it will actually run just fine. And this is interesting because all the other methods require a separate file and this one doesn't. It just lets you run. Why would you actually do this? Well, most people are using Wasm to compile from Rust or C, C++, even Go down into the WebAssembly so they can run those languages in the browser. And that is by far and away the most used way to do this or to run WebAssembly, to write WebAssembly. And then even perhaps more interesting is people now want to compile into WebAssembly so they can run it on any OS and any chipset. That's all very well and good and interesting. But I'm actually more interested in just writing JavaScript and running it in the browser. But wouldn't it be nice if we could splash in just a little bit of WebAssembly to accelerate things? I think so. So anything that's a super hot path in your code, canvas rendering stuff, game optimizations, anything that's CPU intensive, you could have a small amount of handwritten Wasm and you could run that directly from your JavaScript code just as a way to accelerate, pour a little bit of fuel on the fire. I want to give a shout out here to Austin Theroux. I think it's how you pronounce his name. He has this incredible, unheard of little project that he did called handcrafted Wasm. And I actually want to show you just a couple examples. So these are all Wasm files that he wrote himself. You can come in here and you can look at it. So for example, here is a Lorenz system he wrote and here is the Wasm. And if you go and look at this, it is, again, surprisingly readable. It is really not too hard. But you can get some incredible performance drawing things on a canvas. So for example, I really like this Conway's Game of Life that he wrote. And I can guarantee you we are not even getting remotely close to hitting any kind of limit on performance here for my simple CPU. So definitely go check this repository out. He did a really great job.

All right, that's it for me. I'm out of time. Thank you so much. If you'd like to follow me, you can at JPShrader. And that little QR code will take you to my website. Thank you so much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
Watch video: Optimizing HTML5 Games: 10 Years of Learnings
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Performance Debugging
React Advanced 2023React Advanced 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Maximize App Performance by Optimizing Web Fonts
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
Lazar Nikolov
Lazar Nikolov
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion